bb-work-org · iRevolutionDev · Sep 17, 2023 · Sep 16, 2023 · Sep 16, 2023 · Sep 17, 2023
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint",
-		"tauri-dev": "tauri dev"
+		"tauri-dev": "tauri dev",
+		"i18next-resources-for-ts": "i18next-resources-for-ts interface -i ./src/i18n/locales/en -o ./src/@types/resources.d.ts"
 	},
 	"dependencies": {
 		"@emotion/cache": "^11.11.0",
@@ -27,6 +28,7 @@
 		"eslint": "8.48.0",
 		"eslint-config-next": "13.4.19",
 		"next": "13.4.19",
+		"next-intl": "^2.20.0",
 		"notistack": "^3.0.1",
 		"postcss": "8.4.29",
 		"react": "18.2.0",
@@ -40,6 +42,7 @@
 	},
 	"devDependencies": {
 		"@tauri-apps/cli": "^1.4.0",
+		"i18next-resources-for-ts": "^1.3.3",
 		"prettier": "^3.0.3"
 	}
 }
diff --git a/src/@types/language-names.ts b/src/@types/language-names.ts
@@ -0,0 +1,3 @@
+export type LanguagesNames = {
+	[key: string]: string;
+};
diff --git a/src/@types/resources.d.ts b/src/@types/resources.d.ts
@@ -0,0 +1,2 @@
+type Locale = typeof import("@/i18n/locales/en.json");
+declare interface IntlMessages extends Locale {}
diff --git a/src/app/(dashboard)/dashboard/settings/page.tsx b/src/app/(dashboard)/dashboard/settings/page.tsx
diff --git a/src/app/(dashboard)/dashboard/page.tsx → ...p/[locale]/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx → ...p/[locale]/(dashboard)/dashboard/page.tsx
diff --git a/src/app/[locale]/(dashboard)/dashboard/settings/page.tsx b/src/app/[locale]/(dashboard)/dashboard/settings/page.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import {
+	DialogTitle,
+	List,
+	ListItem,
+	ListItemButton,
+	ListItemIcon,
+	ListItemSecondaryAction,
+	ListItemText,
+	Typography,
+} from "@mui/material";
+import { Check, Language } from "@mui/icons-material";
+import { BottomModal } from "@/components/bottom-modal";
+import { DialogBody } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
+import { languages } from "@/i18n/settings";
+import { languageFormat } from "@/helpers/language-format";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useAppDispatch, useAppSelector } from "@/redux/hooks";
+import { setSettings } from "@/redux/features/settings-slice";
+import { useTranslations } from "use-intl";
+
+export default function Settings() {
+	const router = useRouter();
+
+	const dispatch = useAppDispatch();
+	const { locale } = useAppSelector((state) => state.settings);
+
+	const t = useTranslations("settings");
+
+	const [selectLanguage, setSelectLanguage] = useState(false);
+
+	return (
+		<>
+			<List>
+				<ListItem disablePadding>
+					<ListItemButton  => setSelectLanguage(true)}>
+						<ListItemIcon>
+							<Language />
+						</ListItemIcon>
+						<ListItemText primary={t("language")} />
+						<ListItemSecondaryAction>
+							<Typography variant="body2">
+								{languageFormat(locale)}
+							</Typography>
+						</ListItemSecondaryAction>
+					</ListItemButton>
+				</ListItem>
+			</List>
+
+			<BottomModal
+				open={selectLanguage}
+				 => setSelectLanguage(false)}
+			>
+				<DialogTitle>{t("modals.language.title")}</DialogTitle>
+				<DialogBody>
+					<List>
+						{languages.map((language) => (
+							<ListItem key={language} disablePadding>
+								<ListItemButton
+									 => {
+										router.push(
+											`/${language}/dashboard/settings`,
+										);
+										dispatch(
+											setSettings({
+												locale: language,
+											}),
+										);
+										setSelectLanguage(false);
+									}}
+								>
+									<ListItemText
+			
1E0A
							primary={languageFormat(language)}
+										sx={{ pl: 2 }}
+									/>
+									<ListItemSecondaryAction sx={{ pr: 2 }}>
+										{locale === language && <Check />}
+									</ListItemSecondaryAction>
+								</ListItemButton>
+							</ListItem>
+						))}
+					</List>
+				</DialogBody>
+			</BottomModal>
+		</>
+	);
+}
diff --git a/src/app/(dashboard)/layout.tsx → src/app/[locale]/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx → src/app/[locale]/(dashboard)/layout.tsx
@@ -7,20 +7,22 @@ import { clearAuth } from "@/redux/features/auth-slice";
 import { Navbar } from "@/components/navbar";
 import { enqueueSnackbar } from "notistack";
 import { Routes } from "@/constants/routes";
