Fix layout issues & co-locate components (#46)

* Fix layout issues & co-locate components

* Fix front page

* Fix centering

.vscode/settings.json

@@ -11,6 +11,7 @@
     "localisation",
     "randomisation",
     "Rapide",
+    "Rees",
     "sommes",
     "tournois"
   ]

app/[lang]/components/Footer.tsx

@@ -7,12 +7,13 @@ export default function Footer() {
 
   return (
     <footer
-      className="fixed bottom-0 z-30 grid w-full justify-items-center bg-teal-600 px-5 py-2 text-white dark:bg-gray-700"
+      className="fixed bottom-0 z-30 flex h-20 w-full flex-col items-center justify-center justify-items-center bg-teal-600 px-5 py-2 text-white dark:bg-gray-700"
       data-test="footer"
     >
-      <div className="p-2">
+      <div>
         <p>&copy; {new Date().getFullYear()} - Owen Rees</p>
       </div>
+
       <div className="flex space-x-4 p-2">
         <Link
           href="https://github.com/TheRealOwenRees/echecsfrance"

app/[lang]/components/Hamburger.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import HamburgerMenu from "@/components/HamburgerMenu";
+import HamburgerMenu from "./HamburgerMenu";
 import { useRef, useState } from "react";
 
 const Hamburger = () => {
@@ -30,13 +30,12 @@ const Hamburger = () => {
           }`}
         ></div>
       </div>
-      {
+
       <HamburgerMenu
         menuVisible={menuVisible}
         setMenuVisible={setMenuVisible}
         hamburgerButtonRef={hamburgerButtonRef}
       />
-      }
     </>
   );
 };

app/[lang]/components/HamburgerMenu.tsx

@@ -8,8 +8,8 @@ import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
 import Link from "next-intl/link";
 import { useTranslations } from "next-intl";
 
-import ThemeSwitcher from "@/components/ThemeSwitcher";
 import useHamburgerClose from "@/hooks/useHamburgerClose";
+import ThemeSwitcher from "./ThemeSwitcher";
 
 const HamburgerMenu = ({
   menuVisible,
@@ -53,9 +53,9 @@ const HamburgerMenu = ({
   return (
     <div
       ref={menuRef}
-      className={`absolute -right-[173px] top-0 ${
-        menuVisible ? "-translate-x-full" : ""
-      } z-[9999] flex bg-teal-600 transition-transform duration-500 ease-linear dark:bg-gray-600 md:hidden`}
+      className={`fixed right-0 top-0 ${
+        menuVisible ? "" : "translate-x-full"
+      } z-[9999] flex bg-teal-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
       onMouseEnter={handleMouseEnterMenu}
       onMouseLeave={handleMouseLeaveMenu}
     >
@@ -65,7 +65,7 @@ const HamburgerMenu = ({
             href="/tournois"
             className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
           >
-            {t("competitions")}
+            {t("tournaments")}
           </Link>
         </li>
         <li className="py-5">

app/[lang]/components/Navbar.tsx

@@ -0,0 +1,65 @@
+import Link from "next-intl/link";
+import { useTranslations } from "next-intl";
+
+import ThemeSwitcher from "./ThemeSwitcher";
+import Hamburger from "./Hamburger";
+
+export default function Navbar() {
+  const t = useTranslations("Nav");
+
+  return (
+    <nav
+      className="relative mt-0 h-16 w-full overflow-x-clip border-b-[1px] bg-white px-5 dark:border-gray-700 dark:bg-gray-800"
+      data-test="navbar"
+    >
+      <div className="container mx-auto flex h-full items-center">
+        <div className="flex w-full justify-center font-extrabold md:w-1/2 md:justify-start">
+          <Link
+            className="text-gray-900 no-underline hover:no-underline dark:text-white"
+            href="/"
+          >
+            <span className="text-2xl">{t("title")}</span>
+          </Link>
+        </div>
+        <div className="pb-2 md:hidden" data-test="mobile-menu">
+          <Hamburger />
+        </div>
+
+        <div
+          className="hidden h-full justify-center md:flex md:w-1/2 md:justify-end"
+          data-test="desktop-menu"
+        >
+          <ul className="list-reset flex h-full flex-1 items-center justify-around text-gray-900 no-underline dark:text-white md:flex-none">
+            <li className="mr-10 h-full">
+              <Link
+                className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-teal-600"
+                href="/tournois"
+              >
+                {t("tournaments")}
+              </Link>
+            </li>
+            <li className="mr-10 h-full">
+              <Link
+                className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-teal-600"
+                href="/qui-sommes-nous"
+              >
+                {t("about")}
+              </Link>
+            </li>
+            <li className="mr-10 h-full">
+              <Link
+                className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-teal-600"
+                href="/contactez-nous"
+              >
+                {t("contact")}
+              </Link>
+            </li>
+            <li>
+              <ThemeSwitcher />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+}

app/[lang]/components/TestableLayout.tsx

@@ -0,0 +1,30 @@
+import { NextIntlClientProvider, AbstractIntlMessages } from "next-intl";
+import { ReactNode } from "react";
+
+import "@/app/globals.css";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+
+const TestableLayout = ({
+  children,
+  locale,
+  messages,
+}: {
+  children: ReactNode;
+  locale: string;
+  messages: AbstractIntlMessages;
+}) => {
+  return (
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      <div className="flex min-h-screen flex-col bg-white font-sans leading-normal tracking-normal dark:bg-gray-800">
+        <Navbar />
+        <div className="relative mb-20 flex flex-1 justify-center">
+          {children}
+        </div>
+        <Footer />
+      </div>
+    </NextIntlClientProvider>
+  );
+};
+
+export default TestableLayout;

app/[lang]/contactez-nous/page.tsx

@@ -1,16 +1,14 @@
 import { useTranslations } from "next-intl";
 
-import Layout from "@/components/Layout";
-import ContactForm from "@/components/ContactForm";
+import ContactForm from "./ContactForm";
 
 // TODO fix page sizing
 export default function Contact() {
   const t = useTranslations("Contact");
 
   return (
-    <Layout>
     <section className="grid place-items-center bg-white dark:bg-gray-800">
-        <div className="mx-auto max-w-screen-md px-4 pb-32 pt-8 lg:pt-16">
+      <div className="mx-auto max-w-screen-md px-4 pb-16 pt-8 lg:pt-16">
         <h2
           className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
           data-test="header2"
@@ -23,6 +21,5 @@ export default function Contact() {
         <ContactForm />
       </div>
     </section>
-    </Layout>
   );
 }

app/[lang]/layout.tsx

@@ -1,11 +1,12 @@
 import { Analytics } from "@vercel/analytics/react";
 import { Inter } from "next/font/google";
-import { useLocale, NextIntlClientProvider } from "next-intl";
+import { useLocale } from "next-intl";
 import { getTranslator } from "next-intl/server";
 import { notFound } from "next/navigation";
 import { ReactNode } from "react";
 
 import "@/app/globals.css";
+import TestableLayout from "./components/TestableLayout";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -49,9 +50,9 @@ export default async function RootLayout({
   return (
     <html lang={locale}>
       <body className={inter.className}>
-        <NextIntlClientProvider locale={locale} messages={messages}>
+        <TestableLayout locale={locale} messages={messages}>
           {children}
-        </NextIntlClientProvider>
+        </TestableLayout>
         <Analytics />
       </body>
     </html>

app/[lang]/page.tsx

@@ -2,16 +2,14 @@ import Link from "next/link";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 
-import Layout from "@/components/Layout";
 import bgImage from "@/public/images/map-bg.jpg";
 
 export default function Home() {
   const t = useTranslations("Home");
 
   return (
-    <Layout>
-      <header className="grid h-[calc(100%-153px)] md:h-[calc(100%-173px)] items-center">
-        <div className="relative h-full w-full brightness-[0.2]">
+    <header className="relative flex flex-1 items-center justify-center">
+      <div className="absolute h-full w-full brightness-[0.2]">
         <Image
           src={bgImage}
           alt="Background image of France"
@@ -19,7 +17,7 @@ export default function Home() {
           style={{ objectFit: "cover" }}
         />
       </div>
-        <div className="absolute flex flex-col items-center w-full text-center text-white">
+      <div className="z-10 text-center text-white">
         <h1 className="p-5 text-5xl" data-test="header1">
           {t("title")}
         </h1>
@@ -41,6 +39,5 @@ export default function Home() {
         </Link>
       </div>
     </header>
-    </Layout>
   );
 }

app/[lang]/qui-sommes-nous/page.tsx

@@ -1,15 +1,12 @@
 import Link from "next-intl/link";
 import { useTranslations } from "next-intl";
 
-import Layout from "@/components/Layout";
-
 export default function About() {
   const t = useTranslations("About");
 
   return (
-    <Layout>
-      <header className="grid place-items-center bg-white dark:bg-gray-800">
-        <div className="h-full max-w-5xl bg-white px-4 pb-12 pt-8 dark:bg-gray-800">
+    <header className="mb-16 grid place-items-center bg-white dark:bg-gray-800">
+      <div className="h-full max-w-5xl bg-white px-4 pt-8 dark:bg-gray-800">
         <h2
           className="mb-8 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
           data-test="header2"
@@ -101,7 +98,7 @@ export default function About() {
             </Link>
           </li>
         </ul>
-          <p className="mb-16 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
+        <p className="text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
           {t.rich("contribInfo", {
             link: (chunks) => (
               <Link
@@ -116,6 +113,5 @@ export default function About() {
         </p>
       </div>
     </header>
-    </Layout>
   );
 }

app/[lang]/tournois/SearchBar.tsx

@@ -10,7 +10,7 @@ const SearchBar = ({
   tournamentFilter,
   setTournamentFilter,
 }: SearchBarProps) => {
-  const t = useTranslations("Competitions");
+  const t = useTranslations("Tournaments");
 
   return (
     <div className="bg-white p-3 dark:bg-gray-800">

app/[lang]/tournois/TournamentMap.tsx

@@ -10,7 +10,7 @@ import "leaflet-defaulticon-compatibility";
 import { MapContainer, TileLayer, LayersControl } from "react-leaflet";
 
 import { createLayerGroups } from "@/utils/layerGroups";
-import Legend from "@/components/Legend";
+import Legend from "./Legend";
 
 export default function TournamentMap({ tournamentData }: TournamentDataProps) {
   const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
@@ -28,10 +28,7 @@ export default function TournamentMap({ tournamentData }: TournamentDataProps) {
   const otherMarkers = createLayerGroups("1h KO", "red", { tournamentData });
 
   return (
-    <section
-      id="tournament-map"
-      className="grid h-[calc(100vh-153px)] md:h-[calc(100vh-83px)] lg:h-[calc(100vh-173px)]"
-    >
+    <section id="tournament-map" className="grid h-[calc(100vh-144px)]">
       <MapContainer
         center={center}
         zoom={5}

app/[lang]/tournois/TournamentTable.tsx

@@ -4,14 +4,14 @@ import { TournamentDataProps } from "@/types";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 
-import SearchBar from "@/components/SearchBar";
-import ScrollToTopButton from "@/components/ScrollToTopButton";
+import SearchBar from "./SearchBar";
+import ScrollToTopButton from "./ScrollToTopButton";
 
 export default function TournamentTable({
   tournamentData,
 }: TournamentDataProps) {
   let tableData;
-  const t = useTranslations("Competitions");
+  const t = useTranslations("Tournaments");
   const [searchQuery, setSearchQuery] = useState(""); // text from search bar
   const [filteredTournamentData, setFilteredTournamentData] =
     useState(tournamentData);
@@ -63,7 +63,7 @@ export default function TournamentTable({
 
   return (
     <section
-      className="tournament-table grid w-full auto-rows-max pb-20 lg:col-start-2 lg:col-end-3 lg:h-[calc(100vh-173px)] lg:overflow-y-scroll"
+      className="tournament-table grid w-full auto-rows-max pb-20 lg:col-start-2 lg:col-end-3 lg:h-[calc(100vh-144px)] lg:overflow-y-scroll"
       id="tournament-table"
       data-test="tournament-table-div"
     >
@@ -89,7 +89,7 @@ export default function TournamentTable({
               {t("town")}
             </th>
             <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
-              {t("competition")}
+              {t("tournament")}
             </th>
             <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
               {t("timeControl")}

app/[lang]/tournois/page.tsx

@@ -2,15 +2,15 @@ import clientPromise from "@/lib/mongodb";
 import dynamic from "next/dynamic";
 import { useTranslations } from "next-intl";
 
-import Layout from "@/components/Layout";
-import TournamentTable from "@/components/TournamentTable";
 import { dateOrderingFrance } from "@/utils/dbDateOrdering";
 import { errorLog } from "@/utils/logger";
 
+import TournamentTable from "./TournamentTable";
+
 export const revalidate = 3600; // revalidate cache every 6 hours;
 
 const LoadingMap = () => {
-  const t = useTranslations("Competitions");
+  const t = useTranslations("Tournaments");
   return (
     <div className="grid h-screen place-items-center bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
       <p>{t("loading")}</p>
@@ -22,7 +22,7 @@ const LoadingMap = () => {
  * Imports the tournament map component, ensuring CSR only.
  * @remarks SSR is not supported by react-leaflet
  */
-const TournamentMap = dynamic(() => import("@/components/TournamentMap"), {
+const TournamentMap = dynamic(() => import("./TournamentMap"), {
   ssr: false,
   loading: LoadingMap,
 });
@@ -43,8 +43,7 @@ export default async function Tournaments() {
   const tournamentData = await getTournaments();
 
   return (
-    <Layout>
-      <main className="relative grid lg:grid-cols-2">
+    <main className="relative grid h-full lg:grid-cols-2">
       <div className="">
         <TournamentMap tournamentData={JSON.parse(tournamentData)} />
       </div>
@@ -52,6 +51,5 @@ export default async function Tournaments() {
         <TournamentTable tournamentData={JSON.parse(tournamentData)} />
       </div>
     </main>
-    </Layout>
   );
 }

components/Layout.tsx

@@ -1,17 +0,0 @@
-import Navbar from "@/components/Navbar";
-import Footer from "@/components/Footer";
-import { ReactNode } from "react";
-
-export default function Layout({
-  children, // will be a page or nested layout
-}: {
-  children: ReactNode;
-}) {
-  return (
-    <div className="h-screen min-h-[600px] bg-white dark:bg-gray-800 font-sans leading-normal tracking-normal">
-      <Navbar />
-      {children}
-      <Footer />
-    </div>
-  );
-}

components/Navbar.tsx

@@ -1,65 +0,0 @@
-import Link from "next-intl/link";
-import { useTranslations } from "next-intl";
-
-import ThemeSwitcher from "@/components/ThemeSwitcher";
-import Hamburger from "@/components/Hamburger";
-
-export default function Navbar() {
-  const t = useTranslations("Nav");
-
-  return (
-    <nav
-      className="relative mt-0 w-full overflow-x-clip border-b-[1px] bg-white px-5 pt-5 dark:border-gray-700 dark:bg-gray-800 md:pt-2"
-      data-test="navbar"
-    >
-      <div className="container mx-auto flex items-center">
-        <div className="flex w-full justify-center pb-3 font-extrabold md:w-1/2 md:justify-start md:pb-0">
-          <Link
-            className="text-gray-900 no-underline hover:no-underline dark:text-white"
-            href="/"
-          >
-            <span className="text-2xl">{t("title")}</span>
-          </Link>
-        </div>
-        <div className="pb-2 md:hidden" data-test="mobile-menu">
-          <Hamburger />
-        </div>
-
-        <div
-          className="hidden justify-center pt-2 md:flex md:w-1/2 md:justify-end"
-          data-test="desktop-menu"
-        >
-          <ul className="list-reset flex flex-1 items-center justify-around text-gray-900 no-underline dark:text-white md:flex-none">
-            <li className="mr-10">
-              <Link
-                className="inline-block border-b-4 border-transparent py-5 transition-all duration-300 ease-in-out hover:border-teal-600"
-                href="/tournois"
-              >
-                {t("competitions")}
-              </Link>
-            </li>
-            <li className="mr-10">
-              <Link
-                className="inline-block border-b-4 border-transparent py-5 transition-all duration-300 ease-in-out hover:border-teal-600"
-                href="/qui-sommes-nous"
-              >
-                {t("about")}
-              </Link>
-            </li>
-            <li className="mr-10">
-              <Link
-                className="inline-block border-b-4 border-transparent py-5 transition-all duration-300 ease-in-out hover:border-teal-600"
-                href="/contactez-nous"
-              >
-                {t("contact")}
-              </Link>
-            </li>
-            <li>
-              <ThemeSwitcher />
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-  );
-}

cypress/component/scroll.cy.tsx

@@ -1,4 +1,4 @@
-import ScrollToTopButton from "@/components/ScrollToTopButton";
+import ScrollToTopButton from "@/app/[lang]/tournois/ScrollToTopButton";
 
 describe("Scroll to top button", () => {
   it("desktop scroll button clickable", () => {

cypress/component/themeToggle.cy.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ThemeSwitcher from "../../components/ThemeSwitcher";
+import ThemeSwitcher from "@/app/[lang]/components/ThemeSwitcher";
 import "@/css/theme-toggle.css";
 
 describe("ThemeSwitcher component", () => {
@@ -14,8 +14,9 @@ describe("ThemeSwitcher component", () => {
         "linear-gradient(rgb(0, 255, 255), rgb(135, 206, 235)"
       );
     });
+
     // checking that the toggle is clickable and dark mode is active
-    cy.getByData("toggle").click();
+    cy.getByData("toggle").last().click();
     cy.getByData("toggle-dark").should("exist");
     cy.getByData("toggle-dark").should(($toggle) => {
       const backgroundImage = $toggle.css("background-image");

cypress/support/component.tsx

@@ -14,8 +14,8 @@
 // ***********************************************************
 
 import { mount } from "cypress/react18";
-import { NextIntlClientProvider } from "next-intl";
 
+import TestableLayout from "@/app/[lang]/components/TestableLayout";
 import messages from "@/messages/fr.json";
 import "./commands";
 
@@ -37,9 +37,9 @@ declare global {
 
 Cypress.Commands.add("mount", (component, options) => {
   const wrapped = (
-    <NextIntlClientProvider locale="fr" messages={messages}>
+    <TestableLayout locale="fr" messages={messages}>
       {component}
-    </NextIntlClientProvider>
+    </TestableLayout>
   );
 
   return mount(wrapped, options);

messages/en.json

@@ -1,13 +1,13 @@
 {
   "Metadata": {
     "title": "Echecs France - Tournois d'Echecs",
-    "description": "Find chess competitions, in France, on a map",
-    "keywords": "chess, France, competition, competitions, FFE, map"
+    "description": "Find chess tournaments, in France, on a map",
+    "keywords": "chess, France, tournament, tournaments, FFE, map"
   },
 
   "Nav": {
     "title": "Echecs France",
-    "competitions": "Competitions",
+    "tournaments": "Tournaments",
     "about": "About Us",
     "contact": "Contact"
   },
@@ -26,19 +26,19 @@
 
   "Home": {
     "title": "France Echecs",
-    "purpose": "Find chess competitions, in France, on a map",
-    "how": "A graphical representation of all the chess competitions published by the <link>FFE</link>",
+    "purpose": "Find chess tournaments, in France, on a map",
+    "how": "A graphical representation of all the chess tournaments published by the <link>FFE</link>",
     "mapLink": "See the Map"
   },
 
-  "Competitions": {
+  "Tournaments": {
     "loading": "Loading...",
     "searchLabel": "Search",
     "searchPlaceholder": "Search",
     "noneFound": "No tournaments found",
     "date": "Date",
     "town": "Town",
-    "competition": "Competition",
+    "tournament": "Tournament",
     "timeControl": "Time Control",
     "approx": "Géo-localisation is approximative"
   },

messages/fr.json

@@ -7,7 +7,7 @@
 
   "Nav": {
     "title": "Échecs France",
-    "competitions": "Tournois",
+    "tournaments": "Tournois",
     "about": "Qui Sommes-Nous",
     "contact": "Contactez-Nous"
   },
@@ -31,14 +31,14 @@
     "mapLink": "Voir La Carte"
   },
 
-  "Competitions": {
+  "Tournaments": {
     "loading": "Téléchargement...",
     "searchLabel": "Rechercher",
     "searchPlaceholder": "Rechercher",
     "noneFound": "Pas de tournois trouvé",
     "date": "Date",
     "town": "Ville",
-    "competition": "Tournois",
+    "tournament": "Tournois",
     "timeControl": "Cadence",
     "approx": "Géolocalisation approximative"
   },

utils/layerGroups.tsx

@@ -22,12 +22,12 @@ type TournamentMarkerProps = {
   colour: string;
 } & Omit<MarkerProps, "position">;
 
-export const CompetitionMarker = ({
+export const TournamentMarker = ({
   tournament,
   colour,
   ...markerProps
 }: TournamentMarkerProps) => {
-  const t = useTranslations("Competitions");
+  const t = useTranslations("Tournaments");
 
   const iconOptions = new L.Icon({
     iconUrl: `/images/leaflet/marker-icon-2x-${colour}.png`,
@@ -72,7 +72,7 @@ export const createLayerGroups = (
 
   const layerGroup = filteredTournaments.map((tournament) => {
     return (
-      <CompetitionMarker
+      <TournamentMarker
         key={tournament._id}
         tournament={tournament}
         colour={colour}