Merge pull request #378 from IFRCGo/fix/filter-typing-issues

Fix typing issues in DREF filters

Author: samshara

src/components/domain/AppealsOverYearsChart/MonthlyChart/index.tsx

@@ -8,15 +8,16 @@ import TimeSeriesChart from '#components/TimeSeriesChart';
 import Button from '#components/Button';
 import { getDatesSeparatedByMonths } from '#utils/chart';
 import { resolveToComponent } from '#utils/translation';
+import { getFormattedDateKey } from '#utils/common';
 import useTranslation from '#hooks/useTranslation';
-import { formatDate } from '#utils/common';
 
 import PointDetails from '../PointDetails';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 // FIXME: these must be a constant defined somewhere else
+// with satisfies
 const APPEAL_TYPE_DREF = 0;
 const APPEAL_TYPE_EMERGENCY = 1;
 
@@ -42,11 +43,6 @@ const dateFormatter = new Intl.DateTimeFormat(
     { month: 'long' },
 );
 
-const getFormattedKey = (dateFromProps: string | Date) => {
-    const date = new Date(dateFromProps);
-    return formatDate(date, 'yyyy-MM');
-};
-
 const currentDate = new Date();
 
 interface Props {
@@ -73,7 +69,7 @@ function MonthlyChart(props: Props) {
     );
 
     const [activePointKey, setActivePointKey] = useState<string>(
-        () => getFormattedKey(dateList[0]),
+        () => getFormattedDateKey(dateList[0]),
     );
 
     const query = {
@@ -120,12 +116,12 @@ function MonthlyChart(props: Props) {
 
             const drefData = listToMap(
                 monthlyDrefResponse,
-                (appeal) => getFormattedKey(appeal.timespan),
+                (appeal) => getFormattedDateKey(appeal.timespan),
             );
 
             const emergencyAppealData = listToMap(
                 monthlyEmergencyAppealResponse,
-                (appeal) => getFormattedKey(appeal.timespan),
+                (appeal) => getFormattedDateKey(appeal.timespan),
             );
 
             const data = {
@@ -140,7 +136,7 @@ function MonthlyChart(props: Props) {
 
     const dateListWithData = listToMap(
         dateList,
-        (date) => getFormattedKey(date),
+        (date) => getFormattedDateKey(date),
         (date, key) => ({
             date,
             dref: combinedData?.dref?.[key],
@@ -155,15 +151,15 @@ function MonthlyChart(props: Props) {
     );
     const chartValueSelector = useCallback(
         (dataKey: DATA_KEY, date: Date) => {
-            const value = combinedData?.[dataKey]?.[getFormattedKey(date)]?.count;
+            const value = combinedData?.[dataKey]?.[getFormattedDateKey(date)]?.count;
             // NOTE: if there are missing values for a given month or year
             // less then the current date we assume the value to be 0
             // FIXME: This could be done in the aggregation logic of the server itself
             if (isNotDefined(value) && date < currentDate) {
                 return 0;
             }
 
-            return combinedData?.[dataKey]?.[getFormattedKey(date)]?.count;
+            return combinedData?.[dataKey]?.[getFormattedDateKey(date)]?.count;
         },
         [combinedData],
     );

src/components/domain/AppealsOverYearsChart/YearlyChart/index.tsx

@@ -5,16 +5,16 @@ import {
     isNotDefined,
     isDefined,
 } from '@togglecorp/fujs';
-import { useRequest } from '#utils/restRequest';
 
 import BlockLoading from '#components/BlockLoading';
 import Container from '#components/Container';
 import TimeSeriesChart from '#components/TimeSeriesChart';
 import Button from '#components/Button';
 import Message from '#components/Message';
+import { useRequest } from '#utils/restRequest';
 import { getDatesSeparatedByYear } from '#utils/chart';
+import { getFormattedDateKey } from '#utils/common';
 import useTranslation from '#hooks/useTranslation';
-import { formatDate } from '#utils/common';
 
 import PointDetails from '../PointDetails';
 
@@ -31,11 +31,6 @@ const dataKeys: DATA_KEY[] = [
     'emergencyAppeal',
 ];
 
-const getFormattedKey = (dateFromProps: string | Date) => {
-    const date = new Date(dateFromProps);
-    return formatDate(date, 'yyyy-MM');
-};
-
 // FIXME: use a separate utility
 const now = new Date();
 const startDate = new Date(now.getFullYear() - 10, 0, 1);
@@ -65,7 +60,7 @@ function YearlyChart(props: Props) {
     const strings = useTranslation(i18n);
 
     const [activePointKey, setActivePointKey] = useState<string>(
-        () => getFormattedKey(dateList[dateList.length - 1]),
+        () => getFormattedDateKey(dateList[dateList.length - 1]),
     );
 
     const queryParams = {
@@ -113,12 +108,12 @@ function YearlyChart(props: Props) {
 
             const drefData = listToMap(
                 monthlyDrefResponse,
-                (appeal) => getFormattedKey(appeal.timespan),
+                (appeal) => getFormattedDateKey(appeal.timespan),
             );
 
             const emergencyAppealData = listToMap(
                 monthlyEmergencyAppealResponse,
-                (appeal) => getFormattedKey(appeal.timespan),
+                (appeal) => getFormattedDateKey(appeal.timespan),
             );
 
             const data = {
@@ -133,7 +128,7 @@ function YearlyChart(props: Props) {
 
     const dateListWithData = listToMap(
         dateList,
-        (date) => getFormattedKey(date),
+        (date) => getFormattedDateKey(date),
         (date, key) => ({
             date,
             dref: combinedData?.dref?.[key],
@@ -144,7 +139,7 @@ function YearlyChart(props: Props) {
     const activePointData = activePointKey ? dateListWithData[activePointKey] : undefined;
     const chartValueSelector = useCallback(
         (dataKey: DATA_KEY, date: Date) => (
-            combinedData?.[dataKey]?.[getFormattedKey(date)]?.count
+            combinedData?.[dataKey]?.[getFormattedDateKey(date)]?.count
         ),
         [combinedData],
     );

src/components/domain/RiskSeasonalMap/index.tsx

@@ -791,6 +791,8 @@ function RiskSeasonalMap(props: Props) {
         [data, filters, mappings],
     );
 
+    const MAX_RISK_SCORE = CATEGORY_RISK_VERY_HIGH;
+
     // NOTE: we need to generate the layerOptions because we cannot use MapState
     // The id in the vector tile does not match the id in GO
     // We also cannot use promoteId as it is a non-managed mapbox source
@@ -1021,7 +1023,7 @@ function RiskSeasonalMap(props: Props) {
                                             riskCategory,
                                         }) => {
                                             // eslint-disable-next-line max-len
-                                            const percentage = (100 * riskCategory) / (5 * filters.hazardTypes.length);
+                                            const percentage = (100 * riskCategory) / (MAX_RISK_SCORE * filters.hazardTypes.length);
 
                                             if (percentage < 1) {
                                                 return null;

src/utils/common.ts

@@ -17,7 +17,7 @@ import {
 import { type Language } from '#contexts/language';
 import type { GoApiResponse } from '#utils/restRequest';
 
-import { DEFAULT_DATE_FORMAT } from './constants';
+import { DEFAULT_DATE_FORMAT, KEY_DATE_FORMAT } from './constants';
 
 export type UnsafeNumberList = Maybe<Maybe<number>[]>;
 
@@ -678,3 +678,10 @@ export function isValidDate<T extends DateLike>(
 
     return true;
 }
+
+export function getFormattedDateKey(dateLike: DateLike) {
+    const date = formatDate(dateLike, KEY_DATE_FORMAT);
+
+    // FIXME: we should throw error in case of undefined
+    return date ?? '??';
+}

src/utils/constants.ts

@@ -2,6 +2,7 @@ import { type components } from '#generated/types';
 
 export const DEFAULT_DATE_FORMAT = 'yyyy-MM-dd';
 export const DEFAULT_PRINT_DATE_FORMAT = 'dd-MM-yyyy';
+export const KEY_DATE_FORMAT = 'yyyy-MM';
 
 // Alert
 

src/views/AccountDetails/ChangePassword/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
     useForm,
     ObjectSchema,
@@ -21,7 +21,6 @@ import NonFieldError from '#components/NonFieldError';
 import useTranslation from '#hooks/useTranslation';
 import useAlert from '#hooks/useAlert';
 import { GoApiBody, useLazyRequest } from '#utils/restRequest';
-import UserContext from '#contexts/user';
 import { transformObjectError } from '#utils/restRequest/error';
 
 import i18n from './i18n.json';
@@ -46,7 +45,6 @@ function ChangePasswordModal(props: Props) {
 
     const strings = useTranslation(i18n);
     const alert = useAlert();
-    const { userAuth } = useContext(UserContext);
 
     const getPasswordMatchCondition = useCallback((referenceVal: string | undefined) => {
         function passwordMatchCondition(val: string | undefined) {
@@ -64,9 +62,7 @@ function ChangePasswordModal(props: Props) {
         {
             fields: (value): FormSchemaFields => {
                 let fields: FormSchemaFields = {
-                    username: {},
-                    token: {},
-                    password: {
+                    old_password: {
                         required: true,
                         requiredValidation: requiredStringCondition,
                     },
@@ -139,14 +135,11 @@ function ChangePasswordModal(props: Props) {
     });
 
     const handleConfirmPasswordChange = useCallback((formValues: PartialFormValue) => {
-        // FIXME: We should not pass username and token to server
         const passwordFormValues = {
             ...formValues,
-            username: userAuth?.username,
-            token: userAuth?.token,
         };
         updatePassword(passwordFormValues as PasswordChangeRequestBody);
-    }, [userAuth, updatePassword]);
+    }, [updatePassword]);
 
     const handleSubmitPassword = createSubmitHandler(
         validate,
@@ -189,12 +182,12 @@ function ChangePasswordModal(props: Props) {
                 withFallbackError
             />
             <TextInput
-                name="password"
+                name="old_password"
                 type="password"
                 label={strings.oldPasswordInputLabel}
-                value={formValue.password}
+                value={formValue.old_password}
                 onChange={setFieldValue}
-                error={fieldError?.password}
+                error={fieldError?.old_password}
                 disabled={updatePasswordPending}
                 withAsterisk
                 autoFocus

src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx

@@ -69,8 +69,8 @@ function ActiveDrefTable(props: Props) {
             offset,
             limit,
             // FIXME server should accept country
-            country: filter.country,
-            type_of_dref: filter.type_of_dref,
+            country: isDefined(filter.country) ? [filter.country] : undefined,
+            type_of_dref: isDefined(filter.type_of_dref) ? [filter.type_of_dref] : undefined,
             disaster_type: filter.disaster_type,
             appeal_code: filter.appeal_code,
         },

src/views/AccountMyFormsDref/CompletedDrefTable/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { _cs } from '@togglecorp/fujs';
+import { _cs, isDefined } from '@togglecorp/fujs';
 
 import {
     createStringColumn,
@@ -59,8 +59,8 @@ function CompletedDrefTable(props: Props) {
             offset,
             limit,
             // FIXME server should accept country
-            country: filter.country,
-            type_of_dref: filter.type_of_dref,
+            country: isDefined(filter.country) ? [filter.country] : undefined,
+            type_of_dref: isDefined(filter.type_of_dref) ? [filter.type_of_dref] : undefined,
             disaster_type: filter.disaster_type,
             appeal_code: filter.appeal_code,
         },

src/views/AccountMyFormsDref/DrefTableActions/index.tsx

@@ -23,7 +23,7 @@ import { type components } from '#generated/types';
 import useBooleanState from '#hooks/useBooleanState';
 import useTranslation from '#hooks/useTranslation';
 import useAlert from '#hooks/useAlert';
-import { useLazyRequest } from '#utils/restRequest';
+import { GoApiBody, useLazyRequest } from '#utils/restRequest';
 import { DREF_STATUS_IN_PROGRESS, DREF_TYPE_IMMINENT, DREF_TYPE_LOAN } from '#utils/constants';
 
 import { exportDrefAllocation } from './drefAllocationExport';
@@ -237,14 +237,17 @@ function DrefTableActions(props: Props) {
         },
     });
 
+    // FIXME: the type should be fixed on the server
+    type OpsUpdateRequestBody = GoApiBody<'/api/v2/dref-op-update/', 'POST'>;
+
     const {
         trigger: createOpsUpdate,
         pending: createOpsUpdatePending,
     } = useLazyRequest({
         method: 'POST',
         url: '/api/v2/dref-op-update/',
         // FIXME: the type should be fixed on the server
-        body: (drefId: number) => ({ dref: drefId }),
+        body: (drefId: number) => ({ dref: drefId } as OpsUpdateRequestBody),
         onSuccess: (response) => {
             navigate(
                 'drefOperationalUpdateForm',
@@ -265,14 +268,16 @@ function DrefTableActions(props: Props) {
         },
     });
 
+    // FIXME: the type should be fixed on the server
+    type FinalReportRequestBody = GoApiBody<'/api/v2/dref-final-report/', 'POST'>;
     const {
         trigger: createFinalReport,
         pending: createFinalReportPending,
     } = useLazyRequest({
         method: 'POST',
         url: '/api/v2/dref-final-report/',
         // FIXME: the type should be fixed on the server
-        body: (drefId: number) => ({ dref: drefId }),
+        body: (drefId: number) => ({ dref: drefId } as FinalReportRequestBody),
         onSuccess: (response) => {
             navigate(
                 'drefFinalReportForm',

src/views/CountryPreparedness/index.tsx

@@ -210,19 +210,37 @@ export function Component() {
                     areaNum: groupedComponentList[0].area.area_num,
                     title: groupedComponentList[0].area.title,
                     value: getAverage(
-                        groupedComponentList.map((component) => component.rating?.value),
+                        groupedComponentList.map(
+                            (component) => (
+                                isDefined(component.rating)
+                                    ? component.rating.value
+                                    : undefined
+                            ),
+                        ).filter(isDefined),
                     ),
                 }),
             ).filter(isDefined);
 
             const averageRating = getAverage(
-                filteredComponents.map((component) => component.rating?.value),
+                filteredComponents.map(
+                    (component) => (
+                        isDefined(component.rating)
+                            ? component.rating.value
+                            : undefined
+                    ),
+                ).filter(isDefined),
             );
 
             const ratingCounts = mapToList(
                 listToGroupList(
-                    componentList.filter((component) => isDefined(component.rating)),
-                    (component) => component.rating?.value,
+                    componentList.map(
+                        (component) => (
+                            isDefined(component.rating)
+                                ? { ...component, rating: component.rating }
+                                : undefined
+                        ),
+                    ).filter(isDefined),
+                    (component) => component.rating.value,
                 ),
                 (ratingList) => ({
                     id: ratingList[0].rating?.id,
@@ -540,7 +558,7 @@ export function Component() {
                                 </Heading>
                                 <ProgressBar
                                     className={styles.progressBar}
-                                    value={priorityComponent.rating?.value}
+                                    value={priorityComponent.rating?.value ?? 0}
                                     totalValue={5}
                                 />
                             </div>
@@ -568,7 +586,7 @@ export function Component() {
                                     })}
                                 </Heading>
                                 <ProgressBar
-                                    value={component.rating?.value}
+                                    value={component.rating?.value ?? 0}
                                     totalValue={5}
                                     title={(
                                         isDefined(component.rating)