Merge pull request #8 from oslabs-beta/c2

C2 merge to dev-46 branch

Author: WilliamCheng12345

README.md

@@ -81,7 +81,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
  - Delete Project: Command + Backspace
  - Open Project: Command + o
 
-**Windows**: 
+**Windows**:
  - Export Project: Control + e
  - Undo: Control + z
  - Redo: Control + Shift + z
@@ -90,7 +90,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
  - Delete HTML Tag on Canvas: Backspace
  - Delete Project: Control + Backspace
  - Open Project: Control + o
- 
+
 #### Contributors
 
 [Alex Yu](https://www.linkedin.com/in/alexjihunyu/) [@buddhajjigae](https://github.com/buddhajjigae)
@@ -111,8 +111,12 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Chelsey Fewer](https://www.linkedin.com/in/chelsey-fewer/) [@chelseyeslehc](https://github.com/chelseyeslehc)
 
+[Chris Tang] (https://www.linkedin.com/in/chrisjtang/) [@chrisjtang](https://github.com/chrisjtang)
+
 [Christian Padilla](https://linkedin.com/in/ChristianEdwardPadilla) [@ChristianEdwardPadilla](https://github.com/ChristianEdwardPadilla)
 
+[Crys Lim] (https://linkedin.com/in/crystallim) [@crlim](https://github.com/crlim)
+
 [Danial Reilley](https://linkedin.com/in/daniel-reilley)
 [@dreille](https://github.com/dreille)
 
@@ -156,6 +160,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 [Philip Hua](https://www.linkedin.com/in/philip-minh-hua)
 [@pmhua](https://github.com/pmhua)
 
+[Ron Fu] (https://www.linkedin.com/in/ronfu)[@rfvisuals] (https://github.com/rfvisuals)
+
 [Sean Sadykoff](https://www.linkedin.com/in/sean-sadykoff/) [@sean1292](https://github.com/sean1292)
 
 [Shana Hoehn](https://www.linkedin.com/in/shana-hoehn-70297b169/) [@slhoehn](https://github.com/slhoehn)
@@ -172,6 +178,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Tyler Sullberg](https://www.linkedin.com/in/tyler-sullberg) [@tsully](https://github.com/tsully)
 
+[William Cheng] (https://www.linkedin.com/in/william-cheng-0723/) [@williamcheng12345](https://github.com/WilliamCheng12345)
+
 [William Rittwage](https://www.linkedin.com/in/william-rittwage)
 [@wbrittwage](https://github.com/wbrittwage)
 

app/src/components/bottom/UseStateModal.tsx

@@ -3,27 +3,40 @@ import Modal from '@material-ui/core/Modal';
 import StateContext from '../../context/context';
 import TableStateProps from '../right/TableStateProps';
 
-// TODO: typescript interface or type check
+
 function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
   const [state, dispatch] = useContext(StateContext);
   const [open, setOpen] = useState(false);
+  const [displayObject, setDisplayObject] = useState(null)
+  const [stateKey, setStateKey] = useState('');
+  const [statePropsId, setStatePropsId] = useState(-1);
 
   // make buttons to choose which component to get state from
   const [componentProviderId, setComponentProviderId] = useState(1) // for now set to App
   const components = [];
   for (let i = 0; i < state.components.length; i ++) {
-    components.push(<button onClick={() => setComponentProviderId(i+1)}>{state.components[i].name}</button>)
+    components.push(<button
+      onClick={() => {
+        setComponentProviderId(i+1);
+        setDisplayObject(null);
+        setStateKey('');
+      }}>
+        {state.components[i].name}
+      </button>)
   }
 
-  // return the selected state's ID back so the value of it can be updated in the customizationpanel.  to the assign the value of selected state to attribute tied to useState button (currently just text)
-  // attribute to change as parameter for 
+  // table to choose state from
   const body = (
     <div className="useState-position">
       <div className="useState-header">
         <span>Choose State Source</span>
         <button
           style={{ margin: '5px 5px' ,padding: '1px', float: 'right' }}
-          onClick={() => setOpen(false)}
+          onClick={() => {
+            setStateKey('');
+            setStatePropsId(-1);
+            setDisplayObject(null)
+            setOpen(false)}}
         >
           X
         </button>
@@ -35,9 +48,24 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
         <div className="useState-stateDisplay">
           <TableStateProps
             providerId = {componentProviderId}
+            displayObject = {displayObject}
             selectHandler={(table) => {
-              updateAttributeWithState(attributeToChange, componentProviderId, table.row.id);
-              setOpen(false);
+              if (statePropsId < 0) setStatePropsId(table.row.id);
+              // if object or array => show sub table
+              if (table.row.type === "object") {
+                setStateKey(stateKey + table.row.key + '.');
+                setDisplayObject(table.row.value);
+              } else if (table.row.type === "array") {
+                setStateKey(stateKey + table.row.key)
+                setDisplayObject(table.row.value);
+              } else {
+                // if not object or array => update state
+                setDisplayObject(null);
+                updateAttributeWithState(attributeToChange, componentProviderId, statePropsId, table.row, stateKey + table.row.key);
+                setStateKey('')
+                setStatePropsId(-1);
+                setOpen(false);
+              }
             }}
             deleteHandler={() => func()}
             isThemeLight={true}
@@ -55,4 +83,4 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
   );
 }
 
-export default UseStateModal;
+export default UseStateModal;

app/src/components/left/DragDropPanel.tsx

@@ -58,7 +58,7 @@ const DragDropPanel = (props): JSX.Element => {
                     handleDelete={handleDelete}
                     isThemeLight={isThemeLight}
                   />
-                  ); 
+                  );
               }
 
             })}
@@ -74,10 +74,9 @@ const DragDropPanel = (props): JSX.Element => {
                     handleDelete={handleDelete}
                     isThemeLight={isThemeLight}
                   />
-                  ); 
+                  );
               }
             })}
-
           </Grid>
       </div>
     </div>

app/src/components/left/HTMLItem.tsx

@@ -35,7 +35,7 @@ const useStyles = makeStyles({
   darkThemeFontColor: {
     color: '#fff'
   }
-  
+
 });
 
 const HTMLItem : React.FC<{
@@ -45,9 +45,9 @@ const HTMLItem : React.FC<{
   handleDelete: (id: number) => void;
   isThemeLight: boolean;
 }> = ({ name, id, Icon, handleDelete, isThemeLight }) => {
-  
+
   const classes = useStyles();
-  
+
   const [modal, setModal] = useState(null);
   const [{ isDragging }, drag] = useDrag({
     item: {

app/src/components/main/DemoRender.tsx

@@ -35,6 +35,7 @@ const DemoRender = (props): JSX.Element => {
         if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
           renderedChildren = componentBuilder(element.children);
         }
+
         if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);

app/src/components/right/StatePropsPanel.tsx

@@ -31,7 +31,7 @@ import TableStateProps from "./TableStateProps";
 const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   const [state, dispatch] = useContext(StateContext);
   const classes = useStyles();
-  
+
 
   const [inputKey, setInputKey] = useState("");
   const [inputValue, setInputValue] = useState("");
@@ -46,12 +46,16 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   // convert value to correct type based on user input
   const typeConversion = (value, type) => {
     switch (type) {
-      case "String":
+      case "string":
         return String(value);
-      case "Number":
+      case "number":
         return Number(value);
-      case "Boolean":
+      case "boolean":
         return Boolean(value);
+      case "array":
+        return JSON.parse(value);
+      case "object": 
+        return JSON.parse(value);
       default:
         return value;
     }
@@ -74,44 +78,44 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
       key: inputKey,
       value: typeConversion(inputValue, inputType),
       type: inputType,
-    };    
-    
+    };
+
     dispatch({
-      type: 'ADD STATE', 
+      type: 'ADD STATE',
       payload: {newState: newState}
-    }); 
+    });
     clearForm();
   };
-  
-  
-  // find table row using its id and if it exists, populate form with its details 
+
+
+  // find table row using its id and if it exists, populate form with its details
   const handlerRowSelect = (table) => {
     let exists = false;
     currentComponent.stateProps.forEach((stateProp) => {
       // if stateProp id matches current row's id (table.row.id), flip exists to true
       if (stateProp.id === table.row.id) exists = true;
-    }); 
+    });
     // if row id exists, populate form with corresponding inputs (key, value, type) from table row
     if (exists) {
       setInputKey(table.row.key);
       setInputType(table.row.type);
       setInputValue(table.row.value);
     } else clearForm();
   };
-  
+
   // find & delete table row using its id
   const handlerRowDelete = (id:any) => {
-    // iterate and filter out stateProps with matching row id 
-    const filtered = currentComponent.stateProps.filter(element => element.id !== id); 
-      
+    // iterate and filter out stateProps with matching row id
+    const filtered = currentComponent.stateProps.filter(element => element.id !== id);
+
     dispatch({
-      type: 'DELETE STATE', 
+      type: 'DELETE STATE',
       payload: {stateProps: filtered}
     });
-    
+
     setStateProps(filtered);
   };
-  
+
   return (
     <div className={'state-panel'}>
       <div>
@@ -123,18 +127,18 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
             variant="outlined"
             value={inputKey}
             onChange={(e) => setInputKey(e.target.value)}
-            className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`} 
+            className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`}
             />
           <TextField
             id="textfield-value"
             label="value:"
             variant="outlined"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
-            className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`} 
+            className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`}
             />
           <FormControl required className={isThemeLight ? `${classes.formControl} ${classes.lightThemeFontColor}` : `${classes.formControl} ${classes.darkThemeFontColor}`}>
