Use current month as default value in country seasonal risk month selector

Author: frozenhelium

app/src/utils/constants.ts

@@ -1,3 +1,5 @@
+import { listToMap } from '@togglecorp/fujs';
+
 import { type components } from '#generated/types';
 
 export const defaultChartMargin = {
@@ -199,3 +201,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,
+);

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>
                 ))
             }
         />

app/src/views/CountryProfileRiskWatch/MultiMonthSelectInput/index.tsx

@@ -12,16 +12,14 @@ import {
 } from '@togglecorp/fujs';
 import type { SetValueArg } from '@togglecorp/toggle-form';
 
+import {
+    monthKeyList,
+    multiMonthSelectDefaultValue,
+} from '#utils/constants';
+
 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,
-);
-
 interface Props<NAME> {
     className?: string;
     value: Record<number, boolean> | undefined;
@@ -87,7 +85,7 @@ function MultiMonthSelectInput<NAME>(props: Props<NAME>) {
                     ) {
                         // Selecting only single value
                         return {
-                            ...defaultValue,
+                            ...multiMonthSelectDefaultValue,
                             [month]: true,
                         };
                     }
@@ -127,7 +125,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);

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,