[#383] Handle load case detail in edit case page

frontend/src/pages/cases/Case.js

@@ -1,11 +1,66 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { Spin } from "antd";
 import { CaseWrapper } from "./layout";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
+import { api } from "../../lib";
+import { CurrentCaseState } from "./store";
 
 const Case = () => {
+  const navigate = useNavigate();
   const { caseId, stepId } = useParams();
 
-  return <CaseWrapper stepId={stepId}>Case</CaseWrapper>;
+  const [loading, setLoading] = useState(true);
+  const currentCase = CurrentCaseState.useState((s) => s);
+
+  const page = (key) => {
+    switch (parseInt(key)) {
+      case 1:
+        return <>Step 1 {currentCase.name}</>;
+      case 2:
+        return <>Step 2</>;
+      case 3:
+        return <>Step 3</>;
+      case 4:
+        return <>Step 4</>;
+      case 5:
+        return <>Step 5</>;
+      default:
+        return navigate("/not-found");
+    }
+  };
+
+  useEffect(() => {
+    if (caseId && !currentCase.id) {
+      // prevent fetch the data when it's already defined
+      api
+        .get(`case/${caseId}`)
+        .then((res) => {
+          const { data } = res;
+          CurrentCaseState.update((s) => ({ ...s, ...data }));
+        })
+        .catch((e) => {
+          console.error("Error fetching case data", e);
+          navigate("/not-found");
+        })
+        .finally(() => {
+          setTimeout(() => {
+            setLoading(false);
+          }, 100);
+        });
+    }
+  }, [caseId, currentCase, navigate]);
+
+  return (
+    <CaseWrapper caseId={caseId} stepId={stepId}>
+      {loading ? (
+        <div className="loading-container">
+          <Spin />
+        </div>
+      ) : (
+        page(stepId)
+      )}
+    </CaseWrapper>
+  );
 };
 
 export default Case;

frontend/src/pages/cases/layout/CaseWrapper.js

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React from "react";
 import "./case-wrapper.scss";
+import { useNavigate } from "react-router-dom";
 import { Row, Col, Steps } from "antd";
 import { ContentLayout } from "../../../components/layout";
 
@@ -32,24 +33,25 @@ const sidebarItems = [
   },
 ];
 
-const CaseSidebar = ({ stepId }) => {
-  const [currentStep, setCurrentStep] = useState(stepId - 1);
+const CaseSidebar = ({ stepId, caseId }) => {
+  const navigate = useNavigate();
+
   return (
     <Steps
       direction="vertical"
       items={sidebarItems}
       className="case-step-wrapper"
-      onChange={(val) => setCurrentStep(val)}
-      current={currentStep}
+      onChange={(val) => navigate(`/case/${caseId}/${val + 1}`)}
+      current={stepId - 1}
     />
   );
 };
 
-const CaseWrapper = ({ children, stepId }) => {
+const CaseWrapper = ({ children, stepId, caseId }) => {
   return (
     <Row id="case-detail" className="case-container">
       <Col span={6} className="case-sidebar-container">
-        <CaseSidebar stepId={stepId} />
+        <CaseSidebar stepId={stepId} caseId={caseId} />
       </Col>
       <Col span={18} className="case-content-container">
         <ContentLayout