refactor(i18n): add better types to our custom defineMessages (#1192)

src/components/Discover/DiscoverTvUpcoming.tsx

@@ -7,7 +7,9 @@ import defineMessages from '@app/utils/defineMessages';
 import type { TvResult } from '@server/models/Search';
 import { useIntl } from 'react-intl';
 
-const messages = defineMessages('components.DiscoverTvUpcoming', {});
+const messages = defineMessages('components.DiscoverTvUpcoming', {
+  upcomingtv: 'Upcoming Series',
+});
 
 const DiscoverTvUpcoming = () => {
   const intl = useIntl();

src/i18n/locale/en.json

@@ -100,6 +100,7 @@
   "components.Discover.StudioSlider.studios": "Studios",
   "components.Discover.TvGenreList.seriesgenres": "Series Genres",
   "components.Discover.TvGenreSlider.tvgenres": "Series Genres",
+  "components.DiscoverTvUpcoming.upcomingtv": "Upcoming Series",
   "components.Discover.createnewslider": "Create New Slider",
   "components.Discover.customizediscover": "Customize Discover",
   "components.Discover.discover": "Discover",

src/utils/defineMessages.ts

@@ -1,18 +1,26 @@
 import { defineMessages as intlDefineMessages } from 'react-intl';
 
-export default function defineMessages(
+type Messages<T extends Record<string, string>> = {
+  [K in keyof T]: {
+    id: string;
+    defaultMessage: T[K];
+  };
+};
+
+export default function defineMessages<T extends Record<string, string>>(
   prefix: string,
-  messages: Record<string, string>
+  messages: T
-) {
+): Messages<T> {
-  const modifiedMessages: Record<
+  const keys: (keyof T)[] = Object.keys(messages);
-    string,
+  const modifiedMessagesEntries = keys.map((key) => [
-    { id: string; defaultMessage: string }
+    key,
-  > = {};
+    {
-  for (const key of Object.keys(messages)) {
+      id: `${prefix}.${key as string}`,
-    modifiedMessages[key] = {
-      id: prefix + '.' + key,
       defaultMessage: messages[key],
-    };
+    },
-  }
+  ]);
+  const modifiedMessages: Messages<T> = Object.fromEntries(
+    modifiedMessagesEntries
+  );
   return intlDefineMessages(modifiedMessages);
 }