should merge to different feature branch

Author: andrewjcho84

server/controllers/projectController.js

@@ -14,7 +14,8 @@ projectController.saveProject = (req, res, next) => {
     { name, userId },
     // update or insert the project
     { project },
-    // Options: upsert: true - if none found, inserts new project, if found, updates project
+    // Options:
+    // upsert: true - if none found, inserts new project, if found, updates project
     // new: true - returns updated document not the original one
     { upsert: true, new: true },
     (err, result) => {
@@ -39,7 +40,7 @@ projectController.saveProject = (req, res, next) => {
 projectController.getProjects = (req, res, next) => {
   console.log('Inside projectController.getProjects...');
   const userId = req.cookies.ssid;
-  Projects.find({ userId }, (err, projects) => {
+  Projects.findOne({ userId }, (err, project) => {
     if (err) {
       return next({
         log: `Error in projectController.getProjects: ${err}`,
@@ -49,7 +50,7 @@ projectController.getProjects = (req, res, next) => {
       });
     } else {
       console.log('Successful getProjects');
-      res.locals.projects = projects;
+      res.locals.project = project;
       return next();
     }
   });

server/controllers/sessionController.js

@@ -17,7 +17,7 @@ sessionController.isLoggedIn = (req, res, next) => {
       // no session found, redirect to signup page
     } else if (!session) {
       console.log('No session found, redirecting to signup page');
-      return res.redirect('/signup');
+      return res.redirect('/');
     } else {
       // session found, move onto next middleware
       console.log('Session found, moving onto next middleware');

server/models/reactypeModels.js

@@ -52,8 +52,8 @@ const sessionSchema = new Schema({
 });
 
 const projectSchema = new Schema({
-  name: { type: String, required: true },
-  project: Object,
+  name: String,
+  project: { type: Object, required: true },
   userId: {
     type: Schema.Types.ObjectId,
     ref: 'Users'

server/server.js

@@ -81,7 +81,7 @@ app.get(
   sessionController.isLoggedIn,
   projectController.getProjects,
   (req, res) => {
-    return res.status(200).json(res.locals.projects);
+    return res.status(200).json(res.locals.project);
   }
 );
 

src/components/AppNew.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useReducer } from 'react';
+import React, { useState, useReducer, useEffect } from 'react';
 import '../public/styles/style.css';
 import '../public/styles/styleNew.css';
 import { DndProvider } from 'react-dnd';
@@ -7,12 +7,41 @@ import AppContainer from '../containers/AppContainer';
 import { stateContext } from '../context/context';
 import initialState from '../context/initialState';
 import reducer from '../reducers/componentReducerNew';
+import { getProjects } from '../helperFunctions/projectGetSave';
+import { saveProject } from '../helperFunctions/projectGetSave';
+import { loadInitData } from '../actions/actionCreators';
 // import { Context, State } from '../interfaces/InterfacesNew';
 
 // Intermediary component to wrap main App component with higher order provider components
 export const App = (): JSX.Element => {
   // const [context, setContext] = useState(initialState);
+  //let initialStateLoaded = false;
+  // retrieves user's project (if it exists) from DB on component load
   const [state, dispatch] = useReducer(reducer, initialState);
+
+  // gets projects from DB for current user on mount
+  useEffect(() => {
+    // getProjects returns a promise which is thenable
+    getProjects().then(project => {
+      if (project) {
+        // if user has projects we run a dispatch to update state with received project
+        dispatch({
+          type: 'SET INITIAL STATE',
+          payload: project
+        });
+      }
+    });
+  }, []);
+
+  // saves project to DB whenever there are changes to the state via this canvas component
+  useEffect(() => {
+    console.log('useEffect in CanvasNew ran');
+    // setTimeout is necessary so the saveProjects method does not fire and save an empty project before the initial getProjects in AppNew
+    setTimeout(() => {
+      saveProject(state);
+    }, 1000);
+  }, [state]);
+
   return (
     <div className="app">
       <DndProvider backend={HTML5Backend}>

src/helperFunctions/projectGetSave.ts

@@ -0,0 +1,34 @@
+export const getProjects = (): Promise<Object> => {
+  console.log("Loading user's projects...");
+  const project = fetch('https://localhost:8080/getProjects', {
+    credentials: 'include'
+  })
+    .then(res => res.json())
+    .then(data => {
+      console.log("User's project is", data.project);
+      return data.project;
+    })
+    .catch(err => console.log(`Error getting project ${err}`));
+  return project;
+};
+
+export const saveProject = (workspace: Object): Promise<Object> => {
+  console.log("Saving user's project...");
+
+  const body = JSON.stringify({ name: 'Andrew project', project: workspace });
+  const project = fetch('https://localhost:8080/saveProject', {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    credentials: 'include',
+    body
+  })
+    .then(res => res.json())
+    .then(data => {
+      console.log('Saved project is', data.project);
+      return data.project;
+    })
+    .catch(err => console.log(`Error saving project ${err}`));
+  return project;
+};

src/reducers/componentReducerNew.ts

@@ -233,6 +233,9 @@ const reducer = (state: State, action: Action) => {
       const child = { ...directParent.children[childIndexValue] };
       directParent.children.splice(childIndexValue, 1);
     }
+    case 'SET INITIAL STATE': {
+      return { ...action.payload };
+    }
 
     default:
       return state;