more

src/Components/Document/DocEditPage.js

@@ -6,13 +6,16 @@ import { Link, useNavigate } from "react-router-dom";
 import EditElement from "../../pageElements/EditElement";
 import { db } from "../../firebase";
 import {
+  collection,
   updateDoc,
   onSnapshot,
   doc,
   getDoc,
+  setDoc,
   increment,
 } from "firebase/firestore";
 import { AppContext } from "../../Hooks/useContext/appContext";
+
 import Button from "../../pageElements/Button";
 import ConfirmModal from "../Modals/ConfirmModal";
 import LoadingSpinner from "../../pageElements/LoadingSpinner";
@@ -36,6 +39,7 @@ const DocEditPage = () => {
   const [showSaveModal, setShowSaveModal] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isReport, setIsReport] = useState(false);
+  const [issueText, setIssueText] = useState("");
   const [responsesCreated, setResponsesCreated] = useState(
     parseInt(responseGenerations)
   );
@@ -511,10 +515,28 @@ const DocEditPage = () => {
     setShowSaveModal(true);
   };
 
+  const handleReport = () => {};
+
   const handleConfirmReport = () => {
     setShowSaveModal(true);
+    setIsReport(true);
   };
 
+  async function reportDoc() {
+    const data = {
+      documentId: documentId,
+      caseId: caseId,
+      appUserId: appUserId,
+      issueDescription: issueText,
+    };
+    try {
+      const reportRef = collection(db, "supportrequests");
+      await setDoc(doc(reportRef, documentId), data);
+    } catch (err) {
+      console.log("Error saving case to db:", err);
+    }
+  }
+
   const onScrollClick = () => {
     const bottom = window.document.scrollingElement.scrollHeight;
     const place = window.scrollY;
@@ -548,7 +570,7 @@ const DocEditPage = () => {
     fetchedCase?.clientPosition == "Defendant"
       ? fetchedCase?.plaintiffParties
       : fetchedCase?.defendantParties;
-  console.log("parsedRogs", parsedRogs);
+
   const editingContent = () => {
     return (
       <>
@@ -625,7 +647,7 @@ const DocEditPage = () => {
             </div>
           </div>
         </div>
-        {showSaveModal && documentId !== null ? (
+        {showSaveModal && !isReport && documentId !== null ? (
           <ConfirmModal
             onCancel={handleCancelSave}
             onConfirm={handleSave}
@@ -637,11 +659,17 @@ const DocEditPage = () => {
         ) : null}
         {showSaveModal && isReport && documentId !== null ? (
           <ConfirmModal
+            isReport={isReport}
             onCancel={handleCancelSave}
-            onConfirm={handleSave}
-            buttonLabelText="Confirm Save"
+            onConfirm={handleReport}
+            buttonLabelText="Report Issue"
+            documentId={documentId}
+            caseId={caseId}
+            appUserId={appUserId}
+            issuetext={issueText}
+            setIssueText={setIssueText}
             modalText={
-              "Are you sure?  This will overrwrite any previously-saved edits."
+              "Please describe the issue.  Other pertinent information will be automatically logged."
             }
           />
         ) : null}

src/Components/Modals/ConfirmModal.js

@@ -1,6 +1,9 @@
+import { useState } from "react";
 import Button from "../../pageElements/Button";
 import Modal from "react-bootstrap/Modal";
+import TextInput from "../../pageElements/TextInput";
 
+import { db } from "../../firebase";
 const ConfirmModal = ({
   onCancel,
   onConfirm,
@@ -8,13 +11,41 @@ const ConfirmModal = ({
   modalText,
   isBusy,
   isReport,
+  appUserId,
+  caseId,
+  documentId,
+  issueText,
+  setIssueText,
+  reportDoc,
 }) => {
+  console.log("isReport", isReport);
+
   return (
     <Modal show="true" onHide={onCancel} size="lg">
       <Modal.Header closeButton>
+        {isReport ? (
+          <Modal.Title>Report issue</Modal.Title>
+        ) : (
           <Modal.Title>Confirmation</Modal.Title>
+        )}
       </Modal.Header>
-      <Modal.Body>{modalText}</Modal.Body>
+      <Modal.Body>
+        <span>{modalText}</span>
+        {isReport ? (
+          <div style={{ marginTop: "16px" }}>
+            <TextInput
+              key={"captionTwo"}
+              name={"captionTwo"}
+              value={issueText}
+              message={"data.captionTwo.message"}
+              onChange={(e) => setIssueText(e.target.value)}
+              label={issueText ? "" : "Issue description"}
+            />
+          </div>
+        ) : (
+          <></>
+        )}
+      </Modal.Body>
       <Modal.Footer>
         <Button
           disabled={isBusy}

src/styles/docedit-page.scss

@@ -360,6 +360,7 @@
 }
 
 .docedit-report-link {
+  font-size: 0.95rem;
   color: red;
 }