first commit
This commit is contained in:
133
src/Components/Case/CaseDetailsPage.js
Normal file
133
src/Components/Case/CaseDetailsPage.js
Normal file
@@ -0,0 +1,133 @@
|
||||
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. This may take several minutes.";
|
||||
|
||||
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;
|
||||
Reference in New Issue
Block a user