From 5bb182c56d8ed7b2696155cef87d07cf8bfe41b6 Mon Sep 17 00:00:00 2001
From: Mai Vang <100221733+vmaineng@users.noreply.github.com>
Date: Mon, 29 Jul 2024 12:55:01 -0700
Subject: [PATCH] Mai/feat 310 add make pick button functionali (#376)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <362527+shashilo@users.noreply.github.com>
---
 api/apiFunctions.interface.ts                 |  1 +
 api/apiFunctions.ts                           |  1 +
 .../league/[leagueId]/entry/all/page.tsx      |  5 ++-
 .../LeagueEntries/LeagueEntries.interface.ts  |  1 +
 .../LeagueEntries/LeagueEntries.test.tsx      | 34 ++++++++++++++++++-
 components/LeagueEntries/LeagueEntries.tsx    |  8 +++--
 6 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/api/apiFunctions.interface.ts b/api/apiFunctions.interface.ts
index f384597a..7d54c407 100644
--- 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
index 2cd7a402..09f7f319 100644
--- 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
index 14fee41d..3d93597c 100644
--- 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
index b5a371cb..f3462d48 100644
--- 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
index 875e3dc6..c61a271d 100644
--- 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
index 9ddc7094..f7dba037 100644
--- a/components/LeagueEntries/LeagueEntries.tsx
+++ b/components/LeagueEntries/LeagueEntries.tsx
@@ -15,6 +15,7 @@ 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 = ({
@@ -22,6 +23,7 @@ const LeagueEntries = ({
   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"