diff --git a/components/protectedRoute.tsx b/components/protectedRoute.tsx index 6a6e787..5b044a3 100644 --- a/components/protectedRoute.tsx +++ b/components/protectedRoute.tsx @@ -18,7 +18,7 @@ const ProtectedRoute = ({ children, allowedRoles, deniedMessage, bypass = false, const router = useRouter(); useEffect(() => { - console.log("session.role:" + session?.user?.role); + //console.log("session.role:" + session?.user?.role); if (!status || status === "unauthenticated") { // Redirect to the sign-in page if (autoRedirect) { diff --git a/components/sidebar.tsx b/components/sidebar.tsx index 51fb030..4ae481e 100644 --- a/components/sidebar.tsx +++ b/components/sidebar.tsx @@ -1,12 +1,13 @@ import { signIn, signOut, useSession } from "next-auth/react"; import styles from "../styles/header.module.css"; -import React, { useState, useEffect, useRef } from "react"; +import React, { useState, useEffect, useRef, use } from "react"; import { useRouter } from 'next/router'; import sidemenu, { footerMenu } from './sidemenuData.js'; // Move sidemenu data to a separate file import axiosInstance from "src/axiosSecure"; import common from "src/helpers/common"; import LanguageSwitcher from "./languageSwitcher"; import { useTranslations } from 'next-intl'; +import { getTranslations } from 'next-intl/server'; import ProtectedPage from "pages/examples/protected"; import ProtectedRoute from "./protectedRoute"; import { UserRole } from "@prisma/client"; @@ -15,7 +16,11 @@ const packageVersion = require('../package.json').version; function SidebarMenuItem({ item, session, isSubmenu }) { // const tMenu = useTranslations('menu'); - const t = useTranslations('common'); + // const [t, locale] = useState(useTranslations('menu')); + // useEffect(() => { + // console.log("SidebarMenuItem locale: ", locale); + // locale(useTranslations('common')); + // }, [locale]); const router = useRouter(); const isActive = router.pathname.includes(item.url); diff --git a/pages/_app.tsx b/pages/_app.tsx index a46da0b..f6150ad 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,11 +4,13 @@ import "../styles/styles.css" import "../styles/global.css" import "tailwindcss/tailwind.css" -import type { AppProps } from "next/app"; +import App, { AppContext, AppProps } from 'next/app'; import type { Session } from "next-auth"; import { useEffect, useState } from "react" import { useRouter } from "next/router"; import { NextIntlClientProvider } from 'next-intl'; +import { getServerSession } from "next-auth/next"; + // for fontawesome import Head from 'next/head'; @@ -25,41 +27,25 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs' // } -export default function App({ Component, pageProps: { session, ...pageProps }, }: AppProps<{ session: Session }>) { - // console.log(pageProps); - const router = useRouter(); - const [locale, setLocale] = useState(router.locale || 'bg'); - const [messages, setMessages] = useState({}); - - useEffect(() => { - console.log("Current locale:", router.locale); - async function loadLocaleData() { - // Replace the static import with a fetch request - const res = await fetch(`/api/translations/${locale}`); - if (res.ok) { - const localeMessages = await res.json(); - console.log("Loaded messages for locale:", locale, localeMessages); - setMessages(localeMessages); - } else { - const localeMessages = await import(`../content/i18n/${locale}.json`); setMessages(localeMessages.default); - } - console.log("Loaded locale '", locale, "' ",); - //console.log("Loaded messages for locale:", router.locale, localeMessages.default); - - } - loadLocaleData(); - }, [locale]); - +//function SmwsApp({ Component, pageProps: { locale, messages, session, ...pageProps }, }: AppProps<{ session: Session }>) { +function SmwsApp({ Component, pageProps, session, locale, messages }) { + // dynamic locale loading using our API endpoint + // const [locale, setLocale] = useState(router.locale || 'bg'); + // const [messages, setMessages] = useState({}); // useEffect(() => { // async function loadLocaleData() { - // const locale = router.locale || 'en'; - // const messages = await fetch(`/api/translations/${locale}`).then(res => res.json()); - // setMessages(messages); + // const res = await fetch(`/api/translations/${locale}`); + // if (res.ok) { + // const localeMessages = await res.json(); + // console.log("Loaded messages for locale:", locale, localeMessages); + // setMessages(localeMessages); + // } else { + // const localeMessages = await import(`../content/i18n/${locale}.json`); setMessages(localeMessages.default); + // } + // console.log("locale set to'", locale, "' ",); // } - // loadLocaleData(); - // }, [router.locale]); - + // }, [locale]); useEffect(() => { const use = async () => { @@ -102,7 +88,7 @@ export default function App({ Component, pageProps: { session, ...pageProps }, } return ( <> @@ -116,17 +102,25 @@ export default function App({ Component, pageProps: { session, ...pageProps }, } ) } -// build time localization. Is it working for _app.tsx?d -export async function getStaticProps(context) { - const messages = (await import(`../content/i18n/${context.locale}.json`)).default; - console.log("Loaded messages for locale:", context.locale, messages); - return { - props: { - // You can get the messages from anywhere you like. The recommended - // pattern is to put them in JSON files separated by locale and read - // the desired one based on the `locale` received from Next.js. - // messages: (await import(`../content/i18n/${context.locale}.json`)).default - messages - } - }; +async function loadLocaleData(locale) { + try { + const messages = await import(`../content/i18n/${locale}.json`); + return messages.default; + } catch (e) { + console.warn("Could not load locale data for:", locale); + return {}; + } } + +SmwsApp.getInitialProps = async (appContext: AppContext) => { + const appProps = await App.getInitialProps(appContext); + const locale = appContext.router.locale || 'bg'; + const messages = await loadLocaleData(locale); + + return { + ...appProps, + locale, + messages, + }; +}; +export default SmwsApp; \ No newline at end of file