From fcc7a6659fe25dac1562abe12ee19ace30eaa557 Mon Sep 17 00:00:00 2001
From: Jonathanko52 <jonathan.ko523@gmail.com>
Date: Wed, 15 Nov 2023 20:23:22 -0800
Subject: [PATCH 1/2] New branch

---
 .../components/Projects/ProjectContextMenu.js | 18 +++-
 .../src/components/Projects/ProjectsPage.js   | 34 +++++++-
 .../Projects/SnapshotProjectModal.js          | 83 +++++++++++++++++++
 client/src/services/project.service.js        |  4 +
 server/app/controllers/project.controller.js  |  4 +-
 server/app/services/project.service.js        |  5 +-
 server/package-lock.json                      |  2 +-
 7 files changed, 142 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/Projects/SnapshotProjectModal.js

diff --git a/client/src/components/Projects/ProjectContextMenu.js b/client/src/components/Projects/ProjectContextMenu.js
index 1e518b61..31651230 100644
--- a/client/src/components/Projects/ProjectContextMenu.js
+++ b/client/src/components/Projects/ProjectContextMenu.js
@@ -21,7 +21,14 @@ const useStyles = createUseStyles({
     margin: 0,
     padding: 0
   },
-  listItem: { display: "flex", flexDirection: "row", padding: "0.5rem" },
+  listItem: {
+    display: "flex",
+    flexDirection: "row",
+    padding: "0.5rem",
+    "&:hover": {
+      cursor: "pointer"
+    }
+  },
   listItemIcon: { marginRight: "0.3rem" }
 });
 
