changed saveProject to update with _id from mongo

Author: dentonwong

app/src/components/right/SaveProjectButton.tsx

@@ -8,8 +8,9 @@ import DialogTitle from '@mui/material/DialogTitle';
 import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 import {useDispatch, useSelector} from 'react-redux'
-import {updateProjectName} from '../../redux/reducers/slice/appStateSlice';
+import {updateProjectName, updateProjectId} from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
+import { State } from '../../interfaces/Interfaces';
 
 export default function FormDialog() {
   const [open, setOpen] = useState(false);
@@ -34,7 +35,7 @@ const dispatch = useDispatch();
       // If errors occur on the backend, the project name still gets updated
 
       dispatch(updateProjectName(projectName))
-      saveProject(projectName, state).then((project) => {console.log(project)})
+      saveProject(projectName, state).then((project: State) => dispatch(updateProjectId(project._id)))//updates the slice with new _id from mongo
       setOpen(false);
     } else {
       setInvalidProjectName(true);

app/src/helperFunctions/projectGetSaveDel.ts

@@ -1,3 +1,5 @@
+import { State } from "../interfaces/Interfaces";
+
 const isDev = process.env.NODE_ENV === 'development';
 const { DEV_PORT, API_BASE_URL } = require('../../../config.js');
 let serverURL = API_BASE_URL;
@@ -31,9 +33,11 @@ export const saveProject = (
   name: String,
   workspace: Object
 ): Promise<Object> => {
+  const newProject = { ...workspace}
+  delete newProject['_id']; //deleting the _id from the current state slice. We don't actually want it in the project object in the mongo db document
   const body = JSON.stringify({
     name,
-    project: { ...workspace, name },
+    project: { ...newProject, name },
     userId: window.localStorage.getItem('ssid'),
     username: window.localStorage.getItem('username'),
     comments: []
@@ -48,7 +52,7 @@ export const saveProject = (
   })
     .then((res) => res.json())
     .then((data) => {
-      return {_id: data._id, ...data.project};
+      return {_id: data._id, ...data.project}; //passing up what is needed for the global appstateslice
     })
     .catch((err) => console.log(`Error saving project ${err}`));
   return project;//returns _id in addition to the project object from the document

app/src/interfaces/Interfaces.ts

@@ -2,6 +2,7 @@ import { DragObjectWithType } from 'react-dnd';
 
 export interface State {
   name: string;
+  _id: string;
   forked: boolean;
   isLoggedIn: boolean;
   components: Component[];

app/src/redux/reducers/slice/appStateSlice.ts

@@ -13,6 +13,7 @@ import manageSeparators from '../../../helperFunctions/manageSeparators';
 
 export const initialState: State = {
   name: '',
+  _id: '',
   forked: false,
   isLoggedIn: false,
   // config: { saveFlag: true, saveTimer: false },
@@ -770,6 +771,10 @@ const appStateSlice = createSlice({
       const projectName = action.payload;
       state.name = projectName;
     },
+    updateProjectId: (state, action) => {
+      const projectId = action.payload; //updates the slice with new _id
+      state._id = projectId;
+    },
     deleteElement: (state, action) => {
       let name: string = '';
       const HTMLTypes: HTMLType[] = [...state.HTMLTypes].filter((el) => {
@@ -1292,6 +1297,7 @@ export const {
   changeProjectType,
   resetState,
   updateProjectName,
+  updateProjectId,
   deleteElement,
   updateAttributes,
   deleteChild,