Merge pull request #10 from oslabs-beta/final-bugs-fix

chrisjtang · web-flow · commit 092d6d333a33 · 2021-11-23T16:09:26.000-08:00
Final Merge, fixed delete bugs and state being replaced.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 ### How to use
 
-- **Sign-in page**: Sign up for an account, sign in via Github, or just continue as a guest. Registered users enjoy additional project-saving functionality.
+- **Sign-in page**: Sign up for an account or just continue as a guest. Registered users enjoy additional project-saving functionality.
 - **Tutorial**: Click ‘Tutorial’ from the Help tab’s dropdown menu (at the top left of the application) to view a tutorial.
 - **Start a project (only after registration)**: Registered users can create a new project and select whether they want their project to be a Next.js, Gatsby.js, or classic React project. Also, registered users can save projects to return to them at a later time.
 - **Add Components**: Create components on the right panel. Components can be associated with a route, or they can be used within other components.
@@ -34,6 +34,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 - **Create Instances on the Canvas**: Each component has its own canvas. Add an element to a component by dragging it onto the canvas. Div components are arbitrarily nestable and useful for complex layouts. Next.js and Gatsby.js projects have Link components to enable client-side navigation to other routes.
 - **Component Tree**: Click on the Component Tree tab next to the Code Preview tab to view the component tree hierarchy.
 - **Update Styling**: Select an element on the canvas to update its basic style attributes on the right panel. As you create new instances and add styling, watch as your code dynamically generates in the code preview in the bottom panel.
+- **Using State in Elements**: As of 9.0.0, you can now select an HTML element on the canvas and then navigate to the customization panel to click a button to pass a variable from state into your element's text or link field.
 - **User Preference Features**: With the click of a button, toggle between light mode and dark mode, depending on your preference.
 - **Export project**: Click the “Export Project’ button to export the project’s application files into a TypeScript file. The exported project is fully functional with Webpack, Express server, routing, etc., and will match what is mocked on the canvas.
 - **Export project with Tests**: Click the "includes tests" checkbox while exporting to include pre-configured Webpack, Jest, and Typescript files along with tests for your project.
@@ -43,11 +44,17 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 - Modernized and cleaner UI, including enhanced dark mode
 - Tutorial has been updated to reflect other modifications
 
