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;
   }
-
+  console.log("window.innerWidth < 440", window.innerWidth < 440);
-  return (
+  const DesktopContent = () => {
-    <>
+    return (
-      <div className="doc-list-header">
+      <>
-        <h2 className="doc-header-text">Active Cases</h2>
+        <div className="doc-list-header">
-        <div className="user-name-container" style={{ marginLeft: "4px" }}>
+          <h2 className="doc-header-text">Active Cases</h2>
-          {group.firm}
+          <div className="user-name-container" style={{ marginLeft: "4px" }}>
+            {group.firm}
+          </div>
         </div>
-      </div>
+        {showModal ? <CreateModal setShowModal={setShowModal} /> : <></>}
-      {showModal ? <CreateModal setShowModal={setShowModal} /> : <></>}
+        {allCases === null ? <div>Loading...</div> : null}
-      {allCases === null ? <div>Loading...</div> : null}
+        {allCases !== null ? (
-      {allCases !== null ? (
+          allCases.length > 0 ? (
-        allCases.length > 0 ? (
+            <>
-          <>
+              <div className="d-flex justify-content-end mb-3">
-            <div className="d-flex justify-content-end mb-3">
+                <SelectDropdown
-              <SelectDropdown
+                  dropDownOptions={dropDownOptions}
-                dropDownOptions={dropDownOptions}
+                  titleText="Sort Cases"
-                titleText="Sort Cases"
+                  handleSelect={setOrder}
-                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}
                 />
               </div>
-            ) : null}
+              <div>
-            {createNewButton()}
+                {allCases
-          </>
+                  .slice((page - 1) * perPage, page * perPage)
-        ) : (
+                  .map((c, i) => (
-          <div className="nodocs-text-container">
+                    <CaseCard
-            <p> You have not created any cases yet.</p>
+                      key={`linkcard-${i}`}
-            <p>
+                      caption={c.caption}
-              To get started, click "Create New Case" and enter case
+                      captionTwo={c.captionTwo}
-              information.
+                      jurisdiction={c.jurisdiction}
-            </p>
+                      filedDate={c.filedDate}
-            {createNewButton()}
+                      caseNumber={`Index no. ${c.caseNumber}`}
-          </div>
+                      caseId={c.caseId}
-        )
+                      labelText="View"
-      ) : null}
+                      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;

src/Components/MobileContent.js

@@ -0,0 +1,27 @@
+import legalTechFlip from "../Assets/Images/legalTechFlip.jpg";
+const MobileContent = ({ isDashboard }) => {
+  const copy = isDashboard
+    ? "hello dash"
+    : "Novodraft is a desktop application. Please login on your desktop device to use this feature";
+
+  return (
+    <>
+      <div className="mobile-content-container">
+        {!isDashboard ? (
+          <>
+            <div className="mobile-divider"></div>
+            <div className="features-top-mobile-img">
+              <img className="features-image-one" src={legalTechFlip} />
+            </div>
+          </>
+        ) : (
+          <></>
+        )}
+        <div className="mobile-info-heading">{copy}</div>
+        <div className="mobile-divider"></div>
+      </div>
+    </>
+  );
+};
+
+export default MobileContent;

src/styles/app.scss

@@ -70,4 +70,33 @@ p {
 /*** Media Queries  **/
 
 @media only screen and (max-width: 430px) {
+  .mobile-content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 18px 2px 0px 2px;
+    padding: 2px 2px;
+    background-color: var(--background-blue);
+    border-radius: 18px;
+  }
+
+  .mobile-divider {
+    height: 8px;
+    width: 88%;
+    margin: 2px 0px 16px 0px;
+    padding: 6px 0px;
+    border-bottom: 1px solid var(--accent-orange-light);
+  }
+
+  .mobile-info-heading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 28px 6px 2px 6px;
+    text-align: justify;
+    font-size: 15px;
+    line-height: 21px;
+  }
 }