From 0ac4e38ad54a26d4181a99da01dffc9bd1a80ce7 Mon Sep 17 00:00:00 2001
From: Danielle Lindblom <114356705+Danielle254@users.noreply.github.com>
Date: Fri, 25 Oct 2024 10:23:43 -0600
Subject: [PATCH] Danielle/535 add current entry number in header of entry page
 (#615)

Before: no entry number in header of entry page

![535
before](https://github.com/user-attachments/assets/ad0a82b4-3a6c-48b5-baaf-221387f90f31)


After: entry number added to header of entry page

![option
2](https://github.com/user-attachments/assets/dcf0a828-c7b5-4d2d-9759-fb4e70d69d4d)


- Updated existing h1 to `<Heading/>` component
- Retrieved entry name (Entry 1, 2, etc)
- Rendered entry name as `<Heading/>` component

Color is up for debate as is spacing.
---
 .../entry/[entryId]/week/Week.test.tsx        |  2 ++
 .../[leagueId]/entry/[entryId]/week/Week.tsx  | 21 ++++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

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 78b69c1d..516631f6 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.test.tsx
@@ -186,6 +186,8 @@ describe('League Week Picks', () => {
     // Wait for the main content to be displayed
     await waitFor(() => {
       expect(screen.getByTestId('weekly-picks')).toBeInTheDocument();
+      expect(screen.getByTestId('week__week-number')).toHaveTextContent('Week 1');
+      expect(screen.getByTestId('week__entry-name')).toHaveTextContent('Entry 1');
     });
 
     expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
index cfbbf965..6edab010 100644
--- a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
+++ b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
@@ -34,6 +34,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
 import { ChevronLeft } from 'lucide-react';
+import Heading from '@/components/Heading/Heading';
 
 /**
  * Renders the weekly picks page.
@@ -43,6 +44,7 @@ import { ChevronLeft } from 'lucide-react';
 // eslint-disable-next-line no-unused-vars
 const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
   const [pickHistory, setPickHistory] = useState<string[]>([]);
+  const [entryName, setEntryName] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [schedule, setSchedule] = useState<ISchedule[]>([]);
   const [selectedLeague, setSelectedLeague] = useState<ILeague | undefined>();
@@ -156,7 +158,8 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
       if (!currentEntry) {
         throw new Error('Entry not found');
       }
-
+      
+      setEntryName(currentEntry.name);
       let entryHistory = currentEntry?.selectedTeams || [];
 
       if (currentEntry?.selectedTeams.length > 0) {
@@ -271,10 +274,18 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
             className="flex flex-col items-center w-full pt-8"
             data-testid="weekly-picks"
           >
-            <h1 className="pb-8 text-center text-[2rem] font-bold text-foreground">
-              Week {week} pick
-            </h1>
-
+            <Heading 
+              as='h1'
+              className='pb-8'
+              data-testid='week__week-number'
+            >{`Week ${week} pick`}
+            </Heading>
+            <Heading
+              as='h2'
+              className='pb-8 text-muted-foreground'
+              data-testid='week__entry-name'
+            >{entryName}
+            </Heading>
             {pickHistory.length > 0 && (
               <section
                 className="flex flex-wrap w-[90%] gap-4 overflow-x-scroll justify-center pb-10 items-center"