Merge pull request #25 from MadinventorZero/projectsave

Projectsave

Author: MadinventorZero

app/src/components/App.tsx

@@ -19,7 +19,8 @@ export const App = (): JSX.Element => {
   } else {
     state.isLoggedIn = false;
   }
-
+  
+  
   // following useEffect runs on first mount
   useEffect(() => {
     // if user is a guest, see if a project exists in localforage and retrieve it
@@ -51,26 +52,46 @@ export const App = (): JSX.Element => {
         } else {
           console.log(
             'No user project found in localforage, setting initial state blank'
-          );
-        }
-      });
-    }
-  }, []);
-
+            );
+          }
+        });
+      }
+      }, []);
+  
+  // Caret Start Updated save cycle     
   useEffect(() => {
-    let userId;
-    if (Cookies.get('ssid')) {
-      userId = Cookies.get('ssid');
-    } else {
-      userId = window.localStorage.getItem('ssid');
+    console.log('Legacy state', state);
+    // provide config properties to legacy projects so new edits can be auto saved
+    if (state.config === undefined) {
+      state.config = {saveFlag:true, saveTimer:false};
+    };
+    console.log('Updated state for legacy projects', state);
+    // New project save configuration to optimize server load and minimize Ajax requests
+    if (state.config.saveFlag) {
+      state.config.saveFlag = false;
+      state.config.saveTimer = true;
+      let userId;
+      if (Cookies.get('ssid')) {
+        userId = Cookies.get('ssid');
+      } else {
+        userId = window.localStorage.getItem('ssid');
+      }
+      if (state.isLoggedIn === false) {
+        localforage.setItem('guestProject', state);
+      } else if (state.name !== '') {
+        saveProject(state.name, state);
+        localforage.setItem(userId, state);
+      }
     }
-    if (state.isLoggedIn === false) {
-      localforage.setItem('guestProject', state);
-    } else if (state.name !== '') {
-      saveProject(state.name, state);
-      localforage.setItem(userId, state);
+    if (state.config.saveTimer) {
+      state.config.saveTimer = false;
+      setTimeout(() => {
+        state.config.saveFlag = true;
+      }, 15000);
     }
-  }, [state]);
+  }, [state])
+  // Caret End
+  
 
   return (
     <div className="app">

app/src/components/bottom/BottomTabs.tsx

@@ -40,7 +40,7 @@ const BottomTabs = () => {
     setTheme(e.target.value);
   };
 
-  console.log("Editor Theme: ", theme);
+  // console.log("Editor Theme: ", theme);
 
   return (
     <div className={classes.root} style={style}>

app/src/components/bottom/CodePreview.tsx

@@ -34,7 +34,6 @@ const CodePreview: React.FC<{
   useEffect(() => {
     setDivHeight(height);
   }, [height])
-
   return (
     <div
     ref={wrapper}

app/src/components/form/Selector.tsx

@@ -6,8 +6,10 @@ import MenuItem from '@material-ui/core/MenuItem';
 
 const FormSelector = (props): JSX.Element => {
   const items = [];
+  let key = 1;
   props.items.forEach(el => {
-    items.push(<MenuItem value={el.value}>{el.text}</MenuItem>);
+    items.push(<MenuItem value={el.value} key={`menu${key}`}>{el.text}</MenuItem>);
+    key++
   })
   return (
     <div className={props.classes.configRow}>

app/src/components/main/Annotation.tsx

@@ -42,7 +42,6 @@ function Annotation({
    */
   const handleAnnoChange = (event) => {
     const { value } = event.target;
-
     if (value === '' || value === undefined) {
       ref.current.style.background = '#3ec1ac';
     } else {
@@ -73,7 +72,7 @@ function Annotation({
       }
     }
     return '';
-  }
+  };
 
   /**
    * This useEffect allows the annotations to remain persistent when changing between root level components on the right panel

app/src/components/right/ComponentPanel.tsx

@@ -148,10 +148,13 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
                     color={'primary'}
                     variant="outlined"
                     className={isThemeLight ? `${classes.inputField} ${classes.lightThemeFontColor}` : `${classes.inputField} ${classes.darkThemeFontColor}`}
-                    InputProps={{ className: classes.input }}
+                    // Caret inputprops and helpertext must be lowercase
+                    inputprops={{ className: classes.input }}
                     value={compName}
-                    error={errorStatus}
-                    helperText={errorStatus ? errorMsg : ''}
+                    // Doesn't accept boolean value needs to be a string
+                    error={errorStatus.toString()}
+                    // Updated
+                    helpertext={errorStatus ? errorMsg : ''}
                     onChange={handleNameInput}
               />
               </div>

app/src/context/initialState.ts

@@ -5,6 +5,9 @@ import HTMLTypes from './HTMLTypes';
 const initialState: State = {
   name: '',
   isLoggedIn: false,
+  // CARET
+  config: { saveFlag: true, saveTimer: false },
+  // END CARET
   components: [
     {
       id: 1,

app/src/helperFunctions/renderChildren.tsx

@@ -18,14 +18,15 @@ const renderChildren = (children: ChildElement[]) => {
     if (name === '') child.name = state.components[typeId - 1].name;
     // A DirectChildComponent is an instance of a top level component
     // This component will render IndirectChild components (div/components rendered inside a child component)
-    // Caret Start Removed style from prop drills so that styling isn't applied to canvas items
+    // Caret Start Removed style from prop drills so that styling isn't applied to canvas items. 
+    // Also added keys & removed an unnecessary div around DirChildNestables that were causing errors.
     if (type === 'Component') {
       return (
         <DirectChildComponent
           childId={childId}
           type={type}
           typeId={typeId}
-          key={'DirChildComp' + childId.toString() + name}
+          key={'DirChildComp' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
           annotations={annotations}
         />
@@ -39,7 +40,7 @@ const renderChildren = (children: ChildElement[]) => {
           childId={childId}
           type={type}
           typeId={typeId}
-          key={'DirChildHTML' + childId.toString() + name}
+          key={'DirChildHTML' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
           annotations={annotations}
         />
@@ -48,17 +49,16 @@ const renderChildren = (children: ChildElement[]) => {
     // Caret Added Orderedlists, Unorderedlists, and Menus, changed lists to nestable because they are nestable.
     // child is a nestable type of HTML element (divs and forms)
     else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16)) {
-      return (        <div>
+      return (       
         <DirectChildHTMLNestable
           childId={childId}
           type={type}
           typeId={typeId}
           children={children}
-          key={'DirChildHTMLNest' + childId.toString() + name}
+          key={'DirChildHTMLNest' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
           annotations={annotations}
         />
-        </div>
       );
     }
     else if (type === 'HTML Element' && typeId === 1000 ) {
@@ -68,7 +68,7 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           children={children}
-          key={'DirChildHTMLNest' + childId.toString() + name}
+          key={'SeparatorChild' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
         />
       );
@@ -82,7 +82,7 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           children={children}
-          key={'RouteLink' + childId.toString() + name}
+          key={'RouteLink' + childId.toString() + name + (Math.random()*1000).toString()}
           name={name}
         />
       );

app/src/interfaces/Interfaces.ts

@@ -6,6 +6,8 @@ export interface State {
   components: Component[];
   rootComponents: number[];
   projectType: string;
+  // Caret
+  config?: {};
   separator: ChildElement;
   canvasFocus: { componentId: number; childId: number | null };
   nextComponentId: number;

package.json

@@ -127,11 +127,6 @@
     "cors": "^2.8.5",
     "d3": "^6.2.0",
     "dotenv": "^8.2.0",
-    "electron": "^9.4.2",
-    "electron-debug": "^3.1.0",
-    "electron-devtools-installer": "^2.2.4",
-    "electron-splashscreen": "^1.0.0",
-    "electron-window-manager": "^1.0.6",
     "enzyme": "^3.4.1",
     "enzyme-adapter-react-16": "^1.2.0",
     "eslint-plugin-react-hooks": "^4.2.0",
@@ -186,6 +181,11 @@
     "csp-html-webpack-plugin": "^4.0.0",
     "css-loader": "^2.1.1",
     "dotenv-webpack": "^5.0.1",
+    "electron": "^9.4.2",
+    "electron-debug": "^3.1.0",
+    "electron-devtools-installer": "^2.2.4",
+    "electron-splashscreen": "^1.0.0",
+    "electron-window-manager": "^1.0.6",
     "electron-builder": "^22.7.0",
     "enzyme-to-json": "^3.5.0",
     "eslint": "^4.19.1",

server/server.js

@@ -16,7 +16,8 @@ const isDev = process.env.NODE_ENV === 'development';
 const isProd = process.env.NODE_ENV === 'production';
 const isTest = process.env.NODE_ENV === 'test';
 
-app.use(express.json());
+app.use(express.json({limit: '100mb'}));
+app.use(express.urlencoded({limit: '100mb', extended: true }))
 app.use(cookieParser());