Disable My Project page context menu options for non-owner of project (…

…#1524)
hackforla · Nov 20, 2023 · f6618d0 · f6618d0
1 parent 73abdaa
commit f6618d0
Showing 1 changed file with 66 additions and 48 deletions.
diff --git a/client/src/components/Projects/ProjectContextMenu.js b/client/src/components/Projects/ProjectContextMenu.js
@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useContext } from "react";
+import UserContext from "../../contexts/UserContext";
+import { useState } from "react";
 import PropTypes from "prop-types";
 
 import { createUseStyles } from "react-jss";
@@ -39,11 +41,20 @@ const ProjectContextMenu = ({
   handlePrintPdf,
   handleHide
 }) => {
+  const userContext = useContext(UserContext);
+  const account = userContext.account;
+  const [projectVisibility, SetProjectVisibility] = useState(
+    project.dateHidden
+  );
+  const toggleProjectVisibility = () => {
+    SetProjectVisibility(!projectVisibility);
+  };
+
   const classes = useStyles();
 
   return (
     <ul className={classes.list}>
-      {project.dateSnapshotted ? null : (
+      {project.dateSnapshotted || project.loginId !== account.id ? null : (
         <li
           className={classes.listItem}
           onClick={() => handleSnapshotModalOpen(project)}
@@ -87,52 +98,59 @@ const ProjectContextMenu = ({
         />
         Duplicate
       </li>
-      <li onClick={() => handleHide(project)} className={classes.listItem}>
-        {project.dateHidden ? (
-          <>
-            <FontAwesomeIcon
-              icon={faEyeSlash}
-              className={classes.listItemIcon}
-              alt={`Unhide Project #${project.id} as CSV Icon`}
-            />
-            Unhide
-          </>
-        ) : (
-          <>
-            <FontAwesomeIcon
-              icon={faEye}
-              className={classes.listItemIcon}
-              alt={`Hide Project #${project.id} as CSV Icon`}
-            />
-            Hide from View
-          </>
-        )}
-      </li>
-      <li
-        onClick={() => handleDeleteModalOpen(project)}
-        className={classes.listItem}
-        style={{ borderTop: "1px solid black", color: "red" }}
-      >
-        {project.dateTrashed ? (
-          <>
-            <FontAwesomeIcon
-              icon={faTrash}
-              className={classes.listItemIcon}
-              alt={`Remove Project #${project.id} from Trash Icon`}
-            />
-            Remove from Trash
-          </>
-        ) : (
-          <>
-            <FontAwesomeIcon
-              icon={faTrash}
-              className={classes.listItemIcon}
-              alt={`Move  Project #${project.id} to Trash Icon`}
-            />
-            Move to Trash
-          </>
-        )}
-      </li>
+      {project.loginId !== account.id ? null : (
+        <li
+          onClick={() => toggleProjectVisibility(project)}
+          className={classes.listItem}
+        >
+          {projectVisibility ? (
+            <>
+              <FontAwesomeIcon
+                icon={faEyeSlash}
+                className={classes.listItemIcon}
+                alt={`Unhide Project #${project.id} as CSV Icon`}
+              />
+              Unhide
+            </>
+          ) : (
+            <>
+              <FontAwesomeIcon
+                icon={faEye}
+                className={classes.listItemIcon}
+                alt={`Hide Project #${project.id} as CSV Icon`}
+              />
+              Hide from View
+            </>
+          )}
+        </li>
+      )}
+      {project.loginId !== account.id ? null : (
+        <li
+          onClick={() => handleDeleteModalOpen(project)}
+          className={classes.listItem}
+          style={{ borderTop: "1px solid black", color: "red" }}
+        >
+          {project.dateTrashed ? (
+            <>
+              <FontAwesomeIcon
+                icon={faTrash}
+                className={classes.listItemIcon}
+                alt={`Remove Project #${project.id} from Trash Icon`}
+              />
+              Remove from Trash
+            </>
+          ) : (
+            <>
+              <FontAwesomeIcon
+                icon={faTrash}
+                className={classes.listItemIcon}
+                alt={`Move  Project #${project.id} to Trash Icon`}
+              />
+              Move to Trash
+            </>
+          )}
+        </li>
+      )}
     </ul>
   );
 };