more

src/Components/Document/DocumentListPage.js

@@ -2,7 +2,6 @@ import { useContext, useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
-import { useParams } from "react-router-dom";
 import { DocCard } from "../../pageElements/Cards";
 import { db } from "../../firebase";
 import MobileContent from "../MobileContent";
@@ -17,31 +16,26 @@ import {
 } from "firebase/firestore";
 import ListPagination from "../../pageElements/ListPagination";
 import ConfirmModal from "../Modals/ConfirmModal";
-import Toggle from "../../pageElements/Toggle";
 import "../../styles/doclist-page.scss";
 
 const DocumentListPage = ({ perPage }) => {
   const size = window.innerWidth < 440;
-  const { docId, documentType, caseId } = useParams();
   const [isMobile, setIsMobile] = useState(size);
-  const { appState } = useContext(AppContext);
   const count = useRef(null);
   const navigate = useNavigate();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDocumentId, setSelectedDocumentId] = useState(null);
-  //const [allDocs, setAllDocs] = useState(null);
-  const [allResponseDocs, setAllResponseDocs] = useState(null);
-  const [allRequestDocs, setAllRequestDocs] = useState(null);
+  const [allDocs, setAllDocs] = useState(null);
+  const { appState } = useContext(AppContext);
   const [totalPages, setTotalPages] = useState(1);
   const { group } = appState;
   const [page, setPage] = useState(1);
   const [order, setOrder] = useState("parentCaseName");
-  const [order2, setOrder2] = useState("parentCaseName");
   const appUserId = group ? group.appUserId : null;
+
   const [isBusy, setIsBusy] = useState(false);
   const [selectedDocumentType, setSelectedDocumentType] = useState();
   const [showModal, setShowModal] = useState(false);
-  const [verbValue, setVerbValue] = useState(1);
 
   const apiUrl =
     process.env.NODE_ENV === "development"
@@ -61,52 +55,14 @@ const DocumentListPage = ({ perPage }) => {
     };
   }, []);
 
