fix: remove supported_by when supported_by_organization is change…

…d from `national_society`
IFRCGo · Feb 22, 2024 · 031a15f · 031a15f
1 parent 335a78d
commit 031a15f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/app/src/views/PerWorkPlanForm/PrioritizedActionInput/i18n.json b/app/src/views/PerWorkPlanForm/PrioritizedActionInput/i18n.json
@@ -2,13 +2,13 @@
     "namespace": "perWorkPlanForm",
     "strings": {
         "componentActionsInputPlaceholder": "Enter actions",
-        "componentSupportedByInputLabel": "Supported by",
-        "componentSupportedByInputPlaceholder": "Select NS",
+        "componentSupportedByInputLabel": "Supporting national society",
+        "componentSupportedByInputPlaceholder": "National society",
         "componentDueDateInputLabel": "Due date",
         "componentStatusInputLabel": "Status",
-        "componentSupportedByOrganizationInputLabel":"Supported by organization",
+        "componentSupportedByOrganizationInputLabel":"Supported by",
         "componentOrganizationInputPlaceholder":"Organization type",
-        "componentStatusInputPlaceholder": "Select",
+        "componentStatusInputPlaceholder": "Status",
         "componentHeading": "{componentNumber} ({componentLetter}). {componentTitle}",
         "componentHeadingOther": "{componentNumber}. {componentTitle}"
     }

diff --git a/app/src/views/PerWorkPlanForm/PrioritizedActionInput/index.tsx b/app/src/views/PerWorkPlanForm/PrioritizedActionInput/index.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import {
     Container,
     DateInput,
@@ -20,8 +21,8 @@ import {
 import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput';
 import NonFieldError from '#components/NonFieldError';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
-import { type GoApiResponse } from '#utils/restRequest';
 import { NATIONAL_SOCIETY } from '#utils/constants';
+import { type GoApiResponse } from '#utils/restRequest';
 
 import { type PartialWorkPlan } from '../schema';
 
@@ -40,7 +41,7 @@ type PerWorkPlanOrganizationTypeOption = NonNullable<GlobalEnumsResponse['per_su
 function statusKeySelector(option: PerWorkPlanStatusOption) {
     return option.key;
 }
-function organizationTypeKeySelector(option:PerWorkPlanOrganizationTypeOption) {
+function organizationTypeKeySelector(option: PerWorkPlanOrganizationTypeOption) {
     return option.key;
 }
 interface Props {
@@ -75,6 +76,15 @@ function PrioritizedActionInput(props: Props) {
         }),
     );
 
+    const handleOrganizationTypeChange = useCallback((
+        organizationType: PerWorkPlanOrganizationTypeOption['key'] | undefined,
+    ) => {
+        onFieldChange(organizationType, 'supported_by_organization_type' as const);
+        if (organizationType !== NATIONAL_SOCIETY) {
+            onFieldChange(undefined, 'supported_by');
+        }
+    }, [onFieldChange]);
+
     return (
         <Container
             className={styles.prioritizedActionInput}
@@ -123,8 +133,7 @@ function PrioritizedActionInput(props: Props) {
                 label={strings.componentSupportedByOrganizationInputLabel}
                 placeholder={strings.componentOrganizationInputPlaceholder}
                 options={per_supported_by_organization_type}
-                withAsterisk
-                onChange={onFieldChange}
+                onChange={handleOrganizationTypeChange}
                 keySelector={organizationTypeKeySelector}
                 labelSelector={stringValueSelector}
                 value={value?.supported_by_organization_type}

diff --git a/app/src/views/PerWorkPlanForm/schema.ts b/app/src/views/PerWorkPlanForm/schema.ts
@@ -37,9 +37,7 @@ export const workplanSchema: WorkPlanFormScheme = {
                     component: {},
                     actions: {},
                     due_date: {},
-                    supported_by_organization_type: {
-                        required: true,
-                    },
+                    supported_by_organization_type: {},
                     supported_by: {},
                     status: {
                         required: true,

diff --git a/packages/ui/src/components/ExpandableContainer/index.tsx b/packages/ui/src/components/ExpandableContainer/index.tsx
@@ -1,9 +1,12 @@
-import { useEffect, useRef, useCallback } from 'react';
+import {
+    useCallback,
+    useEffect,
+    useRef,
+} from 'react';
 import {
     ChevronDownLineIcon,
     ChevronUpLineIcon,
 } from '@ifrc-go/icons';
-
 import { _cs } from '@togglecorp/fujs';
 
 import Button from '#components/Button';