popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix i18n server side resource messages loading; setup loading language resources on the server

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-30 20:22:10 +03:00
parent e3d75180d7
commit 176c14a8e0
3 changed files with 48 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/protectedRoute.tsx
View File

@ -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) {

9
components/sidebar.tsx
View File

@ -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);

86
pages/_app.tsx
View File

@ -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 (
<>
<NextIntlClientProvider
locale={'bg'}
locale={locale}
timeZone="Europe/Sofia"
messages={messages}
>
@ -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;