From 64eab17924e39a8dc01270aa3ab47c546d9da060 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 12 Jan 2024 17:24:13 -0600
Subject: [PATCH] more

---
 src/Components/Document/DocumentListPage.js | 199 ++++++++++----------
 1 file changed, 103 insertions(+), 96 deletions(-)

diff --git a/src/Components/Document/DocumentListPage.js b/src/Components/Document/DocumentListPage.js
index c050b88..4797e29 100644
--- a/src/Components/Document/DocumentListPage.js
+++ b/src/Components/Document/DocumentListPage.js
@@ -4,6 +4,7 @@ import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
 import { DocCard } from "../../pageElements/Cards";
 import { db } from "../../firebase";
+import MobileContent from "../MobileContent";
 import {
   collection,
   deleteDoc,
@@ -18,6 +19,8 @@ import ConfirmModal from "../Modals/ConfirmModal";
 import "../../styles/doclist-page.scss";
 
 const DocumentListPage = ({ perPage }) => {
+  const size = window.innerWidth < 440;
+  const [isMobile, setIsMobile] = useState(size);
   const navigate = useNavigate();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDocumentId, setSelectedDocumentId] = useState(null);
@@ -164,103 +167,107 @@ const DocumentListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-  console.log("allDocs", allDocs);
-  return (
-    <>
-      <div className="doc-list-header">
-        <h2 className="doc-header-text">Documents</h2>
-        <div className="user-name-container">{group.firm}</div>
-      </div>
-      {allDocs === null ? <div>Loading...</div> : null}
-      {allDocs !== null ? (
-        <div className="dropdown-container">
-          {allDocs.length > 0 ? (
-            <div className="d-flex justify-content-end mb-3">
-              <SelectDropdown
-                dropDownOptions={dropDownOptions}
-                titleText="Sort documents"
-                handleSelect={setOrder}
-              />
-            </div>
-          ) : (
-            <></>
-          )}
-          <div className="document-list-lower-wrapper">
-            {allDocs.length > 0 ? (
-              allDocs
-                .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}
-                    docType={doc.docType}
-                    documentId={doc.documentId}
-                    dateServed={doc.dateServed}
-                    openDocument={openDoc}
-                    confirmDelete={confirmDelete}
-                    handleNavigate={handleNavigate}
-                    displayDeleteButton={true}
-                    responseGenerations={doc.responseGenerations}
-                  />
-                ))
-            ) : (
-              <div className="nodocs-text-container">
-                <p className="nodocs-text">
-                  {" "}
-                  You have not uploaded any documents yet.
-                </p>
-                <p className="nodocs-light-text">To upload a document:</p>
-                <ol>
-                  <li className="nodocs-list-item">
-                    Navigate to the cases view (above link in navigation bar).{" "}
-                  </li>
-                  <li>
-                    {" "}
-                    Click "View Case" to select the case with which your
-                    document will be associated. This will open the Case Detail
-                    view.{" "}
-                  </li>
-                  <li className="nodocs-list-item">
-                    Note: If you have not yet created any cases, you will need
-                    to create one first - click "Create Case" and follow the
-                    prompts.
-                  </li>
-                  <li className="nodocs-list-item">
-                    In the case detail view, click "Upload Case Document" and
-                    select a document from your computer for upload.
-                  </li>
-                  <li className="nodocs-list-item">
-                    Your document will be parsed into a processable form. You
-                    will then be able to generate a response to the document.
-                  </li>
-                </ol>
-              </div>
-            )}
-          </div>
-          {totalPages > 1 ? (
-            <div className="mb-3">
-              <ListPagination
-                page={page}
-                totalPages={totalPages}
-                setPage={setPage}
-              />
-            </div>
-          ) : null}
+
+  const DesktopContent = () => {
+    return (
+      <>
+        <div className="doc-list-header">
+          <h2 className="doc-header-text">Documents</h2>
+          <div className="user-name-container">{group.firm}</div>
         </div>
-      ) : null}
-      {showDeleteModal && selectedDocumentId !== null ? (
-        <ConfirmModal
-          onCancel={handleCancelDelete}
-          onConfirm={handleDeleteDocument}
-          buttonLabelText="Delete"
-          modalText="Confirm that you want to permanently delete this document."
-        />
-      ) : null}
-    </>
-  );
+        {allDocs === null ? <div>Loading...</div> : null}
+        {allDocs !== null ? (
+          <div className="dropdown-container">
+            {allDocs.length > 0 ? (
+              <div className="d-flex justify-content-end mb-3">
+                <SelectDropdown
+                  dropDownOptions={dropDownOptions}
+                  titleText="Sort documents"
+                  handleSelect={setOrder}
+                />
+              </div>
+            ) : (
+              <></>
+            )}
+            <div className="document-list-lower-wrapper">
+              {allDocs.length > 0 ? (
+                allDocs
+                  .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}
+                      docType={doc.docType}
+                      documentId={doc.documentId}
+                      dateServed={doc.dateServed}
+                      openDocument={openDoc}
+                      confirmDelete={confirmDelete}
+                      handleNavigate={handleNavigate}
+                      displayDeleteButton={true}
+                      responseGenerations={doc.responseGenerations}
+                    />
+                  ))
+              ) : (
+                <div className="nodocs-text-container">
+                  <p className="nodocs-text">
+                    {" "}
+                    You have not uploaded any documents yet.
+                  </p>
+                  <p className="nodocs-light-text">To upload a document:</p>
+                  <ol>
+                    <li className="nodocs-list-item">
+                      Navigate to the cases view (above link in navigation bar).{" "}
+                    </li>
+                    <li>
+                      {" "}
+                      Click "View Case" to select the case with which your
+                      document will be associated. This will open the Case
+                      Detail view.{" "}
+                    </li>
+                    <li className="nodocs-list-item">
+                      Note: If you have not yet created any cases, you will need
+                      to create one first - click "Create Case" and follow the
+                      prompts.
+                    </li>
+                    <li className="nodocs-list-item">
+                      In the case detail view, click "Upload Case Document" and
+                      select a document from your computer for upload.
+                    </li>
+                    <li className="nodocs-list-item">
+                      Your document will be parsed into a processable form. You
+                      will then be able to generate a response to the document.
+                    </li>
+                  </ol>
+                </div>
+              )}
+            </div>
+            {totalPages > 1 ? (
+              <div className="mb-3">
+                <ListPagination
+                  page={page}
+                  totalPages={totalPages}
+                  setPage={setPage}
+                />
+              </div>
+            ) : 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;