From 3b4f232471ca38d5d88c57fabf42acbd85d34480 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 19 Dec 2024 14:09:27 +0545
Subject: [PATCH] Use current month as default value in country seasonal risk
 month selector

---
 app/src/utils/constants.ts                      |  8 ++++++++
 .../CountryRiskSourcesOutput/index.tsx          | 17 ++++++++++++-----
 .../MultiMonthSelectInput/index.tsx             | 12 +++---------
 app/src/views/CountryProfileRiskWatch/index.tsx | 10 +++++++++-
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index 4a597720ee..ab8d2ddd95 100644
--- 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
index 4a24ee3c05..685aabe6c0 100644
--- 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
index 38cc91c5a9..a4f656603c 100644
--- 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
index fb98926b0b..8fddea6d97 100644
--- 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,