fix small bugs

Author: wang9hu

app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

@@ -23,12 +23,6 @@ const AddContextForm = ({
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) return;
     handleClickSelectContext();
-
-    //need to trigger the generate code functionality to update the code preview tab. Sending dummy data to trigger with a DELELTE ELEMENT dispatch method
-    dispatch({
-      type: 'DELETE ELEMENT',
-      payload: 'FAKE_ID'
-    });
   };
 
   const onChange = (event, newValue) => {

app/src/components/bottom/UseStateModal.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useContext} from 'react';
+import React, {useState, useContext, useRef} from 'react';
 import Modal from '@material-ui/core/Modal';
 import StateContext from '../../context/context';
 import TableStateProps from './TableStateProps';
@@ -10,7 +10,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
   const [stateKey, setStateKey] = useState('');
   const [statePropsId, setStatePropsId] = useState(-1);
   const [componentProviderId, setComponentProviderId] = useState(1);  
-
+  const container = useRef(null);
   // table to choose state from
   const body = (
     <div className="useState-position">
@@ -46,9 +46,9 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
   );
 
   return (
-    <div>
+    <div ref={container}>
       <button className="useState-btn" onClick={() => setOpen(true)}>USE STATE</button>
-      <Modal open={open}>{body}</Modal>
+      <Modal open={open} container={container.current}>{body}</Modal>
     </div>
   );
 }

app/src/components/main/DemoRender.tsx

@@ -58,7 +58,6 @@ const DemoRender = (): JSX.Element => {
   //Switch between components when clicking on a link in the live render
   window.onmessage = (event) => {
     if (event.data === undefined) return;
-    // console.log('event: ', event);
     const component: string = event.data?.split('/').at(-1);
     const componentId =
       component &&

app/src/containers/CustomizationPanel.tsx

@@ -54,13 +54,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const [eventRow, setEventRow] = useState([]);
   // ------------------------------------------- added code above -------------------------------------------
   const currFocus = getFocus().child;
-  // state.components
-  //   .find((el) => {
-  //     return el.id === state.canvasFocus.componentId;
-  //   })
-  //   .children.find((el) => {
-  //     return el.childId === state.canvasFocus.childId;
-  //   });
+
   useEffect( () => {
     currFocus?.attributes?.compLink && setCompLink(currFocus.attributes.compLink);
     setEventAll(['', '']);

app/src/helperFunctions/generateCode.ts

@@ -410,7 +410,7 @@ const generateUnformattedCode = (
     //  ------------------------------------------- added code above  -------------------------------------------
     let generatedCode = "import React, { useState, useEffect, useContext} from 'react';\n\n";
     generatedCode += currComponent.name === 'APP' ? contextImports : '';
-    generatedCode += importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';` : ``;
+    generatedCode += importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';\n` : ``;
     generatedCode += createContextImport() ? `${createContextImport()}\n`: '';
     generatedCode += importsMapped ? `${importsMapped}\n` : '';
     // below is the return statement of the codepreview

app/src/reducers/componentReducer.ts

@@ -85,21 +85,25 @@ const reducer = (state: State, action: Action) => {
   // update all ids and typeIds to match one another
   const updateAllIds = (comp: Component[] | ChildElement[]) => {
     // put components' names and ids into an obj
-    const obj = {};
-    comp.forEach((el) => {
-      obj[el.name] = el.id;
-    });
+    const obj = { spr: 1000, others: 1 };
+    // comp.forEach((el) => {
+    //   if (!obj[el.name]) obj[el.name] = el.id;
+    // });
     // for each of the components, if it has children, iterate through that children array
     comp.forEach((el) => {
       if (el.children.length > 0) {
         for (let i = 0; i < el.children.length; i++) {
           // update each child's childId
-          el.children[i].childId = i + 1;
-          // if the child's name and id exists in the object
-          if (obj[el.children[i].name]) {
-            // set the child's typeId to be the value in the object of the child's name key
-            el.children[i].typeId = obj[el.children[i].name];
+          if (el.children[i].name === 'separator') {
+            el.children[i].childId = obj['spr']++;
+          } else {
+            el.children[i].childId = obj['others']++;
           }
+          // // if the child's name and id exists in the object
+          // if (obj[el.children[i].name]) {
+          //   // set the child's typeId to be the value in the object of the child's name key
+          //   el.children[i].typeId = obj[el.children[i].name];
+          // }
           // recursively call the updateAllIds function on the child's children array if
           // the child's children array is greater than 0
           if (el.children[i].children.length > 0) {
@@ -145,7 +149,7 @@ const reducer = (state: State, action: Action) => {
       // component has a children array, iterate through the array of children
       child.forEach((el) => {
         if (el.children.length) {
-          const arr = [];
+          const arr: ChildElement[] = [];
           for (let i = 0; i < el.children.length; i++) {
             // check to see if the name variable doesn't match the name of the child
             if (el.children[i].name !== name) {
@@ -510,7 +514,6 @@ const reducer = (state: State, action: Action) => {
       );
       return { ...state, components };
     }
-    //  ------------------------------------------- added code below  -------------------------------------------
     case 'UPDATE EVENTS': {
       const { events } = action.payload;
       if (JSON.stringify(events) === '{}') return state;
@@ -552,8 +555,6 @@ const reducer = (state: State, action: Action) => {
       );
       return { ...state, components };
     }
-    //  ------------------------------------------- added code above  -------------------------------------------
-
     case 'DELETE CHILD': {
       // if in-focus instance is a top-level component and not a child, don't delete anything
       if (!state.canvasFocus.childId) return state;
@@ -752,6 +753,7 @@ const reducer = (state: State, action: Action) => {
       });
       const components: Component[] = deleteById(action.payload, name);
       const rootComponents: number[] = updateRoots(components);
+      const canvasFocus = { ...state.canvasFocus, childId: null };
       components.forEach((el, i) => {
         el.code = generateCode(
           components,
@@ -763,6 +765,7 @@ const reducer = (state: State, action: Action) => {
       });
       return {
         ...state,
+        canvasFocus,
         HTMLTypes
       };
     }