-            <InputLabel 
+            <InputLabel
               id="select-required-label"
               className={isThemeLight ? classes.greyThemeFontColor : classes.darkThemeFontColor}>
                 Type
@@ -161,6 +165,9 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
               <MenuItem id="type-selector" value={"array"}>
                 Array
               </MenuItem>
+              <MenuItem id="type-selector" value={"object"}>
+                Object
+              </MenuItem>
               <MenuItem id="type-selector" value={"undefined"}>
                 Undefined
               </MenuItem>
@@ -174,8 +181,8 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
             </FormHelperText>
           </FormControl>
           <br></br>
-          <MyButton 
-          type="submit" 
+          <MyButton
+          type="submit"
           onClick={submitNewState}
           className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
           >

app/src/components/right/TableStateProps.tsx

@@ -46,14 +46,11 @@ const getColumns = (props) => {
       renderCell: function renderCell(params:any) {
         const getIdRow = () => {
           const { api } = params;
-          console.log('Line 49 params =', params);
-          console.log('Line 50 id = ', params.id);
-          // const fields = api.getAllColumns().map((c: any) => c.field).filter((c : any) => c !== '__check__' && !!c);
           return params.id;
-          
+
           // return params.getValue(fields[0]);
         };
-        return ( 
+        return (
           <Button style={{width:`${3}px`}}
           onClick={() => {
             deleteHandler(getIdRow());
@@ -66,37 +63,47 @@ const getColumns = (props) => {
   ];
 };
 
-//, providerId=1
 const TableStateProps = (props) => {
   const classes = useStyles();
   const [state] = useContext(StateContext);
   const [editRowsModel] = useState <GridEditRowsModel> ({});
   const [gridColumns, setGridColumns] = useState([]);
-  
+
 
   useEffect(() => {
     setGridColumns(getColumns(props));
   }, [props.isThemeLight])
   // get currentComponent by using currently focused component's id
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
-  
+
   // rows to show are either from current component or from a given provider
   let rows = [];
   if (!props.providerId) {
     rows = currentComponent.stateProps.slice();
   } else {
     const providerComponent = state.components[props.providerId - 1];
-    rows = providerComponent.stateProps.slice();
+    // changed to get whole object
+    if (props.displayObject){
+      const displayObject = props.displayObject;
+      // format for DataGrid
+      let id=1;
+      for (const key in displayObject) {
+        // if key is a number make it a string with brackets aroung number
+        rows.push({ id: id++, key: ( isNaN(key) ? key : '[' + key + ']' ), value: displayObject[key], type: typeof(displayObject[key])});
+      }
+    } else {
+      rows = providerComponent.stateProps.slice();
+    }
   }
 
   const { selectHandler } : StatePropsPanelProps = props;
-  
+
   // when component gets mounted, sets the gridColumn
   useEffect(() => {
     setGridColumns(getColumns(props));
   }, []);
-  
+
   return (
     <div className={'state-prop-grid'}>
       <DataGrid