initial commit for i18n

pages/_app.tsx

@@ -9,9 +9,11 @@ import toast from "react-hot-toast";
 import { Toaster, ToastBar } from "react-hot-toast";
 import { Session } from "next-auth";
 import { isPWA } from "@/lib/client/utils";
-import useInitialData from "@/hooks/useInitialData";
+// import useInitialData from "@/hooks/useInitialData";
+import { appWithTranslation } from "next-i18next";
+import nextI18nextConfig from "../next-i18next.config";
 
-export default function App({
+function App({
   Component,
   pageProps,
 }: AppProps<{
@@ -96,6 +98,8 @@ export default function App({
   );
 }
 
+export default appWithTranslation(App);
+
 // function GetData({ children }: { children: React.ReactNode }) {
 //   const status = useInitialData();
 //   return typeof window !== "undefined" && status !== "loading" ? (

pages/admin.tsx

@@ -3,7 +3,12 @@ import NewUserModal from "@/components/ModalContent/NewUserModal";
 import useUserStore from "@/store/admin/users";
 import { User as U } from "@prisma/client";
 import Link from "next/link";
-import { Fragment, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "next-i18next";
+import { GetServerSideProps } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useRouter } from "next/router";
+import { i18n } from "next-i18next.config";
 
 interface User extends U {
   subscriptions: {
@@ -17,6 +22,10 @@ type UserModal = {
 };
 
 export default function Admin() {
+  const { t } = useTranslation();
+
+  const router = useRouter();
+
   const { users, setUsers } = useUserStore();
 
   const [searchQuery, setSearchQuery] = useState("");
@@ -30,6 +39,7 @@ export default function Admin() {
   const [newUserModal, setNewUserModal] = useState(false);
 
   useEffect(() => {
+    console.log(router);
     setUsers();
   }, []);
 
@@ -44,7 +54,7 @@ export default function Admin() {
             <i className="bi-chevron-left text-xl"></i>
           </Link>
           <p className="capitalize text-3xl font-thin inline">
-            User Administration
+            {t("user_administration")}
           </p>
         </div>
 
@@ -172,3 +182,51 @@ const UserListing = (
     </div>
   );
 };
+
+// Take this into a separate file, it's for logged out users
+// For logged in users, we'll use their preferred language from the database (default: en)
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  console.log("CONTEXT", ctx);
+
+  const acceptLanguageHeader = ctx.req.headers["accept-language"];
+  const availableLanguages = i18n.locales;
+
+  console.log("ACCEPT LANGUAGE", acceptLanguageHeader);
+  console.log("AVAILABLE LANGUAGES", availableLanguages);
+
+  // Parse the accept-language header to get an array of languages
+  const acceptedLanguages = acceptLanguageHeader
+    ?.split(",")
+    .map((lang) => lang.split(";")[0]);
+
+  console.log(acceptedLanguages);
+
+  // Find the best match between the accepted languages and available languages
+  let bestMatch = acceptedLanguages?.find((lang) =>
+    availableLanguages.includes(lang)
+  );
+
+  console.log(bestMatch);
+
+  // If no direct match, find the best partial match
+  if (!bestMatch) {
+    acceptedLanguages?.some((acceptedLang) => {
+      const partialMatch = availableLanguages.find((lang) =>
+        lang.startsWith(acceptedLang)
+      );
+      if (partialMatch) {
+        bestMatch = partialMatch;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  console.log("BEST MATCH", bestMatch);
+
+  return {
+    props: {
+      ...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
+    },
+  };
+};