From 9023686805dbf9bc9068e7da7cbe762e7788d31b Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Sun, 25 Aug 2024 18:38:59 -0500
Subject: [PATCH] move to hook

---
 .../schedules/PostsOfflineNotification.jsx    |  4 +--
 .../desktop-client/src/hooks/useFormatList.ts | 25 ++++++++++++++++++
 packages/desktop-client/src/i18n.ts           | 26 -------------------
 3 files changed, 27 insertions(+), 28 deletions(-)
 create mode 100644 packages/desktop-client/src/hooks/useFormatList.ts

diff --git a/packages/desktop-client/src/components/schedules/PostsOfflineNotification.jsx b/packages/desktop-client/src/components/schedules/PostsOfflineNotification.jsx
index 26fa6f56343..a1ba84dd3a4 100644
--- a/packages/desktop-client/src/components/schedules/PostsOfflineNotification.jsx
+++ b/packages/desktop-client/src/components/schedules/PostsOfflineNotification.jsx
@@ -6,7 +6,7 @@ import { useLocation } from 'react-router-dom';
 import { popModal } from 'loot-core/client/actions';
 import { send } from 'loot-core/src/platform/client/fetch';
 
-import { i18nObjectList } from '../../i18n';
+import { useFormatList } from '../../hooks/useFormatList';
 import { theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal2';
@@ -33,7 +33,7 @@ export function PostsOfflineNotification() {
       <DisplayId id={id} type="payees" />
     </Text>
   ));
-  const payeeNamesList = i18nObjectList(payeesList, t.language);
+  const payeeNamesList = useFormatList(payeesList, t.language);
 
   return (
     <Modal name="schedule-posts-offline-notification">
diff --git a/packages/desktop-client/src/hooks/useFormatList.ts b/packages/desktop-client/src/hooks/useFormatList.ts
new file mode 100644
index 00000000000..02c2b07a190
--- /dev/null
+++ b/packages/desktop-client/src/hooks/useFormatList.ts
@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+
+const interleaveArrays = (...arrays: ReactNode[][]) =>
+  Array.from(
+    {
+      length: Math.max(...arrays.map(array => array.length)),
+    },
+    (_, i) => arrays.map(array => array[i]),
+  ).flat();
+
+export function useFormatList(values: ReactNode[], lng: string, opt = {}) {
+  const formatter = new Intl.ListFormat(lng, {
+    style: 'long',
+    type: 'conjunction',
+    ...opt,
+  });
+
+  const placeholders = Array.from(
+    { length: values.length },
+    (_, i) => `<${i}>`,
+  );
+  const formatted = formatter.format(placeholders);
+  const parts = formatted.split(/<\d+>/g);
+  return interleaveArrays(parts, values);
+}
diff --git a/packages/desktop-client/src/i18n.ts b/packages/desktop-client/src/i18n.ts
index 79cbcd54043..e0a2100b28d 100644
--- a/packages/desktop-client/src/i18n.ts
+++ b/packages/desktop-client/src/i18n.ts
@@ -28,29 +28,3 @@ i18n
       transSupportBasicHtmlNodes: false,
     },
   });
-
-const interleaveArrays = (
-  ...arrays: (React.ReactNode | string)[][]
-) =>
-  Array.from(
-    {
-      length: Math.max(...arrays.map(array => array.length)),
-    },
-    (_, i) => arrays.map(array => array[i]),
-  ).flat();
-
-export const i18nObjectList = (values: (React.ReactNode | string)[], lng: string, opt = {}) => {
-  const formatter = new Intl.ListFormat(lng, {
-    style: 'long',
-    type: 'conjunction',
-    ...opt,
-  });
-
-  const placeholders = Array.from(
-    { length: values.length },
-    (_, i) => `<${i}>`,
-  );
-  const formatted = formatter.format(placeholders);
-  const parts = formatted.split(/<\d+>/g);
-  return interleaveArrays(parts, values);
-};