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

@@ -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" }
     }
   },

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;

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: {

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 {

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

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 {

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<StatusBadgeProps> = ({
   infoText,
   neutralText
 }) => {
-  const config = useConfig();
+  const threshold = useLoanThresholds();
+  const daysBetweenTodayAndDue = badgeDate
+    ? daysBetweenTodayAndDate(badgeDate)
+    : 0;
 
-  const {
-    colorThresholds: { danger, warning }
-  } = config<ThresholdType>("thresholdConfig", {
-    transformer: "jsonParse"
-  });
-
-  let daysBetweenTodayAndDue = 0;
-  if (badgeDate) {
-    daysBetweenTodayAndDue = daysBetweenTodayAndDate(badgeDate);
-  }
-
-  if (daysBetweenTodayAndDue < Number(danger) && dangerText) {
+  if (daysBetweenTodayAndDue < threshold.danger && dangerText) {
     return (
       <div className="status-label status-label--danger">{dangerText}</div>
     );
   }
 
-  if (daysBetweenTodayAndDue <= Number(warning) && warningText) {
+  if (daysBetweenTodayAndDue <= threshold.warning && warningText) {
     return (
       <div className="status-label status-label--warning">{warningText}</div>
     );

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<StatusCircleProps> = ({ loanDate, dueDate }) => {
   const t = useText();
-  const config = useConfig();
   const colors = getColors();
-  const {
-    colorThresholds: { danger, warning }
-  } = config<ThresholdType>("thresholdConfig", {
-    transformer: "jsonParse"
-  });
+  const threshold = useLoanThresholds();
+
   let color = colors.default;
   let percent = 100;
   let daysBetweenTodayAndDue = null;
@@ -36,9 +31,9 @@ const StatusCircle: FC<StatusCircleProps> = ({ 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 {

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" }
     }
   }

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;

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: {

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;

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: {

src/core/utils/config.tsx

@@ -17,6 +17,9 @@ function config(
     transformer: "stringToArray";
   }
 ): string[];
+
+function config<T>(key: string): T;
+
 function config<T>(): T | string | string[] {
   return [];
 }

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;

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<ThresholdType>("thresholdConfig", {
-    transformer: "jsonParse"
-  });
 
+  const threshold = useLoanThresholds();
   const loansIsLoading = isLoadingFbs || isLoadingPublizon;
   const loansIsError = isErrorFbs || isErrorPublizon;
 
@@ -116,21 +110,27 @@ 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,
     ...loansSoonOverduePublizon
   ]);
 
   // 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,