From 16a8b3d6afe4497e10c3cb0edae61adc1db72b56 Mon Sep 17 00:00:00 2001 From: Mikkel Jakobsen Date: Thu, 9 Nov 2023 16:54:22 +0100 Subject: [PATCH] Refactoring thresholdConfig => expirationWarningDaysBeforeConfig And introducing the useLoanThresholds hook to centralise the concept. Also: The overloading of the useConfig types needed to support that you do not use any options/parsers, in case you want a single value unprocessed. --- src/apps/dashboard/dashboard.dev.tsx | 6 ++--- src/apps/dashboard/dashboard.entry.tsx | 2 +- src/apps/fee-list/FeeList.dev.tsx | 5 ++-- src/apps/fee-list/FeeList.entry.tsx | 2 +- src/apps/loan-list/list/loan-list.dev.tsx | 5 ++-- src/apps/loan-list/list/loan-list.entry.tsx | 4 ++-- .../materials/utils/status-badge.tsx | 23 ++++++------------ .../materials/utils/status-circle.tsx | 15 ++++-------- src/apps/menu/menu.dev.tsx | 5 ++-- src/apps/menu/menu.entry.tsx | 2 +- .../list/reservation-list.dev.tsx | 5 ++-- .../list/reservation-list.entry.tsx | 4 ++-- src/core/storybook/reservationListArgs.ts | 5 ++-- src/core/utils/config.tsx | 3 +++ src/core/utils/types/threshold-type.ts | 6 ----- src/core/utils/useLoanThresholds.tsx | 14 +++++++++++ src/core/utils/useLoans.tsx | 24 +++++++++---------- 17 files changed, 60 insertions(+), 70 deletions(-) delete mode 100644 src/core/utils/types/threshold-type.ts create mode 100644 src/core/utils/useLoanThresholds.tsx diff --git a/src/apps/dashboard/dashboard.dev.tsx b/src/apps/dashboard/dashboard.dev.tsx index c9786a8519..ec90b9aa74 100644 --- a/src/apps/dashboard/dashboard.dev.tsx +++ b/src/apps/dashboard/dashboard.dev.tsx @@ -156,10 +156,8 @@ export default { defaultValue: "Borrow before @date", control: { type: "text" } }, - // Config - thresholdConfig: { - defaultValue: - '{\n "colorThresholds":{\n "danger":"0",\n "warning":"6"\n }\n }', + expirationWarningDaysBeforeConfig: { + defaultValue: "6", control: { type: "text" } } }, diff --git a/src/apps/dashboard/dashboard.entry.tsx b/src/apps/dashboard/dashboard.entry.tsx index c3e370ba15..9bd38d261f 100644 --- a/src/apps/dashboard/dashboard.entry.tsx +++ b/src/apps/dashboard/dashboard.entry.tsx @@ -22,7 +22,7 @@ export interface DashBoardProps { // Config blacklistedPickupBranchesConfig: string; branchesConfig: string; - thresholdConfig: string; + expirationWarningDaysBeforeConfig: string; // Texts yourProfileText: string; feesText: string; diff --git a/src/apps/fee-list/FeeList.dev.tsx b/src/apps/fee-list/FeeList.dev.tsx index 467b6731d8..fc19783615 100644 --- a/src/apps/fee-list/FeeList.dev.tsx +++ b/src/apps/fee-list/FeeList.dev.tsx @@ -67,9 +67,8 @@ export default { defaultValue: "@amount,-", control: { type: "text" } }, - thresholdConfig: { - defaultValue: - '{\n "colorThresholds":{\n "danger":"0",\n "warning":"6"\n }\n }', + expirationWarningDaysBeforeConfig: { + defaultValue: "6", control: { type: "text" } }, iAcceptText: { diff --git a/src/apps/fee-list/FeeList.entry.tsx b/src/apps/fee-list/FeeList.entry.tsx index 61b0bbdb71..ad62d161c8 100644 --- a/src/apps/fee-list/FeeList.entry.tsx +++ b/src/apps/fee-list/FeeList.entry.tsx @@ -8,7 +8,7 @@ import GlobalUrlEntryPropsInterface from "../../core/utils/types/global-url-prop import { withConfig } from "../../core/utils/config"; export interface IntermedateListEntryConfigProps { - thresholdConfig: string; + expirationWarningDaysBeforeConfig: string; } export interface FeeListProps { diff --git a/src/apps/loan-list/list/loan-list.dev.tsx b/src/apps/loan-list/list/loan-list.dev.tsx index 57a8a7a9a4..408879246c 100644 --- a/src/apps/loan-list/list/loan-list.dev.tsx +++ b/src/apps/loan-list/list/loan-list.dev.tsx @@ -36,9 +36,8 @@ export default { control: { type: "number" } }, // Config - thresholdConfig: { - defaultValue: - '{\n "colorThresholds":{\n "danger":"0",\n "warning":"6"\n }\n }', + expirationWarningDaysBeforeConfig: { + defaultValue: "6", control: { type: "text" } }, // Texts diff --git a/src/apps/loan-list/list/loan-list.entry.tsx b/src/apps/loan-list/list/loan-list.entry.tsx index 270a7c7571..3ec0ecc434 100644 --- a/src/apps/loan-list/list/loan-list.entry.tsx +++ b/src/apps/loan-list/list/loan-list.entry.tsx @@ -14,11 +14,11 @@ import { MaterialDetailsModalProps } from "../../../core/storybook/materialDetai import { AcceptFeesModalEntryTextProps } from "../../../core/storybook/acceptFeesModalArgs"; export interface LoanListEntryConfigProps { - thresholdConfig: string; + expirationWarningDaysBeforeConfig: string; } export interface LoanListEntryUrlProps { materialOverdueUrl: string; - thresholdConfig: string; + expirationWarningDaysBeforeConfig: string; } interface LoanListEntryTextProps { diff --git a/src/apps/loan-list/materials/utils/status-badge.tsx b/src/apps/loan-list/materials/utils/status-badge.tsx index 528bd54c0e..a986d189c7 100644 --- a/src/apps/loan-list/materials/utils/status-badge.tsx +++ b/src/apps/loan-list/materials/utils/status-badge.tsx @@ -1,7 +1,6 @@ import React, { FC } from "react"; -import { ThresholdType } from "../../../../core/utils/types/threshold-type"; -import { useConfig } from "../../../../core/utils/config"; import { daysBetweenTodayAndDate } from "../../../../core/utils/helpers/general"; +import useLoanThresholds from "../../../../core/utils/useLoanThresholds"; interface StatusBadgeProps { badgeDate?: string | null; @@ -20,26 +19,18 @@ const StatusBadge: FC = ({ infoText, neutralText }) => { - const config = useConfig(); + const threshold = useLoanThresholds(); + const daysBetweenTodayAndDue = badgeDate + ? daysBetweenTodayAndDate(badgeDate) + : 0; - const { - colorThresholds: { danger, warning } - } = config("thresholdConfig", { - transformer: "jsonParse" - }); - - let daysBetweenTodayAndDue = 0; - if (badgeDate) { - daysBetweenTodayAndDue = daysBetweenTodayAndDate(badgeDate); - } - - if (daysBetweenTodayAndDue < Number(danger) && dangerText) { + if (daysBetweenTodayAndDue < threshold.danger && dangerText) { return (
{dangerText}
); } - if (daysBetweenTodayAndDue <= Number(warning) && warningText) { + if (daysBetweenTodayAndDue <= threshold.warning && warningText) { return (
{warningText}
); diff --git a/src/apps/loan-list/materials/utils/status-circle.tsx b/src/apps/loan-list/materials/utils/status-circle.tsx index 21f1593dc1..7fb6a0dd67 100644 --- a/src/apps/loan-list/materials/utils/status-circle.tsx +++ b/src/apps/loan-list/materials/utils/status-circle.tsx @@ -7,8 +7,7 @@ import { daysBetweenDates } from "../../../../core/utils/helpers/general"; import { useText } from "../../../../core/utils/text"; -import { useConfig } from "../../../../core/utils/config"; -import { ThresholdType } from "../../../../core/utils/types/threshold-type"; +import useLoanThresholds from "../../../../core/utils/useLoanThresholds"; interface StatusCircleProps { dueDate?: string | null; @@ -17,13 +16,9 @@ interface StatusCircleProps { const StatusCircle: FC = ({ loanDate, dueDate }) => { const t = useText(); - const config = useConfig(); const colors = getColors(); - const { - colorThresholds: { danger, warning } - } = config("thresholdConfig", { - transformer: "jsonParse" - }); + const threshold = useLoanThresholds(); + let color = colors.default; let percent = 100; let daysBetweenTodayAndDue = null; @@ -36,9 +31,9 @@ const StatusCircle: FC = ({ loanDate, dueDate }) => { if (percent < 0) { percent = 100; } - if (daysBetweenTodayAndDue < danger) { + if (daysBetweenTodayAndDue < threshold.danger) { color = colors.danger; - } else if (daysBetweenTodayAndDue <= warning) { + } else if (daysBetweenTodayAndDue <= threshold.warning) { color = colors.warning; } } else { diff --git a/src/apps/menu/menu.dev.tsx b/src/apps/menu/menu.dev.tsx index 157d7b9d06..a3e7dd5219 100644 --- a/src/apps/menu/menu.dev.tsx +++ b/src/apps/menu/menu.dev.tsx @@ -144,9 +144,8 @@ export default { defaultValue: "/Signup", control: { type: "text" } }, - thresholdConfig: { - defaultValue: - '{\n "colorThresholds":{\n "danger":"0",\n "warning":"6"\n }\n }', + expirationWarningDaysBeforeConfig: { + defaultValue: "6", control: { type: "text" } } } diff --git a/src/apps/menu/menu.entry.tsx b/src/apps/menu/menu.entry.tsx index 1f229c65bd..780c79da42 100644 --- a/src/apps/menu/menu.entry.tsx +++ b/src/apps/menu/menu.entry.tsx @@ -29,7 +29,7 @@ export interface MenuProps { loansSoonOverdueText: string; loansOverdueText: string; logoutUrl: string; - thresholdConfig: string; + expirationWarningDaysBeforeConfig: string; feeListDaysText: string; menuLoginText: string; menuLoginUrl: string; diff --git a/src/apps/reservation-list/list/reservation-list.dev.tsx b/src/apps/reservation-list/list/reservation-list.dev.tsx index 4a93383e80..96a6f89c5b 100644 --- a/src/apps/reservation-list/list/reservation-list.dev.tsx +++ b/src/apps/reservation-list/list/reservation-list.dev.tsx @@ -22,9 +22,8 @@ export default { defaultValue: "FBS-751032,FBS-751031,FBS-751009,FBS-751027,FBS-751024", control: { type: "text" } }, - thresholdConfig: { - defaultValue: - '{\n "colorThresholds":{\n "danger":"0",\n "warning":"6"\n }\n }', + expirationWarningDaysBeforeConfig: { + defaultValue: "6", control: { type: "text" } }, pauseReservationStartDateConfig: { diff --git a/src/apps/reservation-list/list/reservation-list.entry.tsx b/src/apps/reservation-list/list/reservation-list.entry.tsx index 7ddfb6e138..b8242a4074 100644 --- a/src/apps/reservation-list/list/reservation-list.entry.tsx +++ b/src/apps/reservation-list/list/reservation-list.entry.tsx @@ -11,13 +11,13 @@ import { ReservationMaterialDetailsProps } from "../../../core/storybook/reserva import { DeleteReservationModalArgs } from "../../../core/storybook/deleteReservationModalArgs"; export interface ReservationListUrlProps { - thresholdConfig: string; + expirationWarningDaysBeforeConfig: string; ereolenMyPageUrl: string; pauseReservationInfoUrl: string; } export interface ReservationListConfigProps { - thresholdConfig: string; + expirationWarningDaysBeforeConfig: string; pauseReservationStartDateConfig: string; blacklistedPickupBranchesConfig: string; branchesConfig: string; diff --git a/src/core/storybook/reservationListArgs.ts b/src/core/storybook/reservationListArgs.ts index 867555136c..ce828fc01e 100644 --- a/src/core/storybook/reservationListArgs.ts +++ b/src/core/storybook/reservationListArgs.ts @@ -4,9 +4,8 @@ export default { defaultValue: "FBS-751032,FBS-751031,FBS-751009,FBS-751027,FBS-751024", control: { type: "text" } }, - thresholdConfig: { - defaultValue: - '{\n "colorThresholds":{\n "danger":"0",\n "warning":"6"\n }\n }', + expirationWarningDaysBeforeConfig: { + defaultValue: "6", control: { type: "text" } }, pauseReservationStartDateConfig: { diff --git a/src/core/utils/config.tsx b/src/core/utils/config.tsx index 40076ef3b4..ae08197b68 100644 --- a/src/core/utils/config.tsx +++ b/src/core/utils/config.tsx @@ -17,6 +17,9 @@ function config( transformer: "stringToArray"; } ): string[]; + +function config(key: string): T; + function config(): T | string | string[] { return []; } diff --git a/src/core/utils/types/threshold-type.ts b/src/core/utils/types/threshold-type.ts deleted file mode 100644 index 06134fe93b..0000000000 --- a/src/core/utils/types/threshold-type.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface ThresholdType { - colorThresholds: { - danger: number; - warning: number; - }; -} diff --git a/src/core/utils/useLoanThresholds.tsx b/src/core/utils/useLoanThresholds.tsx new file mode 100644 index 0000000000..45c13061cf --- /dev/null +++ b/src/core/utils/useLoanThresholds.tsx @@ -0,0 +1,14 @@ +import { useConfig } from "./config"; + +type Days = number; + +const useLoanThresholds = (): { warning: Days; danger: Days } => { + const config = useConfig(); + + return { + warning: Number(config<`${number}`>("expirationWarningDaysBeforeConfig")), + danger: 0 + }; +}; + +export default useLoanThresholds; diff --git a/src/core/utils/useLoans.tsx b/src/core/utils/useLoans.tsx index a4ffc20277..aa56c5dc93 100644 --- a/src/core/utils/useLoans.tsx +++ b/src/core/utils/useLoans.tsx @@ -1,13 +1,12 @@ import { useGetLoansV2 } from "../fbs/fbs"; import { useGetV1UserLoans } from "../publizon/publizon"; -import { useConfig } from "./config"; import { daysBetweenTodayAndDate, materialIsOverdue } from "./helpers/general"; import { mapFBSLoanToLoanType, mapPublizonLoanToLoanType } from "./helpers/list-mapper"; import { LoanType } from "./types/loan-type"; -import { ThresholdType } from "./types/threshold-type"; +import useLoanThresholds from "./useLoanThresholds"; // Loans with more than warning-threshold days until due const filterLoansNotOverdue = (loans: LoanType[], warning: number) => { @@ -75,7 +74,6 @@ type UseLoansType = { type UseLoans = () => UseLoansType; const useLoans: UseLoans = () => { - const config = useConfig(); const { data: loansFbs, isLoading: isLoadingFbs, @@ -86,12 +84,8 @@ const useLoans: UseLoans = () => { isLoading: isLoadingPublizon, isError: isErrorPublizon } = useGetV1UserLoans(); - const { - colorThresholds: { warning } - } = config("thresholdConfig", { - transformer: "jsonParse" - }); + const threshold = useLoanThresholds(); const loansIsLoading = isLoadingFbs || isLoadingPublizon; const loansIsError = isErrorFbs || isErrorPublizon; @@ -116,10 +110,13 @@ const useLoans: UseLoans = () => { ]); // combine "soon overdue" loans from both FBS and Publizon - const loansSoonOverdueFBS = filterLoansSoonOverdue(mappedLoansFbs, warning); + const loansSoonOverdueFBS = filterLoansSoonOverdue( + mappedLoansFbs, + threshold.warning + ); const loansSoonOverduePublizon = filterLoansSoonOverdue( mappedLoansPublizon, - warning + threshold.warning ); const loansSoonOverdue = sortByDueDate([ ...loansSoonOverdueFBS, @@ -127,10 +124,13 @@ const useLoans: UseLoans = () => { ]); // combine "far from overdue" loans from both FBS and Publizon - const loansFarFromOverdueFBS = filterLoansNotOverdue(mappedLoansFbs, warning); + const loansFarFromOverdueFBS = filterLoansNotOverdue( + mappedLoansFbs, + threshold.warning + ); const loansFarFromOverduePublizon = filterLoansNotOverdue( mappedLoansPublizon, - warning + threshold.warning ); const loansFarFromOverdue = sortByDueDate([ ...loansFarFromOverdueFBS,