From a3b8c27c1eef150e67faefd9238db85ba4771d54 Mon Sep 17 00:00:00 2001 From: Cody Epstein Date: Wed, 6 Nov 2024 10:33:17 -0800 Subject: [PATCH 1/2] Cody/refine toast styling (#607) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #500 - Modified the position of the toaster to place toasts in the bottom left on desktop - Added `max-width` class to Alert Screenshot 2024-10-22 at 12 16 33 PM Screenshot 2024-10-22 at 12 02 06 PM --------- Co-authored-by: Shashi Lo <362527+shashilo@users.noreply.github.com> --- app/(main)/layout.tsx | 2 +- components/Alert/Alert.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx index 328a7785..8ec4a538 100644 --- a/app/(main)/layout.tsx +++ b/app/(main)/layout.tsx @@ -51,7 +51,7 @@ const RootLayout = ({ - + diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx index fff2d4b8..48d193b3 100644 --- a/components/Alert/Alert.tsx +++ b/components/Alert/Alert.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; const alertVariants = cva( - 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', + 'relative w-full md:max-w-[25rem] rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', { variants: { variant: { From 9a233981caf7df1835c7d62e5dd320e007fb5367 Mon Sep 17 00:00:00 2001 From: Danielle Lindblom <114356705+Danielle254@users.noreply.github.com> Date: Mon, 11 Nov 2024 07:33:49 -0700 Subject: [PATCH 2/2] danielle/remove pick history from league landing page (#650) ![626 after](https://github.com/user-attachments/assets/86743dd2-2444-4a60-9501-bd0c28e495d7) --------- Co-authored-by: Shashi Lo <362527+shashilo@users.noreply.github.com> --- .../league/[leagueId]/entry/all/page.test.tsx | 144 ------------------ .../league/[leagueId]/entry/all/page.tsx | 9 -- .../LeagueEntries/LeagueEntries.interface.ts | 1 - .../LeagueEntries/LeagueEntries.test.tsx | 43 +----- components/LeagueEntries/LeagueEntries.tsx | 37 +---- 5 files changed, 3 insertions(+), 231 deletions(-) diff --git a/app/(main)/league/[leagueId]/entry/all/page.test.tsx b/app/(main)/league/[leagueId]/entry/all/page.test.tsx index 9764ce08..7a241f78 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.test.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.test.tsx @@ -344,148 +344,4 @@ describe('League entries page (Entry Component)', () => { ); }); }); - it('should not display the user pick history if the current week is 1', async () => { - mockUseDataStore.mockReturnValue({ - ...mockUseDataStore(), - currentWeek: 1, - NFLTeams: [ - { - teamId: 'packers', - teamLogo: '/packers-logo.png', - teamName: 'Packers', - }, - ], - }); - mockGetCurrentUserEntries.mockResolvedValueOnce([ - { - $id: '123', - name: 'Test Entry', - week: 1, - selectedTeams: ['Packers', 'Bears'], - }, - ]); - mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); - mockGetCurrentLeague.mockResolvedValue({ - leagueName: 'Test League', - participants: 10, - survivors: 8, - }); - mockGetNFLTeams.mockResolvedValue([ - { teamId: 'packers', teamLogo: '/packers-logo.png', teamName: 'Packers' }, - { teamId: 'bears', teamLogo: '/bears-logo.png', teamName: 'Bears' }, - ]); - - render(); - - await waitFor(() => { - expect(mockGetGameWeek).toHaveBeenCalled(); - expect(mockGetCurrentUserEntries).toHaveBeenCalled(); - expect(mockGetCurrentLeague).toHaveBeenCalled(); - expect(mockGetNFLTeams).toHaveBeenCalled(); - }); - - expect(screen.queryByTestId('user-pick-history')).not.toBeInTheDocument(); - }); - - it('should display the user pick history if the current week is greater than 1', async () => { - mockUseDataStore.mockReturnValue({ - ...mockUseDataStore(), - currentWeek: 2, - NFLTeams: [ - { - teamId: 'packers', - teamLogo: '/packers-logo.png', - teamName: 'Packers', - }, - { - teamId: 'bears', - teamLogo: '/bears-logo.png', - teamName: 'Bears', - }, - ], - }); - mockGetCurrentUserEntries.mockResolvedValueOnce([ - { - $id: '123', - name: 'Test Entry', - week: 2, - selectedTeams: ['Packers', 'Bears'], - }, - ]); - mockGetGameWeek.mockResolvedValueOnce({ week: 2 }); - mockGetCurrentLeague.mockResolvedValue({ - leagueName: 'Test League', - participants: ['123', '456'], - survivors: ['123', '456'], - }); - mockGetNFLTeams.mockResolvedValue([ - { teamId: 'packers', teamLogo: '/packers-logo.png', teamName: 'Packers' }, - { teamId: 'bears', teamLogo: '/bears-logo.png', teamName: 'Bears' }, - ]); - - render(); - - await waitFor(() => { - expect(mockGetGameWeek).toHaveBeenCalled(); - expect(mockGetCurrentUserEntries).toHaveBeenCalled(); - expect(mockGetCurrentLeague).toHaveBeenCalled(); - expect(mockGetNFLTeams).toHaveBeenCalled(); - }); - // Add a delay to allow for any asynchronous rendering - await new Promise((resolve) => setTimeout(resolve, 0)); - - expect(screen.queryByTestId('user-pick-history')).toBeInTheDocument(); - expect(screen.getByTestId('league-history-logo')).toHaveAttribute( - 'src', - '/_next/image?url=%2Fpackers-logo.png&w=96&q=75', - ); - expect(screen.getByTestId('league-entry-logo')).toHaveAttribute( - 'src', - '/_next/image?url=%2Fbears-logo.png&w=96&q=75', - ); - }); - - it('should not display the user pick history if the entries selected teams are empty', async () => { - mockUseDataStore.mockReturnValue({ - ...mockUseDataStore(), - currentWeek: 2, - NFLTeams: [ - { - teamId: 'packers', - teamLogo: '/packers-logo.png', - teamName: 'Packers', - }, - { teamId: '2', teamLogo: '/bears-logo.png', teamName: 'Bears' }, - ], - }); - mockGetCurrentUserEntries.mockResolvedValueOnce([ - { - $id: '123', - name: 'Test Entry', - week: 2, - selectedTeams: [], - }, - ]); - mockGetGameWeek.mockResolvedValueOnce({ week: 2 }); - mockGetCurrentLeague.mockResolvedValue({ - leagueName: 'Test League', - participants: ['123', '456'], - survivors: ['123', '456'], - }); - mockGetNFLTeams.mockResolvedValue([ - { teamId: 'packers', teamLogo: '/packers-logo.png', teamName: 'Packers' }, - { teamId: 'bears', teamLogo: '/bears-logo.png', teamName: 'Bears' }, - ]); - - render(); - - await waitFor(() => { - expect(mockGetGameWeek).toHaveBeenCalled(); - expect(mockGetCurrentUserEntries).toHaveBeenCalled(); - expect(mockGetCurrentLeague).toHaveBeenCalled(); - expect(mockGetNFLTeams).toHaveBeenCalled(); - }); - - expect(screen.queryByTestId('user-pick-history')).not.toBeInTheDocument(); - }); }); diff --git a/app/(main)/league/[leagueId]/entry/all/page.tsx b/app/(main)/league/[leagueId]/entry/all/page.tsx index 5ef1214c..52c7f776 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.tsx @@ -172,14 +172,6 @@ const Entry = ({ const selectedTeamLogo = getNFLTeamLogo(NFLTeams, selectedTeam); - let userPickHistory: string[] = []; - - if (currentWeek > 1 && entry.selectedTeams.length > 0) { - userPickHistory = entry.selectedTeams - .slice(0, currentWeek - 1) - .map((teamName) => getNFLTeamLogo(NFLTeams, teamName)); - } - return (
diff --git a/components/LeagueEntries/LeagueEntries.interface.ts b/components/LeagueEntries/LeagueEntries.interface.ts index 46d0b0ad..9bf96dff 100644 --- a/components/LeagueEntries/LeagueEntries.interface.ts +++ b/components/LeagueEntries/LeagueEntries.interface.ts @@ -6,6 +6,5 @@ export interface ILeagueEntriesProps { linkUrl: string; isEliminated?: boolean; isPickSet?: boolean; - userPickHistory: string[]; selectedTeamLogo?: string; } diff --git a/components/LeagueEntries/LeagueEntries.test.tsx b/components/LeagueEntries/LeagueEntries.test.tsx index f8f99581..78c04c25 100644 --- a/components/LeagueEntries/LeagueEntries.test.tsx +++ b/components/LeagueEntries/LeagueEntries.test.tsx @@ -5,7 +5,7 @@ import React from 'react'; describe('LeagueEntries', () => { it(`renders 'default' state without a pick made`, () => { render( - , + , ); const leagueEntryContainerCard = screen.getByTestId( @@ -16,13 +16,11 @@ describe('LeagueEntries', () => { const leagueEntryPickButton = screen.getByTestId( 'league-entry-pick-button', ); - const userHistoryPicks = screen.queryByTestId('user-pick-history'); expect(entryStatus).toHaveTextContent('alive'); expect(leagueEntryContainerCard).toBeInTheDocument(); expect(leagueEntryNumber).toHaveTextContent('Entry 1'); expect(leagueEntryPickButton).toHaveTextContent('Make Pick'); - expect(userHistoryPicks).not.toBeInTheDocument(); }); it('renders as if the user made a pick', () => { @@ -31,7 +29,6 @@ describe('LeagueEntries', () => { entryName="Entry 2" linkUrl="" isPickSet={true} - userPickHistory={['/team-a-logo.png']} />, ); @@ -48,7 +45,6 @@ describe('LeagueEntries', () => { expect(leagueEntryContainerCard).toBeInTheDocument(); expect(leagueEntryNumber).toHaveTextContent('Entry 2'); expect(leagueEntryPickButton).toHaveTextContent('Change Pick'); - expect(screen.queryByTestId('user-pick-history')).toBeInTheDocument(); }); it('renders as if the user is eliminated', () => { @@ -58,7 +54,6 @@ describe('LeagueEntries', () => { isEliminated isPickSet={false} linkUrl="" - userPickHistory={['/team-a-logo.png']} />, ); @@ -73,7 +68,7 @@ describe('LeagueEntries', () => { expect(leagueEntryNumber).toHaveTextContent('Entry 3'); }); - it('renders teamLogo when user makes a pick and shows user pick history logo', () => { + it('renders teamLogo when user makes a pick', () => { const teamLogoUrl = 'https://example.com/logo.png'; const linkUrl = '/change-pick'; @@ -83,7 +78,6 @@ describe('LeagueEntries', () => { isPickSet={true} linkUrl={linkUrl} selectedTeamLogo={teamLogoUrl} - userPickHistory={['/team-a-logo.png']} />, ); @@ -108,38 +102,5 @@ describe('LeagueEntries', () => { 'src', '/_next/image?url=https%3A%2F%2Fexample.com%2Flogo.png&w=96&q=75', ); - expect(screen.getByTestId('league-history-logo')).toHaveAttribute( - 'src', - '/_next/image?url=%2Fteam-a-logo.png&w=96&q=75', - ); - }); - it('renders no pick when a previous week pick is not available', () => { - const teamLogoUrl = 'https://example.com/logo.png'; - const linkUrl = '/change-pick'; - - render( - , - ); - - const leagueEntryLogo = screen.getByTestId('league-entry-logo'); - const noPick = screen.getByTestId('no-pick'); - - expect(leagueEntryLogo).toBeInTheDocument(); - expect(leagueEntryLogo).toHaveAttribute( - 'src', - '/_next/image?url=https%3A%2F%2Fexample.com%2Flogo.png&w=96&q=75', - ); - expect(screen.getByTestId('league-history-logo')).toHaveAttribute( - 'src', - '/_next/image?url=%2Fteam-a-logo.png&w=96&q=75', - ); - expect(noPick).toBeInTheDocument(); - expect(noPick).toHaveTextContent('No Pick'); }); }); diff --git a/components/LeagueEntries/LeagueEntries.tsx b/components/LeagueEntries/LeagueEntries.tsx index 9b98d80e..7811c812 100644 --- a/components/LeagueEntries/LeagueEntries.tsx +++ b/components/LeagueEntries/LeagueEntries.tsx @@ -16,7 +16,6 @@ import Image from 'next/image'; * @param props.linkUrl - the url to the user's entry page * @param props.isEliminated - If true, the user is flagged as eliminat4ed * @param props.isPickSet - if true, the team logo of the picked team shows up on the LeagueEntries card and the button changes from "make a pick" to "chagne pick" - * @param props.userPickHistory - the user's pick history for this entry * @param props.selectedTeamLogo - the team logo * @returns {React.JSX.Element} - A div element that contains the user's entry information */ @@ -25,16 +24,14 @@ const LeagueEntries = ({ linkUrl, isEliminated = false, isPickSet = false, - userPickHistory, selectedTeamLogo = '', }: ILeagueEntriesProps): JSX.Element => { return (
- {userPickHistory.length > 0 && ( -
- {userPickHistory?.map((logoURL, index) => ( -
- WEEK {index + 1} - {logoURL ? ( - teamLogo - ) : ( - - No Pick - - )} -
- ))} -
- )}