From 1c6694028787787f042e325b37c10d0c50c6ab96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Sat, 17 Feb 2024 08:32:53 +0100
Subject: [PATCH] added language switcher

---
 app/[locale]/policy/page.tsx |  2 --
 app/i18n.ts                  |  5 +++++
 app/ui/AddMonthButton.tsx    |  5 +++--
 app/ui/Main.tsx              | 25 +++++++++++++++++--------
 app/ui/PageHeader.tsx        |  9 ++++++---
 app/ui/SelectLanguage.tsx    | 16 ++++++++++++++++
 6 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 app/ui/SelectLanguage.tsx

diff --git a/app/[locale]/policy/page.tsx b/app/[locale]/policy/page.tsx
index e64e0ac..4f01985 100644
--- a/app/[locale]/policy/page.tsx
+++ b/app/[locale]/policy/page.tsx
@@ -1,6 +1,4 @@
 import { Main } from "@/app/ui/Main";
-import { PageFooter } from "@/app/ui/PageFooter";
-import { PageHeader } from "@/app/ui/PageHeader";
 
 const ConsentPage = () =>   
     <Main>
diff --git a/app/i18n.ts b/app/i18n.ts
index a539866..fc0e549 100644
--- a/app/i18n.ts
+++ b/app/i18n.ts
@@ -5,6 +5,11 @@ import { Formats, TranslationValues } from 'next-intl';
 // Can be imported from a shared config
 export const locales = ['en', 'hr'];
 
+export const localeNames:Record<string,string> = {
+  en: 'English',
+  hr: 'Hrvatski'
+};
+
 export const defaultLocale = 'en';
 
 /** Templating function type as returned by `useTemplate` and `getTranslations` */
diff --git a/app/ui/AddMonthButton.tsx b/app/ui/AddMonthButton.tsx
index f1afa8b..ae9f1a5 100644
--- a/app/ui/AddMonthButton.tsx
+++ b/app/ui/AddMonthButton.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { formatYearMonth } from "../lib/format";
 import { YearMonth } from "../lib/db-types";
 import Link from "next/link";
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 
 export interface AddMonthButtonProps {
     yearMonth: YearMonth;
@@ -12,10 +12,11 @@ export interface AddMonthButtonProps {
 export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ yearMonth }) => {
 
     const t = useTranslations("home-page.add-month-button");
+    const locale = useLocale();
 
     return(
         <div className="card card-compact shadow-s mb-4">
-            <Link href={`/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip={t("tooltip")}>
+            <Link href={`/${locale}/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip={t("tooltip")}>
                 <span className='flex self-center mr-[-3em]'>
                     <CalendarDaysIcon className="h-[1em] w-[1em] cursor-pointer text-4xl"  />
                     <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.4em] mt-[-.4em]"  />
diff --git a/app/ui/Main.tsx b/app/ui/Main.tsx
index 41b9637..3b9d044 100644
--- a/app/ui/Main.tsx
+++ b/app/ui/Main.tsx
@@ -1,16 +1,25 @@
 import { FC } from "react";
 import { PageHeader } from "./PageHeader";
 import { PageFooter } from "./PageFooter";
+import { NextIntlClientProvider, useMessages } from "next-intl";
 
 export interface MainProps {
     children: React.ReactNode;
 }
 
-export const Main:FC<MainProps> = ({ children }) =>
-<main className="flex min-h-screen flex-col bg-base-300">
-    <PageHeader />
-    <div className="sm:mx-auto px-4">
-        {children}
-    </div>
-    <PageFooter />
-</main>
\ No newline at end of file
+export const Main:FC<MainProps> = ({ children }) => {
+
+    const message = useMessages();
+
+    return(
+        <NextIntlClientProvider messages={message}>
+            <main className="flex min-h-screen flex-col bg-base-300">
+                <PageHeader />
+                <div className="sm:mx-auto px-4">
+                    {children}
+                </div>
+                <PageFooter />
+            </main>
+        </NextIntlClientProvider>
+    );
+}
\ No newline at end of file
diff --git a/app/ui/PageHeader.tsx b/app/ui/PageHeader.tsx
index 45867ce..b009479 100644
--- a/app/ui/PageHeader.tsx
+++ b/app/ui/PageHeader.tsx
@@ -1,7 +1,10 @@
 import Image from "next/image";
 import Link from "next/link";
+import { SelectLanguage } from "./SelectLanguage";
 
 export const PageHeader = () =>
-<div className="navbar bg-base-100 mb-6">
-    <Link className="btn btn-ghost text-xl" href="/"><Image src="/icon3.png" alt="logo" width={48} height={48} /> Režije</Link>
-</div>
\ No newline at end of file
+    <div className="navbar bg-base-100 mb-6">
+        <Link className="btn btn-ghost text-xl" href="/"><Image src="/icon3.png" alt="logo" width={48} height={48} /> Režije</Link>
+        <span className="grow">&nbsp;</span>
+        <SelectLanguage />
+    </div>
\ No newline at end of file
diff --git a/app/ui/SelectLanguage.tsx b/app/ui/SelectLanguage.tsx
new file mode 100644
index 0000000..623aaa6
--- /dev/null
+++ b/app/ui/SelectLanguage.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { useLocale } from "next-intl";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { defaultLocale, localeNames, locales } from "../i18n";
+
+export const SelectLanguage: React.FC = () => {
+    const currentPathname = usePathname();
+
+    const locale = useLocale();
+    const secondLocale = locales.find((l) => l !== locale) as string;
+    const secondLocalePathname = defaultLocale === locale ? `/${secondLocale}${currentPathname}` : currentPathname.replace(`/${locale}/`, `/${secondLocale}/`);
+
+    return (<Link className="btn btn-ghost text-xl self-end" href={secondLocalePathname}>{localeNames[secondLocale]}</Link>);
+}
\ No newline at end of file