Merge pull request #7 from oslabs-beta/benPropDelete

BenCauffman · web-flow · commit b56f039396f2 · 2022-08-19T19:29:35.000-04:00
Fully functional delete props and passed in props
diff --git a/.package-lock.json.icloud b/.package-lock.json.icloud
diff --git a/app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx b/app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx
@@ -113,15 +113,25 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
     setPropNum(prev => prev + 1);
     const newState = {
       // id name of state will be the parent component name concated with propNum. it will start at 1 and increase by 1 for each new state added
-      id: `${currentComponent.name}-${propNum}`,
+      id: `${currentComponent.name}-${inputKey}`,
       key: inputKey,
       value: typeConversion(inputValue, inputType),
       type: inputType,
     };
 
+    const setNewState = {
+      // id name of state will be the parent component name concated with propNum. it will start at 1 and increase by 1 for each new state added
+      id: `${currentComponent.name}-set${inputKey.slice(0,1).toUpperCase()}${inputKey.slice(1)}`,
+      key: `set${inputKey.slice(0,1).toUpperCase()}${inputKey.slice(1)}`,
+      value: '',
+      type: 'func',
+    };
+
+
+
     dispatch({
       type: 'ADD STATE',
-      payload: {newState: newState}
+      payload: {newState: newState, setNewState: setNewState}
     }); 
     setRows1([...rows1, newState])
     resetError();
diff --git a/app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx b/app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx
@@ -73,7 +73,7 @@ const TableParentProps = props => {
     // send a dispatch to rerender the table
     dispatch({
       type: 'ADD PASSEDINPROPS',
-      payload: { passedInProps: parentComponentProps, rowId: rowId }
+      payload: { passedInProps: parentComponentProps, rowId: rowId, parentComponent: parentComponent }
     });
   };
 
diff --git a/app/src/components/StateManagement/CreateTab/components/TablePassedInProps.tsx b/app/src/components/StateManagement/CreateTab/components/TablePassedInProps.tsx
@@ -56,7 +56,7 @@ const TablePassedInProps = props => {
           <Button
             style={{ width: `${3}px`, color: 'black'}}
             onClick={() => {
-                deletePassedInProps(params.row, params.id);
+                deletePassedInProps(params.id);
             }}
           >
             <ClearIcon style={{ width: `${15}px` }} />
@@ -66,13 +66,13 @@ const TablePassedInProps = props => {
       }
     }
   ];
