Localisation (#39)

* Localisation

* Update tests

* Fix map markers in English view

* Fix typo
This commit is contained in:
Timothy Armes
2023-07-03 20:14:19 +02:00
committed by GitHub
parent 279439f34d
commit c5a1503684
41 changed files with 881 additions and 426 deletions
+27 -24
View File
@@ -2,6 +2,8 @@
import { TournamentDataProps } from "@/types";
import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import SearchBar from "@/components/SearchBar";
import ScrollToTopButton from "@/components/ScrollToTopButton";
@@ -9,6 +11,7 @@ export default function TournamentTable({
tournamentData,
}: TournamentDataProps) {
let tableData;
const t = useTranslations("Competitions");
const [searchQuery, setSearchQuery] = useState(""); // text from search bar
const [filteredTournamentData, setFilteredTournamentData] =
useState(tournamentData);
@@ -17,41 +20,41 @@ export default function TournamentTable({
setFilteredTournamentData(
tournamentData.filter((t) => t.town.includes(searchQuery.toUpperCase()))
);
}, [searchQuery]);
}, [searchQuery, tournamentData]);
// TODO move this section into its own function
if (filteredTournamentData.length === 0) {
tableData = (
<tr className="bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
<td colSpan={4} className="p-3">
No tournaments found
{t("noneFound")}
</td>
</tr>
);
} else {
tableData = filteredTournamentData.map((t) => (
tableData = filteredTournamentData.map((data) => (
<tr
className="text-gray-900 bg-white dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
key={t._id}
className="bg-white text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900"
key={data._id}
>
<td className="p-3">
<a href={t.url} target="_blank">
{t.date}
<a href={data.url} target="_blank">
{data.date}
</a>
</td>
<td className="p-3">
<a href={t.url} target="_blank">
{t.town}
<a href={data.url} target="_blank">
{data.town}
</a>
</td>
<td className="p-3">
<a href={t.url} target="_blank">
{t.tournament}
<a href={data.url} target="_blank">
{data.tournament}
</a>
</td>
<td className="p-3">
<a href={t.url} target="_blank">
{t.time_control}
<a href={data.url} target="_blank">
{data.time_control}
</a>
</td>
</tr>
@@ -60,11 +63,11 @@ export default function TournamentTable({
return (
<section
className="tournament-table w-full grid auto-rows-max pb-20 lg:h-[calc(100vh-173px)] lg:col-start-2 lg:col-end-3 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-173px)] lg:overflow-y-scroll"
id="tournament-table"
data-test="tournament-table-div"
>
<div className="flex z-10">
<div className="z-10 flex">
<SearchBar
tournamentFilter={searchQuery}
setTournamentFilter={setSearchQuery}
@@ -74,22 +77,22 @@ export default function TournamentTable({
</div>
</div>
<table
className="relative table-fixed w-full text-center text-xs"
className="relative w-full table-fixed text-center text-xs"
data-test="tournament-table"
>
<thead>
<tr>
<th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
Date
<th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
{t("date")}
</th>
<th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
Ville
<th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
{t("town")}
</th>
<th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
Tournois
<th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
{t("competition")}
</th>
<th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
Cadence
<th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
{t("timeControl")}
</th>
</tr>
</thead>