- **New with version 8.0.0:**
+ **New with version 9.0.0:**
 
 ![CSSEditor](https://raw.githubusercontent.com/open-source-labs/ReacType/master/resources/export_tests_images/export-new.gif)
 
-### Features
+### 9.0.0 New Features
+- **React Router**: Drag-and-drop LinkTo and Router elements (located below the HTML elements list) to implement fully-functional React Router components into your application to dynamically and quickly render components in the live demo render and in your exported application.
+- **Global State Management**: For the first time in ReacType history, users can utilize
+- **Composite Data Structures in State**: State creation in ReacType can now handle composite data types, which includes arrays, objects, and any amount of nesting of composite data types within other composite data types (i.e. arrays of objects and objects with objects as values).
+- **Additional Improvements with Local State Management**:
+- **Annotations**:
+
 
 - **OAuth via Github**: Sign up with your github accounts.
 - **Live Render Demo**: Live render demo in React using Electron's sandbox environment. Updates in realtime to reflect canvas structure and customization options.
@@ -115,7 +122,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Christian Padilla](https://linkedin.com/in/ChristianEdwardPadilla) [@ChristianEdwardPadilla](https://github.com/ChristianEdwardPadilla)
 
-[Crys Lim] (https://linkedin.com/in/crystallim) [@crlim](https://github.com/crlim)
+[Crystal Lim] (https://linkedin.com/in/crystallim) [@crlim](https://github.com/crlim)
 
 [Danial Reilley](https://linkedin.com/in/daniel-reilley)
 [@dreille](https://github.com/dreille)
diff --git a/app/electron/main.js b/app/electron/main.js
@@ -73,7 +73,7 @@ async function createWindow() {
     webPreferences: {
       zoomFactor: 0.7,
       // enable devtools when in development mode 
-      devTools: isDev,
+      devTools: true,
       // crucial security feature - blocks rendering process from having access to node modules
       nodeIntegration: false,
       // web workers will not have access to node
diff --git a/app/src/components/bottom/UseStateModal.tsx b/app/src/components/bottom/UseStateModal.tsx
@@ -50,18 +50,19 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
             canDeleteState = {false}
             displayObject = {displayObject}
             selectHandler={(table) => {
-              if (statePropsId < 0) setStatePropsId(table.row.id);
               // if object or array => show sub table
               if (table.row.type === "object") {
+                if (statePropsId < 0) setStatePropsId(table.row.id);
                 setStateKey(stateKey + table.row.key + '.');
                 setDisplayObject(table.row.value);
               } else if (table.row.type === "array") {
+                if (statePropsId < 0) setStatePropsId(table.row.id);
                 setStateKey(stateKey + table.row.key)
                 setDisplayObject(table.row.value);
               } else {
                 // if not object or array => update state
                 setDisplayObject(null);
-                updateAttributeWithState(attributeToChange, componentProviderId, statePropsId, table.row, stateKey + table.row.key);
+                updateAttributeWithState(attributeToChange, componentProviderId, statePropsId > 0 ? statePropsId : table.row.id, table.row, stateKey + table.row.key);
                 setStateKey('')
                 setStatePropsId(-1);
                 setOpen(false);
diff --git a/app/src/components/right/TableStateProps.tsx b/app/src/components/right/TableStateProps.tsx
@@ -95,43 +95,11 @@ const TableStateProps = props => {
     }
   }, [state.canvasFocus.componentId]);
 
-  // when we switch between tabs in our modal or focus of our current
-  // component, we need to update the states displayed in our table
-  // we also need to update the table when the state is changed by
-  // deleting and adding component state
-  // useEffect(() => {
-  //   // rows to show are either from current component or from a given provider
-  //   let rows = [];
-  //   if (!props.providerId) {
-  //     const currentId = state.canvasFocus.componentId;
-  //     const currentComponent = state.components[currentId - 1];
-  //     rows = currentComponent.stateProps.slice();
-  //   } else {
-  //     const providerComponent = state.components[props.providerId - 1];
-  //     // changed to get whole object
-  //     if (props.displayObject) {
-  //       const displayObject = props.displayObject;
-  //       // format for DataGrid
-  //       let id = 1;
-  //       for (const key in displayObject) {
-  //         // if key is a number make it a string with brackets aroung number
-  //         rows.push({
-  //           id: id++,
-  //           key: isNaN(key) ? key : '[' + key + ']',
-  //           value: displayObject[key],
-  //           type: typeof displayObject[key]
-  //         });
-  //       }
-  //     } else {
-  //       rows = providerComponent.stateProps.slice();
-  //     }
-  //   }
-  // }, [props.providerId, state]);
 
   // rows to show are either from current component or from a given provider
   let rows = [];
   if (!props.providerId) {
-    const currentId = state.canvasFocus.componentId; 
+    const currentId = state.canvasFocus.componentId;
     const currentComponent = state.components[currentId - 1];
     rows = currentComponent.stateProps.slice();
   } else {
@@ -143,15 +111,16 @@ const TableStateProps = props => {
       let id=1;
       for (const key in displayObject) {
         // if key is a number make it a string with brackets aroung number
-        rows.push({ id: id++, key: ( isNaN(key) ? key : '[' + key + ']' ), value: displayObject[key], type: typeof(displayObject[key])});
+        const newKey = isNaN(key) ? key : '[' + key + ']';
+        const type = Array.isArray(displayObject[key]) ? 'array' : typeof (displayObject[key]);
+        rows.push({ id: id++, key: newKey, value: displayObject[key], type: type});
       }
     } else {
-        rows = providerComponent.stateProps.slice();
+      rows = providerComponent.stateProps.slice();
     }
   }
 
 
-
   return (
     <div className={'state-prop-grid'}>
       <DataGrid
diff --git a/app/src/containers/CustomizationPanel.tsx b/app/src/containers/CustomizationPanel.tsx
@@ -53,6 +53,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const [useContextObj, setUseContextObj] = useState({});
   const [stateUsedObj, setStateUsedObj] = useState({});
 
+
   const resetFields = () => {
     const childrenArray = state.components[0].children;
     let attributes;
@@ -206,70 +207,39 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     return isLinked;
   };
 
-  // function to pass into UseStateModal to use state to update attribute
-//   const updateAttributeWithState = (attributeName, componentProviderId, statePropsId) => {
-//     // get the stateProps of the componentProvider
-//     const currentComponent = state.components[state.canvasFocus.componentId - 1];
-//     const providerComponent = state.components[componentProviderId - 1];
-//     const providerStates = providerComponent.stateProps;
-//     const newInput = providerStates[statePropsId - 1].value;
-//     let newContextObj = {...currentComponent.useContext}; 
-
-//     if(!newContextObj) {
-//       newContextObj = {}; 
-//     }
-
-//     if (!newContextObj[componentProviderId]) {
-//       newContextObj[componentProviderId] = {statesFromProvider : new Set()};
-//     }
-
-//     newContextObj[componentProviderId].statesFromProvider.add(statePropsId); 
-//   }
-    
+
   const updateAttributeWithState = (attributeName, componentProviderId, statePropsId, statePropsRow, stateKey='') => {
     const newInput = statePropsRow.value;
-    
+
     // get the stateProps of the componentProvider
     const currentComponent = state.components[state.canvasFocus.componentId - 1];
-    const providerComponent = state.components[componentProviderId - 1];
-    const providerStates = providerComponent.stateProps;
-    let newContextObj = {...currentComponent.useContext}; 
+    let newContextObj = {...currentComponent.useContext};
 
     if(!newContextObj) {
-      newContextObj = {}; 
+      newContextObj = {};
     }
 
     if (!newContextObj[componentProviderId]) {
       newContextObj[componentProviderId] = {statesFromProvider : new Set()};
     }
 
-    newContextObj[componentProviderId].statesFromProvider.add(statePropsId); 
-
-
+    newContextObj[componentProviderId].statesFromProvider.add(statePropsId);
 
     if (attributeName === 'compText') {
       newContextObj[componentProviderId].compText = statePropsId;
       // update/create stateUsed.compText
-      setStateUsedObj(Object.assign(stateUsedObj, {compText: stateKey}));
+      setStateUsedObj({...stateUsedObj, compText: stateKey, compTextProviderId: componentProviderId, compTextPropsId: statePropsId});
       setCompText(newInput);
-      dispatch({
-        type: 'UPDATE USE CONTEXT',
-        payload: { useContextObj: newContextObj}
-      });
-       // setUseContextObj(newContextObj); 
+      setUseContextObj(newContextObj);
     }
 
     if (attributeName === 'compLink') {
-      newContextObj[componentProviderId].compLink = statePropsId; 
+      newContextObj[componentProviderId].compLink = statePropsId;
 
       // update/create stateUsed.compLink
-      setStateUsedObj(Object.assign(stateUsedObj, {compLink: stateKey}));
+      setStateUsedObj({...stateUsedObj, compLink: stateKey, compLinkProviderId: componentProviderId, compLinkPropsId: statePropsId});
       setCompLink(newInput);
-      dispatch({
-        type: 'UPDATE USE CONTEXT',
-        payload: { useContextObj: newContextObj}
-      });
-      // setUseContextObj(newContextObj);
+      setUseContextObj(newContextObj);
     }
   }
 
@@ -293,11 +263,10 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
       payload: {stateUsedObj: stateUsedObj}
     })
 
-    // console.log("useContextObj to be dispatched", useContextObj); 
-    // dispatch({
-    //   type: 'UPDATE USE CONTEXT',
-    //   payload: { useContextObj: useContextObj}
-    // })
+    dispatch({
+      type: 'UPDATE USE CONTEXT',
+      payload: { useContextObj: useContextObj}
+    })
 
     dispatch({
       type: 'UPDATE CSS',
diff --git a/app/src/helperFunctions/generateCode.ts b/app/src/helperFunctions/generateCode.ts
@@ -109,7 +109,7 @@ const generateUnformattedCode = (
     let styleString;
     for (let i in styleObj) {
       if(i === 'style') {
-        styleString = i + ':' + JSON.stringify(styleObj[i]);
+        styleString = i + '=' + '{' + JSON.stringify(styleObj[i]) + '}';
         formattedStyles.push(styleString);
       }
     }
@@ -143,7 +143,7 @@ const generateUnformattedCode = (
   // function to dynamically generate a complete html (& also other library type) elements
   const elementGenerator = (childElement: object, level: number = 2) => {
     let innerText = '';
-    let activeLink = '';
+    let activeLink = '""';
 
     if (childElement.attributes && childElement.attributes.compText) {
       if (childElement.stateUsed && childElement.stateUsed.compText) {
@@ -253,14 +253,15 @@ const generateUnformattedCode = (
 
     return state;
   }
-  
+
+  // Generate import
   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` ;
+    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)) {
@@ -271,20 +272,9 @@ const generateUnformattedCode = (
       for (let i = 0; i < providerComponent.stateProps.length; i++) {
         if(statesFromProvider.has(providerComponent.stateProps[i].id)) {
           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];
-  //     providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n';
-
-  //     for (const stateId of Object.values(attributesAndStateIds)) {
-  //       context +=
-
           'const ' +
           providerComponent.stateProps[i].key +
-          'Value = ' +
+          ' = ' +
           providerComponent.name.toLowerCase() +
           'Context.' +
           providerComponent.stateProps[i].key +
@@ -310,22 +300,22 @@ const generateUnformattedCode = (
       ? `  const ${currComponent.name}Context = createContext(${createState(currComponent.stateProps)});`
       : ``
     }
-    ${!importReactRouter 
+    ${!importReactRouter
       ? `  return (
         <${currComponent.name}Context.Provider value="">
           <div className="${currComponent.name}" ${formatStyles(currComponent)}>
           \t${writeNestedElements(enrichedChildren)}
           </div>
-        </${currComponent.name}Context.Provider>  
-      );` 
+        </${currComponent.name}Context.Provider>
+      );`
       : `  return (
         <${currComponent.name}Context.Provider value="">
           <Router>
             <div className="${currComponent.name}" ${formatStyles(currComponent)}>
             \t${writeNestedElements(enrichedChildren)}
             </div>
           </Router>
-        </${currComponent.name}Context.Provider>  
+        </${currComponent.name}Context.Provider>
       );`}
     ${`}\n`}
     export default ${currComponent.name};
diff --git a/app/src/helperFunctions/localStorage.ts b/app/src/helperFunctions/localStorage.ts
@@ -6,5 +6,5 @@
 // };
 // export const loadState = () =>
 //   localforage.getItem('state-v1.0.1').then(value => {
-//     // console.log('The value stored in local storage: ', value);
+//     // ('The value stored in local storage: ', value);
 //   });
diff --git a/app/src/reducers/componentReducer.ts b/app/src/reducers/componentReducer.ts
diff --git a/app/src/tree/TreeChart.tsx b/app/src/tree/TreeChart.tsx
diff --git a/package.json b/package.json
