Update next-intl (and other packages), internationalize URLs

app/[locale]/components/Footer.tsx

@@ -1,11 +1,15 @@
+"use client";
+
 import { useTranslations } from "next-intl";
-import Link from "next-intl/link";
 import { FaGithub, FaRegEnvelope } from "react-icons/fa";
 
+import { Link, usePathname } from "@/utils/navigation";
+
 import ThemeSwitcher from "./ThemeSwitcher";
 
 export default function Footer() {
   const t = useTranslations("Footer");
+  const pathname = usePathname();
 
   return (
     <footer
@@ -13,27 +17,23 @@ export default function Footer() {
       data-test="footer"
     >
       <div className="flex items-center py-2 hover:[&_a]:opacity-80">
-        <Link
+        <a
           href="https://github.com/TheRealOwenRees/echecsfrance"
           target="_blank"
           aria-label={t("githubAria")}
           className="mr-4"
         >
           <FaGithub />
-        </Link>
-        <Link
-          href="/contactez-nous"
-          aria-label={t("contactAria")}
-          className="mr-4"
-        >
+        </a>
+        <Link href="/contact-us" aria-label={t("contactAria")} className="mr-4">
           <FaRegEnvelope />
         </Link>
         <div className="mr-4 space-x-2 text-xs">
-          <Link href="/" locale="fr">
+          <Link href={pathname} locale="fr">
             FR
           </Link>
           <span>|</span>
-          <Link href="/" locale="en">
+          <Link href={pathname} locale="en">
             EN
           </Link>
         </div>

app/[locale]/components/HamburgerMenu.tsx

@@ -1,10 +1,10 @@
 import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
 
 import { useTranslations } from "next-intl";
-import Link from "next-intl/link";
 import { twMerge } from "tailwind-merge";
 
 import useHamburgerClose from "@/hooks/useHamburgerClose";
+import { Link } from "@/utils/navigation";
 
 interface HamburgerMenuState {
   menuVisible: boolean;
@@ -64,7 +64,7 @@ const HamburgerMenu = ({
       <ul className="list-reset text-white">
         <li className="py-5 text-center text-xl">
           <Link
-            href="/tournois"
+            href="/tournaments"
             className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
           >
             {t("tournaments")}

app/[locale]/components/Navbar.tsx

@@ -1,5 +1,6 @@
 import { useTranslations } from "next-intl";
-import Link from "next-intl/link";
+
+import { Link } from "@/utils/navigation";
 
 import Hamburger from "./Hamburger";
 
@@ -7,10 +8,10 @@ export default function Navbar() {
   const t = useTranslations("Nav");
 
   const links = [
-    { title: t("tournaments"), route: "/tournois" },
+    { title: t("tournaments"), route: "/tournaments" },
     { title: t("clubs"), route: "/clubs" },
     { title: t("elo"), route: "/elo" },
-  ];
+  ] as const;
 
   return (
     <nav

app/[locale]/elo/page.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo } from "react";
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isEmpty, sortBy } from "lodash";
 import { useTranslations } from "next-intl";
-import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
@@ -14,6 +13,7 @@ import { Spinner } from "@/components/Spinner";
 import { SelectField } from "@/components/form/SelectField";
 import { TextField } from "@/components/form/TextField";
 import { fetchTournamentResultsSchema } from "@/schemas";
+import { Link } from "@/utils/navigation";
 import { trpc } from "@/utils/trpc";
 
 import { KFactor } from "./KFactor";
@@ -36,7 +36,10 @@ export default function Elo() {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const current = new URLSearchParams(Array.from(searchParams.entries()));
+  const current = useMemo(
+    () => new URLSearchParams(Array.from(searchParams.entries())),
+    [searchParams],
+  );
 
   const url = searchParams.get("url") ?? "";
   const kFactorParam = searchParams.get("k");
@@ -132,7 +135,7 @@ export default function Elo() {
       }
     });
     return () => subscription.unsubscribe();
-  }, [form.watch, kFactor, player]);
+  }, [current, form, form.watch, kFactor, pathname, player, router]);
 
   useEffect(() => {
     // When the URL changes, we update the form values
@@ -147,7 +150,7 @@ export default function Elo() {
     if (kFactor !== form.getValues("kFactor")) {
       form.setValue("kFactor", form.getValues("kFactor"));
     }
-  }, [searchParams, form]);
+  }, [searchParams, form, url, player, kFactor]);
 
   if (error) {
     console.error(error);
@@ -210,7 +213,7 @@ export default function Elo() {
                   ? t(error.message as TranslationKey)
                   : t.rich("unknownError", {
                       contact: (chunks) => (
-                        <Link className="underline" href="/contactez-nous">
+                        <Link className="underline" href="/contact-us">
                           {chunks}
                         </Link>
                       ),

app/[locale]/layout.tsx

@@ -8,9 +8,10 @@ import Script from "next/script";
 
 import "@/css/globals.css";
 
+import Providers from "../providers";
+
 import Footer from "./components/Footer";
 import Navbar from "./components/Navbar";
-import Providers from "./providers";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 const title = Julius_Sans_One({

app/[locale]/page.tsx

@@ -1,8 +1,8 @@
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import Link from "next/link";
 
 import bgImage from "@/public/images/map-bg.jpg";
+import { Link } from "@/utils/navigation";
 
 export default function Home() {
   const t = useTranslations("Home");
@@ -25,14 +25,14 @@ export default function Home() {
         <h3 className="mb-5 p-5 text-xl">
           {t.rich("how", {
             link: (chunks) => (
-              <Link href="http://www.echecs.asso.fr/" target="_blank">
+              <a href="http://www.echecs.asso.fr/" target="_blank">
                 <abbr title="Fédération Française des Échecs">{chunks}</abbr>
-              </Link>
+              </a>
             ),
           })}
         </h3>
         <Link
-          href="/tournois"
+          href="/tournaments"
           className="mb-2 rounded-lg bg-primary px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary-700 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
         >
           {t("mapLink")}

app/[locale]/providers/TrpcProvider.tsx

@@ -1,45 +0,0 @@
-import { useState } from "react";
-
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { getFetch, httpBatchLink, loggerLink } from "@trpc/client";
-import superjson from "superjson";
-
-import { trpc } from "@/utils/trpc";
-
-export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: { queries: { staleTime: 5000 } },
-      }),
-  );
-
-  const url = "/api/trpc";
-
-  const [trpcClient] = useState(() =>
-    trpc.createClient({
-      links: [
-        loggerLink({
-          enabled: () => true,
-        }),
-        httpBatchLink({
-          url,
-          fetch: async (input, init?) => {
-            const fetch = getFetch();
-            return fetch(input, {
-              ...init,
-              credentials: "include",
-            });
-          },
-        }),
-      ],
-      transformer: superjson,
-    }),
-  );
-
-  return (
-    <trpc.Provider client={trpcClient} queryClient={queryClient}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </trpc.Provider>
-  );
-};

app/[locale]/providers/index.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import { Provider } from "jotai";
-
-import { useDynamicViewportUnits } from "@/hooks/useDynamicViewportUnits";
-
-import { TrpcProvider } from "./TrpcProvider";
-
-export default function Providers({ children }: { children: React.ReactNode }) {
-  useDynamicViewportUnits();
-  return (
-    <Provider>
-      <TrpcProvider>{children}</TrpcProvider>
-    </Provider>
-  );
-}