-  const deletePassedInProps = (parentComponentProps, rowId) => {
+  const deletePassedInProps = (rowId) => {
     // get the current focused component
     // remove the state that the button is clicked
     // send a dispatch to rerender the table
     dispatch({
       type: 'DELETE PASSEDINPROPS',
-      payload: { passedInProps: parentComponentProps, rowId: rowId }
+      payload: { rowId: rowId }
     });
   };
 
diff --git a/app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx b/app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx
@@ -68,12 +68,25 @@ const TableStateProps = props => {
     // send a dispatch to rerender the table
     const currentId = state.canvasFocus.componentId;
     const currentComponent = state.components[currentId - 1];
-    const filtered = currentComponent.stateProps.filter(
-      element => element.id !== selectedId
-    );
+    // returns an array of the remaining props after deleting selected prop
+    const filtered = currentComponent.stateProps.slice();
+    let otherId;
+    for (let i = 0; i < filtered.length; i++) {
+      let curr = filtered[i];
+      // filtered.push(curr);
+      if (curr.id === selectedId) {
+        if (i %2 ===0) {
+          otherId = filtered[i + 1];
+          filtered.splice(i, 2);
+        } else {
+          otherId = filtered[i - 1];
+          filtered.splice(i - 1, 2);
+        }
+      }
+    }
     dispatch({
       type: 'DELETE STATE',
-      payload: { stateProps: filtered, rowId: selectedId }
+      payload: { stateProps: filtered, rowId: selectedId, otherId: otherId.id }
     });
   };
 
diff --git a/app/src/components/StateManagement/DisplayTab/Tree.tsx b/app/src/components/StateManagement/DisplayTab/Tree.tsx
@@ -20,7 +20,6 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
   // we save data to see if it changed
   const previouslyRenderedData = usePrevious(data);
   // function to filter out separators to prevent render on tree chart
-
   const removeHTMLElements = (arr: object[]) => {
     for(let i = 0; i < arr.length; i++) {
       if(arr[i] === undefined) continue;
diff --git a/app/src/components/bottom/CodePreview.tsx b/app/src/components/bottom/CodePreview.tsx
@@ -58,7 +58,7 @@ const CodePreview: React.FC<{
       type: 'CODE_PREVIEW_INPUT',
       payload: currentComponent.code
     });
-  }, [state.components]);
+  }, [currentComponent]);
 
   /**
    * Handler thats listens to changes in code editor
diff --git a/app/src/helperFunctions/generateCode.ts b/app/src/helperFunctions/generateCode.ts
@@ -52,7 +52,7 @@ const generateUnformattedCode = (
   // returns an array of objects which may include components, html elements, and/or route links
   const getEnrichedChildren = (currentComponent: Component | ChildElement) => {
     // declare an array of enriched children
-    const enrichedChildren = currentComponent.children.map((elem: any) => {
+    const enrichedChildren = currentComponent.children?.map((elem: any) => {
       //enrichedChildren is iterating through the children array
       const child = { ...elem };
       // check if child is a component
@@ -122,8 +122,21 @@ const generateUnformattedCode = (
   //LEGACY PD: CAN ADD PROPS HERE AS JSX ATTRIBUTE
   const elementTagDetails = (childElement: object) => {
     let customizationDetails = '';
+    let passedInPropsString = '';
+    if (childElement.type === 'Component') {
+      let childComponent;
+      for (let i = 0; i < components.length; i++) {
+        if (childElement.name === components[i].name) {
+          childComponent = components[i];
+        }
+      }
+      childComponent.passedInProps.forEach(prop => {passedInPropsString += `${prop.key} = {${prop.key}} ` 
+      })
+    }
+
+    
     if (childElement.childId && childElement.tag !== 'Route') //legacypd
-      customizationDetails += ' ' + `id="${+childElement.childId}"` + ' props = {props}';
+      customizationDetails += ' ' + `id = "${+childElement.childId}" ` + `${passedInPropsString}`;
     if (childElement.attributes && childElement.attributes.cssClasses) {
       customizationDetails +=
         ' ' + `className="${childElement.attributes.cssClasses}"`;
@@ -244,7 +257,7 @@ const generateUnformattedCode = (
     return `${enrichedChildren
       .map((child: any) => {
         if (child.type === 'Component') {
-          return `<${child.name} ${elementTagDetails(child)} />`;
+          return `<${child.name} ${elementTagDetails(child)}/>`;
         } else if (child.type === 'HTML Element') {
           return elementGenerator(child, level);
         }
@@ -301,38 +314,38 @@ const generateUnformattedCode = (
   };
 
   // // Generate import --- FROM PREVIOUS ITERATION BEFORE 12.0, NOT WORKING -> CONSIDER DELETING
-  let importContext = '';
-  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 \t\t`;
-    }
-  }
-  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 \t\t';
-      for (let i = 0; i < providerComponent.stateProps.length; i++) {
-        if (statesFromProvider.has(providerComponent.stateProps[i].id)) {
-          context +=
-            'const ' +
-            providerComponent.stateProps[i].key +
-            ' = ' +
-            providerComponent.name.toLowerCase() +
-            'Context.' +
-            providerComponent.stateProps[i].key +
-            '; \n \t\t';
-        }
-      }
-    }
-  }
+  // let importContext = '';
+  // 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 \t\t`;
+  //   }
+  // }
+  // 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 \t\t';
+  //     for (let i = 0; i < providerComponent.stateProps.length; i++) {
+  //       if (statesFromProvider.has(providerComponent.stateProps[i].id)) {
+  //         context +=
+  //           'const ' +
+  //           providerComponent.stateProps[i].key +
+  //           ' = ' +
+  //           providerComponent.name.toLowerCase() +
+  //           'Context.' +
+  //           providerComponent.stateProps[i].key +
+  //           '; \n \t\t';
+  //       }
+  //     }
+  //   }
+  // }
   // create final component code. component code differs between classic react, next.js, gatsby.js
   // classic react code
   if (projectType === 'Classic React') {
@@ -362,15 +375,15 @@ const generateUnformattedCode = (
 
       if (currComponent.name === 'App') {
         allContext.reverse().forEach((el, i) => {
-          let tabs = `\t\t`;
-          if (i === allContext.length - 1) {
-            tabs = `\t\t\t`;
-          }
-          result = `${tabs.repeat(allContext.length - i)}<${
-            el.name
-          }Provider>\n ${result}\n ${tabs.repeat(allContext.length - i)}</${
-            el.name
-          }Provider>`;
+        let tabs = `\t\t`;
+        if (i === allContext.length - 1) {
+          tabs = `\t\t\t`;
+        }
+        result = `${tabs.repeat(allContext.length - i)}<${
+          el.name
+        }Provider>\n ${result}\n ${tabs.repeat(allContext.length - i)}</${
+          el.name
+        }Provider>`;
         });
       }
       return result;
@@ -411,9 +424,7 @@ ${createContextImport()}
 ${importsMapped}
 ${`const ${currComponent.name} = (props) => {`}
 ${createUseContextHook()}
-${`  const [value, setValue] = useState("");${writeStateProps(
-  currComponent.useStateCodes
-)}`}
+${`${writeStateProps(currComponent.useStateCodes)}`}
 
   return(
     <>
@@ -436,7 +447,6 @@ export default ${currComponent.name}
     
     const ${currComponent.name[0].toUpperCase() +
       currComponent.name.slice(1)} = (props): JSX.Element => {
-      const  [value, setValue] = useState<any | undefined>("INITIAL VALUE");
       return (
           <>
       ${
@@ -462,7 +472,6 @@ export default ${currComponent.name}
     import { StaticQuery, graphql } from 'gatsby';
     ${links ? `import { Link } from 'gatsby'` : ``}
       const ${currComponent.name} = (props: any): JSX.Element => {
-      const[value, setValue] = useState<any | undefined>("INITIAL VALUE");
       return (
         <>
         ${
diff --git a/app/src/reducers/componentReducer.ts b/app/src/reducers/componentReducer.ts
diff --git a/app/src/utils/createApplication.util.ts b/app/src/utils/createApplication.util.ts
