From cee24a3b38fce0bfadb6dfdef0a6ea825448a6a8 Mon Sep 17 00:00:00 2001
From: Kei Asakawa <77090883+Kaiyooon@users.noreply.github.com>
Date: Wed, 25 May 2022 21:10:43 -0700
Subject: [PATCH] Implemented navigation for edit log button

---
 src/components/MonitorLog/EditLogPopup.jsx    | 159 ++++++++++++++++++
 .../MonitorLog/ReviewSubmitTabPopup.jsx       |  72 ++++----
 src/pages/MonitorLogPage.jsx                  |   6 +-
 3 files changed, 199 insertions(+), 38 deletions(-)
 create mode 100644 src/components/MonitorLog/EditLogPopup.jsx

diff --git a/src/components/MonitorLog/EditLogPopup.jsx b/src/components/MonitorLog/EditLogPopup.jsx
new file mode 100644
index 00000000..8a157255
--- /dev/null
+++ b/src/components/MonitorLog/EditLogPopup.jsx
@@ -0,0 +1,159 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  useDisclosure,
+  Button,
+  RadioGroup,
+  Radio,
+  Textarea,
+  Text,
+  ButtonGroup,
+  useToast,
+} from '@chakra-ui/react';
+import { React, useState } from 'react';
+import { FiEdit2 } from 'react-icons/fi';
+import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
+
+const EditLog = ({ setModalStep, onClose, user }) => {
+  const [selected, setSelected] = useState(null);
+  const navigate = useNavigate();
+  return (
+    <>
+      <ModalHeader>Edit Log</ModalHeader>
+      <ModalBody>
+        <Text>Would you rather...</Text>
+        <RadioGroup
+          value={selected}
+          onChange={val => {
+            setSelected(val);
+          }}
+        >
+          <Radio value="directly">Directly edit the log</Radio>
+          <Radio value="request">Request the surveyor to revise & resubmit the log</Radio>
+        </RadioGroup>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonGroup gap="2">
+          <Button
+            onClick={() => {
+              onClose();
+              setModalStep('editLog');
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            bg="ochBlue"
+            onClick={() => {
+              if (selected === 'request') {
+                setModalStep(selected);
+              } else {
+                navigate(`/edit-log/${user}`);
+              }
+            }}
+            variant="solidNoHover"
+            isDisabled={!selected}
+          >
+            Next
+          </Button>
+        </ButtonGroup>
+      </ModalFooter>
+    </>
+  );
+};
+
+const RequestEdits = ({ setModalStep, onClose }) => {
+  const toast = useToast();
+  const [value, setValue] = useState('');
+  return (
+    <>
+      <ModalHeader>You are requesting edits to this monitor log.</ModalHeader>
+      <ModalBody>
+        <Text>Reason</Text>
+        <Textarea
+          value={value}
+          onChange={e => setValue(e.target.value)}
+          placeholder="Type here..."
+        />
+      </ModalBody>
+      <ModalFooter>
+        <ButtonGroup gap="2">
+          <Button
+            onClick={() => {
+              onClose();
+              setModalStep('editLog');
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            bg="ochBlue"
+            variant="solidNoHover"
+            onClick={() => {
+              onClose();
+              toast({
+                title: <Text>Requested Edits!</Text>,
+                description: <Text>You&apos;ve requested edits to </Text>,
+                status: 'warning',
+              });
+              setModalStep('editLog');
+            }}
+            isDisabled={value === ''}
+          >
+            Send Request
+          </Button>
+        </ButtonGroup>
+      </ModalFooter>
+    </>
+  );
+};
+
+const EditLogPopup = ({ user }) => {
+  const [modalStep, setModalStep] = useState('editLog');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  // useEffect(() => {
+  //   setModalStep('reminderSelect');
+  // });
+
+  const modalContent = {
+    editLog: <EditLog setModalStep={setModalStep} onClose={onClose} user={user} />,
+    request: <RequestEdits setModalStep={setModalStep} onClose={onClose} />,
+  };
+
+  return (
+    <>
+      <Button colorScheme="green" type="submit" onClick={onOpen}>
+        {/* {prefilledData !== undefined ? 'Save' : 'Add'} to Tracker */}
+        Edit Log <FiEdit2 style={{ marginLeft: '4px' }} />
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>{modalContent[modalStep]}</ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+EditLog.propTypes = {
+  setModalStep: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  user: PropTypes.string.isRequired,
+};
+
+RequestEdits.propTypes = {
+  setModalStep: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+EditLogPopup.propTypes = {
+  user: PropTypes.string.isRequired,
+};
+
+export default EditLogPopup;
diff --git a/src/components/MonitorLog/ReviewSubmitTabPopup.jsx b/src/components/MonitorLog/ReviewSubmitTabPopup.jsx
index ae73d2b7..49149af5 100644
--- a/src/components/MonitorLog/ReviewSubmitTabPopup.jsx
+++ b/src/components/MonitorLog/ReviewSubmitTabPopup.jsx
@@ -14,39 +14,36 @@ import {
 } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
 import { FiCheck } from 'react-icons/fi';
-import { React, useState, useEffect } from 'react';
+import { React, useState } from 'react';
 import { Link } from 'react-router-dom';
 import confirmSubmission from '../../assets/confirmSubmission.svg';
 import monitorLogSubmissionComplete from '../../assets/monitorLogSubmissionComplete.svg';
 
 const SubmitSurvey = ({ setModalStep, onClose, submit }) => {
-  console.log('entered');
   return (
     <>
-      <ModalContent>
-        <ModalHeader>Are you sure you want to submit your survey log?</ModalHeader>
-        <ModalBody>
-          <Center>
-            <Image maxH="270px" maxW="300px" src={confirmSubmission} alt="Are you sure?" />
-          </Center>
-        </ModalBody>
-        <ModalFooter>
-          <ButtonGroup gap="2">
-            <Button onClick={() => onClose()}>No</Button>
-            <Button
-              type="submit"
-              colorScheme="green"
-              onClick={() => {
-                submit();
-                setModalStep('submitted');
-              }}
-              variant="solidNoHover"
-            >
-              Yes, Submit My Log
-            </Button>
-          </ButtonGroup>
-        </ModalFooter>
-      </ModalContent>
+      <ModalHeader>Are you sure you want to submit your survey log?</ModalHeader>
+      <ModalBody>
+        <Center>
+          <Image maxH="270px" maxW="300px" src={confirmSubmission} alt="Are you sure?" />
+        </Center>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonGroup gap="2">
+          <Button onClick={() => onClose()}>No</Button>
+          <Button
+            type="submit"
+            colorScheme="green"
+            onClick={() => {
+              submit();
+              setModalStep('submitted');
+            }}
+            variant="solidNoHover"
+          >
+            Yes, Submit My Log
+          </Button>
+        </ButtonGroup>
+      </ModalFooter>
     </>
   );
 };
@@ -54,17 +51,20 @@ const SubmitSurvey = ({ setModalStep, onClose, submit }) => {
 const Submitted = ({ onClose }) => {
   return (
     <>
-      <ModalContent>
-        <ModalBody>
+      <ModalBody>
+        <Center>
           <Text fontSize="2xl">Congratulations! You’ve submitted your monitor log for review.</Text>
-          <Image src={monitorLogSubmissionComplete} alt="Confirmation" />
-        </ModalBody>
-        <ModalFooter>
-          <Link to="/">
-            <Button onClick={onClose}>Close</Button>
-          </Link>
-        </ModalFooter>
-      </ModalContent>
+        </Center>
+        <br />
+        <Center>
+          <Image maxH="326px" maxW="362px" src={monitorLogSubmissionComplete} alt="Confirmation" />
+        </Center>
+      </ModalBody>
+      <ModalFooter>
+        <Link to="/">
+          <Button onClick={onClose}>Close</Button>
+        </Link>
+      </ModalFooter>
     </>
   );
 };
diff --git a/src/pages/MonitorLogPage.jsx b/src/pages/MonitorLogPage.jsx
index 88542acd..96d3a976 100644
--- a/src/pages/MonitorLogPage.jsx
+++ b/src/pages/MonitorLogPage.jsx
@@ -38,6 +38,7 @@ import ListedSpeciesTab from '../components/MonitorLog/ListedSpeciesTab';
 import PredatorsTab from '../components/MonitorLog/PredatorsTab';
 import ReviewSubmitTab from '../components/MonitorLog/ReviewSubmitTab';
 import ReviewSubmitTabPopup from '../components/MonitorLog/ReviewSubmitTabPopup';
+import EditLogPopup from '../components/MonitorLog/EditLogPopup';
 
 const MonitorTabButton = props => {
   // eslint-disable-next-line react/prop-types
@@ -320,7 +321,8 @@ const MonitorLogPage = ({ mode }) => {
                 Return to Top <FiArrowUp style={{ marginLeft: '4px' }} />
               </Button>
               <Spacer />
-              {activeTab !== totalTabs - 1 && (
+              {mode === 'review' && <EditLogPopup user={userData.id} />}
+              {activeTab !== totalTabs - 1 && mode !== 'review' && (
                 <Button
                   colorScheme="cyan"
                   type="submit"
@@ -332,7 +334,7 @@ const MonitorLogPage = ({ mode }) => {
                   Save Changes
                 </Button>
               )}
-              {activeTab === totalTabs - 1 && (
+              {activeTab === totalTabs - 1 && mode !== 'review' && (
                 // <Button colorScheme="green" type="submit" onClick={submitForm}>
                 //   {/* {prefilledData !== undefined ? 'Save' : 'Add'} to Tracker */}
                 //   Submit Log <FiCheck style={{ marginLeft: '4px' }} />