[MERGE-THIS-FIRST] Load data into resume template and fix sync scheme

backend/controllers/resume/resume-controller.js

@@ -6,7 +6,8 @@ const putSection = async (req, res, logger) => {
   logger.info(`PUT /resume/${section_name}`);
 
   const { section } = req.body;
-  console.log(section);
+
+  logger.debug(section);
   const resume = await resumeUtils.getSingletonResume();
   const id = resume._id;
   const updatedResume = await resumeDao.updateSectionById(

frontend/src/components/LeftPanel/LeftPanel.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import NavBar from "./NavBar";
 import Header from "./Header";
 import Basics from "./sections/Basics";
@@ -16,8 +16,12 @@ import {
   volunteerSectionConfig,
   workExperienceSectionConfig,
 } from "../../config/sectionConfig";
+import { useDispatch, useSelector } from "react-redux";
+import { putSectionThunk } from "../../services/resume-thunk";
 
 const LeftPanel = () => {
+  let { resume, resumeLoading } = useSelector((state) => state.resume);
+
   const sectionsList = [
     {
       type: "Basics",
@@ -69,6 +73,35 @@ const LeftPanel = () => {
     },
   ];
 
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!resumeLoading && resume !== null) {
+      const interval = setInterval(() => {
+        let resumeLocalStorage = localStorage.getItem("resume");
+        if (resumeLocalStorage !== JSON.stringify(resume)) {
+          const resumeLocalStorageObject = JSON.parse(resumeLocalStorage);
+
+          Object.keys(resumeLocalStorageObject).map((key) => {
+            if (
+              JSON.stringify(resumeLocalStorageObject[key]) !==
+              JSON.stringify(resume[key])
+            ) {
+              let section_name = key;
+              let section = {};
+              section[key] = resume[key];
+              dispatch(putSectionThunk({ section_name, section }));
+            }
+
+            return null;
+          });
+        }
+      }, 3000);
+
+      return () => clearInterval(interval);
+    }
+  }, [resume, resumeLoading]);
+
   return (
     <div className="w-full h-full flex flex-row">
       <NavBar />

frontend/src/components/LeftPanel/sections/Basics.js

@@ -12,6 +12,10 @@ import {
   getResumeThunk,
   putSectionThunk,
 } from "../../../services/resume-thunk";
+import {
+  getCurrentResume,
+  updateResume,
+} from "../../../reducers/resume-reducer";
 
 const Basics = () => {
   const { imageUploading, imageURL } = useSelector(
@@ -26,17 +30,15 @@ const Basics = () => {
     dispatch(uploadImageThunk(e.target.files[0]));
   };
 
-  const updateInLocalStorage = (key, value) => {
-    if (!resumeLoading && resume !== null) {
-      let resume = JSON.parse(localStorage.getItem("resume"));
-      resume.basics[key] = value;
-      localStorage.setItem("resume", JSON.stringify(resume));
-    }
-  };
-
   const onTextFieldKeyUp = (e) => {
     setBasicsObj({ ...basicsObj, [e.target.id]: e.target.value });
-    updateInLocalStorage(e.target.id, e.target.value);
+    dispatch(
+      updateResume({
+        sectionKeys: ["basics"],
+        key: e.target.id,
+        value: e.target.value,
+      })
+    );
   };
 
   useEffect(() => {
@@ -47,28 +49,6 @@ const Basics = () => {
   useEffect(() => {
     if (!resumeLoading && resume !== null) {
       setBasicsObj(resume.basics);
-      const interval = setInterval(() => {
-        let resumeLocalStorage = localStorage.getItem("resume");
-        if (resumeLocalStorage !== JSON.stringify(resume)) {
-          const resumeLocalStorageObject = JSON.parse(resumeLocalStorage);
-
-          Object.keys(resumeLocalStorageObject).map((key) => {
-            if (
-              JSON.stringify(resumeLocalStorageObject[key]) !==
-              JSON.stringify(resume[key])
-            ) {
-              let section_name = key;
-              let section = {};
-              section[key] = resumeLocalStorageObject[key];
-              dispatch(putSectionThunk({ section_name, section }));
-            }
-
-            return null;
-          });
-        }
-      }, 10000);
-
-      return () => clearInterval(interval);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [resume, resumeLoading]);

frontend/src/components/LeftPanel/sections/Location.js

@@ -1,29 +1,30 @@
 import { Apartment } from "@mui/icons-material";
 import { TextField } from "@mui/material";
 import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { updateResume } from "../../../reducers/resume-reducer";
 
 const Location = () => {
   const { resume, resumeLoading } = useSelector((state) => state.resume);
   let [locationObj, setLocationObj] = useState({});
 
+  const dispatch = useDispatch();
+
   useEffect(() => {
     if (!resumeLoading && resume !== null) {
       setLocationObj(resume.basics.location);
     }
   }, [resume, resumeLoading]);
 
-  const updateInLocalStorage = (key, value) => {
-    if (!resumeLoading && resume !== null) {
-      let resume = JSON.parse(localStorage.getItem("resume"));
-      resume.basics.location[key] = value;
-      localStorage.setItem("resume", JSON.stringify(resume));
-    }
-  };
-
   const onTextFieldKeyUp = (e) => {
     setLocationObj({ ...locationObj, [e.target.id]: e.target.value });
-    updateInLocalStorage(e.target.id, e.target.value);
+    dispatch(
+      updateResume({
+        sectionKeys: ["basics", "location"],
+        key: e.target.id,
+        value: e.target.value,
+      })
+    );
   };
 
   return (

frontend/src/components/LeftPanel/sections/modals/GenericListModal.js

@@ -12,8 +12,12 @@ import {
 import { DatePicker } from "@mui/x-date-pickers";
 import dayjs from "dayjs";
 import React, { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { modes } from "../../constants/modes";
+import {
+  updateResume,
+  updateResumeArray,
+} from "../../../../reducers/resume-reducer";
 
 const GenericModal = ({
   fieldsMap,
@@ -35,6 +39,18 @@ const GenericModal = ({
   let [genericFieldEntryIdxMap, setGenericEntryFieldIdxMap] = useState({});
   let [isEditingFieldEntryIdxMap, setIsEditingFieldEntryIdxMap] = useState({});
 
+  const dispatch = useDispatch();
+
+  const cleanState = () => {
+    setModalEntryObject({});
+    setGenericListMap({});
+    setGenericEntryMap({});
+    setGenericEntryFieldIdxMap({});
+    setIsEditingFieldEntryIdxMap({});
+    setOpenModal(false);
+    setModalMode(modes.ADD);
+  };
+
   // To store the markup for all fields
   let fieldDOM = {};
 
@@ -121,11 +137,27 @@ const GenericModal = ({
       setEntryList([...entryList, { ...modalEntryObject, ...genericListMap }]);
     }
 
-    setOpenModal(false);
-    setModalMode(modes.ADD);
     const finalMap = { ...modalEntryObject, ...genericListMap };
-    updateInLocalStorage(finalMap);
-    setGenericListMap({});
+
+    if (modalMode == modes.EDIT) {
+      console.log(dbField, currentModalIdx);
+      dispatch(
+        updateResume({
+          sectionKeys: dbField,
+          key: currentModalIdx,
+          value: finalMap,
+        })
+      );
+    } else {
+      dispatch(
+        updateResumeArray({
+          sectionKeys: dbField,
+          value: finalMap,
+        })
+      );
+    }
+
+    cleanState();
   };
 
   const getValue = (fieldName) => {
@@ -320,15 +352,7 @@ const GenericModal = ({
 
   return (
     <>
-      <Dialog
-        open={openModal}
-        onClose={() => {
-          setOpenModal(false);
-          setModalMode(modes.ADD);
-          setIsEditingFieldEntryIdxMap({});
-          setGenericEntryFieldIdxMap({});
-        }}
-      >
+      <Dialog open={openModal} onClose={cleanState}>
         <DialogTitle>Add a {fieldName}</DialogTitle>
         <DialogContent>
           {fieldGroups.map((group, idx) => {

frontend/src/components/RightPanel/RightPanel.js

@@ -1,11 +1,8 @@
 import React from "react";
+import Resume from "./resumes/template-1/Resume";
 
 const RightPanel = () => {
-  return (
-    <div className="w-full h-full border-2 border-solid border-emerald-500">
-      Resume Render
-    </div>
-  );
+  return <Resume />;
 };
 
 export default RightPanel;

frontend/src/components/RightPanel/resumes/template-1/Resume.css

@@ -0,0 +1,48 @@
+.resume {
+    text-align: center;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+
+  .left {
+    text-align: left;
+  }
+
+  .no-margin-bottom {
+    margin-bottom: 0;
+  }
+
+  .no-margin-top {
+    margin-top: -10px;
+  }
+
+  .float-left {
+    float: left;
+  }
+
+  .float-right {
+    float: right;
+  }
+
+  .padding-left {
+    padding-left: 20px;
+  }
+
+  .clear {
+    clear: both;
+  }
+
+  .green {
+    color: hsl(159, 83%, 28%);
+  }
+
+  hr {
+    border: none;
+    height: 2px;
+    background-color: black;  /* Modern Browsers */
+  }
+
+  tr {
+    text-align: left;
+  }
+