more

src/Components/Case/CaseListPage.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useContext, useState } from "react";
+import React, { useEffect, useContext, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { CaseCard } from "../../pageElements/Cards.js";
 import CreateModal from "../Modals/CreateModal.js";
+import MobileContent from "../MobileContent.js";
 import { db } from "../../firebase";
 import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
@@ -10,6 +11,9 @@ import ListPagination from "../../pageElements/ListPagination.js";
 import Button from "../../pageElements/Button";
 
 const CaseListPage = ({ perPage }) => {
+  const size = window.innerWidth < 440;
+  const [isMobile, setIsMobile] = useState(size);
+  const count = useRef(null);
   const navigate = useNavigate();
   const [showModal, setShowModal] = useState(false);
   const [allCases, setAllCases] = useState(null);
@@ -20,6 +24,15 @@ const CaseListPage = ({ perPage }) => {
   const { group } = appState;
   const appUserId = group ? group.appUserId : null;
 
+  useEffect(() => {
+    if (count.current == null) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    return () => {
+      count.current = 1;
+    };
+  }, []);
+
   function getCases() {
     if (!appUserId) {
       setAllCases([]);
@@ -85,68 +98,72 @@ const CaseListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-
-  return (
-    <>
-      <div className="doc-list-header">
-        <h2 className="doc-header-text">Active Cases</h2>
-        <div className="user-name-container" style={{ marginLeft: "4px" }}>
-          {group.firm}
+  console.log("window.innerWidth < 440", window.innerWidth < 440);
+  const DesktopContent = () => {
+    return (
+      <>
+        <div className="doc-list-header">
+          <h2 className="doc-header-text">Active Cases</h2>
+          <div className="user-name-container" style={{ marginLeft: "4px" }}>
+            {group.firm}
+          </div>
         </div>
-      </div>
-      {showModal ? <CreateModal setShowModal={setShowModal} /> : <></>}
-      {allCases === null ? <div>Loading...</div> : null}
-      {allCases !== null ? (
-        allCases.length > 0 ? (
-          <>
-            <div className="d-flex justify-content-end mb-3">
-              <SelectDropdown
-                dropDownOptions={dropDownOptions}
-                titleText="Sort Cases"
-                handleSelect={setOrder}
-              />
-            </div>
-            <div>
-              {allCases
-                .slice((page - 1) * perPage, page * perPage)
-                .map((c, i) => (
-                  <CaseCard
-                    key={`linkcard-${i}`}
-                    caption={c.caption}
-                    captionTwo={c.captionTwo}
-                    jurisdiction={c.jurisdiction}
-                    filedDate={c.filedDate}
-                    caseNumber={`Index no. ${c.caseNumber}`}
-                    caseId={c.caseId}
-                    labelText="View"
-                    onClick={handleView}
-                  />
-                ))}
-            </div>
-            {totalPages > 1 ? (
-              <div className="mb-3">
-                <ListPagination
-                  page={page}
-                  totalPages={totalPages}
-                  setPage={setPage}
+        {showModal ? <CreateModal setShowModal={setShowModal} /> : <></>}
+        {allCases === null ? <div>Loading...</div> : null}
+        {allCases !== null ? (
+          allCases.length > 0 ? (
+            <>
+              <div className="d-flex justify-content-end mb-3">
+                <SelectDropdown
+                  dropDownOptions={dropDownOptions}
+                  titleText="Sort Cases"
+                  handleSelect={setOrder}
                 />
               </div>
-            ) : null}
-            {createNewButton()}
-          </>
-        ) : (
-          <div className="nodocs-text-container">
-            <p> You have not created any cases yet.</p>
-            <p>
-              To get started, click "Create New Case" and enter case
-              information.
-            </p>
-            {createNewButton()}
-          </div>
-        )
-      ) : null}
-    </>
-  );
+              <div>
+                {allCases
+                  .slice((page - 1) * perPage, page * perPage)
+                  .map((c, i) => (
+                    <CaseCard
+                      key={`linkcard-${i}`}
+                      caption={c.caption}
+                      captionTwo={c.captionTwo}
+                      jurisdiction={c.jurisdiction}
+                      filedDate={c.filedDate}
+                      caseNumber={`Index no. ${c.caseNumber}`}
+                      caseId={c.caseId}
+                      labelText="View"
+                      onClick={handleView}
+                    />
+                  ))}
+              </div>
+              {totalPages > 1 ? (
+                <div className="mb-3">
+                  <ListPagination
+                    page={page}
+                    totalPages={totalPages}
+                    setPage={setPage}
+                  />
+                </div>
+              ) : null}
+              {createNewButton()}
+            </>
+          ) : (
+            <div className="nodocs-text-container">
+              <p> You have not created any cases yet.</p>
+              <p>
+                To get started, click "Create New Case" and enter case
+                information.
+              </p>
+              {createNewButton()}
+            </div>
+          )
+        ) : null}
+      </>
+    );
+  };
+
+  return isMobile ? <MobileContent /> : <DesktopContent />;
 };
 
 export default CaseListPage;