Merge pull request #114 from kjannette/split

Split

src/Components/Document/DocumentListPage.js

@@ -1,4 +1,11 @@
-import { useContext, useEffect, useState, useRef } from "react";
+import {
+  useContext,
+  useEffect,
+  useState,
+  useRef,
+  useFocusEffect,
+  useCallback,
+} from "react";
 import { useNavigate } from "react-router-dom";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
@@ -27,11 +34,15 @@ const DocumentListPage = ({ perPage }) => {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDocumentId, setSelectedDocumentId] = useState(null);
   const [allDocs, setAllDocs] = useState(null);
+  const [respDocs, setRespDocs] = useState(null);
+  const [reqDocs, setReqDocs] = 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 [lowerOrder, setLowerOrder] = useState("parentCaseName");
+  const [upperOrder, setUpperOrder] = useState("parentCaseName");
   const appUserId = group ? group.appUserId : null;
   const [isBusy, setIsBusy] = useState(false);
   const [selectedDocumentType, setSelectedDocumentType] = useState();
@@ -69,30 +80,26 @@ const DocumentListPage = ({ perPage }) => {
         ...doc.data(),
         documentId: doc.id,
       }));
-      if (order === "parentCaseName") {
-        data.sort((a, b) => {
-          return a.parentCaseName.toLowerCase() > b.parentCaseName.toLowerCase()
-            ? 1
-            : -1;
-        });
-      } else if (order === "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);
       setAllDocs(data);
+      const temp = allDocs?.filter((doc) => {
+        return doc.docType != "interrogatories-out";
+      });
+      const temp2 = allDocs?.filter((doc) => {
+        return doc.docType === "interrogatories-out";
+      });
+      setRespDocs(temp);
+      setReqDocs(temp2);
     });
     return unsub;
   }
 
-  useEffect(getDocuments, [appUserId, order]);
+  useEffect(getDocuments, [appUserId, order, respDocs, reqDocs]);
 
   async function deleteFromDb(documentId) {
     if (isBusy) {
@@ -186,13 +193,114 @@ const DocumentListPage = ({ perPage }) => {
           <div className="user-name-container">{group.firm}</div>
         </div>
         {allDocs === null ? <div>Loading...</div> : null}
+        <div className="content-container">
+          <div className="document-list-upper-wrapper">
+            <div className="list-upper-left">
+              <div className="doc-list-subhead-container">
+                <div className="doc-list-subhead">Discovery Responses</div>
+              </div>
+            </div>
+            <div className="list-upper-right">
+              <div className="d-flex justify-content-end mb-3">
+                <SelectDropdown
+                  dropDownOptions={dropDownOptions}
+                  titleText="Sort documents"
+                  handleSelect={setUpperOrder}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="document-list-lower-wrapper">
+            {respDocs && respDocs.length > 0 ? (
+              respDocs.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>
+        </div>
+        <div className="content-container">
+          <div className="document-list-upper-wrapper">
+            <div className="list-upper-left">
+              <div className="doc-list-subhead-container">
+                <div className="doc-list-subhead">Discovery Requests</div>
+              </div>
+            </div>
+            <div className="list-upper-right">
+              <div className="d-flex justify-content-end mb-3">
+                <SelectDropdown
+                  dropDownOptions={dropDownOptions}
+                  titleText="Sort documents"
+                  handleSelect={setLowerOrder}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="document-list-lower-wrapper">
+            {reqDocs && reqDocs.length > 0 ? (
+              reqDocs.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>
+        </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 className="content-container">
             {allDocs.length > 0 ? (
               <div className="document-list-upper-wrapper">
                 <div className="list-upper-left">
                   <div className="doc-list-subhead-container">
-                    <div className="doc-list-subhead">Discovery Requests</div>
+                    <div className="doc-list-subhead">Discovery Responses</div>
                   </div>
                 </div>
                 <div className="list-upper-right">
@@ -209,8 +317,8 @@ const DocumentListPage = ({ perPage }) => {
               <></>
             )}
             <div className="document-list-lower-wrapper">
-              {allDocs.length > 0 ? (
-                allDocs
+              {respDocs && respDocs.length > 0 ? (
+                respDocs
                   .slice((page - 1) * perPage, page * perPage)
                   .map((doc, i) => (
                     <DocCard
@@ -274,23 +382,6 @@ const DocumentListPage = ({ perPage }) => {
             ) : 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 />;
-};
-
-export default DocumentListPage;
-
-/*
                   <div className="toggle-outer">
                     <div className="toggle-header">
                       {" "}