Mai/feat 310 add make pick button functionali

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 {}

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,
     }));
 

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>
         );

components/LeagueEntries/LeagueEntries.interface.ts

@@ -6,4 +6,5 @@ export interface ILeagueEntriesProps {
   linkUrl: string;
   isEliminated?: boolean;
   isPickSet?: boolean;
-}
+  teamLogo: string;
+}

components/LeagueEntries/LeagueEntries.test.tsx

@@ -4,14 +4,16 @@ import React from 'react';
 
 describe('LeagueEntries', () => {
   it(`renders 'default' state without a pick made`, () => {
-    render(<LeagueEntries entryName="Entry 1" linkUrl='' />);
+    render(<LeagueEntries entryName="Entry 1" linkUrl="" />);
 
     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 leagueEntryPickButton = screen.getByTestId(
+      'league-entry-pick-button',
+    );
 
     expect(entryStatus).toHaveTextContent('alive');
     expect(leagueEntryContainerCard).toBeInTheDocument();
@@ -20,14 +22,16 @@ describe('LeagueEntries', () => {
   });
 
   it('renders as if the user made a pick', () => {
-    render(<LeagueEntries entryName="Entry 2" linkUrl='' isPickSet={true} />);
+    render(<LeagueEntries entryName="Entry 2" linkUrl="" isPickSet={true} />);
 
     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 leagueEntryPickButton = screen.getByTestId(
+      'league-entry-pick-button',
+    );
 
     expect(entryStatus).toHaveTextContent('alive');
     expect(leagueEntryContainerCard).toBeInTheDocument();
@@ -36,7 +40,14 @@ describe('LeagueEntries', () => {
   });
 
   it('renders as if the user is eliminated', () => {
-    render(<LeagueEntries entryName="Entry 3" linkUrl='' isEliminated isPickSet={false} />);
+    render(
+      <LeagueEntries
+        entryName="Entry 3"
+        isEliminated
+        isPickSet={false}
+        linkUrl=""
+      />,
+    );
 
     const leagueEntryContainerCard = screen.getByTestId(
       'league-entry-container-card',
@@ -50,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);
+  });
 });

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 url to 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"