m

src/Components/Document/DocumentListPage.js

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState, useRef, useCallback } from "react";
+import { useContext, useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
@@ -16,6 +16,7 @@ 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 }) => {
@@ -26,21 +27,16 @@ 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();
   const [showModal, setShowModal] = useState(false);
   const [verbValue, setVerbValue] = useState(1);
-
   const apiUrl =
     process.env.NODE_ENV === "development"
       ? process.env.REACT_APP_API_DEV
@@ -73,31 +69,36 @@ 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, allDocs, respDocs, reqDocs]);
+  useEffect(getDocuments, [appUserId, order]);
 
   async function deleteFromDb(documentId) {
     if (isBusy) {
       return;
     }
+
     setIsBusy(true);
     try {
       const docRef = doc(db, "documents", `${documentId}`);
@@ -130,20 +131,11 @@ const DocumentListPage = ({ perPage }) => {
     }
   }
 
-  const upperDropDownOptions = [
+  const dropDownOptions = [
     { label: "Associated case name a - z", value: "parentCaseName" },
     { label: "Associated case name z - a", value: "parentCaseName2" },
   ];
 
-  const lowerDropDownOptions = [
-    { label: "Associated case name a - z", value: "parentCaseName" },
-    { label: "Associated case name z - a", value: "parentCaseName2" },
-  ];
-
-  const handleUpperSort = () => {
-    console.log("handleUpperSort");
-  };
-
   function handleNavigate(
     documentId,
     responseGenerations,
@@ -190,122 +182,18 @@ const DocumentListPage = ({ perPage }) => {
           <div className="user-name-container">{group.firm}</div>
         </div>
         {allDocs === null ? <div>Loading...</div> : null}
-        <div className="content-container">
-          {respDocs && respDocs.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 Responses</div>
-                </div>
-              </div>
-              <div className="list-upper-right">
-                <div className="d-flex justify-content-end mb-3">
-                  <SelectDropdown
-                    dropDownOptions={upperDropDownOptions}
-                    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">
-          {reqDocs && reqDocs.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>
-              </div>
-              <div className="list-upper-right">
-                <div className="d-flex justify-content-end mb-3">
-                  <SelectDropdown
-                    dropDownOptions={lowerDropDownOptions}
-                    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="toggle-outer">
-                    <div className="doc-list-subhead">Discovery Responses</div>
+                    <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>
                 </div>
                 <div className="list-upper-right">
@@ -322,9 +210,10 @@ export default DocumentListPage;
               <></>
             )}
             <div className="document-list-lower-wrapper">
-              {respDocs && respDocs.length > 0 ? (
+              {allDocs.length > 0 ? (
-                respDocs
+                allDocs
                   .slice((page - 1) * perPage, page * perPage)
+                  .filter((doc) => doc.docType !== "interrogatories-out")
                   .map((doc, i) => (
                     <DocCard
                       key={`doccard-${i}`}
@@ -387,21 +276,18 @@ export default DocumentListPage;
             ) : null}
           </div>
         ) : null}
-                  <div className="toggle-outer">
+        {showDeleteModal && selectedDocumentId !== null ? (
-                    <div className="toggle-header">
+          <ConfirmModal
-                      {" "}
+            onCancel={handleCancelDelete}
-                      <p
+            onConfirm={handleDeleteDocument}
-                        onClick={handleNovos}
+            buttonLabelText="Delete"
-                        href=""
+            modalText="Confirm that you want to permanently delete this document."
-                        className="doclist-toggle-link"
+          />
-                      >
+        ) : null}
-                        Novos
+      </>
-                      </p>
+    );
-                    </div>
+  };
-                    <div className="toggle-box">
+  return isMobile ? <MobileContent /> : <DesktopContent />;
-                      <p className="select-billing-text">Min</p>
+};
-                      <Toggle value={verbValue} onClick={handleToggle} />
+
-                      <p className="select-billing-text">Max</p>
+export default DocumentListPage;
-                    </div>
-                  </div>
-                */