kjannette/ax3Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more

Browse Source
This commit is contained in:
Kenneth Jannette
2024-01-12 16:42:02 -06:00
parent 59b7a61488
commit fc032da063
3 changed files with 133 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/Components/Case/CaseListPage.js
View File

@@ -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;

27
src/Components/MobileContent.js Normal file
View File

@@ -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;