Use current month as default value in country seasonal risk month sel…

…ector
IFRCGo · Dec 19, 2024 · 3b4f232 · 3b4f232
1 parent 809141d
commit 3b4f232
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
@@ -1,4 +1,5 @@
 import { type components } from '#generated/types';
+import { listToMap } from '@togglecorp/fujs';
 
 export const defaultChartMargin = {
     top: 0,
@@ -199,3 +200,10 @@ type SupportedByOrganizationType = components<'read'>['schemas']['PerSupportedBy
 export const NATIONAL_SOCIETY = 3 satisfies SupportedByOrganizationType;
 
 export const MAX_PAGE_LIMIT = 9999;
+
+export const monthKeyList = Array.from(Array(12).keys());
+export const multiMonthSelectDefaultValue = listToMap(
+    monthKeyList,
+    (key) => key,
+    () => false,
+);
diff --git a/app/src/views/CountryProfileRiskWatch/CountryRiskSourcesOutput/index.tsx b/app/src/views/CountryProfileRiskWatch/CountryRiskSourcesOutput/index.tsx
@@ -1,4 +1,7 @@
-import { useMemo } from 'react';
+import {
+    Fragment,
+    useMemo,
+} from 'react';
 import { TextOutput } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
@@ -13,21 +16,25 @@ function CountryRiskSourcesOutput() {
     const riskByMonthSources = useMemo(
         () => [
             {
+                key: 'inform',
                 link: 'https://drmkc.jrc.ec.europa.eu/inform-index/INFORM-Risk',
                 label: strings.inform,
                 description: strings.sourceINFORM,
             },
             {
+                key: 'undrr',
                 link: 'https://www.undrr.org/',
                 label: strings.undrr,
                 description: strings.sourceUNDRR,
             },
             {
+                key: 'idmc',
                 link: 'https://www.internal-displacement.org/',
                 label: strings.idmc,
                 description: strings.sourceIDMC,
             },
             {
+                key: 'ipc',
                 link: 'https://www.ipcinfo.org/',
                 label: strings.ipc,
                 description: strings.sourceIPC,
@@ -40,8 +47,8 @@ function CountryRiskSourcesOutput() {
         <TextOutput
             label={strings.source}
             value={
-                riskByMonthSources.map((source) => (
-                    <>
+                riskByMonthSources.map((source, i) => (
+                    <Fragment key={source.key}>
                         {resolveToComponent(
                             source.description,
                             {
@@ -57,8 +64,8 @@ function CountryRiskSourcesOutput() {
                                 ),
                             },
                         )}
-                        <br />
-                    </>
+                        {i < (riskByMonthSources.length - 1) && <br />}
+                    </Fragment>
                 ))
             }
         />

diff --git a/app/src/views/CountryProfileRiskWatch/MultiMonthSelectInput/index.tsx b/app/src/views/CountryProfileRiskWatch/MultiMonthSelectInput/index.tsx
@@ -14,13 +14,7 @@ import type { SetValueArg } from '@togglecorp/toggle-form';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
-
-const keyList = Array.from(Array(12).keys());
-const defaultValue = listToMap(
-    keyList,
-    (key) => key,
-    () => false,
-);
+import { monthKeyList, multiMonthSelectDefaultValue } from '#utils/constants';
 
 interface Props<NAME> {
     className?: string;
@@ -87,7 +81,7 @@ function MultiMonthSelectInput<NAME>(props: Props<NAME>) {
                     ) {
                         // Selecting only single value
                         return {
-                            ...defaultValue,
+                            ...multiMonthSelectDefaultValue,
                             [month]: true,
                         };
                     }
@@ -127,7 +121,7 @@ function MultiMonthSelectInput<NAME>(props: Props<NAME>) {
     return (
         <div className={_cs(styles.multiMonthSelectInput, className)}>
             <div className={styles.monthList}>
-                {keyList.map(
+                {monthKeyList.map(
                     (key) => {
                         const date = new Date();
                         date.setDate(1);

diff --git a/app/src/views/CountryProfileRiskWatch/index.tsx b/app/src/views/CountryProfileRiskWatch/index.tsx
@@ -16,6 +16,7 @@ import RiskImminentEvents, { type ImminentEventSource } from '#components/domain
 import Link from '#components/Link';
 import WikiLink from '#components/WikiLink';
 import useInputState from '#hooks/useInputState';
+import { multiMonthSelectDefaultValue } from '#utils/constants';
 import type { CountryOutletContext } from '#utils/outletContext';
 import { useRiskRequest } from '#utils/restRequest';
 
@@ -29,6 +30,10 @@ import RiskTable from './RiskTable';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+function getCurrentMonth() {
+    return new Date().getMonth();
+}
+
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
@@ -38,7 +43,10 @@ export function Component() {
     const [
         selectedMonths,
         setSelectedMonths,
-    ] = useInputState<Record<number, boolean> | undefined>({ 0: true });
+    ] = useInputState<(typeof multiMonthSelectDefaultValue) | undefined>({
+        ...multiMonthSelectDefaultValue,
+        [getCurrentMonth()]: true,
+    });
 
     const {
         pending: pendingCountryRiskResponse,