more

src/Components/Dashboard/Dashboard.js

@@ -1,6 +1,7 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext, useEffect, useRef } from "react";
 import { CaseCard } from "../../pageElements/Cards.js";
 import { Link, useNavigate } from "react-router-dom";
+import MobileContent from "../MobileContent";
 import {
   ArrowRight,
   Activity,
@@ -16,6 +17,9 @@ import UploadModal from "../Modals/UploadModal.js";
 import Button from "react-bootstrap/Button";
 
 const Dashboard = () => {
+  const size = window.innerWidth < 440;
+  const [isMobile, setIsMobile] = useState(size);
+  const count = useRef(null);
   const navigate = useNavigate();
   const [allCases, setAllCases] = useState(null);
   const [selectedCase, setSelectedCase] = useState(null);
@@ -25,6 +29,18 @@ const Dashboard = () => {
   const { appState } = useContext(AppContext);
   const { group } = appState;
   const appUserId = group ? group.appUserId : null;
+  const isDashboard = true;
+  useEffect(() => {
+    if (count.current == null) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    if (count.current < 3) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    return () => {
+      count.current = 1;
+    };
+  }, []);
 
   function getCases() {
     if (!appUserId) {
@@ -83,6 +99,67 @@ const Dashboard = () => {
     return null;
   }
 
+  const DesktopContent = () => {
+    return allCases !== null ? (
+      <div>
+        <div className="dashboard-filter mb-3">
+          <Typeahead
+            className="flex-grow-1"
+            id="case-search"
+            labelKey="caseNumber"
+            options={allCases}
+            minLength={1}
+            placeholder="Search by Case Number"
+            onChange={(selected) => {
+              let item = null;
+              for (const currentItem of selected) {
+                item = { ...currentItem };
+              }
+              setSelectedCase(item);
+            }}
+          />
+          <Button
+            disabled={selectedCase === null}
+            onClick={() => handleViewClick(selectedCase?.caseId)}
+          >
+            View Case
+          </Button>
+          <Button
+            disabled={selectedCase === null}
+            onClick={() => setShowModal(true)}
+          >
+            Express Document Upload
+          </Button>
+        </div>
+        {allCases.slice(0, 3).map((c, i) => (
+          <CaseCard
+            key={`linkcard-${i}`}
+            caption={c.caption}
+            captionTwo={c.captionTwo}
+            jurisdiction={c.jurisdiction}
+            caseNumber={`Index no. ${c.caseNumber}`}
+            filedDate={c.filedDate}
+            caseId={c.caseId}
+            labelText="View"
+            onClick={handleViewClick}
+          />
+        ))}
+        {allCases?.length > 3 ? (
+          <div className="view-all-link-box mb-3">
+            <div className="view-all-wrapper">
+              <Link className="view-all-link" to="/cases">
+                View All{" "}
+                <span className="arrow-wrapper">
+                  <ArrowRight />
+                </span>
+              </Link>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    ) : null;
+  };
+
   return (
     <>
       <div className="dashboard-header">
@@ -179,65 +256,11 @@ const Dashboard = () => {
           </div>
         </div>
       </div>
-      {allCases === null ? <div>Loading...</div> : null}
-      {allCases !== null ? (
-        <div>
-          <div className="dashboard-filter mb-3">
-            <Typeahead
-              className="flex-grow-1"
-              id="case-search"
-              labelKey="caseNumber"
-              options={allCases}
-              minLength={1}
-              placeholder="Search by Case Number"
-              onChange={(selected) => {
-                let item = null;
-                for (const currentItem of selected) {
-                  item = { ...currentItem };
-                }
-                setSelectedCase(item);
-              }}
-            />
-            <Button
-              disabled={selectedCase === null}
-              onClick={() => handleViewClick(selectedCase?.caseId)}
-            >
-              View Case
-            </Button>
-            <Button
-              disabled={selectedCase === null}
-              onClick={() => setShowModal(true)}
-            >
-              Express Document Upload
-            </Button>
-          </div>
-          {allCases.slice(0, 3).map((c, i) => (
-            <CaseCard
-              key={`linkcard-${i}`}
-              caption={c.caption}
-              captionTwo={c.captionTwo}
-              jurisdiction={c.jurisdiction}
-              caseNumber={`Index no. ${c.caseNumber}`}
-              filedDate={c.filedDate}
-              caseId={c.caseId}
-              labelText="View"
-              onClick={handleViewClick}
-            />
-          ))}
-          {allCases?.length > 3 ? (
-            <div className="view-all-link-box mb-3">
-              <div className="view-all-wrapper">
-                <Link className="view-all-link" to="/cases">
-                  View All{" "}
-                  <span className="arrow-wrapper">
-                    <ArrowRight />
-                  </span>
-                </Link>
-              </div>
-            </div>
-          ) : null}
-        </div>
-      ) : null}
+      {isMobile ? (
+        <MobileContent isDashboard={isDashboard} />
+      ) : (
+        <DesktopContent />
+      )}
       {showModal && selectedCase !== null ? (
         <UploadModal setShowModal={setShowModal} caseData={selectedCase} />
       ) : null}