From c410f7aad7fbf788b76fcf6ecc853d186c0a0ab4 Mon Sep 17 00:00:00 2001
From: Wes Weitzel <wesweitzel@gmail.com>
Date: Tue, 12 Dec 2023 17:56:13 -0800
Subject: [PATCH] Player and team search (#85)

---
 src/components/Select.tsx      | 36 ++++++++++++---
 src/components/ThemeSelect.tsx |  4 +-
 src/hooks/usePrevious.ts       |  9 ++++
 src/lib/api/goals.ts           |  1 +
 src/lib/api/players.ts         | 33 ++++++++++++++
 src/lib/api/teams.ts           |  1 +
 src/pages/Goals.tsx            | 80 ++++++++++++++++++++--------------
 7 files changed, 123 insertions(+), 41 deletions(-)
 create mode 100644 src/hooks/usePrevious.ts
 create mode 100644 src/lib/api/players.ts

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index aa2adce..121deb0 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,18 +1,23 @@
 import 'bootstrap/js/dist/dropdown';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
+import {usePrevious} from '../hooks/usePrevious';
 
 interface Option {
   displayName: string;
-  value: number | string;
+  key: any;
+  value: any;
+  image?: string;
 }
 
 interface SelectProps {
   label?: string;
   options?: Option[];
-  value?: number | string;
+  value?: any;
   onChange: (value: any) => void;
   showSearchInput?: boolean;
+  onSearchChange?: (value: string) => void;
   showAllOption?: boolean;
+  onFirstInteraction?: () => void;
 }
 
 function Select({
@@ -21,13 +26,32 @@ function Select({
   value,
   onChange,
   showSearchInput = false,
+  onSearchChange = () => {},
   showAllOption = true,
+  onFirstInteraction = () => {},
 }: SelectProps) {
   const currentOption = options?.find((option) => option.value == value);
   const [searchText, setSearchText] = useState('');
+  const prevSearchText = usePrevious(searchText);
+  const [hadFirstInteraction, setHadFirstInteraction] = useState(false);
 
   const dropdownId = `dropdown-${Math.random().toString(36).substring(7)}`;
 
+  useEffect(() => {
+    const id = setTimeout(() => {
+      if (searchText || (prevSearchText && prevSearchText.length > 0)) {
+        onSearchChange(searchText);
+      }
+    }, 250);
+    return () => clearTimeout(id);
+  }, [searchText]);
+
+  useEffect(() => {
+    if (hadFirstInteraction) {
+      onFirstInteraction();
+    }
+  }, [hadFirstInteraction]);
+
   return (
     <div className="form-group text-muted" style={{minWidth: '0px', width: '100%'}}>
       <label className="form-label" htmlFor={dropdownId}>
@@ -36,6 +60,7 @@ function Select({
       <div className="d-flex">
         <div className="dropdown mr-1 w-100">
           <button
+            onClick={() => setHadFirstInteraction(true)}
             type="button"
             className="btn btn-secondary dropdown-toggle w-100 text-left shadow-sm rounded-pill border-none text-start text-muted overflow-hidden"
             id={dropdownId}
@@ -84,9 +109,6 @@ function Select({
             )}
             {options &&
               options
-                .filter((option) =>
-                  searchText ? new RegExp(`${searchText}*`, 'i').test(option.displayName) : option
-                )
                 .sort((option1, option2) =>
                   option1.displayName < option2.displayName
                     ? -1
@@ -99,7 +121,7 @@ function Select({
                     className={`dropdown-item ${
                       currentOption && currentOption.value == option.value ? 'active' : ''
                     }`}
-                    key={option.value}
+                    key={option.key}
                     onClick={() => onChange(option.value)}
                     aria-selected={currentOption && currentOption.value === option.value}
                     role="option"
diff --git a/src/components/ThemeSelect.tsx b/src/components/ThemeSelect.tsx
index e412eea..1196d2a 100644
--- a/src/components/ThemeSelect.tsx
+++ b/src/components/ThemeSelect.tsx
@@ -12,8 +12,8 @@ function ThemeSelect({onChange}: ThemeSelectProps) {
     <Select
       label="Theme"
       options={[
-        {value: 'dark', displayName: 'Dark'},
-        {value: 'light', displayName: 'Light'},
+        {key: 'dark', value: 'dark', displayName: 'Dark'},
+        {key: 'light', value: 'light', displayName: 'Light'},
       ]}
       value={preferredTheme}
       onChange={onChange}
diff --git a/src/hooks/usePrevious.ts b/src/hooks/usePrevious.ts
new file mode 100644
index 0000000..f09f7a8
--- /dev/null
+++ b/src/hooks/usePrevious.ts
@@ -0,0 +1,9 @@
+import {useEffect, useRef} from 'react';
+
+export function usePrevious<Type>(value: Type) {
+  const ref = useRef<Type>();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
diff --git a/src/lib/api/goals.ts b/src/lib/api/goals.ts
index 09aa6fa..42a159a 100644
--- a/src/lib/api/goals.ts
+++ b/src/lib/api/goals.ts
@@ -23,6 +23,7 @@ export interface GetGoalsFilter {
   season?: number;
   teamId?: number;
   fixtureId?: number;
+  playerId?: number;
 }
 
 export interface GetGoalsRequest {
diff --git a/src/lib/api/players.ts b/src/lib/api/players.ts
new file mode 100644
index 0000000..8d37af8
--- /dev/null
+++ b/src/lib/api/players.ts
@@ -0,0 +1,33 @@
+import {API_BASE_URL} from './core';
+
+import axios from 'axios';
+
+export interface Player {
+  id: number;
+  name: string;
+  firstName: string;
+  lastName: string;
+  age: number;
+  nationality: string;
+  height: string;
+  weight: string;
+  photo: string;
+  createdAt: string;
+}
+
+export interface SearchPlayersRequest {
+  searchTerm: string;
+}
+
+export interface SearchPlayersResponse {
+  players: Player[];
+}
+
+export async function searchPlayers(searchTerm: string) {
+  const request: SearchPlayersRequest = {searchTerm};
+  const json = encodeURIComponent(JSON.stringify(request));
+  const url = `${API_BASE_URL}/players?json=${json}`;
+
+  const response = await axios.get<SearchPlayersResponse>(url);
+  return response.data;
+}
diff --git a/src/lib/api/teams.ts b/src/lib/api/teams.ts
index 0a34639..82808ea 100644
--- a/src/lib/api/teams.ts
+++ b/src/lib/api/teams.ts
@@ -22,6 +22,7 @@ export interface Teams {
 export interface GetTeamsFilter {
   leagueId?: number;
   season?: number;
+  searchTerm?: string;
 }
 
 export interface GetTeamsResponse {
diff --git a/src/pages/Goals.tsx b/src/pages/Goals.tsx
index cce8651..94092cd 100644
--- a/src/pages/Goals.tsx
+++ b/src/pages/Goals.tsx
@@ -11,6 +11,7 @@ import {Pagination} from '../lib/api/core';
 import {getFixtures, GetFixturesResponse} from '../lib/api/fixtures';
 import {getGoals, GetGoalsFilter, GetGoalsResponse} from '../lib/api/goals';
 import {getLeagues, GetLeaguesResponse} from '../lib/api/leagues';
+import {Player, searchPlayers, SearchPlayersResponse} from '../lib/api/players';
 import {getTeams, GetTeamsResponse} from '../lib/api/teams';
 import {getPreferredTheme, setTheme} from '../lib/utils';
 
@@ -21,13 +22,14 @@ function Goals() {
   const [currentPage, setCurrentPage] = useState(0);
   const [selectedLeagueId, setSelectedLeagueId] = useState<number>();
   const [selectedTeamId, setSelectedTeamId] = useState<number>();
-  const [selectedSeason, setSelectedSeason] = useState<number>();
+  const [selectedPlayer, setSelectedPlayer] = useState<Player>();
   const [searchInput, setSearchInput] = useState('');
   const [selectedTheme, setSelectedTheme] = useState(getPreferredTheme());
   const [getGoalsResponse, setGetGoalsResponse] = useState<GetGoalsResponse>();
   const [getTeamsResponse, setGetTeamsResponse] = useState<GetTeamsResponse>();
   const [getFixturesResponse, setGetFixturesResponse] = useState<GetFixturesResponse>();
   const [getLeaguesResponse, setGetLeaguesResponse] = useState<GetLeaguesResponse>();
+  const [searchPlayesResponse, setSearchPlayersResponse] = useState<SearchPlayersResponse>();
 
   const pageCount = Math.ceil(
     (getGoalsResponse ? getGoalsResponse.total : 0) / (pagination.limit || defaultPagination.limit)
@@ -43,9 +45,6 @@ function Goals() {
     getGoals().then((data) => {
       setGetGoalsResponse(data);
     });
-    getTeams().then((data) => {
-      setGetTeamsResponse(data);
-    });
   }, []);
 
   function handlePageClick(selectedItem: {selected: number}) {
@@ -54,7 +53,6 @@ function Goals() {
     const getGoalsFilter: GetGoalsFilter = {
       searchTerm: searchInput,
       leagueId: selectedLeagueId,
-      season: selectedSeason,
       teamId: selectedTeamId,
     };
     setGetGoalsResponse(undefined);
@@ -70,8 +68,8 @@ function Goals() {
     const getGoalsFilter: GetGoalsFilter = {
       searchTerm: searchInput,
       leagueId: selectedLeagueId,
-      season: selectedSeason,
       teamId: selectedTeamId,
+      playerId: selectedPlayer?.id,
     };
     setGetGoalsResponse(undefined);
     getGoals(defaultPagination, getGoalsFilter).then((data) => setGetGoalsResponse(data));
@@ -85,16 +83,13 @@ function Goals() {
     const getGoalsFilter: GetGoalsFilter = {
       searchTerm: searchInput,
       leagueId: parseInt(selectedLeagueId),
-      season: selectedSeason,
+      teamId: selectedTeamId,
+      playerId: selectedPlayer?.id,
     };
     setGetGoalsResponse(undefined);
     getGoals(defaultPagination, getGoalsFilter).then((data) => setGetGoalsResponse(data));
-    getTeams({leagueId: parseInt(selectedLeagueId), season: selectedSeason}).then((data) =>
-      setGetTeamsResponse(data)
-    );
 
     setSelectedLeagueId(parseInt(selectedLeagueId));
-    setSelectedTeamId(undefined);
     setPagination(defaultPagination);
     setCurrentPage(0);
   }
@@ -104,8 +99,8 @@ function Goals() {
     const getGoalsFilter: GetGoalsFilter = {
       searchTerm: searchInput,
       leagueId: selectedLeagueId,
-      season: selectedSeason,
       teamId: parseInt(selectedTeamId),
+      playerId: selectedPlayer?.id,
     };
     setGetGoalsResponse(undefined);
     getGoals(defaultPagination, getGoalsFilter).then((data) => setGetGoalsResponse(data));
@@ -115,30 +110,39 @@ function Goals() {
     setCurrentPage(0);
   }
 
-  function handleSelectedSeasonChange(value: string) {
-    const selectedSeason = value;
+  function handleSelectedPlayerChange(player: Player) {
     const getGoalsFilter: GetGoalsFilter = {
       searchTerm: searchInput,
       leagueId: selectedLeagueId,
-      season: parseInt(selectedSeason),
       teamId: selectedTeamId,
+      playerId: player.id,
     };
+
     setGetGoalsResponse(undefined);
     getGoals(defaultPagination, getGoalsFilter).then((data) => setGetGoalsResponse(data));
-
-    setSelectedSeason(parseInt(selectedSeason));
+    setSelectedPlayer(player);
     setPagination(defaultPagination);
     setCurrentPage(0);
   }
 
+  function handleTeamSearchInputChange(value: string) {
+    getTeams({searchTerm: value}).then((data) => {
+      setGetTeamsResponse(data);
+    });
+  }
+
+  function handlePlayerSearchInputChange(value: string) {
+    searchPlayers(value).then((data) => {
+      setSearchPlayersResponse(data);
+    });
+  }
+
   function reset() {
     setGetGoalsResponse(undefined);
     getGoals().then((data) => setGetGoalsResponse(data));
-    getTeams().then((data) => setGetTeamsResponse(data));
 
     setSelectedLeagueId(undefined);
     setSelectedTeamId(undefined);
-    setSelectedSeason(undefined);
     setSearchInput('');
     setCurrentPage(0);
     setPagination(defaultPagination);
@@ -210,11 +214,11 @@ function Goals() {
                 <Select
                   label={'League'}
                   options={[
-                    {value: 1, displayName: 'World Cup'},
-                    {value: 2, displayName: 'Champions League'},
-                    {value: 3, displayName: 'Europa League'},
-                    {value: 39, displayName: 'Premier League'},
-                    {value: 253, displayName: 'Major League Soccer'},
+                    {key: 1, value: 1, displayName: 'World Cup'},
+                    {key: 2, value: 2, displayName: 'Champions League'},
+                    {key: 3, value: 3, displayName: 'Europa League'},
+                    {key: 39, value: 39, displayName: 'Premier League'},
+                    {key: 253, value: 253, displayName: 'Major League Soccer'},
                   ]}
                   value={selectedLeagueId}
                   onChange={handleSelectedLeagueChange}
@@ -225,23 +229,35 @@ function Goals() {
                     getTeamsResponse &&
                     getTeamsResponse.teams &&
                     getTeamsResponse.teams.map((team) => ({
+                      key: team.id,
                       value: team.id,
                       displayName: team.name,
                     }))
                   }
                   value={selectedTeamId}
                   onChange={handleSelectedTeamChange}
+                  onSearchChange={handleTeamSearchInputChange}
+                  onFirstInteraction={() => getTeams().then((data) => setGetTeamsResponse(data))}
                   showSearchInput
                 ></Select>
                 <Select
-                  label={'Season'}
-                  options={[
-                    {value: '2023', displayName: '2023'},
-                    {value: '2022', displayName: '2022'},
-                    {value: '2021', displayName: '2021'},
-                  ]}
-                  value={selectedSeason}
-                  onChange={handleSelectedSeasonChange}
+                  label={'Player'}
+                  options={
+                    searchPlayesResponse &&
+                    searchPlayesResponse.players &&
+                    searchPlayesResponse.players.map((player) => ({
+                      key: player.id,
+                      value: player,
+                      displayName: player.name,
+                    }))
+                  }
+                  value={selectedPlayer}
+                  onChange={handleSelectedPlayerChange}
+                  onSearchChange={handlePlayerSearchInputChange}
+                  onFirstInteraction={() =>
+                    searchPlayers('').then((data) => setSearchPlayersResponse(data))
+                  }
+                  showSearchInput
                 ></Select>
               </div>