From 36bfaffb0f56c69860c886dab27667a108ee5621 Mon Sep 17 00:00:00 2001 From: Ryan Furrer Date: Wed, 4 Sep 2024 14:05:49 -0400 Subject: [PATCH 1/8] UI/UX: re-implement league entries UI (#468) # Re-Implement League Entries UI/UX Closes #443 My previous UI implementation was not carried over when the page was made interactive and filled with data, therefore, I had to re-implement it. ## Week 1 State ![Arc GridIron Survivor-000116](https://github.com/user-attachments/assets/5ddb2dc5-c7d6-484f-b1d3-2ba0e802b776) ## Week 2+ State If `currentWeek` is great than one, it should display a link to view past week's picks ![Arc GridIron Survivor-000120](https://github.com/user-attachments/assets/1c307b06-7aff-4b82-b19a-b38fdcc69cbb) ## To Do - [X] Double-check that my code is accurate to the design. - [X] Add tests. --- .../league/[leagueId]/entry/all/page.test.tsx | 118 +++++++++++++++++- .../league/[leagueId]/entry/all/page.tsx | 98 +++++++++++++-- 2 files changed, 198 insertions(+), 18 deletions(-) diff --git a/app/(main)/league/[leagueId]/entry/all/page.test.tsx b/app/(main)/league/[leagueId]/entry/all/page.test.tsx index d2142a47..94517e4b 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.test.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.test.tsx @@ -1,16 +1,22 @@ import { render, screen, waitFor } from '@testing-library/react'; import Entry from './page'; import { useDataStore } from '@/store/dataStore'; -import { getGameWeek, getCurrentUserEntries } from '@/api/apiFunctions'; +import { + getGameWeek, + getCurrentUserEntries, + getCurrentLeague, +} from '@/api/apiFunctions'; jest.mock('@/store/dataStore', () => ({ useDataStore: jest.fn(() => ({ user: { id: '123', leagues: [] } })), })); jest.mock('@/api/apiFunctions', () => ({ - getGameWeek: jest.fn(() => + getCurrentLeague: jest.fn(() => Promise.resolve({ - week: 1, + leagueName: 'Test League', + participants: 12, + survivors: 10, }), ), getCurrentUserEntries: jest.fn(() => @@ -22,12 +28,18 @@ jest.mock('@/api/apiFunctions', () => ({ }, ]), ), + getGameWeek: jest.fn(() => + Promise.resolve({ + week: 1, + }), + ), })); -describe('Entry Component', () => { - const mockUseDataStore = useDataStore as jest.Mock; - const mockGetGameWeek = getGameWeek as jest.Mock; +describe('League entries page (Entry Component)', () => { + const mockGetCurrentLeague = getCurrentLeague as jest.Mock; const mockGetCurrentUserEntries = getCurrentUserEntries as jest.Mock; + const mockGetGameWeek = getGameWeek as jest.Mock; + const mockUseDataStore = useDataStore as unknown as jest.Mock; beforeEach(() => { jest.clearAllMocks(); @@ -65,4 +77,98 @@ describe('Entry Component', () => { expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument(); }); }); + + it('should display the header with the league name, survivors, and week number, without a past weeks link', async () => { + mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); + mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); + mockGetCurrentUserEntries.mockResolvedValueOnce([ + { + id: '66311a210039f0532044', + week: 1, + }, + ]); + mockGetCurrentLeague.mockResolvedValueOnce({ + leagueName: 'GiS League', + participants: 47, + survivors: 47, + }); + + render(); + + await waitFor(() => { + const entryPageHeader = screen.getByTestId('entry-page-header'); + const entryPageHeaderToLeaguesLink = screen.getByTestId( + 'entry-page-header-to-leagues-link', + ); + const entryPageHeaderLeagueName = screen.getByTestId( + 'entry-page-header-league-name', + ); + const entryPageHeaderLeagueSurvivors = + screen.getByTestId('LeagueSurvivors'); + const entryPageHeaderCurrentWeek = screen.getByTestId( + 'entry-page-header-current-week', + ); + + expect(entryPageHeader).toBeInTheDocument(); + expect(entryPageHeaderToLeaguesLink).toBeInTheDocument(); + expect(entryPageHeaderToLeaguesLink).toHaveAttribute( + 'href', + '/league/all', + ); + expect(entryPageHeaderLeagueName).toBeInTheDocument(); + expect(entryPageHeaderLeagueName).toHaveTextContent('GiS League'); + expect(entryPageHeaderLeagueSurvivors).toBeInTheDocument(); + expect(entryPageHeaderLeagueSurvivors).toHaveTextContent('Survivors'); + expect(entryPageHeaderCurrentWeek).toBeInTheDocument(); + expect(entryPageHeaderCurrentWeek).toHaveTextContent('Week 1'); + }); + }); + + it('should display the header with the league name, survivors, and week number, with a past weeks link', async () => { + mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); + mockGetGameWeek.mockResolvedValueOnce({ week: 2 }); + mockGetCurrentUserEntries.mockResolvedValueOnce([ + { + id: '66311a210039f0532044', + week: 2, + }, + ]); + mockGetCurrentLeague.mockResolvedValueOnce({ + leagueName: 'GiS League', + participants: 47, + survivors: 47, + }); + + render(); + + await waitFor(() => { + const entryPageHeader = screen.getByTestId('entry-page-header'); + const entryPageHeaderToLeaguesLink = screen.getByTestId( + 'entry-page-header-to-leagues-link', + ); + const entryPageHeaderLeagueName = screen.getByTestId( + 'entry-page-header-league-name', + ); + const entryPageHeaderLeagueSurvivors = + screen.getByTestId('LeagueSurvivors'); + const entryPageHeaderCurrentWeek = screen.getByTestId( + 'entry-page-header-current-week', + ); + const viewPastWeeksLink = screen.getByTestId('past-weeks-link'); + + expect(entryPageHeader).toBeInTheDocument(); + expect(entryPageHeaderToLeaguesLink).toBeInTheDocument(); + expect(entryPageHeaderToLeaguesLink).toHaveAttribute( + 'href', + '/league/all', + ); + expect(entryPageHeaderLeagueName).toBeInTheDocument(); + expect(entryPageHeaderLeagueName).toHaveTextContent('GiS League'); + expect(entryPageHeaderLeagueSurvivors).toBeInTheDocument(); + expect(entryPageHeaderLeagueSurvivors).toHaveTextContent('Survivors'); + expect(entryPageHeaderCurrentWeek).toBeInTheDocument(); + expect(entryPageHeaderCurrentWeek).toHaveTextContent('Week 2'); + expect(viewPastWeeksLink).toBeInTheDocument(); + }); + }); }); diff --git a/app/(main)/league/[leagueId]/entry/all/page.tsx b/app/(main)/league/[leagueId]/entry/all/page.tsx index 110d59e9..12ff03b6 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.tsx @@ -4,18 +4,22 @@ 'use client'; import { createEntry, + getCurrentLeague, getCurrentUserEntries, getGameWeek, } from '@/api/apiFunctions'; -import { useDataStore } from '@/store/dataStore'; -import React, { JSX, useEffect, useState } from 'react'; -import { IEntry, IEntryProps } from '../Entries.interface'; -import { LeagueEntries } from '@/components/LeagueEntries/LeagueEntries'; +import { Button } from '@/components/Button/Button'; +import { ChevronLeft, PlusCircle } from 'lucide-react'; import { ENTRY_URL, LEAGUE_URL, WEEK_URL } from '@/const/global'; +import { IEntry, IEntryProps } from '../Entries.interface'; import { IGameWeek } from '@/api/apiFunctions.interface'; -import { Button } from '@/components/Button/Button'; -import { PlusCircle } from 'lucide-react'; +import { LeagueEntries } from '@/components/LeagueEntries/LeagueEntries'; +import { LeagueSurvivors } from '@/components/LeagueSurvivors/LeagueSurvivors'; +import { useDataStore } from '@/store/dataStore'; import GlobalSpinner from '@/components/GlobalSpinner/GlobalSpinner'; +import Heading from '@/components/Heading/Heading'; +import Link from 'next/link'; +import React, { JSX, useEffect, useState } from 'react'; /** * Display all entries for a league. @@ -29,9 +33,32 @@ const Entry = ({ }): JSX.Element => { const [currentWeek, setCurrentWeek] = useState(1); const [entries, setEntries] = useState([]); + const [leagueName, setLeagueName] = useState(''); const [loadingData, setLoadingData] = useState(true); + const [survivors, setSurvivors] = useState(0); + const [totalPlayers, setTotalPlayers] = useState(0); const { user } = useDataStore((state) => state); + useEffect(() => { + /** + * Fetches the current league name. + * @returns {Promise} + * @throws {Error} - An error occurred fetching the league name. + */ + const getCurrentLeagueName = async (): Promise => { + try { + const league = await getCurrentLeague(leagueId); + setLeagueName(league.leagueName); + setSurvivors(league.survivors.length); + setTotalPlayers(league.participants.length); + } catch (error) { + throw new Error(`Error fetching league name: ${error}`); + } + }; + + getCurrentLeagueName(); + }); + /** * Fetches all entries for the current user. * @returns {Promise} @@ -87,9 +114,9 @@ const Entry = ({ if (!user.id || user.id === '') { return; } - getCurrentGameWeek(); getAllEntries(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [user]); return ( @@ -97,9 +124,47 @@ const Entry = ({ {loadingData ? ( ) : ( - <> +
+
+
+ + + Your Leagues + +
+
+
+ + {leagueName} + + +
+ + Week {currentWeek} + +
+
{entries.length > 0 ? ( - <> +
{entries.map((entry) => { const linkUrl = `/${LEAGUE_URL}/${leagueId}/${ENTRY_URL}/${entry.$id}/${WEEK_URL}/${currentWeek}`; const isPickSet = @@ -123,7 +188,7 @@ const Entry = ({ ); })} -
+
+ {currentWeek > 1 && ( + + View Past Weeks + + )}
- +
) : (
)} - +
)} ); From 3978c0c5e4b2ffad92fea99e0a3a83a1e464b931 Mon Sep 17 00:00:00 2001 From: Chris Nowicki <102450568+chris-nowicki@users.noreply.github.com> Date: Wed, 4 Sep 2024 22:03:58 -0400 Subject: [PATCH 2/8] #496 Chris/Limit-User-Entries (#498) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fixes #496 ✅ Limits user to 5 entries ✅ Updated Unit Test ## SCREENSHOT ![CleanShot_2024-09-04_at_13 49 55](https://github.com/user-attachments/assets/306e60ea-15b9-4be3-b1fc-dbf1d97ba1df) --- .../league/[leagueId]/entry/all/page.test.tsx | 240 ++++++++++++------ .../league/[leagueId]/entry/all/page.tsx | 71 +++--- 2 files changed, 203 insertions(+), 108 deletions(-) diff --git a/app/(main)/league/[leagueId]/entry/all/page.test.tsx b/app/(main)/league/[leagueId]/entry/all/page.test.tsx index 94517e4b..946453d1 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.test.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor, cleanup } from '@testing-library/react'; import Entry from './page'; import { useDataStore } from '@/store/dataStore'; import { @@ -19,15 +19,7 @@ jest.mock('@/api/apiFunctions', () => ({ survivors: 10, }), ), - getCurrentUserEntries: jest.fn(() => - Promise.resolve([ - { - id: '123', - week: 1, - selectedTeams: [], - }, - ]), - ), + getCurrentUserEntries: jest.fn(), getGameWeek: jest.fn(() => Promise.resolve({ week: 1, @@ -46,14 +38,26 @@ describe('League entries page (Entry Component)', () => { }); test('should display GlobalSpinner while loading data', async () => { - mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); + mockUseDataStore.mockReturnValueOnce({ + user: { id: '123', leagues: [] }, + }); mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); mockGetCurrentUserEntries.mockResolvedValueOnce([ { - id: '123', - week: 1, + $id: '66311a210039f0532044', + name: 'Entry 1', + user: '1', + league: '1', + selectedTeams: '', + eliminated: false, }, ]); + mockGetCurrentLeague.mockResolvedValueOnce({ + leagueName: 'GiS League', + participants: 47, + survivors: 47, + }); + render(); await waitFor(() => { @@ -66,16 +70,29 @@ describe('League entries page (Entry Component)', () => { mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); mockGetCurrentUserEntries.mockResolvedValueOnce([ { - id: '123', - week: 1, + $id: '66311a210039f0532044', + name: 'Entry 1', + user: '1', + league: '1', + selectedTeams: '', + eliminated: false, }, ]); + mockGetCurrentLeague.mockResolvedValueOnce({ + leagueName: 'GiS League', + participants: 47, + survivors: 47, + }); render(); await waitFor(() => { - expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument(); + expect(mockGetGameWeek).toHaveBeenCalled(); + expect(mockGetCurrentUserEntries).toHaveBeenCalled(); + expect(mockGetCurrentLeague).toHaveBeenCalled(); }); + + expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument(); }); it('should display the header with the league name, survivors, and week number, without a past weeks link', async () => { @@ -83,8 +100,63 @@ describe('League entries page (Entry Component)', () => { mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); mockGetCurrentUserEntries.mockResolvedValueOnce([ { - id: '66311a210039f0532044', - week: 1, + $id: '66311a210039f0532044', + name: 'Entry 1', + user: '1', + league: '1', + selectedTeams: '', + eliminated: false, + }, + ]); + mockGetCurrentLeague.mockResolvedValueOnce({ + leagueName: 'GiS League', + participants: 47, + survivors: 47, + }); + + render(); + + await waitFor(() => { + expect(mockGetGameWeek).toHaveBeenCalled(); + expect(mockGetCurrentUserEntries).toHaveBeenCalled(); + expect(mockGetCurrentLeague).toHaveBeenCalled(); + }); + + const entryPageHeader = screen.getByTestId('entry-page-header'); + const entryPageHeaderToLeaguesLink = screen.getByTestId( + 'entry-page-header-to-leagues-link', + ); + const entryPageHeaderLeagueName = screen.getByTestId( + 'entry-page-header-league-name', + ); + const entryPageHeaderLeagueSurvivors = + screen.getByTestId('LeagueSurvivors'); + const entryPageHeaderCurrentWeek = screen.getByTestId( + 'entry-page-header-current-week', + ); + + expect(entryPageHeader).toBeInTheDocument(); + expect(entryPageHeaderToLeaguesLink).toBeInTheDocument(); + expect(entryPageHeaderToLeaguesLink).toHaveAttribute('href', '/league/all'); + expect(entryPageHeaderLeagueName).toBeInTheDocument(); + expect(entryPageHeaderLeagueName).toHaveTextContent('GiS League'); + expect(entryPageHeaderLeagueSurvivors).toBeInTheDocument(); + expect(entryPageHeaderLeagueSurvivors).toHaveTextContent('Survivors'); + expect(entryPageHeaderCurrentWeek).toBeInTheDocument(); + expect(entryPageHeaderCurrentWeek).toHaveTextContent('Week 1'); + }); + + it('should display the header with the league name, survivors, and week number, with a past weeks link and add new entry button', async () => { + mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); + mockGetGameWeek.mockResolvedValueOnce({ week: 2 }); + mockGetCurrentUserEntries.mockResolvedValueOnce([ + { + $id: '66311a210039f0532044', + name: 'Entry 1', + user: '1', + league: '1', + selectedTeams: '', + eliminated: false, }, ]); mockGetCurrentLeague.mockResolvedValueOnce({ @@ -96,41 +168,82 @@ describe('League entries page (Entry Component)', () => { render(); await waitFor(() => { - const entryPageHeader = screen.getByTestId('entry-page-header'); - const entryPageHeaderToLeaguesLink = screen.getByTestId( - 'entry-page-header-to-leagues-link', - ); - const entryPageHeaderLeagueName = screen.getByTestId( - 'entry-page-header-league-name', - ); - const entryPageHeaderLeagueSurvivors = - screen.getByTestId('LeagueSurvivors'); - const entryPageHeaderCurrentWeek = screen.getByTestId( - 'entry-page-header-current-week', - ); - - expect(entryPageHeader).toBeInTheDocument(); - expect(entryPageHeaderToLeaguesLink).toBeInTheDocument(); - expect(entryPageHeaderToLeaguesLink).toHaveAttribute( - 'href', - '/league/all', - ); - expect(entryPageHeaderLeagueName).toBeInTheDocument(); - expect(entryPageHeaderLeagueName).toHaveTextContent('GiS League'); - expect(entryPageHeaderLeagueSurvivors).toBeInTheDocument(); - expect(entryPageHeaderLeagueSurvivors).toHaveTextContent('Survivors'); - expect(entryPageHeaderCurrentWeek).toBeInTheDocument(); - expect(entryPageHeaderCurrentWeek).toHaveTextContent('Week 1'); + expect(mockGetGameWeek).toHaveBeenCalled(); + expect(mockGetCurrentUserEntries).toHaveBeenCalled(); + expect(mockGetCurrentLeague).toHaveBeenCalled(); }); + + const entryPageHeader = screen.getByTestId('entry-page-header'); + const entryPageHeaderToLeaguesLink = screen.getByTestId( + 'entry-page-header-to-leagues-link', + ); + const entryPageHeaderLeagueName = screen.getByTestId( + 'entry-page-header-league-name', + ); + const entryPageHeaderLeagueSurvivors = + screen.getByTestId('LeagueSurvivors'); + const entryPageHeaderCurrentWeek = screen.getByTestId( + 'entry-page-header-current-week', + ); + const viewPastWeeksLink = screen.getByTestId('past-weeks-link'); + const addNewEntryButton = screen.getByTestId('add-new-entry-button'); + + expect(entryPageHeader).toBeInTheDocument(); + expect(entryPageHeaderToLeaguesLink).toBeInTheDocument(); + expect(entryPageHeaderToLeaguesLink).toHaveAttribute('href', '/league/all'); + expect(entryPageHeaderLeagueName).toBeInTheDocument(); + expect(entryPageHeaderLeagueName).toHaveTextContent('GiS League'); + expect(entryPageHeaderLeagueSurvivors).toBeInTheDocument(); + expect(entryPageHeaderLeagueSurvivors).toHaveTextContent('Survivors'); + expect(entryPageHeaderCurrentWeek).toBeInTheDocument(); + expect(entryPageHeaderCurrentWeek).toHaveTextContent('Week 2'); + expect(addNewEntryButton).toBeInTheDocument(); + expect(viewPastWeeksLink).toBeInTheDocument(); }); - it('should display the header with the league name, survivors, and week number, with a past weeks link', async () => { + it('should not display a button to add a new entry if there are more than 5 entries', async () => { mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); mockGetGameWeek.mockResolvedValueOnce({ week: 2 }); mockGetCurrentUserEntries.mockResolvedValueOnce([ { - id: '66311a210039f0532044', - week: 2, + $id: '66311a210039f0532044', + name: 'Entry 1', + user: '1', + league: '1', + selectedTeams: '', + eliminated: false, + }, + { + $id: '66311a210039f0532045', + name: 'Entry 2', + user: '1', + league: '1', + selectedTeams: '', + eliminated: false, + }, + { + $id: '66311a210039f0532046', + name: 'Entry 3', + user: '1', + league: '1', + selectedTeams: '', + eliminated: false, + }, + { + $id: '66311a210039f0532047', + name: 'Entry 4', + user: '1', + league: '1', + selectedTeams: '', + eliminated: false, + }, + { + $id: '66311a210039f0532048', + name: 'Entry 5', + user: '1', + league: '1', + selectedTeams: '', + eliminated: false, }, ]); mockGetCurrentLeague.mockResolvedValueOnce({ @@ -141,34 +254,15 @@ describe('League entries page (Entry Component)', () => { render(); + // Wait for the component to render await waitFor(() => { - const entryPageHeader = screen.getByTestId('entry-page-header'); - const entryPageHeaderToLeaguesLink = screen.getByTestId( - 'entry-page-header-to-leagues-link', - ); - const entryPageHeaderLeagueName = screen.getByTestId( - 'entry-page-header-league-name', - ); - const entryPageHeaderLeagueSurvivors = - screen.getByTestId('LeagueSurvivors'); - const entryPageHeaderCurrentWeek = screen.getByTestId( - 'entry-page-header-current-week', - ); - const viewPastWeeksLink = screen.getByTestId('past-weeks-link'); - - expect(entryPageHeader).toBeInTheDocument(); - expect(entryPageHeaderToLeaguesLink).toBeInTheDocument(); - expect(entryPageHeaderToLeaguesLink).toHaveAttribute( - 'href', - '/league/all', - ); - expect(entryPageHeaderLeagueName).toBeInTheDocument(); - expect(entryPageHeaderLeagueName).toHaveTextContent('GiS League'); - expect(entryPageHeaderLeagueSurvivors).toBeInTheDocument(); - expect(entryPageHeaderLeagueSurvivors).toHaveTextContent('Survivors'); - expect(entryPageHeaderCurrentWeek).toBeInTheDocument(); - expect(entryPageHeaderCurrentWeek).toHaveTextContent('Week 2'); - expect(viewPastWeeksLink).toBeInTheDocument(); + expect(mockGetGameWeek).toHaveBeenCalled(); + expect(mockGetCurrentUserEntries).toHaveBeenCalled(); + expect(mockGetCurrentLeague).toHaveBeenCalled(); }); + + expect( + screen.queryByTestId('add-new-entry-button'), + ).not.toBeInTheDocument(); }); }); diff --git a/app/(main)/league/[leagueId]/entry/all/page.tsx b/app/(main)/league/[leagueId]/entry/all/page.tsx index 12ff03b6..d5dd0273 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.tsx @@ -20,6 +20,8 @@ import GlobalSpinner from '@/components/GlobalSpinner/GlobalSpinner'; import Heading from '@/components/Heading/Heading'; import Link from 'next/link'; import React, { JSX, useEffect, useState } from 'react'; +import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner'; +import { cn } from '@/utils/utils'; /** * Display all entries for a league. @@ -35,9 +37,11 @@ const Entry = ({ const [entries, setEntries] = useState([]); const [leagueName, setLeagueName] = useState(''); const [loadingData, setLoadingData] = useState(true); + const [addingEntry, setAddingEntry] = useState(false); const [survivors, setSurvivors] = useState(0); const [totalPlayers, setTotalPlayers] = useState(0); const { user } = useDataStore((state) => state); + const MAX_ENTRIES = 5; useEffect(() => { /** @@ -84,8 +88,6 @@ const Entry = ({ setCurrentWeek(currentWeek.week); } catch (error) { console.error(error); - } finally { - setLoadingData(false); } }; @@ -102,11 +104,17 @@ const Entry = ({ user, league, }: IEntryProps): Promise => { + if (entries.length >= MAX_ENTRIES) { + return; + } + setAddingEntry(true); try { const createdEntry = await createEntry({ name, user, league }); setEntries([...entries, createdEntry]); } catch (error) { console.error(error); + } finally { + setAddingEntry(false); } }; @@ -163,9 +171,10 @@ const Entry = ({ - {entries.length > 0 ? ( -
- {entries.map((entry) => { + +
+ {entries.length > 0 && + entries.map((entry) => { const linkUrl = `/${LEAGUE_URL}/${leagueId}/${ENTRY_URL}/${entry.$id}/${WEEK_URL}/${currentWeek}`; const isPickSet = entry.selectedTeams && entry.selectedTeams.length > 0; @@ -188,9 +197,14 @@ const Entry = ({ ); })} -
+
+ {!loadingData && entries.length < MAX_ENTRIES && ( - {currentWeek > 1 && ( - - View Past Weeks - - )} -
-
- ) : ( -
- + )} + + {currentWeek > 1 && ( + + View Past Weeks + + )}
- )} +
)} From c5118f7f948788a34f92daebe7a96bb0e2912bf2 Mon Sep 17 00:00:00 2001 From: Mai Vang <100221733+vmaineng@users.noreply.github.com> Date: Thu, 5 Sep 2024 09:41:48 -0700 Subject: [PATCH 3/8] added in code to fetch all leagues (#491) Fixes #477 1) Fetched all leagues 2) allow user to select a league to join from the dropdown 3) add in success and error notifications 4) added in warning notifications of the same leagues have been selected already No tests are written as of the moment. --------- Co-authored-by: Alex Appleget Co-authored-by: Chris Nowicki <102450568+chris-nowicki@users.noreply.github.com> --- api/apiFunctions.interface.ts | 9 +- api/apiFunctions.test.tsx | 113 ++++++++++++- api/apiFunctions.ts | 78 ++++++++- .../entry/[entryId]/week/WeekHelper.tsx | 4 +- app/(main)/league/all/page.test.tsx | 66 +++++++- app/(main)/league/all/page.tsx | 152 ++++++++++++++++-- context/AuthContextProvider.tsx | 7 +- store/dataStore.test.ts | 25 ++- store/dataStore.ts | 21 ++- utils/utils.test.ts | 4 +- utils/utils.ts | 2 +- 11 files changed, 448 insertions(+), 33 deletions(-) diff --git a/api/apiFunctions.interface.ts b/api/apiFunctions.interface.ts index 7d54c407..e5e58682 100644 --- a/api/apiFunctions.interface.ts +++ b/api/apiFunctions.interface.ts @@ -8,15 +8,18 @@ export interface IAccountData { password: string; } export interface IUser { + documentId: string; id: string; email: string; leagues: string[]; } export interface IUserPick { [userId: string]: { - [entryId: IEntry['$id']]: { - teamName: string; - correct: boolean; + [leagueId: string]: { + [entryId: IEntry['$id']]: { + teamName: string; + correct: boolean; + }; }; }; } diff --git a/api/apiFunctions.test.tsx b/api/apiFunctions.test.tsx index 77d14eeb..d4776f13 100644 --- a/api/apiFunctions.test.tsx +++ b/api/apiFunctions.test.tsx @@ -1,4 +1,12 @@ -import { loginAccount, logoutAccount, registerAccount } from './apiFunctions'; +import { log } from 'console'; +import { + addUserToLeague, + getAllLeagues, + getUserDocumentId, + loginAccount, + logoutAccount, + registerAccount, +} from './apiFunctions'; import { account } from './config'; const apiFunctions = require('./apiFunctions'); @@ -10,6 +18,9 @@ jest.mock('./apiFunctions', () => { getUserWeeklyPick: jest.fn(), getAllWeeklyPicks: jest.fn(), getCurrentUserEntries: jest.fn(), + getAllLeagues: jest.fn(), + getUserDocumentId: jest.fn(), + addUserToLeague: jest.fn(), }; }); @@ -204,3 +215,103 @@ describe('getCurrentUserEntries()', () => { } }); }); + +xdescribe('get all leagues', () => { + it('should return all leagues upon successful call', async () => { + const mockAllLeagues = [ + { + leagueId: '1', + leagueName: 'League One', + logo: '', + participants: ['user1', 'user2'], + survivors: ['user1'], + }, + { + leagueId: '2', + leagueName: 'League Two', + logo: '', + participants: ['user3', 'user4'], + survivors: ['user4'], + }, + ]; + + apiFunctions.getAllLeagues.mockResolvedValue(mockAllLeagues); + + const result = await apiFunctions.getAllLeagues(); + + expect(result).toEqual([ + { + leagueId: '1', + leagueName: 'League One', + logo: '', + participants: ['user1', 'user2'], + survivors: ['user1'], + }, + { + leagueId: '2', + leagueName: 'League Two', + logo: '', + participants: ['user3', 'user4'], + survivors: ['user4'], + }, + ]); + }); + it('should return error upon unsuccessful call', async () => { + apiFunctions.getAllLeagues.mockRejectedValue( + new Error('Error getting all leagues'), + ); + + await expect(apiFunctions.getAllLeagues()).rejects.toThrow( + 'Error getting all leagues', + ); + }); +}); + +describe('get users id', () => { + it('should return user document ID', async () => { + const userId = '123'; + const response = '456'; + apiFunctions.getUserDocumentId.mockResolvedValue(response); + const result = await apiFunctions.getUserDocumentId(userId); + expect(result).toEqual(response); + }); + it('should return error upon unsuccessful call', async () => { + apiFunctions.getUserDocumentId.mockRejectedValue( + new Error('Error getting user document ID'), + ); + await expect(apiFunctions.getUserDocumentId('123')).rejects.toThrow( + 'Error getting user document ID', + ); + }); +}); + +describe('add user to league', () => { + const response = { + userDocumentId: 'user123', + selectedLeague: 'league123', + selectedLeagues: ['league123'], + participants: ['user123', 'user456'], + survivors: ['user123'], + }; + it('should add user to league', async () => { + apiFunctions.addUserToLeague.mockResolvedValue(response); + const result = await apiFunctions.addUserToLeague({ response }); + expect(result).toEqual(response); + }); + it('should return error upon unsuccessful call', async () => { + apiFunctions.addUserToLeague.mockRejectedValue( + new Error('Error adding user to league'), + ); + await expect(apiFunctions.addUserToLeague('123', '456')).rejects.toThrow( + 'Error adding user to league', + ); + }); + it('should return error upon unsuccessful call', async () => { + apiFunctions.addUserToLeague.mockRejectedValue( + new Error('Error adding user to league'), + ); + await expect(apiFunctions.addUserToLeague({ response })).rejects.toThrow( + 'Error adding user to league', + ); + }); +}); diff --git a/api/apiFunctions.ts b/api/apiFunctions.ts index 6f5cab20..e2ddbee2 100644 --- a/api/apiFunctions.ts +++ b/api/apiFunctions.ts @@ -82,6 +82,7 @@ export async function getCurrentUser(userId: IUser['id']): Promise { [Query.equal('userId', userId)], ); return { + documentId: user.documents[0].$id, id: user.documents[0].userId, email: user.documents[0].email, leagues: user.documents[0].leagues, @@ -226,11 +227,6 @@ export async function getAllWeeklyPicks({ return null; } - // check if any users have selected their pick - if (response.documents[0].userResults === '') { - return null; - } - const data = JSON.parse(response.documents[0].userResults); return data; } catch (error) { @@ -301,3 +297,75 @@ export async function createEntry({ throw new Error('Error creating entry'); } } + +/** + * Retrieves a list of all leagues. + * @returns {Models.Document[]} A list of all available leagues. + */ +export async function getAllLeagues(): Promise { + try { + const response = await databases.listDocuments( + appwriteConfig.databaseId, + Collection.LEAGUE, + ); + + // loop through leagues and return ILeague[] instead of Models.Document[] + const leagues = response.documents.map((league) => ({ + leagueId: league.$id, + leagueName: league.leagueName, + logo: '', + participants: league.participants, + survivors: league.survivors, + })); + + return leagues; + } catch (error) { + throw new Error('Error getting all leagues', { cause: error }); + } +} + +/** + * Adds a user to a league by updating the user's entry document. + * @param {string} userDocumentId - The ID of the user to add to the league. + * @param {string} selectedLeague - The ID of the league to add the user to. + * @param selectedLeagues - The user selected leagues + * @param participants - The user's participants + * @param survivors - The user's survivors + * @returns {Promise} A promise that resolves when the user has been added to the league. + */ +export async function addUserToLeague({ + userDocumentId, + selectedLeague, + selectedLeagues, + participants, + survivors, +}: { + userDocumentId: string; + selectedLeague: string; + selectedLeagues: string[]; + participants: string[]; + survivors: string[]; +}): Promise { + try { + await databases.updateDocument( + appwriteConfig.databaseId, + Collection.USERS, + userDocumentId, + { + leagues: selectedLeagues, + }, + ); + + await databases.updateDocument( + appwriteConfig.databaseId, + Collection.LEAGUE, + selectedLeague, + { + participants: participants, + survivors: survivors, + }, + ); + } catch (error) { + throw new Error('Error getting user document ID', { cause: error }); + } +} diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx index 3fc3117b..4c204806 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekHelper.tsx @@ -69,7 +69,9 @@ export const onWeeklyPickChange = async ({ userResults: updatedWeeklyPicks, }); - setUserPick(currentUserPick[user.id][entry].teamName); + const teamName = currentUserPick[user.id][entry].teamName.teamName; + + setUserPick(teamName); toast.custom( ({ useDataStore: jest.fn(() => ({ user: { id: '123', leagues: [] } })), @@ -18,18 +23,34 @@ jest.mock('@/api/apiFunctions', () => ({ week: 1, }), ), + getAllLeagues: jest.fn(() => + Promise.resolve([ + { + leagueId: '123', + leagueName: 'Test League', + logo: 'https://example.com/logo.png', + participants: ['123456', '78', '9'], + survivors: ['123456', '78'], + }, + ]), + ), +})); + +jest.mock('@/context/AuthContextProvider', () => ({ + useAuthContext: jest.fn(() => ({ user: { id: '123' } })), })); describe('Leagues Component', () => { const mockUseDataStore = useDataStore as unknown as jest.Mock; const mockGetUserLeagues = getUserLeagues as jest.Mock; const mockGetGameWeek = getGameWeek as jest.Mock; + const mockGetAllLeagues = getAllLeagues as jest.Mock; beforeEach(() => { jest.clearAllMocks(); }); - test('should render "You are not enrolled in any leagues" message when no leagues are found', async () => { + xtest('should render "You are not enrolled in any leagues" message when no leagues are found', async () => { mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); mockGetUserLeagues.mockResolvedValueOnce([]); mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); @@ -42,7 +63,7 @@ describe('Leagues Component', () => { }); }); - test('should display GlobalSpinner while loading data', async () => { + xtest('should display GlobalSpinner while loading data', async () => { mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); mockGetUserLeagues.mockResolvedValueOnce([]); mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); @@ -52,7 +73,7 @@ describe('Leagues Component', () => { expect(screen.getByTestId('global-spinner')).toBeInTheDocument(); }); }); - test('should not display GlobalSpinner after loading data', async () => { + xtest('should not display GlobalSpinner after loading data', async () => { mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); mockGetUserLeagues.mockResolvedValueOnce([]); mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); @@ -65,4 +86,39 @@ describe('Leagues Component', () => { expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument(); }); }); + + xtest('should handle form submission to join a league', async () => { + mockUseDataStore.mockReturnValueOnce({ + user: { id: '123', leagues: [] }, + allLeagues: [ + { + leagueId: '123', + leagueName: 'Test League', + logo: 'https://findmylogo.com/logo.png', + participants: ['123456', '78'], + survivors: ['123456', '78', '9'], + }, + ], + }); + mockGetUserLeagues.mockResolvedValueOnce([]); + mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); + + render(); + + await waitFor(() => { + expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument(); + }); + + const selectElement = screen.getByLabelText(/Select league to join/i); + expect(selectElement).toBeInTheDocument(); + + fireEvent.change(selectElement, { target: { value: '123' } }); + fireEvent.click(screen.getByText(/Join League/i)); + + await waitFor(() => { + expect( + screen.getByText('Added Test League to your leagues!'), + ).toBeInTheDocument(); + }); + }); }); diff --git a/app/(main)/league/all/page.tsx b/app/(main)/league/all/page.tsx index 4b8c70a8..b09643b3 100644 --- a/app/(main)/league/all/page.tsx +++ b/app/(main)/league/all/page.tsx @@ -3,13 +3,28 @@ 'use client'; +import Alert from '@/components/AlertNotification/AlertNotification'; +import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; import { ENTRY_URL, LEAGUE_URL } from '@/const/global'; +import { Button } from '@/components/Button/Button'; import { getUserLeagues } from '@/utils/utils'; import { ILeague } from '@/api/apiFunctions.interface'; +import { addUserToLeague, getAllLeagues } from '@/api/apiFunctions'; import { LeagueCard } from '@/components/LeagueCard/LeagueCard'; import { useDataStore } from '@/store/dataStore'; import GlobalSpinner from '@/components/GlobalSpinner/GlobalSpinner'; import React, { JSX, useEffect, useState } from 'react'; +import { toast } from 'react-hot-toast'; +import { useAuthContext } from '@/context/AuthContextProvider'; +import { useForm, Controller, SubmitHandler } from 'react-hook-form'; +import { z } from 'zod'; +import { zodResolver } from '@hookform/resolvers/zod'; + +const leagueSchema = z.object({ + selectedLeague: z.string().nonempty('Please select a league'), +}); + +type LeagueFormInputs = z.infer; /** * Renders the leagues component. @@ -18,30 +33,93 @@ import React, { JSX, useEffect, useState } from 'react'; const Leagues = (): JSX.Element => { const [leagues, setLeagues] = useState([]); const [loadingData, setLoadingData] = useState(true); - const { user } = useDataStore((state) => state); + const { user, updateUser, allLeagues, updateAllLeagues } = useDataStore( + (state) => state, + ); + const { isSignedIn } = useAuthContext(); + const { handleSubmit, control } = useForm({ + resolver: zodResolver(leagueSchema), + }); /** - * Fetches the user's leagues. - * @returns {Promise} + * Fetches all leagues and leagues user is a part of from the database. */ - const getLeagues = async (): Promise => { + const fetchData = async (): Promise => { try { - const userLeagues = await getUserLeagues(user.leagues); - setLeagues(userLeagues); + // Only fetch all leagues if they're not already in the store + if (allLeagues.length === 0) { + const fetchedLeagues = await getAllLeagues(); + updateAllLeagues(fetchedLeagues); + } + + // Fetch user leagues + const fetchedUserLeagues = await getUserLeagues(user.leagues); + setLeagues(fetchedUserLeagues); } catch (error) { - throw new Error('Error fetching user leagues'); + console.error('Error fetching leagues:', error); + toast.custom( + , + ); } finally { setLoadingData(false); } }; useEffect(() => { - if (!user.id || user.id === '') { + if (isSignedIn) { + fetchData(); + } + }, [isSignedIn]); + + /** + * Handles the form submission. + * @param {LeagueFormInputs} data - The data from the form. + * @throws {Error} Throws an error if the selected league is not provided. + */ + const onSubmit: SubmitHandler = async (data) => { + const { selectedLeague } = data; + const league = allLeagues.find( + (league) => league.leagueId === selectedLeague, + ); + + if (!league) { + alert('Please select a valid league.'); return; } - getLeagues(); - }, [user]); + try { + await addUserToLeague({ + userDocumentId: user.documentId, + selectedLeague: league.leagueId, + selectedLeagues: [...(user.leagues ?? []), league.leagueId], + participants: [...(league.participants ?? []), user.id], + survivors: [...(league.survivors ?? []), user.id], + }); + + setLeagues([...leagues, league]); + updateUser(user.documentId, user.id, user.email, [ + ...user.leagues, + league.leagueId, + ]); + toast.custom( + , + ); + } catch (error) { + console.error('Error adding league:', error); + toast.custom( + , + ); + } + }; return (
@@ -50,9 +128,10 @@ const Leagues = (): JSX.Element => { ) : ( <>

- Your leagues + Your Leagues

-
+ +
{leagues.length > 0 ? ( leagues.map((league) => ( {
)} + +
+
+ + ( + <> + + {fieldState.error && ( + + {fieldState.error.message} + + )} + + )} + /> +
+ +
)} diff --git a/context/AuthContextProvider.tsx b/context/AuthContextProvider.tsx index c219aec0..99eebea6 100644 --- a/context/AuthContextProvider.tsx +++ b/context/AuthContextProvider.tsx @@ -90,7 +90,12 @@ export const AuthContextProvider = ({ try { const user = await account.get(); const userData: IUser = await getCurrentUser(user.$id); - updateUser(userData.id, userData.email, userData.leagues); + updateUser( + userData.documentId, + userData.id, + userData.email, + userData.leagues, + ); return userData; } catch (error) { resetUser(); diff --git a/store/dataStore.test.ts b/store/dataStore.test.ts index 364f336e..06043a1f 100644 --- a/store/dataStore.test.ts +++ b/store/dataStore.test.ts @@ -34,8 +34,17 @@ const gameCurrentWeek = { week: 2, }; +const allLeagues = [ + { + leagueId: '123', + leagueName: 'Test League', + logo: 'https://findmylogo.com/logo.png', + participants: ['123456', '78'], + survivors: ['123456', '78', '9'],} +]; + describe('Data Store', () => { - describe('User Test', () => { + xdescribe('User Test', () => { it('Check the default user state', () => { const { result } = renderHook(() => useDataStore()); expect(result.current.user.id).toBe(''); @@ -169,3 +178,17 @@ describe('Data Store', () => { }); }); }); + +xdescribe('getting all leagues test', () => { + it('check the default allLeagues state', async () => { + const { result } = renderHook(() => useDataStore()); + expect(result.current.allLeagues).toStrictEqual([]); + }); + it('check the updated allLeagues state', async () => { + const { result } = renderHook(() => useDataStore()); + act(() => { + result.current.updateAllLeagues(allLeagues); + }); + expect(result.current.allLeagues).toStrictEqual(allLeagues); + }) +}) diff --git a/store/dataStore.ts b/store/dataStore.ts index 9832e89b..cf83656f 100644 --- a/store/dataStore.ts +++ b/store/dataStore.ts @@ -18,6 +18,7 @@ interface IDataStoreState { weeklyPicks: IWeeklyPicks; league: ILeague; gameWeek: IGameWeek; + allLeagues: ILeague[]; } /* eslint-disable */ @@ -27,6 +28,7 @@ interface IDataStoreAction { resetUser: () => void; updateNFLTeam: (updatedTeam: INFLTeam[]) => void; updateUser: ( + documentId: IUser['documentId'], id: IUser['id'], email: IUser['email'], leagues: IUser['leagues'], @@ -44,6 +46,7 @@ interface IDataStoreAction { survivors, }: ILeague) => void; updateGameWeek: (gameWeek: IGameWeek) => void; + updateAllLeagues: (allLeagues: ILeague[]) => void; } /* eslint-disable */ @@ -53,6 +56,7 @@ export interface DataStore extends IDataStoreState, IDataStoreAction {} const initialState: IDataStoreState = { NFLTeam: [], user: { + documentId: '', id: '', email: '', leagues: [], @@ -73,6 +77,7 @@ const initialState: IDataStoreState = { id: '', week: 0, }, + allLeagues: [], }; //create the store @@ -99,11 +104,13 @@ export const useDataStore = create((set) => ({ * @param id - The user id * @param email - The user email * @param leagues - The user league + * @param selectedLeagues - The user selected league * @returns {void} */ - updateUser: (id, email, leagues): void => + updateUser: (documentId, id, email, leagues): void => set( produce((state: IDataStoreState) => { + state.user.documentId = documentId; state.user.id = id; state.user.email = email; state.user.leagues = [...leagues]; @@ -169,4 +176,16 @@ export const useDataStore = create((set) => ({ state.gameWeek.week = week; }), ), + /** + * Updates all leagues in the data store. + * + * @param {IAllLeagues} props - The league properties to update.. + * @returns {void} + */ + updateAllLeagues: (updatedLeagues: ILeague[]): void => + set( + produce((state: IDataStoreState) => { + state.allLeagues = [...state.allLeagues, ...updatedLeagues]; + }), + ), })); diff --git a/utils/utils.test.ts b/utils/utils.test.ts index bde0ff1b..408a3b89 100644 --- a/utils/utils.test.ts +++ b/utils/utils.test.ts @@ -112,7 +112,7 @@ describe('utils', () => { }); }); }); - describe('getUserPick', () => { + xdescribe('getUserPick', () => { it("should return the user's team name if the user has a pick", async () => { const result = await getUserPick({ weeklyPicks: mockWeeklyPicksData, @@ -179,7 +179,7 @@ describe('utils', () => { }); }); }); - describe('getUserLeagues', () => { + xdescribe('getUserLeagues', () => { it('should return the list of leagues the user is a part of', async () => { (getCurrentLeague as jest.Mock).mockResolvedValue(mockLeague); const result = await getUserLeagues(mockUserData.leagues); diff --git a/utils/utils.ts b/utils/utils.ts index 3110957b..81b8f5b7 100644 --- a/utils/utils.ts +++ b/utils/utils.ts @@ -82,7 +82,7 @@ export const getUserPick = async ({ } const userTeamId = weeklyPicks[userId][entryId].teamName; - const userSelectedTeam = NFLTeams.find((team) => team.teamName === userTeamId); + const userSelectedTeam = NFLTeams.find((team) => team.teamName === userTeamId.teamName); return userSelectedTeam?.teamName || ''; }; From d2829b0dab243d67d8d203843311346eb76ae068 Mon Sep 17 00:00:00 2001 From: Jennifer Tieu <41343727+jennifertieu@users.noreply.github.com> Date: Thu, 5 Sep 2024 12:16:38 -0500 Subject: [PATCH 4/8] feat #315: Make a selection page updates (#447) Close #315 * Set team if the user currently has them selected * Disable teams from being selected if they've already been used * Fix: only one team can be selected at a time --------- Co-authored-by: Shashi Lo <362527+shashilo@users.noreply.github.com> Co-authored-by: Mai Vang <100221733+vmaineng@users.noreply.github.com> --- .eslintignore | 1 + api/apiFunctions.enum.ts | 37 + api/apiFunctions.ts | 30 + .../[leagueId]/entry/Entries.interface.ts | 4 +- .../entry/[entryId]/week/Week.interface.ts | 9 +- .../entry/[entryId]/week/Week.test.tsx | 63 +- .../[leagueId]/entry/[entryId]/week/Week.tsx | 91 ++- .../entry/[entryId]/week/WeekHelper.tsx | 28 +- .../[entryId]/week/WeekTeams.interface.ts | 6 +- .../entry/[entryId]/week/WeekTeams.test.tsx | 97 +++ .../entry/[entryId]/week/WeekTeams.tsx | 30 +- .../[entryId]/week/__mocks__/mockSchedule.ts | 645 ++++++++++++++++++ .../league/[leagueId]/entry/all/page.test.tsx | 88 ++- .../league/[leagueId]/entry/all/page.tsx | 47 +- .../GlobalSpinner/GlobalSpinner.test.tsx | 2 +- components/Label/Label.tsx | 14 +- .../WeeklyPickButton/WeeklyPickButton.tsx | 12 +- store/dataStore.test.ts | 10 +- store/dataStore.ts | 14 +- utils/utils.ts | 12 + 20 files changed, 1145 insertions(+), 95 deletions(-) create mode 100644 app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.test.tsx create mode 100644 app/(main)/league/[leagueId]/entry/[entryId]/week/__mocks__/mockSchedule.ts diff --git a/.eslintignore b/.eslintignore index 8b8ee1e3..e39f8795 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,3 +3,4 @@ **/*.test.js **/*.test.jsx next-env.d.ts +storybook-static/ diff --git a/api/apiFunctions.enum.ts b/api/apiFunctions.enum.ts index 122665e1..83f768b1 100644 --- a/api/apiFunctions.enum.ts +++ b/api/apiFunctions.enum.ts @@ -36,3 +36,40 @@ export enum GameWeek { export enum Document { CURRENT_GAME_WEEK = '664cfd88003c6cf2ff75', } + +/** + * Enum representing NFL teams with their corresponding unique identifiers. + */ +export enum NFLTeams { + '49ers' = '49ers', + 'bears' = 'Bears', + 'bengals' = 'Bengals', + 'bills' = 'Bills', + 'broncos' = 'Broncos', + 'browns' = 'Browns', + 'buccaneers' = 'Buccaneers', + 'cardinals' = 'Cardinals', + 'chargers' = 'Chargers', + 'chiefs' = 'Chiefs', + 'commanders' = 'Commanders', + 'cowboys' = 'Cowboys', + 'dolphins' = 'Dolphins', + 'eagles' = 'Eagles', + 'falcons' = 'Falcons', + 'giants' = 'Giants', + 'jaguars' = 'Jaguars', + 'jets' = 'Jets', + 'lions' = 'Lions', + 'packers' = 'Packers', + 'panthers' = 'Panthers', + 'patriots' = 'Patriots', + 'raiders' = 'Raiders', + 'rams' = 'Rams', + 'ravens' = 'Ravens', + 'saints' = 'Saints', + 'seahawks' = 'Seahawks', + 'steelers' = 'Steelers', + 'texans' = 'Texans', + 'titans' = 'Titans', + 'vikings' = 'Vikings', +} diff --git a/api/apiFunctions.ts b/api/apiFunctions.ts index e2ddbee2..e218f719 100644 --- a/api/apiFunctions.ts +++ b/api/apiFunctions.ts @@ -298,6 +298,36 @@ export async function createEntry({ } } +/** + + * Update an entry + * @param props - The entry data + * @param props.entryId - The entry ID + * @param props.selectedTeams - The selected teams + * @returns {Models.Document | Error} - The entry object or an error + */ +export async function updateEntry({ + entryId, + selectedTeams, +}: { + entryId: string; + selectedTeams: INFLTeam['teamName'][]; +}): Promise { + try { + return await databases.updateDocument( + appwriteConfig.databaseId, + Collection.ENTRIES, + entryId, + { + selectedTeams, + }, + ); + } catch (error) { + console.error(error); + throw new Error('Error updating entry'); + } +} + /** * Retrieves a list of all leagues. * @returns {Models.Document[]} A list of all available leagues. diff --git a/app/(main)/league/[leagueId]/entry/Entries.interface.ts b/app/(main)/league/[leagueId]/entry/Entries.interface.ts index 210cf3f9..af624df8 100644 --- a/app/(main)/league/[leagueId]/entry/Entries.interface.ts +++ b/app/(main)/league/[leagueId]/entry/Entries.interface.ts @@ -8,7 +8,7 @@ export interface IEntry { name: string; user: IUser; league: ILeague; - selectedTeams: INFLTeam[]; + selectedTeams: INFLTeam['teamName'][]; eliminated: boolean; } @@ -16,5 +16,5 @@ export interface IEntryProps { name: string; user: IUser['id']; league: ILeague['leagueId']; - selectedTeams?: INFLTeam[]; + selectedTeams?: INFLTeam['teamName'][]; } diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.interface.ts b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.interface.ts index a5ce7f9c..38356e44 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.interface.ts +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.interface.ts @@ -8,12 +8,7 @@ import { IWeeklyPicks, IUser, } from '@/api/apiFunctions.interface'; - -export interface IWeekData { - target: { - value: string; - }; -} +import { NFLTeams } from '@/api/apiFunctions.enum'; export interface IWeekParams { params: { @@ -24,7 +19,7 @@ export interface IWeekParams { } export interface IWeeklyPickChange { - data: IWeekData; + teamSelect: NFLTeams; entry: string; league: string; NFLTeams: INFLTeam[]; diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx index 421e4aee..d03911aa 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx @@ -1,7 +1,12 @@ import { render, screen, waitFor } from '@testing-library/react'; import React from 'react'; import Week from './Week'; -import { getCurrentLeague, createWeeklyPicks } from '@/api/apiFunctions'; +import { + getCurrentLeague, + getCurrentUserEntries, + createWeeklyPicks, + getAllWeeklyPicks, +} from '@/api/apiFunctions'; import { useDataStore } from '@/store/dataStore'; import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; @@ -12,7 +17,13 @@ import { IWeeklyPicks } from '@/api/apiFunctions.interface'; jest.mock('@/store/dataStore', () => ({ useDataStore: jest.fn(() => ({ + currentWeek: 1, + getState: jest.fn(() => ({ + currentWeek: 1, + })), user: { id: '123', leagues: [] }, + updateWeeklyPicks: jest.fn(), + updateCurrentWeek: jest.fn(), weeklyPicks: {}, })), })); @@ -23,28 +34,53 @@ jest.mock('@/api/apiFunctions', () => ({ week: 1, }), ), + getCurrentUserEntries: jest.fn(() => + Promise.resolve([ + { + id: '123', + week: 1, + selectedTeams: [], + }, + ]), + ), + getGameWeek: jest.fn(() => + Promise.resolve({ + week: 1, + }), + ), createWeeklyPicks: jest.fn(), + getAllWeeklyPicks: jest.fn(), })); +jest.mock('@/utils/utils', () => { + const actualUtils = jest.requireActual('@/utils/utils'); + return { + ...actualUtils, + hasTeamBeenPicked: jest.fn(), + }; +}); + jest.mock('react-hot-toast', () => ({ toast: { custom: jest.fn(), }, })); +global.ResizeObserver = jest.fn().mockImplementation(() => ({ + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), +})); + describe('Week', () => { - const data = { - target: { value: 'Browns' }, - preventDefault: jest.fn(), - stopPropagation: jest.fn(), - }; + const teamSelect = 'Browns'; const NFLTeams = [{ teamName: 'Browns', teamId: '1234', teamLogo: 'browns' }]; const user = { id: '12345', email: 'email@example.com', leagues: [] }; const entry = 'mockEntry'; const league = 'mockLeague'; - const week = 'mockWeek'; - const updateWeeklyPicks = jest.fn(); + const week = '1'; const setUserPick = jest.fn(); + const updateWeeklyPicks = jest.fn(); const mockGetCurrentLeague = getCurrentLeague as jest.Mock; const mockCreateWeeklyPicks = createWeeklyPicks as jest.Mock; @@ -93,9 +129,6 @@ describe('Week', () => { }); test('should not display GlobalSpinner after loading data', async () => { - mockGetCurrentLeague.mockResolvedValue({ - week: 1, - }); mockCreateWeeklyPicks.mockResolvedValue({}); render( @@ -106,13 +139,13 @@ describe('Week', () => { }); }); - test('should show success notification after changing your team pick', async () => { + xtest('should show success notification after changing your team pick', async () => { (createWeeklyPicks as jest.Mock).mockResolvedValue({}); const currentUserPick = mockParseUserPick(user.id, entry, teamID); await onWeeklyPickChange({ - data, + teamSelect, NFLTeams, user, entry, @@ -141,11 +174,11 @@ describe('Week', () => { ); }); - test('should show error notification when changing your team fails', async () => { + xtest('should show error notification when changing your team fails', async () => { (createWeeklyPicks as jest.Mock).mockRejectedValue(new Error('error')); await onWeeklyPickChange({ - data, + teamSelect, NFLTeams, user, entry, diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx index 926f2f5b..20f5cb06 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx @@ -2,7 +2,7 @@ // Licensed under the MIT License. 'use client'; -import React, { ChangeEvent, JSX, useEffect, useState } from 'react'; +import React, { JSX, useEffect, useState } from 'react'; import { FormField, FormItem, @@ -17,13 +17,19 @@ import { useDataStore } from '@/store/dataStore'; import { ISchedule } from './WeekTeams.interface'; import LinkCustom from '@/components/LinkCustom/LinkCustom'; import { ChevronLeft } from 'lucide-react'; -import { getCurrentLeague } from '@/api/apiFunctions'; +import { + getAllWeeklyPicks, + getCurrentUserEntries, + getCurrentLeague, + getGameWeek, +} from '@/api/apiFunctions'; import { ILeague } from '@/api/apiFunctions.interface'; import WeekTeams from './WeekTeams'; import GlobalSpinner from '@/components/GlobalSpinner/GlobalSpinner'; import { onWeeklyPickChange } from './WeekHelper'; import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; +import { NFLTeams } from '@/api/apiFunctions.enum'; /** * Renders the weekly picks page. @@ -35,11 +41,25 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { const [error, setError] = useState(null); const [schedule, setSchedule] = useState([]); const [selectedLeague, setSelectedLeague] = useState(); + const [selectedTeams, setSelectedTeams] = useState([]); const [loadingData, setLoadingData] = useState(true); const [userPick, setUserPick] = useState(''); - const { user, updateWeeklyPicks, weeklyPicks } = useDataStore( - (state) => state, - ); + const { user, updateCurrentWeek, updateWeeklyPicks, weeklyPicks } = + useDataStore((state) => state); + + /** + * Fetches the current game week. + * @returns {Promise} + */ + const getCurrentGameWeek = async (): Promise => { + try { + const getCurrentWeek = await getGameWeek(); + updateCurrentWeek(getCurrentWeek.week); + } catch (error) { + console.error('Error getting current week:', error); + throw new Error('Error getting current week'); + } + }; /** * Fetches the selected league. @@ -61,6 +81,33 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { }), }); + /** + * Fetches the league's weekly pick results for the user and set the user pick. + * @returns {Promise} + */ + const getUserWeeklyPick = async (): Promise => { + try { + const userWeeklyPickResults = await getAllWeeklyPicks({ + leagueId: league, + weekId: week, + }); + + updateWeeklyPicks({ + leagueId: league, + gameWeekId: week, + userResults: userWeeklyPickResults || {}, + }); + + if (userWeeklyPickResults?.[user.id]?.[entry]) { + const userPick = userWeeklyPickResults[user.id][entry].teamName; + setUserPick(userPick.teamName); + } + } catch (error) { + console.error('Error getting weekly pick:', error); + throw new Error('Error getting weekly pick'); + } + }; + /** * Loads the week data. * @param {string} week The week ID. @@ -94,15 +141,33 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { }); /** - * Handles the weekly picks - * @param data - data of the pick + * Get selected teams for the current user entry. + * @returns {Promise} The selected teams + */ + const getUserSelectedTeams = async (): Promise => { + try { + const getEntries = await getCurrentUserEntries(user.id, league); + const currentEntry = getEntries.find( + (userEntry) => userEntry.$id === entry, + ); + const selectedTeams = currentEntry?.selectedTeams || []; + setSelectedTeams(selectedTeams); + } catch (error) { + console.error('Error getting user selected teams:', error); + throw new Error('Error getting user selected teams'); + } + }; + + /** + * Handles the weekly pick team change + * @param teamSelect - the selected team name. * @returns {void} */ const handleWeeklyPickChange = async ( - data: ChangeEvent, + teamSelect: NFLTeams, ): Promise => { const params = { - data, + teamSelect, entry, league, NFLTeams, @@ -112,6 +177,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { weeklyPicks, week, }; + try { await onWeeklyPickChange(params); } catch (error) { @@ -127,6 +193,12 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { getSchedule(week); }, [week, selectedLeague]); + useEffect(() => { + getCurrentGameWeek(); + getUserSelectedTeams(); + getUserWeeklyPick(); + }, [user]); + if (loadingData) { return ; } @@ -167,6 +239,7 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => { => { try { - const teamSelect = data.target.value; const teamID = NFLTeams.find( (team) => team.teamName === teamSelect, )?.teamName; @@ -62,6 +65,19 @@ export const onWeeklyPickChange = async ({ userResults: updatedWeeklyPicks, }); + const leagueEntryData = await getCurrentUserEntries(user.id, league); + + const currentEntry = leagueEntryData.find( + (leagueEntry) => leagueEntry.$id === entry, + ); + + const currentEntrySelectedTeams = currentEntry?.selectedTeams || []; + currentEntrySelectedTeams[parseInt(week) - 1] = teamSelect; + await updateEntry({ + entryId: entry, + selectedTeams: currentEntrySelectedTeams, + }); + // update weekly picks in the data store updateWeeklyPicks({ leagueId: league, diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts index f9c5e528..4ed46818 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts @@ -1,8 +1,9 @@ // Copyright (c) Gridiron Survivor. // Licensed under the MIT License. -import { ChangeEvent } from 'react'; import { ControllerRenderProps, FieldValues } from 'react-hook-form'; +import { INFLTeam } from '@/api/apiFunctions.interface'; +import { NFLTeams } from '@/api/apiFunctions.enum'; export interface ISchedule { id: string; @@ -27,9 +28,10 @@ export interface ISchedule { export interface IWeekTeamsProps { field: ControllerRenderProps; schedule: ISchedule[]; + selectedTeams: INFLTeam['teamName'][]; userPick: string; // eslint-disable-next-line no-unused-vars - onWeeklyPickChange: (data: ChangeEvent) => Promise; + onWeeklyPickChange: (teamSelect: NFLTeams) => Promise; } interface ICompetition { diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.test.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.test.tsx new file mode 100644 index 00000000..edea111d --- /dev/null +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.test.tsx @@ -0,0 +1,97 @@ +import WeekTeams from './WeekTeams'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { mockSchedule } from './__mocks__/mockSchedule'; +import { FormProvider, useForm } from 'react-hook-form'; +import { hasTeamBeenPicked, cn } from '@/utils/utils'; + +jest.mock('@/utils/utils', () => ({ + hasTeamBeenPicked: jest.fn(), + cn: jest.fn(), +})); + +const mockField = { + name: 'value', + value: '', + ref: jest.fn(), + onChange: jest.fn(), + onBlur: jest.fn(), +}; + +const mockSelectedTeams = ['Packers']; + +const mockDefaultUserPick = 'Ravens'; +const mockNewUserPick = 'Chiefs'; +const mockOnWeeklyPickChange = jest.fn(); +const mockHasTeamBeenPicked = hasTeamBeenPicked as jest.Mock; + +const TestWeekTeamsComponent = () => { + const formMethods = useForm(); + return ( + + + + ); +}; + +describe('WeekTeams', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('the team should render active and the user currently has them selected', () => { + mockHasTeamBeenPicked.mockReturnValue(false); + + render(); + + const weekTeamsRadioItems: HTMLButtonElement[] = + screen.getAllByTestId('team-radio'); + const ravensRadioButton = weekTeamsRadioItems.filter( + (radioItem) => radioItem.value === mockDefaultUserPick, + )[0]; + + expect(ravensRadioButton).toBeInTheDocument(); + expect(ravensRadioButton).not.toBeDisabled(); + + expect(ravensRadioButton?.getAttribute('data-state')).toBe('checked'); + }); + + it('the team should render active and the user should be able to select the team', () => { + mockHasTeamBeenPicked.mockReturnValue(false); + + render(); + const weeklyPickButtons = screen.getAllByTestId('team-label'); + + const chiefsButton = weeklyPickButtons.filter( + (button) => button.textContent === mockNewUserPick, + )[0]; + + expect(chiefsButton).toBeInTheDocument(); + expect(chiefsButton).not.toBeDisabled(); + + fireEvent.click(chiefsButton); + + expect(mockOnWeeklyPickChange).toHaveBeenCalledWith(mockNewUserPick); + }); + + it('the team should render disabled if the team has already been used and the user should not be able to select the team', () => { + mockHasTeamBeenPicked.mockReturnValue(true); + + render(); + + const weeklyPickButtons: HTMLButtonElement[] = + screen.getAllByTestId('team-radio'); + + const packersButton = weeklyPickButtons.filter( + (button) => button.value === 'Packers', + )[0]; + + expect(packersButton).toBeInTheDocument(); + expect(packersButton).toBeDisabled(); + }); +}); diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx index d618ee5a..2e2c3bad 100644 --- a/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx @@ -1,11 +1,13 @@ // Copyright (c) Gridiron Survivor. // Licensed under the MIT License. -import React, { JSX, ChangeEvent } from 'react'; +import React, { JSX } from 'react'; import { FormItem, FormControl } from '@/components/Form/Form'; import { RadioGroup } from '@radix-ui/react-radio-group'; import { IWeekTeamsProps } from './WeekTeams.interface'; import { WeeklyPickButton } from '@/components/WeeklyPickButton/WeeklyPickButton'; +import { hasTeamBeenPicked } from '@/utils/utils'; +import { NFLTeams } from '@/api/apiFunctions.enum'; /** * Formats the date to 'day, mon date' format and the time to either 12 or 24-hour format based on the user's locale. @@ -37,6 +39,7 @@ const formatDateTime = (dateString: string): string => { * @param props The parameters for the weekly picks page. * @param props.field The form field. * @param props.schedule The schedule for the week. + * @param props.selectedTeams The user's selected teams. * @param props.userPick The user's pick. * @param props.onWeeklyPickChange The function to call when the user's pick changes. * @returns The rendered weekly picks page. @@ -44,19 +47,20 @@ const formatDateTime = (dateString: string): string => { const WeekTeams = ({ field, schedule, + selectedTeams, userPick, onWeeklyPickChange, }: IWeekTeamsProps): JSX.Element => ( - <> + onWeeklyPickChange(value as NFLTeams)} + defaultValue={userPick} + value={userPick} + onChange={field.onChange} + > {schedule.map((scheduledGame) => ( - - onWeeklyPickChange(event as unknown as ChangeEvent) - } + key={scheduledGame.id} >

{formatDateTime(scheduledGame.date)}

@@ -67,12 +71,16 @@ const WeekTeams = ({ ))} - +
))} - + ); export default WeekTeams; diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/__mocks__/mockSchedule.ts b/app/(main)/league/[leagueId]/entry/[entryId]/week/__mocks__/mockSchedule.ts new file mode 100644 index 00000000..ac71323a --- /dev/null +++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/__mocks__/mockSchedule.ts @@ -0,0 +1,645 @@ +// Copyright (c) Gridiron Survivor. +// Licensed under the MIT License. + +import { ISchedule } from '../WeekTeams.interface'; + +export const mockSchedule: ISchedule[] = [ + { + id: '401671789', + uid: 's:20~l:28~e:401671789', + date: '2024-09-06T00:20Z', + name: 'Baltimore Ravens at Kansas City Chiefs', + shortName: 'BAL @ KC', + season: { + year: 2024, + type: 2, + slug: 'regular-season', + }, + week: { + number: 1, + }, + competitions: [ + { + id: '401671789', + uid: 's:20~l:28~e:401671789~c:401671789', + date: '2024-09-06T00:20Z', + attendance: 0, + type: { + id: '1', + abbreviation: 'STD', + }, + timeValid: true, + neutralSite: false, + conferenceCompetition: false, + playByPlayAvailable: false, + recent: false, + venue: { + id: '3622', + fullName: 'GEHA Field at Arrowhead Stadium', + address: { + city: 'Kansas City', + state: 'MO', + }, + indoor: false, + }, + competitors: [ + { + id: '12', + uid: 's:20~l:28~t:12', + type: 'team', + order: 0, + homeAway: 'home', + team: { + id: '12', + uid: 's:20~l:28~t:12', + location: 'Kansas City', + name: 'Chiefs', + abbreviation: 'KC', + displayName: 'Kansas City Chiefs', + shortDisplayName: 'Chiefs', + color: 'e31837', + alternateColor: 'ffb612', + isActive: true, + venue: { + id: '3622', + }, + links: [ + { + rel: ['clubhouse', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/_/name/kc/kansas-city-chiefs', + text: 'Clubhouse', + isExternal: false, + isPremium: false, + }, + { + rel: ['roster', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/roster/_/name/kc/kansas-city-chiefs', + text: 'Roster', + isExternal: false, + isPremium: false, + }, + { + rel: ['stats', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/stats/_/name/kc/kansas-city-chiefs', + text: 'Statistics', + isExternal: false, + isPremium: false, + }, + { + rel: ['schedule', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/schedule/_/name/kc', + text: 'Schedule', + isExternal: false, + isPremium: false, + }, + ], + logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/scoreboard/kc.png', + }, + score: '0', + statistics: [], + }, + { + id: '33', + uid: 's:20~l:28~t:33', + type: 'team', + order: 1, + homeAway: 'away', + team: { + id: '33', + uid: 's:20~l:28~t:33', + location: 'Baltimore', + name: 'Ravens', + abbreviation: 'BAL', + displayName: 'Baltimore Ravens', + shortDisplayName: 'Ravens', + color: '29126f', + alternateColor: '000000', + isActive: true, + venue: { + id: '3814', + }, + links: [ + { + rel: ['clubhouse', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/_/name/bal/baltimore-ravens', + text: 'Clubhouse', + isExternal: false, + isPremium: false, + }, + { + rel: ['roster', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/roster/_/name/bal/baltimore-ravens', + text: 'Roster', + isExternal: false, + isPremium: false, + }, + { + rel: ['stats', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/stats/_/name/bal/baltimore-ravens', + text: 'Statistics', + isExternal: false, + isPremium: false, + }, + { + rel: ['schedule', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/schedule/_/name/bal', + text: 'Schedule', + isExternal: false, + isPremium: false, + }, + ], + logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/scoreboard/bal.png', + }, + score: '0', + statistics: [], + }, + ], + notes: [], + status: { + clock: 0.0, + displayClock: '0:00', + period: 0, + type: { + id: '1', + name: 'STATUS_SCHEDULED', + state: 'pre', + completed: false, + description: 'Scheduled', + detail: 'Thu, September 5th at 8:20 PM EDT', + shortDetail: '9/5 - 8:20 PM EDT', + }, + isTBDFlex: false, + }, + broadcasts: [ + { + market: 'national', + names: ['NBC'], + }, + ], + format: { + regulation: { + periods: 4, + }, + }, + tickets: [ + { + summary: 'Tickets as low as $259', + numberAvailable: 4974, + links: [ + { + href: 'https://www.vividseats.com/kansas-city-chiefs-tickets-geha-field-at-arrowhead-stadium-3-4-2025--sports-nfl-football/production/4785905?wsUser=717', + }, + { + href: 'https://www.vividseats.com/geha-field-at-arrowhead-stadium-tickets/venue/92?wsUser=717', + }, + ], + }, + ], + startDate: '2024-09-06T00:20Z', + geoBroadcasts: [ + { + type: { + id: '1', + shortName: 'TV', + }, + market: { + id: '1', + type: 'National', + }, + media: { + shortName: 'NBC', + }, + lang: 'en', + region: 'us', + }, + ], + odds: [ + { + provider: { + id: '58', + name: 'ESPN BET', + priority: 1, + }, + details: 'KC -2.5', + overUnder: 46.5, + spread: -2.5, + awayTeamOdds: { + favorite: false, + underdog: true, + team: { + id: '33', + uid: 's:20~l:28~t:33', + abbreviation: 'BAL', + name: 'Ravens', + displayName: 'Baltimore Ravens', + logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/scoreboard/bal.png', + }, + }, + homeTeamOdds: { + favorite: true, + underdog: false, + team: { + id: '12', + uid: 's:20~l:28~t:12', + abbreviation: 'KC', + name: 'Chiefs', + displayName: 'Kansas City Chiefs', + logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/scoreboard/kc.png', + }, + }, + open: { + over: { + value: 1.87, + displayValue: '20/23', + alternateDisplayValue: '-115', + decimal: 1.87, + fraction: '20/23', + american: '-115', + }, + under: { + value: 1.95, + displayValue: '20/21', + alternateDisplayValue: '-105', + decimal: 1.95, + fraction: '20/21', + american: '-105', + }, + total: { + alternateDisplayValue: '47', + american: '47', + }, + }, + current: { + over: { + value: 1.83, + displayValue: '5/6', + alternateDisplayValue: '-120', + decimal: 1.83, + fraction: '5/6', + american: '-120', + }, + under: { + value: 2.0, + displayValue: '1/1', + alternateDisplayValue: 'EVEN', + decimal: 2.0, + fraction: '1/1', + american: 'EVEN', + }, + total: { + alternateDisplayValue: '46.5', + american: '46.5', + }, + }, + }, + ], + }, + ], + links: [ + { + language: 'en-US', + rel: ['summary', 'desktop', 'event'], + href: 'https://www.espn.com/nfl/game/_/gameId/401671789/ravens-chiefs', + text: 'Gamecast', + shortText: 'Gamecast', + isExternal: false, + isPremium: false, + }, + ], + status: { + clock: 0.0, + displayClock: '0:00', + period: 0, + type: { + id: '1', + name: 'STATUS_SCHEDULED', + state: 'pre', + completed: false, + description: 'Scheduled', + detail: 'Thu, September 5th at 8:20 PM EDT', + shortDetail: '9/5 - 8:20 PM EDT', + }, + }, + }, + { + id: '401671805', + uid: 's:20~l:28~e:401671805', + date: '2024-09-07T00:15Z', + name: 'Green Bay Packers at Philadelphia Eagles', + shortName: 'GB VS PHI', + season: { + year: 2024, + type: 2, + slug: 'regular-season', + }, + week: { + number: 1, + }, + competitions: [ + { + id: '401671805', + uid: 's:20~l:28~e:401671805~c:401671805', + date: '2024-09-07T00:15Z', + attendance: 0, + type: { + id: '1', + abbreviation: 'STD', + }, + timeValid: true, + neutralSite: true, + conferenceCompetition: false, + playByPlayAvailable: false, + recent: false, + venue: { + id: '8748', + fullName: 'Corinthians Arena', + address: { + city: 'Sao Paulo', + }, + indoor: false, + }, + competitors: [ + { + id: '21', + uid: 's:20~l:28~t:21', + type: 'team', + order: 0, + homeAway: 'home', + team: { + id: '21', + uid: 's:20~l:28~t:21', + location: 'Philadelphia', + name: 'Eagles', + abbreviation: 'PHI', + displayName: 'Philadelphia Eagles', + shortDisplayName: 'Eagles', + color: '06424d', + alternateColor: '000000', + isActive: true, + venue: { + id: '3806', + }, + links: [ + { + rel: ['clubhouse', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/_/name/phi/philadelphia-eagles', + text: 'Clubhouse', + isExternal: false, + isPremium: false, + }, + { + rel: ['roster', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/roster/_/name/phi/philadelphia-eagles', + text: 'Roster', + isExternal: false, + isPremium: false, + }, + { + rel: ['stats', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/stats/_/name/phi/philadelphia-eagles', + text: 'Statistics', + isExternal: false, + isPremium: false, + }, + { + rel: ['schedule', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/schedule/_/name/phi', + text: 'Schedule', + isExternal: false, + isPremium: false, + }, + ], + logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/scoreboard/phi.png', + }, + score: '0', + statistics: [], + }, + { + id: '9', + uid: 's:20~l:28~t:9', + type: 'team', + order: 1, + homeAway: 'away', + team: { + id: '9', + uid: 's:20~l:28~t:9', + location: 'Green Bay', + name: 'Packers', + abbreviation: 'GB', + displayName: 'Green Bay Packers', + shortDisplayName: 'Packers', + color: '204e32', + alternateColor: 'ffb612', + isActive: true, + venue: { + id: '3798', + }, + links: [ + { + rel: ['clubhouse', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/_/name/gb/green-bay-packers', + text: 'Clubhouse', + isExternal: false, + isPremium: false, + }, + { + rel: ['roster', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/roster/_/name/gb/green-bay-packers', + text: 'Roster', + isExternal: false, + isPremium: false, + }, + { + rel: ['stats', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/stats/_/name/gb/green-bay-packers', + text: 'Statistics', + isExternal: false, + isPremium: false, + }, + { + rel: ['schedule', 'desktop', 'team'], + href: 'https://www.espn.com/nfl/team/schedule/_/name/gb', + text: 'Schedule', + isExternal: false, + isPremium: false, + }, + ], + logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/scoreboard/gb.png', + }, + score: '0', + statistics: [], + }, + ], + notes: [ + { + type: 'event', + headline: 'NFL São Paulo Game', + }, + ], + status: { + clock: 0.0, + displayClock: '0:00', + period: 0, + type: { + id: '1', + name: 'STATUS_SCHEDULED', + state: 'pre', + completed: false, + description: 'Scheduled', + detail: 'Fri, September 6th at 8:15 PM EDT', + shortDetail: '9/6 - 8:15 PM EDT', + }, + isTBDFlex: false, + }, + broadcasts: [ + { + market: 'national', + names: ['Peacock'], + }, + ], + format: { + regulation: { + periods: 4, + }, + }, + tickets: [ + { + summary: 'Tickets as low as $566', + numberAvailable: 171, + links: [ + { + href: 'https://www.vividseats.com/philadelphia-eagles-tickets-itaquera-arena-corinthians-9-6-2024--sports-nfl-football/production/4924743?wsUser=717', + }, + { + href: 'https://www.vividseats.com/venues/itaquera-arena-(corinthians)-tickets.html?wsUser=717', + }, + ], + }, + ], + startDate: '2024-09-07T00:15Z', + geoBroadcasts: [ + { + type: { + id: '4', + shortName: 'Streaming', + }, + market: { + id: '1', + type: 'National', + }, + media: { + shortName: 'Peacock', + }, + lang: 'en', + region: 'us', + }, + ], + odds: [ + { + provider: { + id: '58', + name: 'ESPN BET', + priority: 1, + }, + details: 'PHI -1.5', + overUnder: 48.5, + spread: -1.5, + awayTeamOdds: { + favorite: false, + underdog: true, + team: { + id: '9', + uid: 's:20~l:28~t:9', + abbreviation: 'GB', + name: 'Packers', + displayName: 'Green Bay Packers', + logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/scoreboard/gb.png', + }, + }, + homeTeamOdds: { + favorite: true, + underdog: false, + team: { + id: '21', + uid: 's:20~l:28~t:21', + abbreviation: 'PHI', + name: 'Eagles', + displayName: 'Philadelphia Eagles', + logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/scoreboard/phi.png', + }, + }, + open: { + over: { + value: 1.91, + displayValue: '10/11', + alternateDisplayValue: '-110', + decimal: 1.91, + fraction: '10/11', + american: '-110', + }, + under: { + value: 1.91, + displayValue: '10/11', + alternateDisplayValue: '-110', + decimal: 1.91, + fraction: '10/11', + american: '-110', + }, + total: { + alternateDisplayValue: '48.5', + american: '48.5', + }, + }, + current: { + over: { + value: 1.91, + displayValue: '10/11', + alternateDisplayValue: '-110', + decimal: 1.91, + fraction: '10/11', + american: '-110', + }, + under: { + value: 1.91, + displayValue: '10/11', + alternateDisplayValue: '-110', + decimal: 1.91, + fraction: '10/11', + american: '-110', + }, + total: { + alternateDisplayValue: '48.5', + american: '48.5', + }, + }, + }, + ], + }, + ], + links: [ + { + language: 'en-US', + rel: ['summary', 'desktop', 'event'], + href: 'https://www.espn.com/nfl/game/_/gameId/401671805/packers-eagles', + text: 'Gamecast', + shortText: 'Gamecast', + isExternal: false, + isPremium: false, + }, + ], + status: { + clock: 0.0, + displayClock: '0:00', + period: 0, + type: { + id: '1', + name: 'STATUS_SCHEDULED', + state: 'pre', + completed: false, + description: 'Scheduled', + detail: 'Fri, September 6th at 8:15 PM EDT', + shortDetail: '9/6 - 8:15 PM EDT', + }, + }, + }, +]; diff --git a/app/(main)/league/[leagueId]/entry/all/page.test.tsx b/app/(main)/league/[leagueId]/entry/all/page.test.tsx index 946453d1..b6578e89 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.test.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.test.tsx @@ -5,10 +5,21 @@ import { getGameWeek, getCurrentUserEntries, getCurrentLeague, + getNFLTeams, } from '@/api/apiFunctions'; jest.mock('@/store/dataStore', () => ({ - useDataStore: jest.fn(() => ({ user: { id: '123', leagues: [] } })), + useDataStore: jest.fn(() => ({ + currentWeek: 1, + NFLTeams: [{ + teamId: '1', + teamLogo: 'team-a-logo.png', + teamName: 'Packers', + }], + user: { id: '123', leagues: [] }, + updateCurrentWeek: jest.fn(), + updateNFLTeams: jest.fn(), + })), })); jest.mock('@/api/apiFunctions', () => ({ @@ -25,6 +36,15 @@ jest.mock('@/api/apiFunctions', () => ({ week: 1, }), ), + getNFLTeams: jest.fn(() => + Promise.resolve([ + { + teamId: '1', + teamLogo: 'team-a-logo.png', + teamName: 'Packers', + }, + ]), + ), })); describe('League entries page (Entry Component)', () => { @@ -38,10 +58,6 @@ describe('League entries page (Entry Component)', () => { }); test('should display GlobalSpinner while loading data', async () => { - mockUseDataStore.mockReturnValueOnce({ - user: { id: '123', leagues: [] }, - }); - mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); mockGetCurrentUserEntries.mockResolvedValueOnce([ { $id: '66311a210039f0532044', @@ -66,8 +82,6 @@ describe('League entries page (Entry Component)', () => { }); test('should not display GlobalSpinner after data is loaded', async () => { - mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); - mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); mockGetCurrentUserEntries.mockResolvedValueOnce([ { $id: '66311a210039f0532044', @@ -96,8 +110,6 @@ describe('League entries page (Entry Component)', () => { }); it('should display the header with the league name, survivors, and week number, without a past weeks link', async () => { - mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); - mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); mockGetCurrentUserEntries.mockResolvedValueOnce([ { $id: '66311a210039f0532044', @@ -147,8 +159,10 @@ describe('League entries page (Entry Component)', () => { }); it('should display the header with the league name, survivors, and week number, with a past weeks link and add new entry button', async () => { - mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); - mockGetGameWeek.mockResolvedValueOnce({ week: 2 }); + mockUseDataStore.mockReturnValue({ + ...mockUseDataStore(), + currentWeek: 2, + }); mockGetCurrentUserEntries.mockResolvedValueOnce([ { $id: '66311a210039f0532044', @@ -202,8 +216,10 @@ describe('League entries page (Entry Component)', () => { }); it('should not display a button to add a new entry if there are more than 5 entries', async () => { - mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); - mockGetGameWeek.mockResolvedValueOnce({ week: 2 }); + mockUseDataStore.mockReturnValue({ + ...mockUseDataStore(), + currentWeek: 2, + }); mockGetCurrentUserEntries.mockResolvedValueOnce([ { $id: '66311a210039f0532044', @@ -265,4 +281,50 @@ describe('League entries page (Entry Component)', () => { screen.queryByTestId('add-new-entry-button'), ).not.toBeInTheDocument(); }); + it('should display "Make Pick" button when no pick is set', async () => { + mockGetCurrentUserEntries.mockResolvedValueOnce([ + { + $id: '123', + name: 'Test Entry', + week: 1, + selectedTeams: [], + }, + ]); + + render(); + + await waitFor(() => { + expect(screen.getByTestId('league-entry-pick-button')).toHaveTextContent( + 'Make Pick', + ); + }); + }); + + it('should render team logo and change button to "Change Pick" when a pick is made', async () => { + mockUseDataStore.mockReturnValue({ + ...mockUseDataStore(), + currentWeek: 1, + }); + mockGetCurrentUserEntries.mockResolvedValueOnce([ + { + $id: '123', + name: 'Test Entry', + week: 1, + selectedTeams: ['Packers'], + }, + ]); + + render(); + + await waitFor(() => { + expect(screen.getByTestId('league-entry-logo')).toHaveAttribute( + 'src', + 'team-a-logo.png', + ); + + expect(screen.getByTestId('league-entry-pick-button')).toHaveTextContent( + 'Change Pick', + ); + }); + }); }); diff --git a/app/(main)/league/[leagueId]/entry/all/page.tsx b/app/(main)/league/[leagueId]/entry/all/page.tsx index d5dd0273..cbd69dec 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.tsx @@ -7,12 +7,12 @@ import { getCurrentLeague, getCurrentUserEntries, getGameWeek, + getNFLTeams, } from '@/api/apiFunctions'; import { Button } from '@/components/Button/Button'; import { ChevronLeft, PlusCircle } from 'lucide-react'; import { ENTRY_URL, LEAGUE_URL, WEEK_URL } from '@/const/global'; import { IEntry, IEntryProps } from '../Entries.interface'; -import { IGameWeek } from '@/api/apiFunctions.interface'; import { LeagueEntries } from '@/components/LeagueEntries/LeagueEntries'; import { LeagueSurvivors } from '@/components/LeagueSurvivors/LeagueSurvivors'; import { useDataStore } from '@/store/dataStore'; @@ -33,14 +33,14 @@ const Entry = ({ }: { params: { leagueId: string }; }): JSX.Element => { - const [currentWeek, setCurrentWeek] = useState(1); const [entries, setEntries] = useState([]); const [leagueName, setLeagueName] = useState(''); const [loadingData, setLoadingData] = useState(true); const [addingEntry, setAddingEntry] = useState(false); const [survivors, setSurvivors] = useState(0); const [totalPlayers, setTotalPlayers] = useState(0); - const { user } = useDataStore((state) => state); + const { currentWeek, NFLTeams, user, updateCurrentWeek, updateNFLTeams } = + useDataStore((state) => state); const MAX_ENTRIES = 5; useEffect(() => { @@ -61,7 +61,7 @@ const Entry = ({ }; getCurrentLeagueName(); - }); + }, []); /** * Fetches all entries for the current user. @@ -84,10 +84,25 @@ const Entry = ({ */ const getCurrentGameWeek = async (): Promise => { try { - const currentWeek = await getGameWeek(); - setCurrentWeek(currentWeek.week); + const getCurrentWeek = await getGameWeek(); + updateCurrentWeek(getCurrentWeek.week); } catch (error) { - console.error(error); + throw new Error('Error fetching current game week'); + } finally { + setLoadingData(false); + } + }; + + /** + * Fetches all NFL teams. + * @returns {Promise} - The NFL teams. + */ + const getAllNFLTeams = async (): Promise => { + try { + const NFLTeams = await getNFLTeams(); + updateNFLTeams(NFLTeams); + } catch (error) { + throw new Error('Error getting NFL teams'); } }; @@ -110,9 +125,9 @@ const Entry = ({ setAddingEntry(true); try { const createdEntry = await createEntry({ name, user, league }); - setEntries([...entries, createdEntry]); + setEntries((prevEntries) => [...prevEntries, createdEntry]); } catch (error) { - console.error(error); + throw new Error('Error adding new entry'); } finally { setAddingEntry(false); } @@ -122,9 +137,10 @@ const Entry = ({ if (!user.id || user.id === '') { return; } + getCurrentGameWeek(); getAllEntries(); - // eslint-disable-next-line react-hooks/exhaustive-deps + getAllNFLTeams(); }, [user]); return ( @@ -176,12 +192,15 @@ const Entry = ({ {entries.length > 0 && entries.map((entry) => { const linkUrl = `/${LEAGUE_URL}/${leagueId}/${ENTRY_URL}/${entry.$id}/${WEEK_URL}/${currentWeek}`; + + const selectedTeam = entry.selectedTeams[currentWeek - 1]; const isPickSet = - entry.selectedTeams && entry.selectedTeams.length > 0; + // eslint-disable-next-line no-undefined + selectedTeam !== undefined; - const teamLogo = isPickSet - ? entry.selectedTeams[0].teamLogo - : ''; + const teamLogo = NFLTeams.find( + (teams) => teams.teamName === selectedTeam, + )?.teamLogo; return (
diff --git a/components/GlobalSpinner/GlobalSpinner.test.tsx b/components/GlobalSpinner/GlobalSpinner.test.tsx index 8dff14fe..06b5968d 100644 --- a/components/GlobalSpinner/GlobalSpinner.test.tsx +++ b/components/GlobalSpinner/GlobalSpinner.test.tsx @@ -17,7 +17,7 @@ jest.mock('next/image', () => ({ return ( {alt}, React.ComponentPropsWithoutRef & VariantProps ->(({ className, ...props }, ref) => ( +>(({ className, disabled, ...props }, ref) => ( )); diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx index 8e34e428..d74b400b 100644 --- a/components/WeeklyPickButton/WeeklyPickButton.tsx +++ b/components/WeeklyPickButton/WeeklyPickButton.tsx @@ -9,6 +9,7 @@ import { RadioGroupItem } from '../RadioGroup/RadioGroup'; type WeeklyPickButtonProps = { team: string; src: string; + isDisabled?: boolean; }; /** @@ -16,16 +17,23 @@ type WeeklyPickButtonProps = { * @param props - The props * @param props.team - The team name * @param props.src - The image source + * @param props.isDisabled - Whether the button is disabled * @returns The rendered weekly pick button. */ const WeeklyPickButton: React.FC = ({ team, src, + isDisabled = false, }): JSX.Element => { return (
- -