Fetch all categories on flow loading

UN-OCHA · Dec 5, 2024 · 5a461d0 · 5a461d0
1 parent eb15ff6
commit 5a461d0
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 44 deletions.
diff --git a/apps/hpc-ftsadmin/src/app/components/flow-form/flow-form.tsx b/apps/hpc-ftsadmin/src/app/components/flow-form/flow-form.tsx
@@ -83,6 +83,8 @@ type FlowFormProps = {
   flowType: FormObjectValue[];
   contributionType: FormObjectValue[];
   method: FormObjectValue[];
+  flowStatus: FormObjectValue[];
+  earmarkingType: FormObjectValue[];
   initialValues?: FlowFormType;
   flow?: flows.GetFlowResult;
   isPending?: boolean;
@@ -393,6 +395,8 @@ export const FlowForm = (props: FlowFormProps) => {
     flowType,
     contributionType,
     method,
+    earmarkingType,
+    flowStatus,
   } = props;
   const [submitLoading, setSubmitLoading] = useState(false);
   const [rejectLoading, setRejectLoading] = useState(false);
@@ -1445,15 +1449,14 @@ export const FlowForm = (props: FlowFormProps) => {
                       pendingValues={pendingValues?.flowType}
                       required
                     />
-                    <AsyncAutocompleteSelectReview
+                    <AutocompleteSelectReview
                       fieldName="flowStatus"
                       label={t.t(
                         lang,
                         (s) => s.components.flowForm.fields.flowStatus
                       )}
-                      fnPromise={() => fnFlowStatusId(env)}
+                      options={flowStatus}
                       setPendingValuesHandled={setPendingValuesHandled}
-                      isAutocompleteAPI={false}
                       disabled={isDisabled}
                       pendingValues={pendingValues?.flowStatus}
                       required
@@ -1484,15 +1487,14 @@ export const FlowForm = (props: FlowFormProps) => {
                       disabled={isDisabled}
                       pendingValues={pendingValues?.contributionType}
                     />
-                    <AsyncAutocompleteSelectReview
+                    <AutocompleteSelectReview
                       fieldName="earmarkingType"
                       label={t.t(
                         lang,
                         (s) => s.components.flowForm.fields.earmarkingType
                       )}
-                      fnPromise={() => fnCategories('earmarkingType', env)}
+                      options={earmarkingType}
                       setPendingValuesHandled={setPendingValuesHandled}
-                      isAutocompleteAPI={false}
                       disabled={isDisabled}
                       pendingValues={pendingValues?.earmarkingType}
                     />

diff --git a/apps/hpc-ftsadmin/src/app/pages/flows/flow.tsx b/apps/hpc-ftsadmin/src/app/pages/flows/flow.tsx
@@ -12,7 +12,11 @@ import {
 } from '../../utils/parse-flow-form';
 import { flows } from '@unocha/hpc-data';
 import dayjs from '../../../libs/dayjs';
-import { fnCategories, fnFlowTypeId } from '../../utils/fn-promises';
+import {
+  fnCategories,
+  fnFlowStatusId,
+  fnFlowTypeId,
+} from '../../utils/fn-promises';
 
 type FlowRouteParams = {
   id: string;
@@ -76,16 +80,25 @@ export default () => {
     };
 
     const [state, load] = useDataLoader([id], async () => {
-      const [flow, inactiveReasons, flowType, contributionType, method] =
-        await Promise.all([
-          getFlow(versionID),
-          env.model.categories.getCategories({
-            query: 'inactiveReason',
-          }),
-          fnFlowTypeId(env),
-          fnCategories('contributionType', env),
-          fnCategories('method', env),
-        ]);
+      const [
+        flow,
+        inactiveReasons,
+        flowType,
+        contributionType,
+        method,
+        earmarkingType,
+        flowStatus,
+      ] = await Promise.all([
+        getFlow(versionID),
+        env.model.categories.getCategories({
+          query: 'inactiveReason',
+        }),
+        fnFlowTypeId(env),
+        fnCategories('contributionType', env),
+        fnCategories('method', env),
+        fnCategories('earmarkingType', env),
+        fnFlowStatusId(env),
+      ]);
 
       const [parents, children] = await Promise.all([
         Promise.all(
@@ -108,6 +121,8 @@ export default () => {
         flowType,
         contributionType,
         method,
+        earmarkingType,
+        flowStatus,
       };
     });
 
@@ -124,15 +139,7 @@ export default () => {
                 },
               }}
             >
-              {({
-                flow,
-                parents,
-                children,
-                inactiveReasons,
-                flowType,
-                contributionType,
-                method,
-              }) => (
+              {({ flow, parents, children, ...otherFlowProps }) => (
                 <PaddingContainer>
                   <C.PageTitle>{`Flow ${flow.id}v${flow.versionID}`}</C.PageTitle>
                   <UpdatedCreatedBy>
@@ -186,12 +193,9 @@ export default () => {
                     }
                     flow={flow}
                     load={load}
-                    inactiveReasons={inactiveReasons}
-                    flowType={flowType}
-                    contributionType={contributionType}
-                    method={method}
                     isPending={isPending(flow)}
                     isInactive={isInactive(flow)}
+                    {...otherFlowProps}
                   />
                 </PaddingContainer>
               )}
@@ -212,20 +216,30 @@ export default () => {
     );
   } else {
     const [state, load] = useDataLoader([], async () => {
-      const [inactiveReasons, flowType, contributionType, method] =
-        await Promise.all([
-          env.model.categories.getCategories({
-            query: 'inactiveReason',
-          }),
-          fnFlowTypeId(env),
-          fnCategories('contributionType', env),
-          fnCategories('method', env),
-        ]);
+      const [
+        inactiveReasons,
+        flowType,
+        contributionType,
+        method,
+        earmarkingType,
+        flowStatus,
+      ] = await Promise.all([
+        env.model.categories.getCategories({
+          query: 'inactiveReason',
+        }),
+        fnFlowTypeId(env),
+        fnCategories('contributionType', env),
+        fnCategories('method', env),
+        fnCategories('earmarkingType', env),
+        fnFlowStatusId(env),
+      ]);
       return {
         inactiveReasons,
         flowType,
         contributionType,
         method,
+        earmarkingType,
+        flowStatus,
       };
     });
 
@@ -242,7 +256,7 @@ export default () => {
                 },
               }}
             >
-              {({ inactiveReasons, flowType, contributionType, method }) => (
+              {(flowProps) => (
                 <PaddingContainer>
                   <C.PageTitle>
                     {historyState?.flowFormCopyValues &&
@@ -253,12 +267,9 @@ export default () => {
                       : t.t(lang, (s) => s.components.flow.addFLow)}
                   </C.PageTitle>
                   <FlowForm
+                    {...flowProps}
                     setError={setError}
                     load={load}
-                    inactiveReasons={inactiveReasons}
-                    flowType={flowType}
-                    contributionType={contributionType}
-                    method={method}
                     initialValues={
                       historyState?.flowFormCopyValues
                         ? deserializeFlowForm(historyState.flowFormCopyValues)