ax3Client/src/Components/Case/CaseDetailsPage.js

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 ConfirmModal from "../Modals/ConfirmModal.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,
  getDoc,
  updateDoc,
  onSnapshot,
  increment,
} 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 [showConfirmModal, setShowConfirmModal] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [docsAllowed, setDocsAllowed] = useState(null);
  const [docsGenerated, setDocsGenerated] = useState(null);
  const [docTypeUploaded, setDocTypeUploaded] = useState();
  const { appState } = useContext(AppContext);
  const { group } = appState;
  const appUserId = group ? group.appUserId : null;
  const fbUserId = group ? group.fbAuthUid : null;
  const message =
    "Parsing document.  Please be patient, this may take several minutes.";

  const handleNavigate = (docId, caseId) => {
    //documentId, responseGenerations, caseId, documentType
    let documentType = "interrogatories";
    const documentId = docId;
    navigate(`/documents/${documentId}/${documentType}/${caseId}`);
  };

  const handleNavEdit = (documentId, reqType, caseId) => {
    const documentType = reqType;

    navigate(`/reqedit/${documentId}/${documentType}/${caseId}`);
  };

  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]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const docRef = doc(db, "users", fbUserId);
        const response = await getDoc(docRef).then(function (doc) {
          if (doc.exists) {
            const data = doc.data();
            setDocsAllowed(data.docsAllowedPerMonth);
            setDocsGenerated(data.docsGenerated);
            return data;
          } else {
            console.log("No such document.");
          }
        });
      } catch (err) {
        console.error(err);
      }
    };
    fetchData();
  }, [fbUserId]);

  const handleUploadDoc = () => {
    if (docsAllowed - docsGenerated > 0) {
      setShowUploadModal(true);
    } else {
      setShowConfirmModal(true);
    }
  };

  const handleCancelConfirm = () => {
    setShowConfirmModal(false);
  };

  const handleConfirmUpgrade = () => {
    const isUpgrade = true;
    const currentPlan = group?.subscriptionPlan;
    navigate(`/signup/${isUpgrade}/${currentPlan}`);
  };

  async function updateUserAccountDocsGenerated() {
    await updateDoc(doc(db, "users", fbUserId), {
      docsGenerated: increment(1),
    });
  }

  const handleSuccess = (docType, docId) => {
    updateUserAccountDocsGenerated();
    setShowUploadModal(false);
    if (docType === "interrogatories-out") {
      setTimeout(handleNavEdit, 40000, docId, caseId);
    } else {
      setTimeout(handleNavigate, 40000, docId, caseId);
    }
  };

  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={handleUploadDoc}
              labelText="Upload Document"
            />
          </div>
        </div>
      </div>
    );
  };

  if (!group) {
    return null;
  }

  const HeadingContent = () => {
    return (
      <div className="details-heading-container">
        <h3 className="details-heading">Case Information:</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;
  const showConfirm = showConfirmModal && 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 ? (
        showConfirm ? (
          <ConfirmModal
            setShowModal={setShowConfirmModal}
            onCancel={handleCancelConfirm}
            onConfirm={handleConfirmUpgrade}
            modalText="You have used the maximum documents allowed in your current subscription. Upgrade to get more."
            titleText="No documents remaining"
            buttonLabelText="Upgrade"
          />
        ) : null
      ) : null}
      {!isLoading ? (
        subCase !== null ? (
          <DetailCard data={subCase} />
        ) : null
      ) : null}
      {!isLoading ? <ButtonContent /> : null}
    </div>
  );
};

export default CaseDetailsPage;