Merge pull request #50 from uwasystemhealth/i39-view-model-lag

I39 View Modal Lag fix

client/components/Coordinator/EvaluationOverview/Documents/DocumentCard.js

@@ -13,7 +13,7 @@ import DeleteIcon from "@material-ui/icons/Delete";
 
 // CUSTOM COMPONENTS
 import EditModal from "./EditModal.js";
-import AreYouSureButton from "components/Other/AreYouSureButton"
+import AreYouSureButton from "components/Other/AreYouSureButton";
 
 // STYLES
 import { makeStyles } from "@material-ui/core/styles";
@@ -30,20 +30,22 @@ import { services } from "store/feathersClient";
 const styles = { cardTitle, cardLink, cardSubtitle };
 const useStyles = makeStyles(styles);
 
-const DocumentCard = ({ document, course_id }) => {
-
-  const {_id,name,description, link,tags} = document
+const DocumentCard = ({ document, course_id, setCurrentSelectedDocument }) => {
+  const { _id, name, description, link, tags } = document;
   const classes = useStyles();
 
-//   const dateString = createdDate?.toLocaleDateString("en-gb", {
-//     year: "numeric",
-//     month: "short",
-//     day: "numeric",
-//   });
+  //   const dateString = createdDate?.toLocaleDateString("en-gb", {
+  //     year: "numeric",
+  //     month: "short",
+  //     day: "numeric",
+  //   });
+
+  // This is a reviewer view if there is no need for modal interaction
+  const isReviewer = typeof setCurrentSelectedDocument === "undefined";
 
   const handleDelete = () => {
     services["course-evaluation"].patch(course_id, {
-      $pull : {documents: {_id: document._id}}
+      $pull: { documents: { _id: document._id } },
     });
   };
 
@@ -59,9 +61,7 @@ const DocumentCard = ({ document, course_id }) => {
         <GridContainer>
           <GridItem xs={8}>
             <h4 className={classes.cardTitle}>{name}</h4>
-            <p>
-              {description}
-            </p>
+            <p>{description}</p>
             <p>
               URI:{" "}
               <a href={link} className={cardLink}>
@@ -76,12 +76,24 @@ const DocumentCard = ({ document, course_id }) => {
                 View
               </Button>
 
-              <EditModal document={document} course_id={course_id} />
-
-              <AreYouSureButton buttonProps={{color:"white"}} action={handleDelete}>
-                <DeleteIcon />
-                Delete
-              </AreYouSureButton>
+              {!isReviewer && (
+                <>
+                  <Button
+                    color="white"
+                    onClick={() => setCurrentSelectedDocument(document)}
+                  >
+                    <EditIcon />
+                    Edit
+                  </Button>
+                  <AreYouSureButton
+                    buttonProps={{ color: "white" }}
+                    action={handleDelete}
+                  >
+                    <DeleteIcon />
+                    Delete
+                  </AreYouSureButton>
+                </>
+              )}
             </GridContainer>
           </GridItem>
         </GridContainer>

client/components/Coordinator/EvaluationOverview/Documents/EditModal.js

@@ -14,8 +14,8 @@ import CardBody from "components/MaterialKit/Card/CardBody.js";
 import CardHeader from "components/MaterialKit/Card/CardHeader.js";
 import IconButton from "@material-ui/core/IconButton";
 import Close from "@material-ui/icons/Close";
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Check from "@material-ui/icons/Check";
 
@@ -37,7 +37,7 @@ const useStyles = makeStyles({
   ...modalStyle,
 });
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 import { getEOCInfo } from "utils";
 
@@ -73,7 +73,7 @@ const CustomFormField = ({
   />
 );
 
-const ApplyTags = ({ eocs,tags,handleCheck }) => {
+const ApplyTags = ({ eocs, tags, handleCheck }) => {
   const classes = useStyles();
 
   return (
@@ -82,37 +82,44 @@ const ApplyTags = ({ eocs,tags,handleCheck }) => {
       <CardBody>
         <List>
           {eocs.map((numberLabel) => (
-              <DesignedCheckBox
-                onClick={() =>handleCheck(numberLabel)}
-                isChecked={ tags.includes(numberLabel)}
-                label={`EOC ${numberLabel}`}
-              ></DesignedCheckBox>
+            <DesignedCheckBox
+              onClick={() => handleCheck(numberLabel)}
+              isChecked={tags.includes(numberLabel)}
+              label={`EOC ${numberLabel}`}
+            ></DesignedCheckBox>
           ))}
         </List>
       </CardBody>
     </Card>
   );
 };
 
-const EditModal = ({ document, course_id }) => {
+const EditModal = ({ document, course_id, isOpen, setClose }) => {
   const isCreateModal = typeof document === "undefined";
   const classes = useStyles();
-  const [modal, setModal] = useState(false);
-  const [state, setState] = useState({
-    name: (document && document.name) || "",
-    description: (document && document.description) || "",
-    link: (document && document.link) || "",
-    tags: (document && document.tags) || [],
-  });
+  console.log(document);
+  const initialStateModal = {
+    name: document?.name || "",
+    description: document?.description || "",
+    link: document?.link || "",
+    tags: document?.tags || [],
+  };
+
+  const [state, setModalState] = useState(initialStateModal);
+
+    // Rerenders on everytime the document changes
+    useEffect(() => {
+        setModalState(initialStateModal)
+    }, [document])
 
   const handleChange = (event) => {
     const { id, value } = event.target;
     const newState = { ...state, [id]: value };
-    setState(newState);
+    setModalState(newState);
   };
 
   const handleSave = (event) => {
-    setModal(false);
+    setClose();
     // commit the saved data to database
 
     if (isCreateModal) {
@@ -130,18 +137,18 @@ const EditModal = ({ document, course_id }) => {
     }
   };
 
-  const handleCheck = (tag) =>{
-    const tagIndex = state.tags.findIndex(tagInState => tagInState === tag)
-    const tags = state.tags
-    if(tagIndex==-1){ // Tag not in the state
-      tags.push(tag)
-    }
-    else{
-      tags.splice(tagIndex,1) // Pops specific index
+  const handleCheck = (tag) => {
+    const tagIndex = state.tags.findIndex((tagInState) => tagInState === tag);
+    const tags = state.tags;
+    if (tagIndex == -1) {
+      // Tag not in the state
+      tags.push(tag);
+    } else {
+      tags.splice(tagIndex, 1); // Pops specific index
     }
-    const newState = {...state, tags}
-    setState(newState)
-  }
+    const newState = { ...state, tags };
+    setModalState(newState);
+  };
 
   const eocs = getEOCInfo(course_id);
   const generalAndSpecificNumbers = eocs.reduce((accumulator, current) => {
@@ -153,17 +160,10 @@ const EditModal = ({ document, course_id }) => {
 
   return (
     <>
-      <Button
-        color={isCreateModal ? "primary" : "white"}
-        onClick={() => setModal(true)}
-      >
-        <EditIcon />
-        {isCreateModal ? "Add New Document" : "Edit"}
-      </Button>
       <Dialog
-        open={modal}
+        open={isOpen}
         keepMounted
-        onClose={() => setModal(false)}
+        onClose={() => setClose()}
         maxWidth="lg"
         fullWidth
       >
@@ -173,7 +173,7 @@ const EditModal = ({ document, course_id }) => {
             key="close"
             aria-label="Close"
             color="inherit"
-            onClick={() => setModal(false)}
+            onClick={() => setClose()}
           >
             <Close className={classes.modalClose} />
           </IconButton>
@@ -224,15 +224,16 @@ const EditModal = ({ document, course_id }) => {
               </Card>
             </GridItem>
             <GridItem xs={7}>
-              <ApplyTags eocs={generalAndSpecificNumbers} 
-              tags={state.tags}
-              handleCheck={handleCheck}
+              <ApplyTags
+                eocs={generalAndSpecificNumbers}
+                tags={state.tags}
+                handleCheck={handleCheck}
               />
             </GridItem>
           </GridContainer>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setModal(false)}>Cancel</Button>
+          <Button onClick={() => setClose()}>Cancel</Button>
           <Button color="primary" onClick={() => handleSave()}>
             {isCreateModal ? "Create" : "Save"}
           </Button>

client/components/Coordinator/EvaluationOverview/Documents/index.js

@@ -1,6 +1,8 @@
+import EditIcon from "@material-ui/icons/Edit";
 // CORE COMPONENTS
 import GridContainer from "components/MaterialKit/Grid/GridContainer.js";
 import GridItem from "components/MaterialKit/Grid/GridItem.js";
+import Button from "components/MaterialKit/CustomButtons/Button.js";
 
 // CUSTOM COMPONENTS
 import DocumentCard from "components/Coordinator/EvaluationOverview/Documents/DocumentCard.js";
@@ -15,6 +17,8 @@ import { useState, useEffect } from "react";
 const Documents = ({ evaluationID }) => {
   const [documents, setDocuments] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [isNewDocumentModalOpen, setIsNewDocumentModalOpen] = useState(false);
+  const [currentSelectedDocument, setCurrentSelectedDocument] = useState(null);
 
   useEffect(() => {
     services["course-evaluation"].get({
@@ -25,22 +29,42 @@ const Documents = ({ evaluationID }) => {
   const courseEval = useSelector((state) => state["course-evaluation"]);
   const evalData = courseEval?.data;
 
+  const deselectCurrentSelectedDocument = () =>
+    setCurrentSelectedDocument(null);
+  const closeNewDocumentModal = () => setIsNewDocumentModalOpen(false);
+const openNewDocumentModal = () => setIsNewDocumentModalOpen(true);
+
   const documentComponents = evalData?.documents.map((doc) => {
     return (
       <GridItem key={doc._id} xs={4}>
         <DocumentCard
           // handleDelete={handleDelete}
           course_id={evaluationID}
           document={doc}
+          setCurrentSelectedDocument={setCurrentSelectedDocument}
         />
       </GridItem>
     );
   });
 
   return (
     <>
+      <EditModal
+        course_id={evaluationID}
+        isOpen={isNewDocumentModalOpen}
+        setClose={closeNewDocumentModal}
+      />
+      <EditModal
+        course_id={evaluationID}
+        document={currentSelectedDocument}
+        isOpen={Boolean(currentSelectedDocument)}
+        setClose={deselectCurrentSelectedDocument}
+      />
       <GridContainer>{documentComponents}</GridContainer>;
-      <EditModal createModal course_id={evaluationID} />
+      <Button color="primary" onClick={() => openNewDocumentModal()}>
+        <EditIcon />
+        Add New Document
+      </Button>
     </>
   );
 };

client/components/Coordinator/EvaluationOverview/Justifications/ApplyTo.js

@@ -19,7 +19,6 @@ const styles = {
 const useStyles = makeStyles(styles);
 
 const ApplyTo = ({ eocs ,eocInSame,handleCheck}) => {
-    console.log(eocs)
     const classes = useStyles();
 
     return (