Merge pull request #11 from sean1292/staging

State Toggle works with code preview

Author: jzuniga206

src/actions/components.ts

@@ -25,7 +25,6 @@ import {
   ADD_PROP,
   DELETE_ALL_DATA,
   UPDATE_HTML_ATTR,
-
   UPDATE_CHILDREN_SORT,
   CHANGE_IMAGE_SOURCE,
   DELETE_IMAGE
@@ -35,7 +34,6 @@ import { loadState } from '../localStorage';
 import createFiles from '../utils/createFiles.util.ts';
 import createApplicationUtil from '../utils/createApplication.util.ts';
 
-
 export const changeImagePath = (imageSource: string) => ({
   type: CHANGE_IMAGE_SOURCE,
   payload: { imageSource },
@@ -128,7 +126,6 @@ export const deleteImage = () => ({
   type: DELETE_IMAGE
 })
 
-
 export const exportFiles = ({
   components,
   path,
@@ -168,12 +165,7 @@ export const handleClose = () => ({
 export const handleTransform = (
   componentId: number,
   childId: number,
-  {
-    x,
-    y,
-    width,
-    height
-  }: { x: number; y: number; width: number; height: number }
+  { x, y, width, height }: { x: number; y: number; width: number; height: number }
 ) => ({
   type: HANDLE_TRANSFORM,
   payload: {
@@ -280,4 +272,4 @@ export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string })
 //     type: UPDATE_CHILDREN_SORT,
 //     payload: { newSortValues },
 //   });
-// };
+// };

src/components/CodePreview.tsx

@@ -26,7 +26,7 @@ class CodePreview extends Component<Props> {
         }}
       >
         <SyntaxHighlighter style={hybrid}>
-          {format(componentRender(focusComponent, components))}
+          {componentRender(focusComponent, components)}
         </SyntaxHighlighter>
       </div>
     );

src/components/LeftColExpansionPanel.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
@@ -30,25 +30,19 @@ const LeftColExpansionPanel = (props: any) => {
   } = props;
 
   const { title, id, color } = component;
+  useEffect(() => {
+    console.log('title: ', title);
+  });
 
   function isFocused() {
     return focusComponent.id === id ? 'focused' : '';
   }
-
   return (
-    <Grid
-      container
-      spacing={16}
-      direction='row'
-      justify='flex-start'
-      alignItems='center'
-    >
+    <Grid container spacing={16} direction="row" justify="flex-start" alignItems="center">
       <Grid item xs={9}>
         <div
           className={classes.root}
-          style={
-            !isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }
-          }
+          style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }}
         >
           <Grid item xs={12} style={{ color: 'red' }}>
             <List style={{ color: 'red' }}>
@@ -64,12 +58,12 @@ const LeftColExpansionPanel = (props: any) => {
                   className={classes.light}
                   primary={
                     <div>
-                      <Typography type='body2' style={{ color }}>
+                      <Typography type="body2" style={{ color }}>
                         {title}
                       </Typography>
                       {/* TOGGLE FOR STATEFULNESS */}
                       <InputLabel
-                        htmlFor='stateful'
+                        htmlFor="stateful"
                         style={{
                           color: '#fff',
                           marginBottom: '10px',
@@ -81,17 +75,25 @@ const LeftColExpansionPanel = (props: any) => {
                       >
                         State?
                       </InputLabel>
+                      {/* 
+                          Have to change focus component after toggling state 
+                          in order to properly change the code that appears in the code 
+                          peview
+                      */}
                       <Switch
-                        onChange={e => toggleComponentState(props.id)}
-                        value='stateful'
-                        color='primary'
+                        onChange={e => {
+                          toggleComponentState(props.id);
+                          changeFocusComponent(title);
+                        }}
+                        value="stateful"
+                        color="primary"
                         id={props.id.toString()}
                         // id={props.index.toString()}
                       />
                       <div>
                         {/* TOGGLE FOR CLASS BASED */}
                         <InputLabel
-                          htmlFor='classBased'
+                          htmlFor="classBased"
                           style={{
                             color: '#fff',
                             marginBottom: '10px',
@@ -108,8 +110,8 @@ const LeftColExpansionPanel = (props: any) => {
                           // onChange={e => ONCHANGE FUNCTION PENDING ON CLASS REDUCER
                           //   updateComponent(id, { classBased: e.target.checked })
                           // }
-                          value='classBased'
-                          color='primary'
+                          value="classBased"
+                          color="primary"
                           id={props.index.toString()}
                         />
                       </div>
@@ -125,10 +127,10 @@ const LeftColExpansionPanel = (props: any) => {
           ) : (
             <Fragment>
               <Button
-                variant='text'
-                size='small'
-                color='default'
-                aria-label='Delete'
+                variant="text"
+                size="small"
+                color="default"
+                aria-label="Delete"
                 className={classes.margin}
                 onClick={() =>
                   deleteComponent({
@@ -156,13 +158,9 @@ const LeftColExpansionPanel = (props: any) => {
         {id === 1 || isFocused() || !selectableChildren.includes(id) ? (
           <div />
         ) : (
-          <Tooltip
-            title='add as child'
-            aria-label='add as child'
-            placement='left'
-          >
+          <Tooltip title="add as child" aria-label="add as child" placement="left">
             <IconButton
-              aria-label='Add'
+              aria-label="Add"
               onClick={() => {
                 addChild({ title, childType: 'COMP' });
               }}

src/components/Rectangle.tsx

@@ -36,9 +36,7 @@ class Rectangle extends Component<PropsInt, StateInt> {
   };
 
   getComponentColor(componentId: number) {
-    const color = this.props.components.find(
-      (comp: ComponentInt) => comp.id === componentId
-    ).color;
+    const color = this.props.components.find((comp: ComponentInt) => comp.id === componentId).color;
     return color;
   }
 
@@ -48,12 +46,7 @@ class Rectangle extends Component<PropsInt, StateInt> {
     );
   }
 
-  handleResize(
-    componentId: number,
-    childId: number,
-    target: any,
-    blockSnapSize: number
-  ) {
+  handleResize(componentId: number, childId: number, target: any, blockSnapSize: number) {
     let focChild: ChildInt = this.props.components
       .find((comp: ComponentInt) => comp.id === this.props.componentId)
       .childrenArray.find((child: ChildInt) => child.childId === childId);
@@ -64,24 +57,15 @@ class Rectangle extends Component<PropsInt, StateInt> {
       );
     }
     const transformation = {
-      width:
-        Math.round((target.width() * target.scaleX()) / blockSnapSize) *
-        blockSnapSize,
-      height:
-        Math.round((target.height() * target.scaleY()) / blockSnapSize) *
-        blockSnapSize,
+      width: Math.round((target.width() * target.scaleX()) / blockSnapSize) * blockSnapSize,
+      height: Math.round((target.height() * target.scaleY()) / blockSnapSize) * blockSnapSize,
       x: target.x() + focChild.position.x,
       y: target.y() + focChild.position.y
     };
     this.props.handleTransform(componentId, childId, transformation);
   }
 
-  handleDrag(
-    componentId: number,
-    childId: number,
-    target: any,
-    blockSnapSize: any
-  ) {
+  handleDrag(componentId: number, childId: number, target: any, blockSnapSize: any) {
     const transformation = {
       x: Math.round(target.x() / blockSnapSize) * blockSnapSize,
       y: Math.round(target.y() / blockSnapSize) * blockSnapSize
@@ -129,20 +113,18 @@ class Rectangle extends Component<PropsInt, StateInt> {
         scaleY={scaleY}
         width={width}
         height={height}
-        onDragEnd={event =>
-          this.handleDrag(componentId, childId, event.target, blockSnapSize)
-        }
+        onDragEnd={event => this.handleDrag(componentId, childId, event.target, blockSnapSize)}
         ref={node => {
           this.group = node;
         }}
-        tabIndex='0' // required for keypress event to be heard by this.group
+        tabIndex="0" // required for keypress event to be heard by this.group
       >
         <Rect
           // a Konva Rect is generated for each child of the focusComponent (including the pseudochild, representing the focusComponent itself)
           ref={node => {
             this.rect = node;
           }}
-          tabIndex='0' // required for keypress event to be heard by this.group
+          tabIndex="0" // required for keypress event to be heard by this.group
           name={`${childId}`}
           className={'childRect'}
           x={0}
@@ -154,11 +136,7 @@ class Rectangle extends Component<PropsInt, StateInt> {
           scaleY={1}
           width={width}
           height={height}
-          stroke={
-            childType === 'COMP'
-              ? this.getComponentColor(childComponentId)
-              : '#000000'
-          }
+          stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
           onTransformEnd={event =>
             this.handleResize(componentId, childId, event.target, blockSnapSize)
           }
@@ -167,11 +145,9 @@ class Rectangle extends Component<PropsInt, StateInt> {
           draggable={false}
           fill={null}
           shadowBlur={childId === -1 ? 6 : null}
-
           fillPatternImage={this.state.image ? this.state.image : null}
           fillPatternScaleX={this.state.image ? width / this.state.image.width : 1}
           fillPatternScaleY={this.state.image ? height / this.state.image.height : 1}
-
           _useStrictMode
         />
         <Label>
@@ -180,11 +156,7 @@ class Rectangle extends Component<PropsInt, StateInt> {
             fontVariant={'small-caps'}
             // pseudochild's label should look different than normal children:
             text={childId === -1 ? title.slice(0, title.length - 2) : title}
-            fill={
-              childId === -1
-                ? this.getComponentColor(childComponentId)
-                : '#000000'
-            }
+            fill={childId === -1 ? this.getComponentColor(childComponentId) : '#000000'}
             fontSize={childId === -1 ? 15 : 10}
             x={4}
             y={childId === -1 ? -20 : -12}
@@ -203,20 +175,14 @@ class Rectangle extends Component<PropsInt, StateInt> {
                 componentId={componentId}
                 directParentName={childComponentName}
                 childType={grandchild.childType}
-                imageSource={
-                  grandchild.htmlElement === 'Image' && grandchild.HTMLInfo.Src
-                }
+                imageSource={grandchild.htmlElement === 'Image' && grandchild.HTMLInfo.Src}
                 childComponentName={grandchild.componentName}
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
                 childId={childId} // scary addition, grandchildren rects default to childId of "direct" children
-                width={
-                  grandchild.position.width *
-                  (width / this.getPseudoChild().position.width)
-                }
+                width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
                 height={
-                  grandchild.position.height *
-                  (height / this.getPseudoChild().position.height)
+                  grandchild.position.height * (height / this.getPseudoChild().position.height)
                 }
                 x={
                   (grandchild.position.x - this.getPseudoChild().position.x) *