diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx index 02591dabb..29578cdf3 100644 --- a/src/pages/[slug].tsx +++ b/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 ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c4ab22ef1..ae65d9961 100644 --- a/src/pages/index.tsx +++ b/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 ( diff --git a/src/tools/getServerSideTranslations.ts b/src/tools/getServerSideTranslations.ts new file mode 100644 index 000000000..5576fafc7 --- /dev/null +++ b/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; +}; diff --git a/src/types/dashboardPageType.ts b/src/types/dashboardPageType.ts new file mode 100644 index 000000000..416c3b1bf --- /dev/null +++ b/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']; +};