Added imports

Co-authored-by: Ron Fu

Author: WilliamCheng12345

app/src/components/bottom/UseStateModal.tsx

@@ -36,6 +36,7 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
         <div className="useState-stateDisplay">
           <TableStateProps
             providerId = {componentProviderId}
+            canDeleteState = {false}
             selectHandler={(table) => {
               updateAttributeWithState(attributeToChange, componentProviderId, table.row.id);
             }}

app/src/components/right/StatePropsPanel.tsx

@@ -97,16 +97,6 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
     } 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);     
-  //   dispatch({
-  //     type: 'DELETE STATE', 
-  //     payload: {stateProps: filtered}
-  //   });
-  // };
-  
   return (
     <div className={'state-panel'}>
       <div>
@@ -184,7 +174,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
         <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
           Current State Name: {state.components[state.canvasFocus.componentId - 1].name}
         </h4>
-        <TableStateProps selectHandler={handlerRowSelect} isThemeLight={isThemeLight} />
+        <TableStateProps canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} />
       </div>
     </div>
   );

app/src/components/right/TableStateProps.tsx

@@ -30,7 +30,18 @@ const TableStateProps = (props) => {
 
   // when component gets mounted, sets the gridColumn
   useEffect(() => {
-    setGridColumns(getColumns(props, state, dispatch));
+
+
+    // get the columns and remove delete buttons 
+    // only if table is displayed as modal 
+    const columns = getColumns(props, state, dispatch); 
+    if(props.canDeleteState) {
+      setGridColumns(columns); 
+    }
+    else {
+      setGridColumns(columns.slice(0, columns.length - 1));
+    }
+    
 
     if (!props.providerId) {
       const currentId = state.canvasFocus.componentId;
@@ -90,44 +101,21 @@ const getColumns = (props, state, dispatch) => {
       width: 70,
       editable: false,
       renderCell: function renderCell(params:any) {
-        const getIdRow = () => {
-          // const fields = api.getAllColumns().map((c: any) => c.field).filter((c : any) => c !== '__check__' && !!c);
-          return params.id;
-          // return params.getValue(fields[0]);
-        };
         return ( 
-          <Button style={{width:`${3}px`}}
-          onClick={() => {
-            const deleteAttributeWithState = (id) => {
-              let currentComponent; 
-              if(!props.providerId) {
+          <Button style={{width:`${3}px`}} onClick={() => {
+                // get the current focused component 
+                // remove the state that the button is clicked 
+                // send a dispatch to rerender the table
                 const currentId = state.canvasFocus.componentId;
-                currentComponent = state.components[currentId - 1];
-                const filtered = currentComponent.stateProps.filter(element => element.id !== id);
-                console.log('filtered:', filtered);     
+                const currentComponent = state.components[currentId - 1];
+
+                const filtered = currentComponent.stateProps.filter(element => element.id !== params.id);  
                 dispatch({
                   type: 'DELETE STATE', 
                   payload: {stateProps: filtered}
                 });
-              }
-              else {
-                currentComponent = state.components[props.providerId - 1]; 
-                console.log("row-id: ", id); 
-                console.log("provider-id: ", props.providerId)
-                console.log("currentProviderComponent: ", currentComponent); 
-                const filtered = currentComponent.stateProps.filter(element => element.id !== id);
-                console.log('filtered:', filtered);     
-                dispatch({
-                  type: 'DELETE STATE', 
-                  payload: {stateProps: filtered, providerId: props.providerId}
-                });
-              }
-            }
-        
-            deleteAttributeWithState(getIdRow()); 
-          }
-
-          }>
+              
+          }}>
             <ClearIcon style={{width:`${15}px`}}/>
           </Button>
         );

app/src/containers/CustomizationPanel.tsx

@@ -211,24 +211,28 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     const currentComponent = state.components[componentProviderId - 1];
     const currentComponentProps = currentComponent.stateProps;
     const newInput = currentComponentProps[statePropsId - 1].value;
+    console.log("useContext of current component = ", currentComponent); 
 
 
     if (attributeName === 'compText') {
       const newContextObj = useContextObj;
       if (!newContextObj[componentProviderId]) {
-        newContextObj[componentProviderId] = {};
+        newContextObj[componentProviderId] = {statesFromProvider : new Set()};
       }
+
       newContextObj[componentProviderId].compText = statePropsId;
+      newContextObj[componentProviderId].statesFromProvider.add(statePropsId); 
       setCompText(newInput);
       setUseContextObj(newContextObj);
     }
     if (attributeName === 'compLink') {
       const newContextObj = useContextObj;
       if (!newContextObj[componentProviderId]) {
-        newContextObj[componentProviderId] = {};
+        newContextObj[componentProviderId] = {statesFromProvider : new Set()};
       }
       newContextObj[componentProviderId].compLink = statePropsId;
-
+      newContextObj[componentProviderId].statesFromProvider.add(statePropsId); 
+      
       setCompLink(newInput);
       setUseContextObj(newContextObj);
     }
@@ -241,6 +245,10 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
 
   }
 
+  useEffect(() => {
+    console.log(state.components); 
+  }, state);  
+
   // 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

@@ -242,15 +242,23 @@ const generateUnformattedCode = (
 
     return state; 
   }
+  
+  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`;
+  }
+}
   // check for context
   if (currComponent.useContext) {
-    
     for (const providerId of Object.keys(currComponent.useContext)) {
-      const attributesAndStateIds = currComponent.useContext[String(providerId)]; //currently just from App
-      const providerComponent = components[providerId - 1];
+      const statesFromProvider = currComponent.useContext[parseInt(providerId)].statesFromProvider; //currently just from App
+      const providerComponent = components[parseInt(providerId) - 1];
       providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n';
 
-      for (const stateId of Object.values(attributesAndStateIds)) {
+      for (const stateId of statesFromProvider.values()) {
         context +=
           'const ' +
           providerComponent.stateProps[stateId - 1].key +
@@ -270,6 +278,7 @@ const generateUnformattedCode = (
     ${`import React, { useState, createContext, useContext } from 'react';`}
     ${importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`: ``}
     ${importsMapped}
+    ${importContext}
     ${providers}
     ${context}
     ${`const ${currComponent.name} = (props: any): JSX.Element => {`}

app/src/reducers/componentReducer.ts

@@ -468,6 +468,7 @@ const reducer = (state: State, action: Action) => {
         state.HTMLTypes
       );
 
+      
       return {...state, components }
 
     }
@@ -791,14 +792,9 @@ const reducer = (state: State, action: Action) => {
 
     case 'DELETE STATE' : {
       const components = [...state.components];
-      let currComponent = !action.payload.providerId
-      ? findComponent(
-        components,
-        state.canvasFocus.componentId
-      )
-      : findComponent(
+      let currComponent = findComponent(
         components, 
-        action.payload.providerId 
+        state.canvasFocus.componentId 
       );
 
       currComponent.stateProps = action.payload.stateProps;