Extract getLoaderConfig function

giscus · laymonage · Oct 22, 2021 · Oct 19, 2021 · Oct 19, 2021 · Oct 19, 2021
commit b57796919a0f5f78316b47b4af0c389bea8134cd
diff --git a/lib/i18n.ts b/lib/i18n.ts
@@ -1,3 +1,4 @@
+import { LoaderConfig } from 'next-translate';
 import useTranslation from 'next-translate/useTranslation';
 import { useCallback } from 'react';
 
@@ -35,6 +36,32 @@ interface GiscusTranslate {
   (i18nKey: I18nKeysNoCount, query?: TranslationQuery): string;
 }
 
+export const availableLanguages = {
+  en: 'English',
+  pl: 'Polish',
+  ro: 'Romanian',
+} as const;
+
+export type AvailableLanguage = keyof typeof availableLanguages;
+
+const availableLocales = Object.keys(availableLanguages);
+
+export function getLoaderConfig(lang: AvailableLanguage, pathname: string): LoaderConfig {
+  return {
+    locale: lang,
+    locales: availableLocales,
+    loader: false,
+    defaultLocale: 'en',
+    pathname,
+    pages: {
+      '*': ['common'],
+    },
+    async loadLocaleFrom(language, namespace) {
+      return import(`../locales/${language}/${namespace}.json`).then((m) => m.default);
+    },
+  };
+}
+
 export const useGiscusTranslation = () => {
   const { t, lang } = useTranslation('common');
   return { t: t as GiscusTranslate, lang };
@@ -49,11 +76,11 @@ const dateFormat: Intl.DateTimeFormatOptions = {
   timeZoneName: 'short',
 };
 
-const dateFormatters = {
+const dateFormatters: Record<AvailableLanguage, Intl.DateTimeFormat> = {
   en: new Intl.DateTimeFormat('en', dateFormat),
   pl: new Intl.DateTimeFormat('pl', dateFormat),
   ro: new Intl.DateTimeFormat('ro', dateFormat),
-} as const;
+};
 
 export const useDateFormatter = () => {
   const { lang } = useTranslation('common');

diff --git a/pages/widget.tsx b/pages/widget.tsx
@@ -14,6 +14,7 @@ import { env, Theme } from '../lib/variables';
 import { getAppAccessToken } from '../services/github/getAppAccessToken';
 import { getRepoConfig } from '../services/github/getConfig';
 import { I18nDictionary } from 'next-translate';
+import { AvailableLanguage, availableLanguages, getLoaderConfig } from '../lib/i18n';
 
 export async function getServerSideProps({ query, res }: GetServerSidePropsContext) {
   const origin = (query.origin as string) || '';
@@ -51,18 +52,8 @@ export async function getServerSideProps({ query, res }: GetServerSidePropsConte
     res.setHeader('Content-Security-Policy', `frame-ancestors 'self' ${originsStr};`);
   }
 
-  const { __lang, __namespaces } = await loadNamespaces({
-    locale: lang,
-    locales: ['en', 'pl'],
-    defaultLocale: 'en',
-    pathname: '/widget',
-    pages: {
-      '*': ['common'],
-    },
-    async loadLocaleFrom(language, namespace) {
-      return import(`../locales/${language}/${namespace}.json`).then((m) => m.default);
-    },
-  });
+  const i18nLoaderConfig = getLoaderConfig(lang as AvailableLanguage, '/widget');
+  const { __lang, __namespaces } = await loadNamespaces(i18nLoaderConfig);
 
   return {
     props: {
@@ -79,7 +70,7 @@ export async function getServerSideProps({ query, res }: GetServerSidePropsConte
       emitMetadata,
       theme,
       originHost,
-      lang: __lang,
+      lang: __lang as AvailableLanguage,
       namespaces: __namespaces as Record<string, I18nDictionary>,
     },
   };