+import { useWithLocale } from "@/hooks/useWithLocale";
 
 export default function Layout({ children }: PropsWithChildren) {
 	const router = useRouter();
+	const withLocale = useWithLocale();
 	const dispatch = useAppDispatch();
 	const { loggedIn } = useAppSelector((state) => state.auth);
 
 	const { data: auth } = useAuthenticatedQuery();
 
 	useEffect(() => {
-		if (!loggedIn) router.push("/");
+		if (!loggedIn) router.push(withLocale("/"));
 
 		if (auth?.status === 401) {
 			dispatch(clearAuth());
-			router.push("/");
+			router.push(withLocale("/"));
 
 			enqueueSnackbar("Session expired", {
 				variant: "warning",

diff --git a/src/app/(dashboard)/profile/page.tsx → ...app/[locale]/(dashboard)/profile/page.tsx b/src/app/(dashboard)/profile/page.tsx → ...app/[locale]/(dashboard)/profile/page.tsx
diff --git a/src/app/favicon.ico → src/app/[locale]/favicon.ico b/src/app/favicon.ico → src/app/[locale]/favicon.ico
diff --git a/src/app/globals.css → src/app/[locale]/globals.css b/src/app/globals.css → src/app/[locale]/globals.css
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -0,0 +1,33 @@
+import "./globals.css";
+import React, { PropsWithChildren } from "react";
+import ThemeRegistry from "@/theme/theme-registry";
+import { Providers } from "@/redux/provider";
+import { languages } from "@/i18n/settings";
+import { NextIntlClientProvider } from "next-intl";
+import { getTranslations } from "@/i18n/i18n";
+
+export async function generateStaticParams() {
+	return languages.map((locale) => ({ locale }));
+}
+
+export default async function RootLayout({
+	children,
+	params: { locale },
+}: PropsWithChildren<{ params: { locale: string } }>) {
+	const localeMessages = await getTranslations(locale);
+
+	return (
+		<html lang={locale}>
+			<body>
+				<NextIntlClientProvider
+					locale={locale}
+					messages={localeMessages}
+				>
+					<Providers>
+						<ThemeRegistry>{children}</ThemeRegistry>
+					</Providers>
+				</NextIntlClientProvider>
+			</body>
+		</html>
+	);
+}
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -0,0 +1,23 @@
+import { Avatar, Container, Stack } from "@mui/material";
+import { LockOutlined } from "@mui/icons-material";
+import SignForm from "@/components/sign-form";
+
+export default function Home() {
+	return (
+		<Container component="main" className="h-screen">
+			<Stack
+				justifyContent="center"
+				alignItems="center"
+				direction="column"
+				spacing={2}
+				className="h-full"
+			>
+				<Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+					<LockOutlined />
+				</Avatar>
+
+				<SignForm />
+			</Stack>
+		</Container>
+	);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,22 +1,5 @@
-"use client";
-import "./globals.css";
-import React, {PropsWithChildren} from "react";
-import ThemeRegistry from "@/theme/theme-registry";
-import {Providers} from "@/redux/provider";
-import {SnackbarProvider} from "notistack";
+import { PropsWithChildren } from "react";
 
-export default function RootLayout({children}: PropsWithChildren) {
-    return (
-        <html lang="en">
-        <body>
-        <Providers>
-            <ThemeRegistry>
-                <SnackbarProvider maxSnack={3}>
-                    {children}
-                </SnackbarProvider>
-            </ThemeRegistry>
-        </Providers>
-        </body>
-        </html>
-    );
+export default function RootLayout({ children }: PropsWithChildren) {
+	return children;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,21 +1,5 @@
-import {Avatar, Container, Stack, Typography} from "@mui/material";
-import {LockOutlined} from "@mui/icons-material";
-import SignForm from "@/components/sign-form";
+import { redirect } from "next/navigation";
 
-export default function Home() {
-    return (
-        <Container component="main" className="h-screen">
-            <Stack justifyContent="center" alignItems="center" direction="column" spacing={2} className="h-full">
-                <Avatar sx={{m: 1, bgcolor: "secondary.main"}}>
-                    <LockOutlined/>
-                </Avatar>
-
-                <Typography component="h1" variant="h5">
-                    Sign in
-                </Typography>
-
-                <SignForm/>
-            </Stack>
-        </Container>
-    );
+export default function RootPage() {
+	redirect("/en");
 }
diff --git a/src/components/bottom-modal.tsx b/src/components/bottom-modal.tsx
@@ -0,0 +1,14 @@
+"use client";
+import { Dialog, styled } from "@mui/material";
+
+export const BottomModal = styled(Dialog)(({ theme }) => ({
+	"& .MuiDialog-container": {
+		alignItems: "flex-end",
+	},
+	"& .MuiPaper-root": {
+		margin: 0,
+		width: "100%",
+		maxWidth: "100%",
+		borderRadius: "1rem 1rem 0 0",
+	},
+}));
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -35,6 +35,8 @@ import { formatName } from "@/helpers/format-name";
 import { checkDefaultProfile } from "@/helpers/check-default-profile";
 import { DashboardRoute } from "@/@types/dashboard-routes";
 import { usePathname } from "next/navigation";
+import { use
F438
WithLocale } from "@/hooks/useWithLocale";
+import { useTranslations } from "use-intl";
 
 const drawerWidth = 240;
 
@@ -50,6 +52,9 @@ export const Navbar: FC<PropsWithChildren<Props>> = ({
 }) => {
 	const dispatch = useAppDispatch();
 	const pathname = usePathname();
+	const t = useTranslations("profile");
+	const t2 = useTranslations("dashboard");
+	const withLocale = useWithLocale();
 
 	const { isLoading, data } = useGetMeQuery();
 
@@ -65,19 +70,23 @@ export const Navbar: FC<PropsWithChildren<Props>> = ({
 			</Toolbar>
 			<Divider />
 			<List>
-				{routes.map((route) => (
-					<ListItem
-						component={Link}
-						key={route.name}
-						href={route.path}
-						disablePadding
-					>
-						<ListItemButton selected={pathname === route.path}>
-							<ListItemIcon>{route.icon}</ListItemIcon>
-							<ListItemText primary={route.name} />
-						</ListItemButton>
-					</ListItem>
-				))}
+				{routes.map((route, index) => {
+					return (
+						<ListItem
+							component={Link}
+							key={route.name}
+							href={withLocale(route.path)}
+							disablePadding
+						>
+							<ListItemButton
+								selected={pathname === withLocale(route.path)}
+							>
+								<ListItemIcon>{route.icon}</ListItemIcon>
+								<ListItemText primary={t2(route.name as any)} />
+							</ListItemButton>
+						</ListItem>
+					);
+				})}
 			</List>
 		</>
 	);
@@ -142,7 +151,7 @@ export const Navbar: FC<PropsWithChildren<Props>> = ({
 								>
 									<Avatar
 										src={checkDefaultProfile(
-											data?.avatar.permanentUrl ?? "",
+											data?.avatar?.permanentUrl ?? "",
 										)}
 										alt={formatName(
 											data?.givenName ?? "Unknown",
@@ -202,7 +211,6 @@ export const Navbar: FC<PropsWithChildren<Props>> = ({
 			<Box
 				component="main"
 				sx={{
-					p: 3,
 					width: { sm: `calc(100% - ${drawerWidth}px)` },
 					ml: { sm: `${drawerWidth}px` },
 				}}
@@ -216,7 +224,7 @@ export const Navbar: FC<PropsWithChildren<Props>> = ({
 				>
 				>
 			>
-				<MenuItem component={Link} href="/profile">
+				<MenuItem component={Link} href={withLocale("/profile")}>
 					<ListItemIcon>
 						<AccountCircle />
 					</ListItemIcon>
@@ -225,17 +233,20 @@ export const Navbar: FC<PropsWithChildren<Props>> = ({
 					/>
 				</MenuItem>
 				<Divider />
-				<MenuItem component={Link} href="/dashboard/settings">
+				<MenuItem
+					component={Link}
+					href={withLocale("/dashboard/settings")}
+				>
 					<ListItemIcon>
 						<Settings />
 					</ListItemIcon>
-					<ListItemText primary="Configurações" />
+					<ListItemText primary={t("settings")} />
 				</MenuItem>
 				<MenuItem  => dispatch(signOut())}>
 					<ListItemIcon>
 						<Logout />
 					</ListItemIcon>
-					<ListItemText primary="Sair" />
+					<ListItemText primary={t("signOut")} />
 				</MenuItem>
 			</Menu>
 		</>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		type Locale = typeof import("@/i18n/locales/en.json");
		declare interface IntlMessages extends Locale {}