Removed Separator from Tree

Fixed Indentaiton in Code Preview

Co-authored: Ron Fu [email protected]

Author: WilliamCheng12345

app/src/components/bottom/UseStateModal.tsx

@@ -4,7 +4,7 @@ import StateContext from '../../context/context';
 import TableStateProps from '../right/TableStateProps';
 
 // TODO: typescript interface or type check
-function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
+function UseStateModal({ updateAttributeWithState, deleteAttributeWithState, attributeToChange, childId }) {
   const [state, dispatch] = useContext(StateContext);
   const [open, setOpen] = useState(false);
 
@@ -36,10 +36,11 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
           <TableStateProps
             providerId = {componentProviderId}
             selectHandler={(table) => {
+              console.log('componentProviderId = ',componentProviderId);
+              console.log('table.row = ',table.row);
               updateAttributeWithState(attributeToChange, componentProviderId, table.row.id);
-              setOpen(false);
             }}
-            deleteHandler={() => func()}
+            deleteHandler={() => deleteAttributeWithState()}
             isThemeLight={true}
           />
         </div>

app/src/components/right/TableStateProps.tsx

@@ -46,11 +46,8 @@ const getColumns = (props) => {
       renderCell: function renderCell(params:any) {
         const getIdRow = () => {
           const { api } = params;
-          console.log('Line 49 params =', params);
-          console.log('Line 50 id = ', params.id);
           // const fields = api.getAllColumns().map((c: any) => c.field).filter((c : any) => c !== '__check__' && !!c);
           return params.id;
-          
           // return params.getValue(fields[0]);
         };
         return ( 

app/src/containers/CustomizationPanel.tsx

@@ -207,14 +207,20 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
 
   // function to pass into UseStateModal to use state to update attribute
   const updateAttributeWithState = (attributeName, componentProviderId, statePropsId) => {
-
+    console.log('attributeName = ',attributeName); //returns compText or compLink
+    console.log('statePropsId = ', statePropsId);
     // get the stateProps of the componentProvider    
     const currentComponent = state.components[componentProviderId - 1];
     const currentComponentProps = currentComponent.stateProps;
     const newInput = currentComponentProps[statePropsId - 1].value;
 
+    console.log('currentComponent = ',currentComponent);
+    console.log('currentComponentProps =', currentComponentProps);
+    console.log('newInput', newInput);
+
     if (attributeName === 'compText') {
       const newContextObj = useContextObj;
+      console.log('newContextObj=',newContextObj)
       if (!newContextObj[componentProviderId]) {
         newContextObj[componentProviderId] = {};
       }
@@ -234,6 +240,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
       setUseContextObj(newContextObj);
     }
 
+    const deleteAttributeWithState = alert('Hello from Customization Panel');
     // TODO: set something to signify that state was used
     // so it can be handled in generateCode
 

app/src/helperFunctions/generateCode.ts

@@ -12,6 +12,24 @@ declare global {
   }
 }
 
+// generate code based on component hierarchy and then return the rendered code
+const generateCode = (
+  components: Component[],
+  componentId: number,
+  rootComponents: number[],
+  projectType: string,
+  HTMLTypes: HTMLType[]
+) => {
+  const code = generateUnformattedCode(
+    components,
+    componentId,
+    rootComponents,
+    projectType,
+    HTMLTypes
+  );
+  return formatCode(code);
+};
+
 // generate code based on the component hierarchy
 const generateUnformattedCode = (
   comps: Component[],
@@ -23,14 +41,15 @@ const generateUnformattedCode = (
   const components = [...comps];
 
   // find the component that we're going to generate code for
-  const currentComponent = components.find(elem => elem.id === componentId);
+  const currComponent = components.find(elem => elem.id === componentId);
   // find the unique components that we need to import into this component file
   let imports: any = [];
   let providers: string = '';
   let context: string = '';
   let links: boolean = false;
 
   const isRoot = rootComponents.includes(componentId);
+  let importReactRouter = false;;
 
   // returns an array of objects which may include components, html elements, and/or route links
   const getEnrichedChildren = (currentComponent: Component | ChildElement) => {
@@ -111,7 +130,7 @@ const generateUnformattedCode = (
 
   // function to fix the spacing of the ace editor for new lines of added content. This was breaking on nested components, leaving everything right justified.
   const tabSpacer = (level: number) => {
-    let tabs = ''
+    let tabs = '  '
     for (let i = 0; i < level; i++) tabs += '  ';
     return tabs;
   }
@@ -188,14 +207,12 @@ const generateUnformattedCode = (
   const writeStateProps = (stateArray: any) => {
     let stateToRender = '';
     for (const element of stateArray) {
-      stateToRender += levelSpacer(2, 3) + element + ';'
+      stateToRender += levelSpacer(2, 2) + element + ';'
     }
     return stateToRender
   }
 
-  const enrichedChildren: any = getEnrichedChildren(currentComponent);
-
-  const next = true;
+  const enrichedChildren: any = getEnrichedChildren(currComponent);
 
   // import statements differ between root (pages) and regular components (components)
   const importsMapped =
@@ -213,9 +230,6 @@ const generateUnformattedCode = (
           })
           .join('\n');
 
-  const stateful = true;
-  const classBased = false;
-  let importReactRouter;
 
   const createState = (stateProps) => {
     let state = '{'; 
@@ -229,10 +243,10 @@ const generateUnformattedCode = (
     return state; 
   }
   // check for context
-  if (currentComponent.useContext) {
+  if (currComponent.useContext) {
 
-    for (const providerId of Object.keys(currentComponent.useContext)) {
-      const attributesAndStateIds = currentComponent.useContext[String(providerId)]; //currently just from App
+    for (const providerId of Object.keys(currComponent.useContext)) {
+      const attributesAndStateIds = currComponent.useContext[String(providerId)]; //currently just from App
       const providerComponent = components[providerId - 1];
       providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n';
 
@@ -253,57 +267,37 @@ const generateUnformattedCode = (
   // classic react code
   if (projectType === 'Classic React') {
     return `
-    ${stateful && !classBased ? `import React, { useState, createContext, useContext } from 'react';` : ''}
+    ${`import React, { useState, createContext, useContext } from 'react';`}
     ${importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`: ``}
-    ${classBased ? `import React, { Component } from 'react';` : ''}
-    ${!stateful && !classBased ? `import React, { createContext, useContext } from 'react';` : ''}
     ${importsMapped}
     ${providers}
     ${context}
+    ${`const ${currComponent.name} = (props: any): JSX.Element => {`}
+    ${`  const [value, setValue] = useState<any | undefined>("INITIAL VALUE");${writeStateProps(currComponent.useStateCodes)}`}
     ${
-      classBased
-        ? `class ${currentComponent.name} extends Component {`
-        : `const ${currentComponent.name} = (props: any): JSX.Element => {`
-    }
-    ${
-      stateful && !classBased
-        ? `const [value, setValue] = useState<any | undefined>("INITIAL VALUE");${writeStateProps(currentComponent.useStateCodes)}
-        `
-        : ``
-    }
-    ${
-      isRoot  && currentComponent.stateProps.length !== 0
-      ? `const ${currentComponent.name}Context = createContext(${createState(currentComponent.stateProps)});`
+      isRoot  && currComponent.stateProps.length !== 0
+      ? `  const ${currComponent.name}Context = createContext(${createState(currComponent.stateProps)});`
       : ``
-
-    }
-    ${
-      classBased && stateful
-        ? `constructor(props) {
-      super(props);
-      this.state = {}
-      }`
-        : ``
     }
-    ${classBased ? `render(): JSX.Element {` : ``}
-    ${!importReactRouter ?
-    `return (
-      <${currentComponent.name}Context.Provider value="">
-        <div className="${currentComponent.name}" ${formatStyles(currentComponent)}>
+    ${!importReactRouter 
+      ? `  return (
+        <${currComponent.name}Context.Provider value="">
+          <div className="${currComponent.name}" ${formatStyles(currComponent)}>
           ${writeNestedElements(enrichedChildren)}
-        </div>
-      </${currentComponent.name}Context.Provider>  
-    );` : `return (
-      <${currentComponent.name}Context.Provider value="">
-        <Router>
-          <div className="${currentComponent.name}" ${formatStyles(currentComponent)}>
-            ${writeNestedElements(enrichedChildren)}
           </div>
-        </Router>
-      </${currentComponent.name}Context.Provider>  
-    );`}
-    ${`}`}
-    export default ${currentComponent.name};
+        </${currComponent.name}Context.Provider>  
+      );` 
+      : `  return (
+        <${currComponent.name}Context.Provider value="">
+          <Router>
+            <div className="${currComponent.name}" ${formatStyles(currComponent)}>
+              ${`  ` + writeNestedElements(enrichedChildren)}
+            </div>
+          </Router>
+        </${currComponent.name}Context.Provider>  
+      );`}
+    ${`}\n`}
+    export default ${currComponent.name};
     `;
   }
   // next.js component code
@@ -314,7 +308,7 @@ const generateUnformattedCode = (
     import Head from 'next/head'
     ${links ? `import Link from 'next/link'` : ``}
 
-    const ${currentComponent.name} = (props): JSX.Element => {
+    const ${currComponent.name} = (props): JSX.Element => {
 
       const  [value, setValue] = useState<any | undefined>("INITIAL VALUE");
 
@@ -323,18 +317,18 @@ const generateUnformattedCode = (
       ${
         isRoot
           ? `<Head>
-            <title>${currentComponent.name}</title>
+            <title>${currComponent.name}</title>
             </Head>`
           : ``
       }
-      <div className="${currentComponent.name}" style={props.style}>
+      <div className="${currComponent.name}" style={props.style}>
       ${writeNestedElements(enrichedChildren)}
       </div>
       </>
       );
     }
 
-    export default ${currentComponent.name};
+    export default ${currComponent.name};
     `;
   } else {
     // gatsby component code
@@ -345,7 +339,7 @@ const generateUnformattedCode = (
     ${links ? `import { Link } from 'gatsby'` : ``}
    
 
-      const ${currentComponent.name} = (props: any): JSX.Element => {
+      const ${currComponent.name} = (props: any): JSX.Element => {
 
       const[value, setValue] = useState<any | undefined>("INITIAL VALUE");
 
@@ -354,18 +348,18 @@ const generateUnformattedCode = (
         ${
           isRoot
             ? `<head>
-              <title>${currentComponent.name}</title>
+              <title>${currComponent.name}</title>
               </head>`
             : ``
         }
-        <div className="${currentComponent.name}" style={props.style}>
+        <div className="${currComponent.name}" style={props.style}>
         ${writeNestedElements(enrichedChildren)}
         </div>
         </>
         );
       }
 
-      export default ${currentComponent.name};
+      export default ${currComponent.name};
     `;
   }
 };
@@ -390,22 +384,6 @@ const formatCode = (code: string) => {
   }
 };
 
-// generate code based on component hierarchy and then return the rendered code
-const generateCode = (
-  components: Component[],
-  componentId: number,
-  rootComponents: number[],
-  projectType: string,
-  HTMLTypes: HTMLType[]
-) => {
-  const code = generateUnformattedCode(
-    components,
-    componentId,
-    rootComponents,
-    projectType,
-    HTMLTypes
-  );
-  return formatCode(code);
-};
+
 
 export default generateCode;

app/src/tree/TreeChart.tsx

@@ -37,7 +37,7 @@ function TreeChart({ data }) { // data is components from state - passed in from
         i -= 1;
       }
       // if element has a children array and that array has length, recursive call
-      else if ((arr[i].name === 'div' || arr[i].name === 'form' || arr[i].type === 'Component') && arr[i].children.length) {
+      else if ((arr[i].name === 'div' || arr[i].name === 'form' || arr[i].type === 'Component' || arr[i].name === 'LinkTo' || arr[i].name === 'Switch' || arr[i].name === 'Route')  && arr[i].children.length) {
         // if element is a component, replace it with deep clone of latest version (to update with new HTML elements)
         if (arr[i].type === 'Component') arr[i] = cloneDeep(data.find(component => component.name === arr[i].name));
         removeSeparators(arr[i].children);