Fixed issue when first state of current component deleted and indentation problems

Co-authored-by: Ron Fu

Author: WilliamCheng12345

app/src/containers/CustomizationPanel.tsx

@@ -212,61 +212,41 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     const providerComponent = state.components[componentProviderId - 1];
     const providerStates = providerComponent.stateProps;
     const newInput = providerStates[statePropsId - 1].value;
+    let newContextObj = {...currentComponent.useContext}; 
 
-    // states providerComponent
-    // adding new state into provideComponent 
-    // currComponent = canvas focus component 
-    // currComponent = state.components[componentProviderId - 1]; {1 : {Set, compLink, compText}} 
-    // Our set holds the state row ids of that component 
-
-    
-    // console.log("state-components", JSON.parse(JSON.stringify(state.components))); 
-    // console.log("current-component", JSON.parse(JSON.stringify(currentComponent))); 
+    if(!newContextObj) {
+      newContextObj = {}; 
+    }
 
-    if (attributeName === 'compText') {
-      let newContextObj = {...currentComponent.useContext}; 
-      if(!newContextObj) {
-        newContextObj = {}; 
-      }
+    if (!newContextObj[componentProviderId]) {
+      newContextObj[componentProviderId] = {statesFromProvider : new Set()};
+    }
 
-      if (!newContextObj[componentProviderId]) {
-        newContextObj[componentProviderId] = {statesFromProvider : new Set()};
-      }
+    newContextObj[componentProviderId].statesFromProvider.add(statePropsId); 
 
+    if (attributeName === 'compText') {
       newContextObj[componentProviderId].compText = statePropsId;
-      newContextObj[componentProviderId].statesFromProvider.add(statePropsId); 
+      
       setCompText(newInput);
-      // setUseContextObj(newContextObj); 
-
       dispatch({
         type: 'UPDATE USE CONTEXT',
         payload: { useContextObj: newContextObj}
-      })
+      });
+       // setUseContextObj(newContextObj); 
     }
+
     if (attributeName === 'compLink') {
-      const newContextObj = useContextObj;
-      if (!newContextObj[componentProviderId]) {
-        newContextObj[componentProviderId] = {statesFromProvider : new Set()};
-      }
-      newContextObj[componentProviderId].compLink = statePropsId;
-      newContextObj[componentProviderId].statesFromProvider.add(statePropsId); 
-      
+      newContextObj[componentProviderId].compLink = statePropsId; 
+
       setCompLink(newInput);
-      setUseContextObj(newContextObj);
+      dispatch({
+        type: 'UPDATE USE CONTEXT',
+        payload: { useContextObj: newContextObj}
+      });
+      // setUseContextObj(newContextObj);
     }
-
-    
-    // TODO: set something to signify that state was used
-    // so it can be handled in generateCode
-
-    // update use context object
-
   }
 
-  // useEffect(() => {
-  //   console.log(useContextObj); 
-  // }, [useContextObj]);  
-
   // dispatch to 'UPDATE CSS' called when save button is clicked,
   // passing in style object constructed from all changed input values
   const handleSave = (): Object => {

app/src/helperFunctions/generateCode.ts

@@ -244,30 +244,30 @@ const generateUnformattedCode = (
   }
 
   let importContext = '';
-  //{1: {statesFromProvider: new Set}, 2: ..., 3:...}
   if(currComponent.useContext) {
   for (const providerId of Object.keys(currComponent.useContext)) {
     const providerComponent = components[parseInt(providerId) - 1];
-      importContext += `import ${providerComponent.name}Context from './${providerComponent.name}.tsx'\n`;
+      importContext += `import ${providerComponent.name}Context from './${providerComponent.name}.tsx'\n \t\t` ;
   }
 }
   // check for context
   if (currComponent.useContext) {
     for (const providerId of Object.keys(currComponent.useContext)) {
       const statesFromProvider = currComponent.useContext[parseInt(providerId)].statesFromProvider; //{1: {Set, compLink, compText}, 2 : {}...}
       const providerComponent = components[parseInt(providerId) - 1];
-      providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n';
-      console.log('statesFromProviders: ', statesFromProvider);
-      console.log('providerComponent: ', providerComponent);
-      for (const stateId of statesFromProvider.values()) {
-        context +=
+      providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n \t\t' ;
+
+      for (let i = 0; i < providerComponent.stateProps.length; i++) {
+        if(statesFromProvider.has(providerComponent.stateProps[i].id)) {
+          context +=
           'const ' +
-          providerComponent.stateProps[stateId - 1].key +
-          ' = ' +
+          providerComponent.stateProps[i].key +
+          'Value = ' +
           providerComponent.name.toLowerCase() +
           'Context.' +
-          providerComponent.stateProps[stateId - 1].key +
-          ';\n';
+          providerComponent.stateProps[i].key +
+          '; \n \t\t';
+        }
       }
     }
   }
@@ -293,15 +293,15 @@ const generateUnformattedCode = (
       ? `  return (
         <${currComponent.name}Context.Provider value="">
           <div className="${currComponent.name}" ${formatStyles(currComponent)}>
-          ${writeNestedElements(enrichedChildren)}
+          \t${writeNestedElements(enrichedChildren)}
           </div>
         </${currComponent.name}Context.Provider>  
       );` 
       : `  return (
         <${currComponent.name}Context.Provider value="">
           <Router>
             <div className="${currComponent.name}" ${formatStyles(currComponent)}>
-              ${`  ` + writeNestedElements(enrichedChildren)}
+            \t${writeNestedElements(enrichedChildren)}
             </div>
           </Router>
         </${currComponent.name}Context.Provider>