136 lines
4.1 KiB
JavaScript
136 lines
4.1 KiB
JavaScript
import React, { useEffect, useContext, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { DetailCard } from "../../pageElements/DetailCard.js";
|
|
import Button from "../../pageElements/Button";
|
|
import CreateModal from "../Modals/CreateModal.js";
|
|
import UploadModal from "../Modals/UploadModal.js";
|
|
import { db } from "../../firebase";
|
|
import { useParams } from "react-router-dom";
|
|
import { AppContext } from "../../Hooks/useContext/appContext.js";
|
|
import LoadingSpinner from "../../pageElements/LoadingSpinner";
|
|
import { doc, onSnapshot } from "firebase/firestore";
|
|
|
|
const CaseDetailsPage = () => {
|
|
const { caseId } = useParams();
|
|
const [subCase, setSubCase] = useState(null);
|
|
const navigate = useNavigate();
|
|
const [showUploadModal, setShowUploadModal] = useState();
|
|
const [showCreateModal, setShowCreateModal] = useState();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const { appState } = useContext(AppContext);
|
|
const { group } = appState;
|
|
const appUserId = group ? group.appUserId : null;
|
|
const message =
|
|
"Parsing document. Please be patient, this may take several minutes.";
|
|
|
|
console.log("----------->caseId in caseDetails", caseId);
|
|
const handleNavigate = () => {
|
|
navigate("/documents");
|
|
};
|
|
|
|
const handleBack = () => {
|
|
navigate("/cases");
|
|
};
|
|
|
|
function getCase() {
|
|
const docRef = doc(db, "cases", caseId);
|
|
const unsub = onSnapshot(docRef, (snapshot) => {
|
|
if (snapshot.exists() && snapshot.data().ownerId === appUserId) {
|
|
setSubCase({ ...snapshot.data(), id: snapshot.id });
|
|
} else {
|
|
setSubCase(null);
|
|
}
|
|
});
|
|
return unsub;
|
|
}
|
|
|
|
useEffect(getCase, [caseId, appUserId]);
|
|
|
|
const handleSuccess = () => {
|
|
setIsLoading(true);
|
|
setShowUploadModal(false);
|
|
setTimeout(handleNavigate, 40000);
|
|
};
|
|
|
|
const ButtonContent = () => {
|
|
return (
|
|
<div className="details-button-container">
|
|
<div className="details-butn-wrapper">
|
|
<Button
|
|
onClick={() => setShowCreateModal(true)}
|
|
labelText="Edit"
|
|
className="primary-button"
|
|
/>
|
|
</div>
|
|
<div className="details-button-box">
|
|
<Button
|
|
className="secondary-button back-button"
|
|
onClick={handleBack}
|
|
labelText="Back"
|
|
/>
|
|
<div className="upload-button-box">
|
|
<Button
|
|
className="p-2 mr-2 primary-button"
|
|
onClick={() => setShowUploadModal(true)}
|
|
labelText="Upload Document"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
if (!group) {
|
|
return null;
|
|
}
|
|
|
|
const HeadingContent = () => {
|
|
return (
|
|
<div className="details-heading-container">
|
|
<h3 className="details-heading">Case Details:</h3>
|
|
<div className="details-subhead">
|
|
<h3 className="details-heading2">
|
|
{subCase?.caption} v. {subCase?.captionTwo}
|
|
</h3>
|
|
<div className="pheno-phun">
|
|
<h3 className="details-heading3">Index Number:</h3>
|
|
<h3 className="details-heading4">{subCase?.caseNumber}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const showUp = showUploadModal && subCase !== null ? true : false;
|
|
const showCreate = showCreateModal && subCase !== null ? true : false;
|
|
return (
|
|
<div className="details-container">
|
|
{isLoading ? <LoadingSpinner message={message} /> : null}
|
|
{!isLoading ? <HeadingContent /> : null}
|
|
{!isLoading ? (
|
|
showUp ? (
|
|
<UploadModal
|
|
setShowModal={setShowUploadModal}
|
|
setIsLoading={setIsLoading}
|
|
handleSuccess={handleSuccess}
|
|
caseData={subCase}
|
|
/>
|
|
) : null
|
|
) : null}
|
|
{!isLoading ? (
|
|
showCreate ? (
|
|
<CreateModal setShowModal={setShowCreateModal} caseData={subCase} />
|
|
) : null
|
|
) : null}
|
|
{!isLoading ? (
|
|
subCase !== null ? (
|
|
<DetailCard data={subCase} />
|
|
) : null
|
|
) : null}
|
|
{!isLoading ? <ButtonContent /> : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CaseDetailsPage;
|