Localization using i18next (#20)

* add lucide-react

* Purge radix-ui

* Added localization

* added edit and remove thing in event through tables

* Revert "added edit and remove thing in event through tables"

This reverts commit b13adf1.

* fixed typo when merging

---------

Co-authored-by: Benjamin Halasz <[email protected]>

package.json

@@ -26,6 +26,10 @@
 		"@tanstack/react-table": "^8.20.5",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"i18next": "^24.2.1",
+		"i18next-browser-languagedetector": "^8.0.2",
+		"i18next-fs-backend": "^2.6.0",
+		"i18next-http-backend": "^3.0.1",
 		"date-fns": "^3.6.0",
 		"localforage": "^1.10.0",
 		"lucide-react": "^0.454.0",
@@ -34,6 +38,7 @@
 		"react-day-picker": "^9.5.0",
 		"react-dom": "^18.2.0",
 		"react-hook-form": "^7.53.2",
+		"react-i18next": "^15.4.0",
 		"react-router-dom": "^6.23.1",
 		"sort-by": "^0.0.2",
 		"tailwind-merge": "^2.5.4",

public/locales/en/admin.json

@@ -0,0 +1,10 @@
+{
+	"title": "Admin page",
+	"news": {
+		"self": "News",
+		"page_title": "Administrate news"
+	},
+	"events": {
+		"self": "Events"
+	}
+}

public/locales/sv/admin.json

@@ -0,0 +1,10 @@
+{
+	"title": "Adminsida",
+	"news": {
+		"self": "Nyheter",
+		"page_title": "Administrera nyheter"
+	},
+	"events": {
+		"self": "Evenemang"
+	}
+}

src/i18n.tsx

@@ -0,0 +1,23 @@
+import i18n from "i18next";
+import { useTranslation, initReactI18next } from "react-i18next";
+import HttpBackend from "i18next-http-backend";
+import type { FsBackendOptions } from "i18next-fs-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+i18n
+	.use(initReactI18next)
+	.use(HttpBackend)
+	.use(LanguageDetector)
+	.init<FsBackendOptions>({
+		backend: {
+			loadPath: "/locales/{{lng}}/{{ns}}.json",
+		},
+		fallbackLng: "en",
+		debug: true,
+		ns: ["admin"],
+		interpolation: {
+			escapeValue: false, // react already escapes values
+		},
+	});
+
+export default i18n;

src/index.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect } from "react";
+import React, { Suspense, useEffect } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "./App";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import AdminPage from "./routes/admin/Admin";
 import { AuthService, client } from "./api";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "./i18n";
 
 client.setConfig({ baseUrl: "http://127.0.0.1:8000" });
 
@@ -49,9 +50,11 @@ if (rootElement) {
 	const root = ReactDOM.createRoot(rootElement);
 	root.render(
 		<React.StrictMode>
-			<QueryClientProvider client={queryClient}>
-				<RouterProvider router={router} />
-			</QueryClientProvider>
+			<Suspense>
+				<QueryClientProvider client={queryClient}>
+					<RouterProvider router={router} />
+				</QueryClientProvider>
+			</Suspense>
 		</React.StrictMode>,
 	);
 }

src/routes/admin/AdminSidebar.tsx

@@ -14,6 +14,7 @@ import {
 	CollapsibleContent,
 	CollapsibleTrigger,
 } from "@radix-ui/react-collapsible";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 const nollning = [
@@ -29,19 +30,20 @@ const nollning = [
 
 const allmänt = [
 	{
-		title: "Nyheter",
+		title: "admin:news.self",
 		url: "news",
 	},
 	{
-		title: "Evenemang",
+		title: "admin:events.self",
 		url: "events",
 	},
 ];
 
 export function AdminSidebar() {
+	const { t } = useTranslation();
 	return (
 		<Sidebar>
-			<SidebarHeader>Adminpage</SidebarHeader>
+			<SidebarHeader>{t("admin:title")}</SidebarHeader>
 			<SidebarContent>
 				<Collapsible>
 					<SidebarGroup>
@@ -75,7 +77,7 @@ export function AdminSidebar() {
 										<SidebarMenuItem key={item.title}>
 											<SidebarMenuButton asChild>
 												<Link to={item.url}>
-													<span>{item.title}</span>
+													<span>{t(item.title)}</span>
 												</Link>
 											</SidebarMenuButton>
 										</SidebarMenuItem>

src/routes/admin/news/News.tsx

@@ -13,6 +13,7 @@ import {
 	getCoreRowModel,
 } from "@tanstack/react-table";
 import AdminTable from "@/widgets/AdminTable";
+import { useTranslation } from "react-i18next";
 const ACCEPTED_IMAGE_TYPES = [
 	"image/jpeg",
 	"image/jpg",
@@ -46,6 +47,7 @@ const columns = [
 
 export default function News() {
 	const queryClient = useQueryClient();
+	const { t } = useTranslation();
 
 	const { data, error, isFetching } = useQuery({
 		...getAllNewsOptions(),
@@ -64,7 +66,7 @@ export default function News() {
 	return (
 		<div className="px-8 space-x-4">
 			<h3 className="text-xl px-8 py-3 underline underline-offset-4 decoration-sidebar">
-				Administrera nyheter
+				{t("admin:news.page_title")}
 			</h3>
 			<p className="py-3">
 				Här kan du skapa nyheter & redigera existerande nyheter på hemsidan.

src/routes/admin/news/NewsForm.tsx

@@ -1,7 +1,12 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import { useForm } from "react-hook-form";
 import {
 	Form,
@@ -12,13 +17,13 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DialogTitle } from "@radix-ui/react-dialog";
 import { z } from "zod";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
 	createNewsMutation,
 	getAllNewsQueryKey,
 } from "@/api/@tanstack/react-query.gen";
+import { Plus } from "lucide-react";
 
 const newsSchema = z.object({
 	title_sv: z.string().min(2),
@@ -72,6 +77,7 @@ export default function NewsForm() {
 					setSubmitEnabled(true);
 				}}
 			>
+				<Plus />
 				Skapa nyhet
 			</Button>
 

vite.config.ts

@@ -4,6 +4,11 @@ import path from "node:path";
 
 export default defineConfig({
 	plugins: [react()],
+	optimizeDeps: {
+		esbuildOptions: {
+			target: "esnext",
+		},
+	},
 	resolve: {
 		alias: {
 			"@": path.resolve(__dirname, "./src"),