-  async function generateResponses(docId) {
-    /*
-    if (responsesCreated > 0) {
-      return;
-    }
-*/
-    console.log("docId in generate responses", docId);
-    //const docType = String(documentType);
-    //TODO: remove isRequests var
-    const isRequests = false;
-    const docType = "interrogatories";
-    try {
-      fetch(
-        `${apiUrl}/genResponseFromArray/${docId}/${docType}/${isRequests}`,
-        {
-          method: "GET",
-        }
-      )
-        .then(function (response) {
-          return response.json();
-        })
-        .catch((err) => console.log(err));
-    } catch (err) {
-      console.log("err", err);
-    }
-  }
-
-  useEffect(() => {
-    console.log(
-      "useEffect fired in doc list to gen response here's docId",
-      docId
-    );
-    generateResponses(docId).then((response) => {
-      console.log("response", response);
-    });
-  }, [documentId]);
-
-  function getRequests() {
+  function getDocuments() {
     if (!appUserId) {
-      setAllRequestDocs([]);
+      setAllDocs([]);
       return;
     }
     const q = query(
       collection(db, "documents"),
-      where("ownerId", "==", appUserId),
-      where("docType", "==", "interrogatories-out")
+      where("ownerId", "==", appUserId)
     );
     const unsub = onSnapshot(q, (snapshot) => {
       const data = snapshot.docs.map((doc) => ({
@@ -131,52 +87,12 @@ const DocumentListPage = ({ perPage }) => {
         setPage(pages);
       }
       setTotalPages(pages);
-      setAllRequestDocs(data);
+      setAllDocs(data);
     });
     return unsub;
   }
 
-  function getResponses() {
-    if (!appUserId) {
-      setAllResponseDocs([]);
-      return;
-    }
-    const q = query(
-      collection(db, "documents"),
-      where("ownerId", "==", appUserId),
-      where("docType", "!=", "interrogatories-out")
-    );
-    const unsub = onSnapshot(q, (snapshot) => {
-      const data = snapshot.docs.map((doc) => ({
-        ...doc.data(),
-        documentId: doc.id,
-      }));
-      if (order2 === "parentCaseName") {
-        data.sort((a, b) => {
-          return a.parentCaseName.toLowerCase() > b.parentCaseName.toLowerCase()
-            ? 1
-            : -1;
-        });
-      } else if (order2 === "parentCaseName2") {
-        data.sort((a, b) => {
-          return a.parentCaseName.toLowerCase() < b.parentCaseName.toLowerCase()
-            ? 1
-            : -1;
-        });
-      }
-      const pages = Math.ceil(data.length / perPage);
-      if (page > pages) {
-        setPage(pages);
-      }
-      setTotalPages(pages);
-      setAllResponseDocs(data);
-    });
-    return unsub;
-  }
-
-  useEffect(getRequests, [appUserId, order]);
-
-  useEffect(getResponses, [appUserId]);
+  useEffect(getDocuments, [appUserId, order]);
 
   async function deleteFromDb(documentId) {
     if (isBusy) {
@@ -195,8 +111,7 @@ const DocumentListPage = ({ perPage }) => {
   }
 
   async function deleteFromStorage() {
-    //have to refactor to account for two diff lists
-    const selectedDoc = allRequestDocs.filter((doc) => {
+    const selectedDoc = allDocs.filter((doc) => {
       return doc.documentId == selectedDocumentId;
     });
 
@@ -236,8 +151,6 @@ const DocumentListPage = ({ perPage }) => {
     );
   }
 
-  const handleToggle = (val) => setVerbValue(val);
-
   function handleCancelDelete() {
     if (!isBusy) {
       setShowDeleteModal(false);
@@ -258,7 +171,7 @@ const DocumentListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-
+  console.log("allDocs", allDocs);
   const DesktopContent = () => {
     return (
       <>
@@ -266,122 +179,16 @@ const DocumentListPage = ({ perPage }) => {
           <h2 className="doc-header-text">Documents</h2>
           <div className="user-name-container">{group.firm}</div>
         </div>
-        {allResponseDocs === null && allRequestDocs === null ? (
-          <div>Loading...</div>
-        ) : null}
-        {allRequestDocs != null && allRequestDocs.length > 0 ? (
-          <div className="document-list-upper-wrapper">
-            <div className="list-upper-left">Discovery Request Documents</div>
-            <div className="list-upper-right">
-              <div className="d-flex justify-content-end mb-3">
-                <SelectDropdown
-                  dropDownOptions={dropDownOptions}
-                  titleText="Sort documents"
-                  handleSelect={setOrder}
-                />
-              </div>
-            </div>
-          </div>
-        ) : (
-          <></>
-        )}
-        <div className="document-list-lower-wrapper">
-          {allRequestDocs?.length > 0 ? (
-            allRequestDocs
-              .slice((page - 1) * perPage, page * perPage)
-              .map((doc, i) => (
-                <DocCard
-                  key={`doccard-${i}`}
-                  title={doc.docTitle}
-                  parentCaseNumber={doc.parentCaseNumber}
-                  parentCaseName={doc.parentCaseName}
-                  parentCaseId={doc.parentCaseId}
-                  createdAt={doc.createdAt}
-                  docType={doc.docType}
-                  documentId={doc.documentId}
-                  dateServed={doc.dateServed}
-                  confirmDelete={confirmDelete}
-                  handleNavigate={handleNavigate}
-                  displayDeleteButton={true}
-                  responseGenerations={doc.responseGenerations}
-                />
-              ))
-          ) : (
-            <></>
-          )}
-        </div>
-        {allResponseDocs != null && allResponseDocs.length > 0 ? (
-          <div className="document-list-upper-wrapper">
-            <div className="list-upper-left">Discovery Response Documents</div>
-            <div className="list-upper-right">
-              <div className="d-flex justify-content-end mb-3">
-                <SelectDropdown
-                  dropDownOptions={dropDownOptions}
-                  titleText="Sort documents"
-                  handleSelect={setOrder}
-                />
-              </div>
-            </div>
-          </div>
-        ) : (
-          <></>
-        )}
-        <div className="document-list-lower-wrapper">
-          {allResponseDocs?.length > 0 ? (
-            allResponseDocs
-              .slice((page - 1) * perPage, page * perPage)
-              .map((doc, i) => (
-                <DocCard
-                  key={`doccard-${i}`}
-                  title={doc.docTitle}
-                  parentCaseNumber={doc.parentCaseNumber}
-                  parentCaseName={doc.parentCaseName}
-                  parentCaseId={doc.parentCaseId}
-                  createdAt={doc.createdAt}
-                  docType={doc.docType}
-                  documentId={doc.documentId}
-                  dateServed={doc.dateServed}
-                  confirmDelete={confirmDelete}
-                  handleNavigate={handleNavigate}
-                  displayDeleteButton={true}
-                  responseGenerations={doc.responseGenerations}
-                />
-              ))
-          ) : (
-            <></>
-          )}
-        </div>
-        {showDeleteModal && selectedDocumentId !== null ? (
-          <ConfirmModal
-            onCancel={handleCancelDelete}
-            onConfirm={handleDeleteDocument}
-            buttonLabelText="Delete"
-            modalText="Confirm that you want to permanently delete this document."
-          />
-        ) : null}
-      </>
-    );
-  };
-  return isMobile ? <MobileContent /> : <DesktopContent />;
-};
-
-export default DocumentListPage;
-
-/*
+        {allDocs === null ? <div>Loading...</div> : null}
         {allDocs !== null ? (
-          <div className="content-container">
+          <div className="dropdown-container">
             {allDocs.length > 0 ? (
-              <div className="document-list-upper-wrapper">
-                <div className="list-upper-left"></div>
-                <div className="list-upper-right">
-                  <div className="d-flex justify-content-end mb-3">
-                    <SelectDropdown
-                      dropDownOptions={dropDownOptions}
-                      titleText="Sort documents"
-                      handleSelect={setOrder}
-                    />
-                  </div>
-                </div>
+              <div className="d-flex justify-content-end mb-3">
+                <SelectDropdown
+                  dropDownOptions={dropDownOptions}
+                  titleText="Sort documents"
+                  handleSelect={setOrder}
+                />
               </div>
             ) : (
               <></>
@@ -394,17 +201,17 @@ export default DocumentListPage;
                     <DocCard
                       key={`doccard-${i}`}
                       title={doc.docTitle}
-                      parentCaseNumber={doc.parentCaseNumber}
-                      parentCaseName={doc.parentCaseName}
-                      parentCaseId={doc.parentCaseId}
-                      createdAt={doc.createdAt}
-                      docType={doc.docType}
-                      documentId={doc.documentId}
-                      dateServed={doc.dateServed}
+                      parentCaseNumber={doc?.parentCaseNumber}
+                      parentCaseName={doc?.parentCaseName}
+                      parentCaseId={doc?.parentCaseId}
+                      createdAt={doc?.createdAt}
+                      docType={doc?.docType}
+                      documentId={doc?.documentId}
+                      dateServed={doc?.dateServed}
                       confirmDelete={confirmDelete}
                       handleNavigate={handleNavigate}
                       displayDeleteButton={true}
-                      responseGenerations={doc.responseGenerations}
+                      responseGenerations={doc?.responseGenerations}
                     />
                   ))
               ) : (
@@ -452,13 +259,18 @@ export default DocumentListPage;
             ) : null}
           </div>
         ) : null}
+        {showDeleteModal && selectedDocumentId !== null ? (
+          <ConfirmModal
+            onCancel={handleCancelDelete}
+            onConfirm={handleDeleteDocument}
+            buttonLabelText="Delete"
+            modalText="Confirm that you want to permanently delete this document."
+          />
+        ) : null}
+      </>
+    );
+  };
+  return isMobile ? <MobileContent /> : <DesktopContent />;
+};
 
-                  <div className="toggle-outer">
-                    <div className="toggle-header"> Response Verbosity</div>
-                    <div className="toggle-box">
-                      <p className="select-billing-text">Min</p>
-                      <Toggle value={verbValue} onClick={handleToggle} />
-                      <p className="select-billing-text">Max</p>
-                    </div>
-                  </div>
-*/
+export default DocumentListPage;