more

src/App.js

@@ -14,6 +14,7 @@ import Dashboard from "./Components/Dashboard/Dashboard";
 import Container from "react-bootstrap/Container";
 import CaseListPage from "./Components/Case/CaseListPage";
 import CaseDetailsPage from "./Components/Case/CaseDetailsPage";
+import CaseTypePage from "./Components/Case/CaseTypePage";
 import Footer from "./Components/Footer/Footer";
 import Navbar from "./Components/Navigation/Navbar";
 import AccountPage from "./Components/Account/AccountPage";
@@ -75,6 +76,15 @@ function App() {
               </PrivateRoute>
             }
           />
+          <Route
+            exact
+            path="/casetype/:caseId"
+            element={
+              <PrivateRoute>
+                <CaseTypePage />
+              </PrivateRoute>
+            }
+          />
           <Route
             exact
             path="/casedetails/:caseId"

src/Components/Case/CaseTypePage.js

@@ -1,28 +1,22 @@
 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 CaseTypePage = () => {
   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 [subCase, setSubCase] = useState(null);
-  const message =
+  const [isLoading, setIsLoading] = useState(false);
-    "Parsing document.  Please be patient, this may take several minutes.";
 
+  const appUserId = group ? group.appUserId : null;
+  console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~caseId in case Type page", caseId);
   const handleNavigate = () => {
     navigate("/documents");
   };
@@ -45,34 +39,16 @@ const CaseDetailsPage = () => {
 
   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="Somewhere"
-            labelText="Back"
           />
           <div className="upload-button-box">
-            <Button
+            <Button className="p-2 mr-2 primary-button" labelText="Something" />
-              className="p-2 mr-2 primary-button"
-              onClick={() => setShowUploadModal(true)}
-              labelText="Upload Document"
-            />
           </div>
         </div>
       </div>
@@ -83,52 +59,11 @@ const CaseDetailsPage = () => {
     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">
+    <div className="casetype-container">
-      {isLoading ? <LoadingSpinner message={message} /> : null}
+      <div>Case Type Selection</div>
-      {!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;
+export default CaseTypePage;

src/styles/case-type-page.scss

@@ -0,0 +1,7 @@
+.casetype-container {
+  display: flex;
+  flex-direction: column;
+  margin-right: auto;
+  margin-left: auto;
+  align-items: center;
+}