"use client";
import { TournamentDataProps } from "@/types";
import { useEffect, useState } from "react";
import SearchBar from "@/components/SearchBar";
import ScrollToTopButton from "@/components/ScrollToTopButton";
export default function TournamentTable({
tournamentData,
}: TournamentDataProps) {
let tableData;
const [searchQuery, setSearchQuery] = useState(""); // text from search bar
const [filteredTournamentData, setFilteredTournamentData] =
useState(tournamentData);
useEffect(() => {
setFilteredTournamentData(
tournamentData.filter((t) => t.town.includes(searchQuery.toUpperCase()))
);
}, [searchQuery]);
// TODO move this section into its own function
if (filteredTournamentData.length === 0) {
tableData = (
|
No tournaments found
|
);
} else {
tableData = filteredTournamentData.map((t) => (
|
{t.date}
|
{t.town}
|
{t.tournament}
|
{t.time_control}
|
));
}
return (
|
Date
|
Ville
|
Tournois
|
Cadence
|
{tableData}
);
}