Mai/feat 310 add make pick button functionali (#376)

fix #310 1) Updated team logo to dynamically grab the user's pick 2) Added in unit test to ensure teamLogo pops up <img width="969" alt="Screenshot 2024-07-16 at 5 43 03 AM" src="https://github.com/user-attachments/assets/341b554c-a144-4b9c-ab29-dbefda9de319"> <img width="781" alt="Screenshot 2024-07-16 at 5 50 51 AM" src="https://github.com/user-attachments/assets/8e04d6c3-3909-4685-b3e0-39761755b506"> --------- Co-authored-by: Shashi Lo <[email protected]>
LetsGetTechnical · Jul 29, 2024 · 5bb182c · 5bb182c
1 parent d928a5b
commit 5bb182c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 5 deletions.
diff --git a/api/apiFunctions.interface.ts b/api/apiFunctions.interface.ts
@@ -30,6 +30,7 @@ export interface IWeeklyPicks {
 }
 export interface INFLTeam {
   teamId: string;
+  teamLogo: string;
   teamName: string;
 }
 export interface IUserPicksData extends IUserPick {}

diff --git a/api/apiFunctions.ts b/api/apiFunctions.ts
@@ -138,6 +138,7 @@ export const getNFLTeams = async (): Promise<INFLTeam[]> => {
 
     const nflTeams = response.documents.map((team) => ({
       teamId: team.$id,
+      teamLogo: team.teamLogo,
       teamName: team.teamName,
     }));
 

diff --git a/app/(main)/league/[leagueId]/entry/all/page.tsx b/app/(main)/league/[leagueId]/entry/all/page.tsx
@@ -2,7 +2,6 @@
 // Licensed under the MIT License.
 
 'use client';
-
 import {
   createEntry,
   getCurrentUserEntries,
@@ -87,13 +86,17 @@ const Entry = ({
     <>
       {entries.map((entry) => {
         const linkUrl = `/${LEAGUE_URL}/${leagueId}/${ENTRY_URL}/${entry.$id}/${WEEK_URL}/${currentWeek}`;
+        const isPickSet = entry.selectedTeams.length > 0;
+        const teamLogo = isPickSet ? entry.selectedTeams[0].teamLogo : '';
 
         return (
           <section key={entry.$id}>
             <LeagueEntries
               key={entry.$id}
               entryName={entry.name}
+              isPickSet={isPickSet}
               linkUrl={linkUrl}
+              teamLogo={teamLogo}
             />
           </section>
         );

diff --git a/components/LeagueEntries/LeagueEntries.interface.ts b/components/LeagueEntries/LeagueEntries.interface.ts
@@ -6,4 +6,5 @@ export interface ILeagueEntriesProps {
   linkUrl: string;
   isEliminated?: boolean;
   isPickSet?: boolean;
+  teamLogo?: string;
 }
diff --git a/components/LeagueEntries/LeagueEntries.test.tsx b/components/LeagueEntries/LeagueEntries.test.tsx
@@ -43,9 +43,9 @@ describe('LeagueEntries', () => {
     render(
       <LeagueEntries
         entryName="Entry 3"
-        linkUrl=""
         isEliminated
         isPickSet={false}
+        linkUrl=""
       />,
     );
 
@@ -61,4 +61,36 @@ describe('LeagueEntries', () => {
     );
     expect(leagueEntryNumber).toHaveTextContent('Entry 3');
   });
+
+  it('renders teamLogo when user makes a pick', () => {
+    const teamLogoUrl = 'https://example.com/logo.png';
+    const linkUrl = '/change-pick';
+
+    render(
+      <LeagueEntries
+        entryName="Entry 2"
+        isPickSet={true}
+        linkUrl={linkUrl}
+        teamLogo={teamLogoUrl}
+      />,
+    );
+
+    const leagueEntryContainerCard = screen.getByTestId(
+      'league-entry-container-card',
+    );
+    const leagueEntryNumber = screen.getByTestId('league-entry-number');
+    const entryStatus = screen.getByTestId('entry-status');
+    const leagueEntryPickButton = screen.getByTestId(
+      'league-entry-pick-button',
+    );
+    const leagueLink = screen.getByTestId('league-entry-pick-button-link');
+    const leagueEntryLogo = screen.getByTestId('league-entry-logo');
+
+    expect(entryStatus).toHaveTextContent('alive');
+    expect(leagueEntryNumber).toHaveTextContent('Entry 2');
+    expect(leagueEntryPickButton).toHaveTextContent('Change Pick');
+    expect(leagueLink).toHaveAttribute('href', linkUrl);
+    expect(leagueEntryLogo).toBeInTheDocument();
+    expect(leagueEntryLogo).toHaveAttribute('src', teamLogoUrl);
+  });
 });
diff --git a/components/LeagueEntries/LeagueEntries.tsx b/components/LeagueEntries/LeagueEntries.tsx
@@ -15,13 +15,15 @@ import Link from 'next/link';
  * @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.teamLogo - the team logo
  * @returns {React.JSX.Element} - A div element that contains the user's entry information
  */
 const LeagueEntries = ({
   entryName,
   linkUrl,
   isEliminated = false,
   isPickSet = false,
+  teamLogo = '',
 }: ILeagueEntriesProps): JSX.Element => (
   <div
     data-testid="league-entry-container-card"
@@ -53,8 +55,8 @@ const LeagueEntries = ({
         <img
           className="league-entry-logo h-12 w-12"
           data-testid="league-entry-logo"
-          src="https://ryanfurrer.com/_astro/logo-dark-theme.CS8e9u7V_JfowQ.svg"
-          alt="League name"
+          src={teamLogo}
+          alt="teamLogo"
         />
       )}
 
@@ -63,7 +65,7 @@ const LeagueEntries = ({
         data-testid="league-entry-pick-button-container"
       >
         {!isEliminated && (
-          <Link href={linkUrl}>
+          <Link href={linkUrl} data-testid="league-entry-pick-button-link">
             <Button
               className="league-entry-pick-button"
               data-testid="league-entry-pick-button"