Skip to content

Commit f7b149c

Browse files
frozenheliumfrozenhelium
committed
Fix duplication of month in the MonthSelector in Country Risk
- Add a util to add num of months to date - Reset date before performing month arithematic
1 parent ea94bc2 commit f7b149c

File tree

8 files changed

+85
-112
lines changed

8 files changed

+85
-112
lines changed

‎src/components/domain/DrefShareModal/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useCallback, useMemo } from 'react';
2-
import { isDefined } from '@togglecorp/fujs';
2+
import { isDefined, isNotDefined } from '@togglecorp/fujs';
33

44
import Button from '#components/Button';
55
import List from '#components/List';
@@ -58,6 +58,7 @@ function DrefShareModal(props: Props) {
5858
pending: getPending,
5959
// response: usersResponse,
6060
} = useRequest({
61+
skip: isNotDefined(drefId),
6162
url: '/api/v2/dref-share-user/{id}/',
6263
pathVariables: { id: drefId },
6364
onSuccess: (response) => {

‎src/utils/common.ts‎

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -373,17 +373,13 @@ export function formatNumber(
373373
return newValue;
374374
}
375375

376-
export function formatDate(
377-
value: string | Date | number,
378-
format: string,
379-
): string;
380376
export function formatDate(
381377
value: null | undefined,
382-
format: string,
378+
format?: string,
383379
): undefined;
384380
export function formatDate(
385-
value: string | Date | number | null | undefined,
386-
format: string,
381+
value: Date | string | number,
382+
format?: string,
387383
): string | undefined;
388384
export function formatDate(
389385
value: Date | string | number | null | undefined,
@@ -409,6 +405,37 @@ export function formatDate(
409405
return formattedDate;
410406
}
411407

408+
// Converts dates to the encoded string for the inputs
409+
export function encodeDate(
410+
value: null | undefined,
411+
): undefined;
412+
export function encodeDate(
413+
value: Date | string | number,
414+
): string | undefined;
415+
export function encodeDate(
416+
value: Date | string | number | null | undefined,
417+
) {
418+
if (isNotDefined(value)) {
419+
return undefined;
420+
}
421+
422+
const date = new Date(value);
423+
424+
// Check if valid date
425+
if (Number.isNaN(date.getTime())) {
426+
return undefined;
427+
}
428+
429+
const format = 'yyyy-MM-dd';
430+
const formattedValueList = populateFormat(breakFormat(format), date);
431+
// const formattedDate = formattedValueList.find((d) => d.type === 'date');
432+
433+
const formattedDate = formattedValueList.map((valueItem) => valueItem.value).join('');
434+
435+
// return formattedDate?.value;
436+
return formattedDate;
437+
}
438+
412439
export function splitList<X, Y>(
413440
list: (X | Y)[],
414441
splitPointSelector: (item: X | Y, i: number) => item is X,
@@ -466,8 +493,8 @@ export function getMonthList() {
466493
return monthKeyList.map(
467494
(monthKey) => {
468495
const date = new Date();
469-
date.setMonth(monthKey);
470496
date.setDate(1);
497+
date.setMonth(monthKey);
471498
date.setHours(0, 0, 0, 0);
472499

473500
return {
@@ -617,3 +644,27 @@ export function toDateTimeString(value: string | undefined) {
617644
}
618645
return new Date(`${value}T00:00:00`).toISOString();
619646
}
647+
648+
// Add number of months to the date, sets the date to the end of the month
649+
export function addNumMonthsToDate(
650+
date: string | Date | undefined,
651+
numMonths: number | undefined,
652+
) {
653+
if (isNotDefined(date) || isNotDefined(numMonths)) {
654+
return undefined;
655+
}
656+
657+
const dateSafe = new Date(date);
658+
if (Number.isNaN(dateSafe)) {
659+
return undefined;
660+
}
661+
662+
dateSafe.setDate(1);
663+
dateSafe.setMonth(
664+
dateSafe.getMonth() + numMonths + 1,
665+
);
666+
dateSafe.setDate(0);
667+
dateSafe.setHours(0, 0, 0, 0);
668+
669+
return dateSafe;
670+
}

‎src/views/CountryRiskWatch/MultiMonthSelectInput/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,8 +123,8 @@ function MultiMonthSelectInput<NAME>(props: Props<NAME>) {
123123
{keyList.map(
124124
(key) => {
125125
const date = new Date();
126-
date.setMonth(key);
127126
date.setDate(1);
127+
date.setMonth(key);
128128
date.setHours(0, 0, 0, 0);
129129

130130
const monthName = date.toLocaleString(

‎src/views/DrefApplicationForm/Submission/index.tsx‎

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useCallback } from 'react';
2-
import { isDefined, isNotDefined } from '@togglecorp/fujs';
2+
import { isDefined } from '@togglecorp/fujs';
33
import {
44
type Error,
55
type EntriesAsList,
@@ -12,36 +12,14 @@ import TextInput from '#components/TextInput';
1212
import DateInput from '#components/DateInput';
1313
import NumberInput from '#components/NumberInput';
1414
import useTranslation from '#hooks/useTranslation';
15-
import { formatDate } from '#utils/common';
15+
import { addNumMonthsToDate, encodeDate } from '#utils/common';
1616

1717
import { TYPE_LOAN } from '../common';
1818
import { type PartialDref } from '../schema';
1919

2020
import i18n from './i18n.json';
2121
import styles from './styles.module.css';
2222

23-
function calculateEndDate(
24-
startDate: string | undefined,
25-
duration: number | undefined,
26-
) {
27-
if (isNotDefined(startDate) || isNotDefined(duration)) {
28-
return undefined;
29-
}
30-
const approvalDate = new Date(startDate);
31-
if (Number.isNaN(approvalDate)) {
32-
return undefined;
33-
}
34-
// FIXME: use a separate utility
35-
approvalDate.setMonth(
36-
approvalDate.getMonth() + duration + 1,
37-
);
38-
approvalDate.setDate(0);
39-
approvalDate.setHours(0, 0, 0, 0);
40-
41-
// NOTE: need to change the data type
42-
return formatDate(approvalDate, 'yyyy-MM-dd');
43-
}
44-
4523
type Value = PartialDref;
4624

4725
interface Props {
@@ -66,12 +44,12 @@ function Submission(props: Props) {
6644
const handleOperationTimeframeChange = useCallback(
6745
(val: number | undefined, name: 'operation_timeframe') => {
6846
setFieldValue(val, name);
69-
const endDate = calculateEndDate(
47+
const endDate = addNumMonthsToDate(
7048
value.date_of_approval,
7149
val,
7250
);
7351
if (isDefined(endDate)) {
74-
setFieldValue(endDate, 'end_date');
52+
setFieldValue(encodeDate(endDate), 'end_date');
7553
}
7654
},
7755
[setFieldValue, value.date_of_approval],
@@ -80,12 +58,12 @@ function Submission(props: Props) {
8058
const handleDateOfApproval = useCallback(
8159
(val: string | undefined, name: 'date_of_approval') => {
8260
setFieldValue(val, name);
83-
const endDate = calculateEndDate(
61+
const endDate = addNumMonthsToDate(
8462
val,
8563
value.operation_timeframe,
8664
);
8765
if (isDefined(endDate)) {
88-
setFieldValue(endDate, 'end_date');
66+
setFieldValue(encodeDate(endDate), 'end_date');
8967
}
9068
},
9169
[setFieldValue, value.operation_timeframe],

‎src/views/DrefApplicationForm/index.tsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ import LanguageMismatchMessage from '#components/domain/LanguageMismatchMessage'
3535
import FormFailedToLoadMessage from '#components/domain/FormFailedToLoadMessage';
3636
import NonEnglishFormCreationMessage from '#components/domain/NonEnglishFormCreationMessage';
3737
import { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
38-
import { type Props as ButtonProps } from '#components/Button';
3938
import DrefShareModal from '#components/domain/DrefShareModal';
4039
import DrefExportModal from '#components/domain/DrefExportModal';
4140
import { type User } from '#components/domain/UserSearchMultiSelectInput';
@@ -413,6 +412,7 @@ export function Component() {
413412
const {
414413
retrigger: getDrefUsers,
415414
} = useRequest({
415+
skip: isNotDefined(drefId),
416416
url: '/api/v2/dref-share-user/{id}/',
417417
pathVariables: { id: Number(drefId) },
418418
onSuccess: (response) => {
@@ -460,20 +460,6 @@ export function Component() {
460460
setActiveTab(newTab);
461461
}, []);
462462

463-
const handleShareClick: NonNullable<ButtonProps<undefined>['onClick']> = useCallback(
464-
() => {
465-
setShowShareModalTrue();
466-
},
467-
[setShowShareModalTrue],
468-
);
469-
470-
const handleExportClick: NonNullable<ButtonProps<undefined>['onClick']> = useCallback(
471-
() => {
472-
setShowExportModalTrue();
473-
},
474-
[setShowExportModalTrue],
475-
);
476-
477463
const handleUserShareSuccess = useCallback(() => {
478464
setShowShareModalFalse();
479465
getDrefUsers();
@@ -515,15 +501,15 @@ export function Component() {
515501
<>
516502
<Button
517503
name={undefined}
518-
onClick={handleShareClick}
504+
onClick={setShowShareModalTrue}
519505
variant="secondary"
520506
icons={<ShareLineIcon />}
521507
>
522508
{strings.formShareButtonLabel}
523509
</Button>
524510
<Button
525511
name={undefined}
526-
onClick={handleExportClick}
512+
onClick={setShowExportModalTrue}
527513
icons={<DownloadTwoLineIcon />}
528514
variant="secondary"
529515
>
@@ -697,7 +683,7 @@ export function Component() {
697683
onCancelButtonClick={setShowObsoletePayloadModal}
698684
/>
699685
)}
700-
{showShareModal && (
686+
{showShareModal && isDefined(drefId) && (
701687
<DrefShareModal
702688
onCancel={setShowShareModalFalse}
703689
onSuccess={handleUserShareSuccess}

‎src/views/DrefFinalReportForm/Submission/index.tsx‎

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useCallback } from 'react';
2-
import { isDefined, isNotDefined } from '@togglecorp/fujs';
2+
import { isDefined } from '@togglecorp/fujs';
33
import {
44
type Error,
55
type EntriesAsList,
@@ -12,35 +12,13 @@ import TextInput from '#components/TextInput';
1212
import DateInput from '#components/DateInput';
1313
import NumberInput from '#components/NumberInput';
1414
import useTranslation from '#hooks/useTranslation';
15-
import { formatDate } from '#utils/common';
15+
import { addNumMonthsToDate, encodeDate } from '#utils/common';
1616

1717
import { type PartialFinalReport } from '../schema';
1818

1919
import i18n from './i18n.json';
2020
import styles from './styles.module.css';
2121

22-
function calculateEndDate(
23-
startDate: string | undefined,
24-
duration: number | undefined,
25-
) {
26-
if (isNotDefined(startDate) || isNotDefined(duration)) {
27-
return undefined;
28-
}
29-
const approvalDate = new Date(startDate);
30-
if (Number.isNaN(approvalDate)) {
31-
return undefined;
32-
}
33-
// FIXME: use a separate utility
34-
approvalDate.setMonth(
35-
approvalDate.getMonth() + duration + 1,
36-
);
37-
approvalDate.setDate(0);
38-
approvalDate.setHours(0, 0, 0, 0);
39-
40-
// NOTE: need to change the data type
41-
return formatDate(approvalDate, 'yyyy-MM-dd');
42-
}
43-
4422
type Value = PartialFinalReport;
4523

4624
interface Props {
@@ -65,12 +43,12 @@ function Submission(props: Props) {
6543
const handleTotalOperationTimeframeChange = useCallback(
6644
(val: number | undefined, name: 'total_operation_timeframe') => {
6745
setFieldValue(val, name);
68-
const endDate = calculateEndDate(
46+
const endDate = addNumMonthsToDate(
6947
value.operation_start_date,
7048
val,
7149
);
7250
if (isDefined(endDate)) {
73-
setFieldValue(endDate, 'operation_end_date');
51+
setFieldValue(encodeDate(endDate), 'operation_end_date');
7452
}
7553
},
7654
[setFieldValue, value.operation_start_date],
@@ -79,12 +57,12 @@ function Submission(props: Props) {
7957
const handleOperationStartDateChange = useCallback(
8058
(val: string | undefined, name: 'operation_start_date') => {
8159
setFieldValue(val, name);
82-
const endDate = calculateEndDate(
60+
const endDate = addNumMonthsToDate(
8361
val,
8462
value.total_operation_timeframe,
8563
);
8664
if (isDefined(endDate)) {
87-
setFieldValue(endDate, 'operation_end_date');
65+
setFieldValue(encodeDate(endDate), 'operation_end_date');
8866
}
8967
},
9068
[setFieldValue, value.total_operation_timeframe],

0 commit comments

Comments
 (0)