Merge pull request #116 from kjannette/debug

Debug

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,31 +16,30 @@ 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 [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 [allDocs, setAllDocs] = useState(null);
-  const [respDocs, setRespDocs] = useState(null);
+  const [allResponseDocs, setAllResponseDocs] = useState(null);
-  const [reqDocs, setReqDocs] = useState(null);
+  const [allRequestDocs, setAllRequestDocs] = 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 [order, setOrder] = useState("parentCaseName");
-  const [lowerOrder, setLowerOrder] = useState("parentCaseName");
+  const [order2, setOrder2] = 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
@@ -59,40 +58,85 @@ const DocumentListPage = ({ perPage }) => {
     };
   }, []);
 
-  function getDocuments() {
+  function getRequests() {
     if (!appUserId) {
-      setAllDocs([]);
+      setAllRequestDocs([]);
       return;
     }
     const q = query(
       collection(db, "documents"),
-      where("ownerId", "==", appUserId)
+      where("ownerId", "==", appUserId),
+      where("docType", "==", "interrogatories-out")
     );
     const unsub = onSnapshot(q, (snapshot) => {
       const data = snapshot.docs.map((doc) => ({
         ...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);
+      setAllRequestDocs(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, respDocs, reqDocs]);
+  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]);
 
   async function deleteFromDb(documentId) {
     if (isBusy) {
@@ -111,7 +155,8 @@ const DocumentListPage = ({ perPage }) => {
   }
 
   async function deleteFromStorage() {
-    const selectedDoc = allDocs.filter((doc) => {
+    //have to refactor to account for two diff lists
+    const selectedDoc = allRequestDocs.filter((doc) => {
       return doc.documentId == selectedDocumentId;
     });
 
@@ -131,20 +176,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,68 +226,26 @@ const DocumentListPage = ({ perPage }) => {
           <h2 className="doc-header-text">Documents</h2>
           <div className="user-name-container">{group.firm}</div>
         </div>
-        {allDocs === null ? <div>Loading...</div> : null}
+        {allResponseDocs === null && allRequestDocs === null ? (
-        <div className="content-container">
+          <div>Loading...</div>
-          <div className="document-list-upper-wrapper">
+        ) : null}
-            <div className="list-upper-left">
+        <div className="document-list-upper-wrapper">
-              <div className="doc-list-subhead-container">
+          <div className="list-upper-left">Discovery Request Documents</div>
-                <div className="doc-list-subhead">Discovery Responses</div>
+          <div className="list-upper-right">
-              </div>
+            <div className="d-flex justify-content-end mb-3">
+              <SelectDropdown
+                dropDownOptions={dropDownOptions}
+                titleText="Sort documents"
+                handleSelect={setOrder}
+              />
             </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">
+        <div className="document-list-lower-wrapper">
-          <div className="document-list-upper-wrapper">
+          {allRequestDocs.length > 0 ? (
-            <div className="list-upper-left">
+            allRequestDocs
-              <div className="doc-list-subhead-container">
+              .slice((page - 1) * perPage, page * perPage)
-                <div className="doc-list-subhead">Discovery Requests</div>
+              .map((doc, i) => (
-              </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}
@@ -268,11 +262,47 @@ const DocumentListPage = ({ perPage }) => {
                   responseGenerations={doc.responseGenerations}
                 />
               ))
-            ) : (
+          ) : (
-              <></>
+            <></>
-            )}
+          )}
+        </div>
+        <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}
@@ -290,17 +320,11 @@ const DocumentListPage = ({ perPage }) => {
 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="list-upper-left"></div>
-                  <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
@@ -315,8 +339,8 @@ export default DocumentListPage;
               <></>
             )}
             <div className="document-list-lower-wrapper">
-              {respDocs && respDocs.length > 0 ? (
+              {allDocs.length > 0 ? (
-                respDocs
+                allDocs
                   .slice((page - 1) * perPage, page * perPage)
                   .map((doc, i) => (
                     <DocCard
@@ -380,21 +404,22 @@ export default DocumentListPage;
             ) : null}
           </div>
         ) : null}
+
+
+
+
+
+
+
+
+
+
                   <div className="toggle-outer">
-                    <div className="toggle-header">
+                    <div className="toggle-header"> Response Verbosity</div>
-                      {" "}
-                      <p
-                        onClick={handleNovos}
-                        href=""
-                        className="doclist-toggle-link"
-                      >
-                        Novos
-                      </p>
-                    </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>
-                */
+*/