@@ -29,6 +36,7 @@ const ProjectContextMenu = ({
   project,
   handleCopyModalOpen,
   handleDeleteModalOpen,
+  handleSnapshotModalOpen,
   handleDownloadCSV
 }) => {
   const [projectVisibility, SetProjectVisibility] = useState(
@@ -44,7 +52,10 @@ const ProjectContextMenu = ({
   return (
     <ul className={classes.list}>
       {project.dateSnapshotted ? null : (
-        <li className={classes.listItem}>
+        <li
+          className={classes.listItem}
+          onClick={() => handleSnapshotModalOpen(project)}
+        >
           <FontAwesomeIcon
             icon={faCamera}
             className={classes.listItemIcon}
@@ -141,7 +152,8 @@ ProjectContextMenu.propTypes = {
   project: PropTypes.object,
   handleCopyModalOpen: PropTypes.func,
   handleDeleteModalOpen: PropTypes.func,
-  handleDownloadCSV: PropTypes.func
+  handleDownloadCSV: PropTypes.func,
+  handleSnapshotModalOpen: PropTypes.func
 };
 
 export default ProjectContextMenu;
diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js
index e75c0499..24cddc1e 100644
--- a/client/src/components/Projects/ProjectsPage.js
+++ b/client/src/components/Projects/ProjectsPage.js
@@ -20,7 +20,7 @@ import ContentContainerNoSidebar from "../Layout/ContentContainerNoSidebar";
 import useErrorHandler from "../../hooks/useErrorHandler";
 import useProjects from "../../hooks/useGetProjects";
 import * as projectService from "../../services/project.service";
-
+import SnapshotProjectModal from "./SnapshotProjectModal";
 import DeleteProjectModal from "./DeleteProjectModal";
 import CopyProjectModal from "./CopyProjectModal";
 import DownloadProjectModal from "./DownloadProjectModal.js";
@@ -128,6 +128,7 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
   const projects = useProjects(handleError);
   const [orderBy, setOrderBy] = useState("dateCreated");
   const [copyModalOpen, setCopyModalOpen] = useState(false);
+  const [snapshotModalOpen, setSnapshotModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const [downloadModalOpen, setDownloadModalOpen] = useState(false);
   const [selectedProject, setSelectedProject] = useState(null);
@@ -204,6 +205,30 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
     setDeleteModalOpen(false);
   };
 
+  const handleSnapshotModalOpen = project => {
+    setSelectedProject(project);
+    setSnapshotModalOpen(true);
+  };
+
+  const handleSnapshotModalClose = async action => {
+    console.log("SELECTED PROJECT", selectedProject);
+    let newProjectName;
+    const projectFormInputsAsJson = JSON.parse(selectedProject.formInputs);
+    projectFormInputsAsJson.PROJECT_NAME = newProjectName;
+    if (action === "ok") {
+      try {
+        await projectService.snapshot({
+          id: selectedProject.id,
+          name: newProjectName
+        });
+        setSelectedProject(null);
+      } catch (err) {
+        handleError(err);
+      }
+    }
+    setSnapshotModalOpen(false);
+  };
+
   const handleDownloadModalOpen = project => {
     setSelectedProject(project);
     setDownloadModalOpen(true);
@@ -486,6 +511,7 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
                         project={project}
                         handleCopyModalOpen={handleCopyModalOpen}
                         handleDeleteModalOpen={handleDeleteModalOpen}
+                        handleSnapshotModalOpen={handleSnapshotModalOpen}
                         handleDownloadCSV={handleDownloadModalOpen}
                       />
                     </Popup>
@@ -528,6 +554,12 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
             onClose={handleDownloadModalClose}
             selectedProject={selectedProject}
           />
+
+          <SnapshotProjectModal
+            mounted={snapshotModalOpen}
+            onClose={handleSnapshotModalClose}
+            selectedProjectName={selectedProjectName}
+          />
         </>
       )}
     </ContentContainerNoSidebar>
diff --git a/client/src/components/Projects/SnapshotProjectModal.js b/client/src/components/Projects/SnapshotProjectModal.js
new file mode 100644
index 00000000..e12af207
--- /dev/null
+++ b/client/src/components/Projects/SnapshotProjectModal.js
@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { createUseStyles, useTheme } from "react-jss";
+
+import Button from "../Button/Button";
+import { faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import ModalDialog from "../UI/AriaModal/ModalDialog";
+
+const useStyles = createUseStyles(theme => ({
+  buttonFlexBox: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    margin: 0
+  },
+  heading1: theme.typography.heading1,
+  buttonColor: {
+    backgroundColor: "#eaeff2"
+  }
+}));
+
+export default function SnapshotProjectModal({
+  mounted,
+  onClose,
+  selectedProjectName
+}) {
+  const theme = useTheme();
+  const classes = useStyles({ theme });
+  const [snapshotProjectName, setSnapshotProjectName] = useState(
+    `${selectedProjectName}`
+  );
+
+  return (
+    <ModalDialog
+      mounted={mounted}
+      onClose={onClose}
+      initialFocus="#duplicateName"
+    >
+      <div className={classes.heading1} style={{ marginBottom: "1.5rem" }}>
+        <FontAwesomeIcon icon={faCopy} /> Convert &quot;
+        {`${selectedProjectName}`}&quot; Into a Snapshot?
+      </div>
+      <div style={theme.typography.subHeading}>
+        Once converted, this project draft will no longer be in an editable
+        state.
+      </div>
+      <div style={{ margin: "1.5rem 2.5rem 1.5rem 0.75rem" }}>
+        <input
+          placeholder="Name of Duplicated Project"
+          type="text"
+          id="duplicateName"
+          name="duplicateName"
+          value={snapshotProjectName}
+          onChange={e => setSnapshotProjectName(e.target.value)}
+        />
+      </div>
+      <div className={classes.buttonFlexBox}>
+        <Button
+          className={classes.buttonColor}
+          onClick={onClose}
+          variant="contained"
+        >
+          Cancel
+        </Button>
+        <Button
+          className={classes.buttonColor}
+          onClick={() => onClose("ok", snapshotProjectName)}
+          variant="contained"
+        >
+          Done
+        </Button>
+      </div>
+    </ModalDialog>
+  );
+}
+
+SnapshotProjectModal.propTypes = {
+  mounted: PropTypes.bool,
+  onClose: PropTypes.func,
+  selectedProjectName: PropTypes.string
+};
diff --git a/client/src/services/project.service.js b/client/src/services/project.service.js
index 5ac48fbc..4e1b3a3d 100644
--- a/client/src/services/project.service.js
+++ b/client/src/services/project.service.js
@@ -26,6 +26,10 @@ export function del(id) {
   return axios.delete(baseUrl + "/" + id);
 }
 
+export function snapshot(id) {
+  return axios.put(baseUrl + "/snapshot", id);
+}
+
 export function getAllArchivedProjects() {
   try {
     return axios.get(`${baseUrl}/archivedprojects`);
diff --git a/server/app/controllers/project.controller.js b/server/app/controllers/project.controller.js
index 2c428d1b..9c409d53 100644
--- a/server/app/controllers/project.controller.js
+++ b/server/app/controllers/project.controller.js
@@ -104,9 +104,9 @@ const trash = async (req, res) => {
 
 const snapshot = async (req, res) => {
   try {
-    const { id } = req.body;
+    const { id, name } = req.body;
 
-    const result = await projectService.snapshot(id, req.user.id);
+    const result = await projectService.snapshot(id, req.user.id, name);
     if (result === 1) {
       res.sendStatus(403);
     } else {
diff --git a/server/app/services/project.service.js b/server/app/services/project.service.js
index 8d5a1c43..1a10d917 100644
--- a/server/app/services/project.service.js
+++ b/server/app/services/project.service.js
@@ -122,13 +122,16 @@ const trash = async (ids, trash, loginId) => {
   }
 };
 
-const snapshot = async (id, loginId) => {
+const snapshot = async (id, loginId, name) => {
+  console.log("SNAPSHOT", id, loginId, name);
   try {
     await poolConnect;
     const request = pool.request();
 
     request.input("id", id);
     request.input("loginId", loginId);
+    request.input("name", name);
+
     const response = await request.execute("Project_Snapshot");
     return response.returnValue;
   } catch (err) {
diff --git a/server/package-lock.json b/server/package-lock.json
index f087c312..5a3e31e6 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -20,7 +20,7 @@
         "express-pino-logger": "^7.0.0",
         "jsonwebtoken": "^9.0.2",
         "moment": "^2.29.3",
-        "mssql": "8.1",
+        "mssql": "^8.1.0",
         "node-flywaydb": "^3.0.7",
         "path": "^0.12.7"
       },

From 228482b97ee70b4369321606fd1e335315de9bd0 Mon Sep 17 00:00:00 2001
From: Jonathanko52 <jonathan.ko523@gmail.com>
Date: Wed, 15 Nov 2023 20:39:57 -0800
Subject: [PATCH 2/2] Ready for review

---
 client/src/components/Projects/ProjectsPage.js | 6 +-----
 server/app/services/project.service.js         | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js
index 24cddc1e..ac7babef 100644
--- a/client/src/components/Projects/ProjectsPage.js
+++ b/client/src/components/Projects/ProjectsPage.js
@@ -210,11 +210,7 @@ const ProjectsPage = ({ account, contentContainerRef }) => {
     setSnapshotModalOpen(true);
   };
 
-  const handleSnapshotModalClose = async action => {
-    console.log("SELECTED PROJECT", selectedProject);
-    let newProjectName;
-    const projectFormInputsAsJson = JSON.parse(selectedProject.formInputs);
-    projectFormInputsAsJson.PROJECT_NAME = newProjectName;
+  const handleSnapshotModalClose = async (action, newProjectName) => {
     if (action === "ok") {
       try {
         await projectService.snapshot({
diff --git a/server/app/services/project.service.js b/server/app/services/project.service.js
index 1a10d917..6cb0c3bf 100644
--- a/server/app/services/project.service.js
+++ b/server/app/services/project.service.js
@@ -123,7 +123,6 @@ const trash = async (ids, trash, loginId) => {
 };
 
 const snapshot = async (id, loginId, name) => {
-  console.log("SNAPSHOT", id, loginId, name);
   try {
     await poolConnect;
     const request = pool.request();