move to hook

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

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);
+}

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);
-};