Merge branch 'Miko' of https://github.com/oslabs-beta/ReacType into calvinYuanji/CSSFixes

Author: calvincao

app/src/components/main/DemoRender.tsx

@@ -53,6 +53,7 @@ const DemoRender = (): JSX.Element => {
   const componentBuilder = (array: object, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
+      
       if (element.name !== 'separator') {
         const elementType = element.name;
         const childId = element.childId;
@@ -67,11 +68,15 @@ const DemoRender = (): JSX.Element => {
         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 === 'Image') componentsToRender.push(<Box component='img' src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
-        else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href='javascript:void(0)' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);
+        else if (elementType === 'a' || elementType === 'Link') componentsToRender.push(
+          activeLink ?
+          <Box component='a' href='javascript:void(0)' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>
+          :<Box component='a' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>
+        );
         else if (elementType === 'Switch') componentsToRender.push(<Switch>{renderedChildren}</Switch>);
         else if (elementType === 'Route') componentsToRender.push(<Route exact path={activeLink}>{renderedChildren}</Route>);
-        else if (elementType === 'Link') componentsToRender.push(<Box component='a' href='javascript:void(0)' className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>)/*componentsToRender.push(<Link to={activeLink}>{innerText}</Link>);*/
-        else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>);
+        else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>
+        );
         key += 1;
       }
     }

app/src/containers/CustomizationPanel.tsx

@@ -24,6 +24,7 @@ import ProjectManager from '../components/right/ProjectManager';
 import StateContext from '../context/context';
 import FormSelector from '../components/form/Selector';
 import UseStateModal from '../components/bottom/UseStateModal';
+import { OutgoingMessage } from 'http';
 // Previously named rightContainer, Renamed to Customizationpanel this now hangs on BottomTabs
 // need to pass in props to use the useHistory feature of react router
 const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
@@ -47,9 +48,21 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const [useContextObj, setUseContextObj] = useState({});
   const [stateUsedObj, setStateUsedObj] = useState({});
 
+  //Miko -- save properties of nested div
+  function deepIterate(arr) {
+    const output = [];
+    for(let i = 0; i < arr.length; i++) {
+      if(arr[i].typeId === 1000) continue;
+      output.push(arr[i]);
+      if(arr[i].children.length) {
+        output.push(...deepIterate(arr[i].children));
+      }
+    }
+    return output;
+  }
+
   const resetFields = () => {
-    const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
-    const childrenArray = currComponent.children;
+    const childrenArray = deepIterate(configTarget.children);
     for (const element of childrenArray) {
       if (configTarget.child && element.childId === configTarget.child.id) {
         const attributes = element.attributes;

app/src/helperFunctions/generateCode.ts

@@ -286,13 +286,13 @@ const generateUnformattedCode = (
     ${`  const [value, setValue] = useState("");${writeStateProps(currComponent.useStateCodes)}`}
     ${!importReactRouter
         ? `  return (
-          <div className="${currComponent.name}" ${formatStyles(currComponent)}>
+          <div className="${currComponent.name}" ${formatStyles(currComponent.style)}>
           \t${writeNestedElements(enrichedChildren)}
           </div>
       );`
         : `  return (
           <Router>
-            <div className="${currComponent.name}" ${formatStyles(currComponent)}>
+            <div className="${currComponent.name}" ${formatStyles(currComponent.style)}>
             \t${writeNestedElements(enrichedChildren)}
             </div>
           </Router>