🐛 Fix slug page and refactor server side translations code

src/pages/[slug].tsx

@@ -1,31 +1,27 @@
-import { getCookie } from 'cookies-next';
 import fs from 'fs';
 import { GetServerSidePropsContext } from 'next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import path from 'path';
-import { useEffect } from 'react';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import { Dashboard } from '../components/Dashboard/Dashboard';
 import Layout from '../components/layout/Layout';
-import { useConfigContext } from '../config/provider';
-import { useConfigStore } from '../config/store';
-import { getConfig } from '../tools/getConfig';
+import { useInitConfig } from '../config/init';
+import { getFrontendConfig } from '../tools/config/getFrontendConfig';
+import { getServerSideTranslations } from '../tools/getServerSideTranslations';
 import { dashboardNamespaces } from '../tools/translation-namespaces';
-import { ConfigType } from '../types/config';
-
-type ServerSideProps = {
-  config: ConfigType;
-};
+import { DashboardServerSideProps } from '../types/dashboardPageType';
 
 export async function getServerSideProps({
   req,
   res,
   locale,
   query,
-}: GetServerSidePropsContext): Promise<{ props: ServerSideProps }> {
-  const configByUrl = query.slug;
-  const configPath = path.join(process.cwd(), 'data/configs', `${configByUrl}.json`);
+}: GetServerSidePropsContext): Promise<{ props: DashboardServerSideProps }> {
+  const configName = query.slug as string;
+  const configPath = path.join(process.cwd(), 'data/configs', `${configName}.json`);
   const configExists = fs.existsSync(configPath);
+
+  const translations = await getServerSideTranslations(req, res, dashboardNamespaces, locale);
+
   if (!configExists) {
     // Redirect to 404
     res.writeHead(301, { Location: '/404' });
@@ -64,26 +60,26 @@ export async function getServerSideProps({
           wrappers: [],
           widgets: [],
         },
+        configName,
+        ...translations,
       },
     };
   }
 
-  const configLocale = getCookie('config-locale', { req, res });
-  const targetLanguage = (configLocale ?? locale) as string;
-  const translations = await serverSideTranslations(targetLanguage, dashboardNamespaces);
-  return getConfig(configByUrl as string, translations);
+  const config = getFrontendConfig(configName as string);
+
+  return {
+    props: {
+      configName,
+      config,
+      ...translations,
+    },
+  };
 }
 
-export default function HomePage(props: any) {
-  const { config: initialConfig }: { config: ConfigType } = props;
-  const { name: configName } = useConfigContext();
-  const { updateConfig } = useConfigStore();
-  useEffect(() => {
-    if (!configName) {
-      return;
-    }
-    updateConfig(configName, () => initialConfig);
-  }, [initialConfig]);
+export default function HomePage({ config: initialConfig }: DashboardServerSideProps) {
+  useInitConfig(initialConfig);
+
   return (
     <Layout>
       <Dashboard />

src/pages/index.tsx

@@ -1,7 +1,5 @@
 import { getCookie, setCookie } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
-import { SSRConfig } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 import fs from 'fs';
 import LoadConfigComponent from '../components/Config/LoadConfig';
@@ -9,22 +7,15 @@ import { Dashboard } from '../components/Dashboard/Dashboard';
 import Layout from '../components/layout/Layout';
 import { useInitConfig } from '../config/init';
 import { getFrontendConfig } from '../tools/config/getFrontendConfig';
+import { getServerSideTranslations } from '../tools/getServerSideTranslations';
 import { dashboardNamespaces } from '../tools/translation-namespaces';
-import { ConfigType } from '../types/config';
-
-type ServerSideProps = {
-  config: ConfigType;
-  // eslint-disable-next-line react/no-unused-prop-types
-  configName: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  _nextI18Next: SSRConfig['_nextI18Next'];
-};
+import { DashboardServerSideProps } from '../types/dashboardPageType';
 
 export async function getServerSideProps({
   req,
   res,
   locale,
-}: GetServerSidePropsContext): Promise<{ props: ServerSideProps }> {
+}: GetServerSidePropsContext): Promise<{ props: DashboardServerSideProps }> {
   // Check that all the json files in the /data/configs folder are migrated
   // If not, redirect to the migrate page
   const configs = await fs.readdirSync('./data/configs');
@@ -40,11 +31,10 @@ export async function getServerSideProps({
     });
     res.end();
 
-    return { props: {} as ServerSideProps };
+    return { props: {} as DashboardServerSideProps };
   }
 
   let configName = getCookie('config-name', { req, res });
-  const configLocale = getCookie('config-locale', { req, res });
   if (!configName) {
     setCookie('config-name', 'default', {
       req,
@@ -55,10 +45,7 @@ export async function getServerSideProps({
     configName = 'default';
   }
 
-  const translations = await serverSideTranslations(
-    (configLocale ?? locale) as string,
-    dashboardNamespaces
-  );
+  const translations = await getServerSideTranslations(req, res, dashboardNamespaces, locale);
   const config = getFrontendConfig(configName as string);
 
   return {
@@ -66,7 +53,7 @@ export async function getServerSideProps({
   };
 }
 
-export default function HomePage({ config: initialConfig }: ServerSideProps) {
+export default function HomePage({ config: initialConfig }: DashboardServerSideProps) {
   useInitConfig(initialConfig);
 
   return (

src/tools/getServerSideTranslations.ts

@@ -0,0 +1,19 @@
+import { getCookie } from 'cookies-next';
+import { IncomingMessage, ServerResponse } from 'http';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+
+export const getServerSideTranslations = async (
+  req: IncomingMessage,
+  res: ServerResponse,
+  namespaces: string[],
+  requestLocale?: string
+) => {
+  const configLocale = getCookie('config-locale', { req, res });
+
+  const translations = await serverSideTranslations(
+    (configLocale ?? requestLocale ?? 'en') as string,
+    namespaces
+  );
+
+  return translations;
+};

src/types/dashboardPageType.ts

@@ -0,0 +1,10 @@
+import { SSRConfig } from 'next-i18next';
+import { ConfigType } from './config';
+
+export type DashboardServerSideProps = {
+  config: ConfigType;
+  // eslint-disable-next-line react/no-unused-prop-types
+  configName: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  _nextI18Next: SSRConfig['_nextI18Next'];
+};