now the readOnly property is stored in thge global store

Author: sean1292

src/components/bottom/BottomPanel.tsx

@@ -16,15 +16,17 @@ const mapDispatchToProps = (dispatch: any) => ({
 
 const mapStateToProps = (store: any) => ({
   focusChild: store.workspace.focusChild,
-  components: store.workspace.components
+  components: store.workspace.components,
+  codeReadOnly: store.workspace.codeReadOnly
 });
 
 interface BottomPanelPropsInt extends PropsInt {
   deleteProp(id: number): void;
   addProp(prop: PropInt): void;
   changeFocusComponent(arg: { title: string }): void;
   updateCode(arg: { componentId: number; code: string }): void;
-  toggleCodeEdit();
+  toggleCodeEdit(): void;
+  codeReadOnly: boolean;
 }
 
 class BottomPanel extends Component<BottomPanelPropsInt> {
@@ -36,7 +38,9 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
       addProp,
       focusChild,
       changeFocusComponent,
-      updateCode
+      updateCode,
+      toggleCodeEdit,
+      codeReadOnly
     } = this.props;
 
     return (
@@ -49,6 +53,8 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
           focusChild={focusChild}
           changeFocusComponent={changeFocusComponent}
           updateCode={updateCode}
+          toggleCodeEdit={toggleCodeEdit}
+          codeReadOnly={codeReadOnly}
         />
       </div>
     );

src/components/bottom/BottomTabs.tsx

@@ -15,6 +15,8 @@ interface BottomTabsPropsInt extends PropsInt {
   classes: any;
   changeFocusComponent(arg: { title: string }): void;
   updateCode(arg: { componentId: number; code: string }): void;
+  toggleCodeEdit(): void;
+  codeReadOnly: boolean;
 }
 
 // interface TreeInt {
@@ -141,7 +143,9 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
       deleteProp,
       addProp,
       focusChild,
-      updateCode
+      updateCode,
+      toggleCodeEdit,
+      codeReadOnly
     } = this.props;
     const { value } = this.state;
 
@@ -161,12 +165,12 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label='Application Tree'
+            label="Application Tree"
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label='Code Preview'
+            label="Code Preview"
           />
           <Tab
             disableRipple
@@ -183,13 +187,13 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label='Add Child Props'
+            label="Add Child Props"
           />
         </Tabs>
 
         {value === 0 && (
           <div
-            id='treeWrapper'
+            id="treeWrapper"
             style={{
               width: '100%',
               height: '100%'
@@ -229,6 +233,8 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
             updateCode={updateCode}
             components={components}
             changeFocusComponent={this.props.changeFocusComponent}
+            toggleCodeEdit={toggleCodeEdit}
+            codeReadOnly={codeReadOnly}
           />
         )}
         {value === 2 && <Props />}

src/components/bottom/CodePreview.tsx

@@ -15,6 +15,8 @@ type CodePreviewProps = {
   updateCode(arg: { componentId: number; code: string }): void;
   changeFocusComponent(arg: { title: string }): void;
   classes: any;
+  toggleCodeEdit(): void;
+  codeReadOnly: boolean;
 };
 interface StateInt {
   readOnly: boolean;
@@ -23,9 +25,6 @@ interface StateInt {
 class CodePreview extends Component<CodePreviewProps, StateInt> {
   constructor(props: CodePreviewProps) {
     super(props);
-    this.state = {
-      readOnly: false
-    };
   }
 
   //checking if the code has been asigned yet or not
@@ -93,7 +92,7 @@ class CodePreview extends Component<CodePreviewProps, StateInt> {
           }
           value={this.props.focusComponent.code}
           name="Code_div"
-          readOnly={this.state.readOnly}
+          readOnly={this.props.codeReadOnly}
           editorProps={{ $blockScrolling: true }}
           fontSize={16}
         />
@@ -108,10 +107,10 @@ class CodePreview extends Component<CodePreviewProps, StateInt> {
             style={{ justifySelf: 'center' }}
             className={this.props.classes.startEdit}
             onClick={e => {
-              this.setState({ readOnly: !this.state.readOnly });
+              this.props.toggleCodeEdit();
             }}
           >
-            {this.state.readOnly ? 'Enter Edit Mode' : 'Exit Edit Mode'}
+            {this.props.codeReadOnly ? 'Enter Edit Mode' : 'Exit Edit Mode'}
           </Button>
           <div
             style={{

src/reducers/rootReducer.ts

@@ -29,7 +29,8 @@ import {
   deleteProp,
   updateChildrenSort,
   updateHtmlAttr,
-  updateCode
+  updateCode,
+  toggleCodeEdit
 } from './bottomReducers';
 import {
   ADD_CHILD,
@@ -40,6 +41,7 @@ import {
   CHANGE_FOCUS_COMPONENT,
   CHANGE_IMAGE_SOURCE,
   CHANGE_TUTORIAL,
+  CODE_EDIT,
   DELETE_ALL_DATA,
   DELETE_CHILD,
   DELETE_COMPONENT,
@@ -101,6 +103,8 @@ const componentReducer = (state = initialApplicationState, action: Action) => {
       return changeImageSource(state, action.payload);
     case CHANGE_TUTORIAL:
       return changeTutorial(state, action.payload);
+    case CODE_EDIT:
+      return toggleCodeEdit(state);
     case DELETE_ALL_DATA:
       return {
         ...initialApplicationState,