[#391] Fetch questions on wrapper

frontend/src/pages/cases/Case.js

@@ -2,12 +2,13 @@ import React, { useState, useEffect, useMemo } from "react";
 import { Spin, Tabs, Row, Col } from "antd";
 import { CaseWrapper } from "./layout";
 import { useParams, useNavigate } from "react-router-dom";
-import { api } from "../../lib";
+import { api, flatten } from "../../lib";
 import {
   CurrentCaseState,
   stepPath,
   CaseUIState,
   PrevCaseState,
+  CaseVisualState,
 } from "./store";
 import {
   SetIncomeTarget,
@@ -16,16 +17,39 @@ import {
   AssessImpactMitigationStrategies,
   ClosingGap,
 } from "./steps";
-import { EnterIncomeDataVisual } from "./visuals";
+import { EnterIncomeDataVisual } from "./visualizations";
 import "./steps/steps.scss";
 import { isEmpty } from "lodash";
 
+const commodityOrder = ["focus", "secondary", "tertiary", "diversified"];
+
 const Loading = () => (
   <div className="loading-container">
     <Spin />
   </div>
 );
 
+const addLevelIntoQuestions = ({ questions, level = 0 }) => {
+  return questions.map((q) => {
+    if (q.childrens.length) {
+      q["childrens"] = addLevelIntoQuestions({
+        questions: q.childrens,
+        level: level + 1,
+      });
+    }
+    if (!q.parent) {
+      return {
+        ...q,
+        level: 0,
+      };
+    }
+    return {
+      ...q,
+      level: level,
+    };
+  });
+};
+
 const renderPage = (key, navigate) => {
   switch (key) {
     case stepPath.step1.label:
@@ -153,6 +177,7 @@ const Case = () => {
     });
   };
 
+  // Fetch case details
   useEffect(() => {
     if (caseId && currentCase.id !== parseInt(caseId)) {
       setLoading(true);
@@ -176,6 +201,66 @@ const Case = () => {
     }
   }, [caseId, currentCase.id, navigate]);
 
+  // Fetch questions for income data entry
+  useEffect(() => {
+    if (currentCase?.id && currentCase?.case_commodities?.length) {
+      const reorderedCaseCommodities = commodityOrder
+        .map((co) => {
+          const findCommodity = currentCase.case_commodities.find(
+            (cc) => cc.commodity_type === co
+          );
+          return findCommodity;
+        })
+        .filter((x) => x);
+
+      api.get(`/questions/${currentCase.id}`).then((res) => {
+        const { data } = res;
+        const incomeDataDriversTmp = [];
+        const diversifiedGroupTmp = [];
+        // regroup the questions to follow new design format
+        const questionGroupsTmp = reorderedCaseCommodities.map((cc) => {
+          const tmp = data.find((d) => d.commodity_id === cc.commodity);
+          tmp["currency"] = currentCase.currency;
+          tmp["questions"] = addLevelIntoQuestions({
+            questions: tmp.questions,
+          });
+          if (cc.commodity_type === "focus") {
+            incomeDataDriversTmp.push({
+              groupName: "Primary Commodity",
+              questionGroups: [{ ...cc, ...tmp }],
+            });
+          } else {
+            diversifiedGroupTmp.push({ ...cc, ...tmp });
+          }
+          return { ...cc, ...tmp };
+        });
+        // add diversified group
+        incomeDataDriversTmp.push({
+          groupName: "Diversified Income",
+          questionGroups: diversifiedGroupTmp,
+        });
+        // eol
+
+        // get totalIncomeQuestion
+        const qs = questionGroupsTmp.flatMap((group) => {
+          if (!group) {
+            return [];
+          }
+          const questions = flatten(group.questions).filter((q) => !q.parent);
+          // group id is case commodity id
+          return questions.map((q) => `${group.id}-${q.id}`);
+        });
+        CaseVisualState.update((s) => ({
+          ...s,
+          questionGroups: questionGroupsTmp,
+          totalIncomeQuestions: qs,
+          incomeDataDrivers: incomeDataDriversTmp,
+        }));
+        // eol
+      });
+    }
+  }, [currentCase.id, currentCase.case_commodities, currentCase.currency]);
+
   useEffect(() => {
     // fetch region data
     if (currentCase?.country) {

frontend/src/pages/cases/steps/EnterIncomeData.js

@@ -13,42 +13,19 @@ import {
   determineDecimalRound,
   renderPercentageTag,
   removeUndefinedObjectValue,
-  flatten,
 } from "../../../lib";
 import { Row, Col, Space, message } from "antd";
 import { EnterIncomeDataForm } from "../components";
 import { thousandFormatter } from "../../../components/chart/options/common";
 import { isEmpty, isEqual } from "lodash";
 
-const commodityOrder = ["focus", "secondary", "tertiary", "diversified"];
 const rowColSpanSize = {
   gutter: [8, 8],
   label: 11,
   value: 5,
   percentage: 3,
 };
 
-const addLevelIntoQuestions = ({ questions, level = 0 }) => {
-  return questions.map((q) => {
-    if (q.childrens.length) {
-      q["childrens"] = addLevelIntoQuestions({
-        questions: q.childrens,
-        level: level + 1,
-      });
-    }
-    if (!q.parent) {
-      return {
-        ...q,
-        level: 0,
-      };
-    }
-    return {
-      ...q,
-      level: level,
-    };
-  });
-};
-
 const generateSegmentAnswersPayload = ({
   id: segmentId,
   answers: answerValues,
@@ -85,8 +62,10 @@ const EnterIncomeData = ({ segment, setbackfunction, setnextfunction }) => {
   const navigate = useNavigate();
   const currentCase = CurrentCaseState.useState((s) => s);
   const prevCaseSegments = PrevCaseState.useState((s) => s.segments);
-  const [incomeDataDrivers, setIncomeDataDrivers] = useState([]);
   const [sectionTotalValues, setSectionTotalValues] = useState({});
+  const incomeDataDrivers = CaseVisualState.useState(
+    (s) => s.incomeDataDrivers
+  );
 
   const [messageApi, contextHolder] = message.useMessage();
 
@@ -235,66 +214,6 @@ const EnterIncomeData = ({ segment, setbackfunction, setnextfunction }) => {
     };
   }, [sectionTotalValues]);
 
-  // Fetch questions for income data entry
-  useEffect(() => {
-    if (currentCase?.id && currentCase?.case_commodities?.length) {
-      const reorderedCaseCommodities = commodityOrder
-        .map((co) => {
-          const findCommodity = currentCase.case_commodities.find(
-            (cc) => cc.commodity_type === co
-          );
-          return findCommodity;
-        })
-        .filter((x) => x);
-
-      api.get(`/questions/${currentCase.id}`).then((res) => {
-        const { data } = res;
-        const dataTmp = [];
-        const diversifiedGroupTmp = [];
-        // regroup the questions to follow new design format
-        const questionGroupsTmp = reorderedCaseCommodities.map((cc) => {
-          const tmp = data.find((d) => d.commodity_id === cc.commodity);
-          tmp["currency"] = currentCase.currency;
-          tmp["questions"] = addLevelIntoQuestions({
-            questions: tmp.questions,
-          });
-          if (cc.commodity_type === "focus") {
-            dataTmp.push({
-              groupName: "Primary Commodity",
-              questionGroups: [{ ...cc, ...tmp }],
-            });
-          } else {
-            diversifiedGroupTmp.push({ ...cc, ...tmp });
-          }
-          return { ...cc, ...tmp };
-        });
-        // add diversified group
-        dataTmp.push({
-          groupName: "Diversified Income",
-          questionGroups: diversifiedGroupTmp,
-        });
-        setIncomeDataDrivers(dataTmp);
-        // eol
-
-        // get totalIncomeQuestion
-        const qs = questionGroupsTmp.flatMap((group) => {
-          if (!group) {
-            return [];
-          }
-          const questions = flatten(group.questions).filter((q) => !q.parent);
-          // group id is case commodity id
-          return questions.map((q) => `${group.id}-${q.id}`);
-        });
-        CaseVisualState.update((s) => ({
-          ...s,
-          questionGroups: questionGroupsTmp,
-          totalIncomeQuestions: qs,
-        }));
-        // eol
-      });
-    }
-  }, [currentCase.id, currentCase.case_commodities, currentCase.currency]);
-
   return (
     <div id="enter-income-data">
       {/* Header */}

frontend/src/pages/cases/steps/UnderstandIncomeGap.js

@@ -6,7 +6,7 @@ import {
   ChartIncomeGap,
   CompareIncomeGap,
   ChartIncomeDriverAcrossSegments,
-} from "../visuals";
+} from "../visualizations";
 
 /**
  * STEP 3

frontend/src/pages/cases/store/case_visual.js

@@ -3,6 +3,7 @@ import { Store } from "pullstate";
 const defaultCaseVisualState = {
   questionGroups: [],
   totalIncomeQuestions: [],
+  incomeDataDrivers: [],
 };
 
 const CaseVisualState = new Store(defaultCaseVisualState);