ui/ux: update week page (#370)

Closes #353 --- ![Image](https://github.com/LetsGetTechnical/gridiron-survivor/assets/362527/95993d62-63d4-462a-8f86-828f8d8cc24f) - [x] Create breadcrumb link - [x] Update Page title to Week # - [x] Add date and times to each game above the teams - [x] Remove submit button in favor of user clicking any team to submit their choice --------- Co-authored-by: Chris Nowicki <[email protected]> Co-authored-by: Shashi Lo <[email protected]>
LetsGetTechnical · Jul 10, 2024 · 1df7007 · 1df7007
1 parent 0522ae9
commit 1df7007
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 49 deletions.
diff --git a/api/serverConfig.ts b/api/serverConfig.ts
@@ -1,3 +1,6 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
 import * as sdk from 'node-appwrite';
 
 const URL = process.env.NEXT_PUBLIC_APPWRITE_API_URL as string;

diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts b/app/league/[leagueId]/entry/[entryId]/week/Week.interface.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-import { INFLTeam } from '@/api/apiFunctions.interface';
+import { INFLTeam, ILeague } from '@/api/apiFunctions.interface';
 
 export interface IWeekParams {
   params: {
@@ -13,7 +13,7 @@ export interface IWeekParams {
 
 export interface IWeekProps {
   entry: string;
-  league: string;
+  league: ILeague['leagueId'];
   NFLTeams: INFLTeam[];
   week: string;
 }
diff --git a/app/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/league/[leagueId]/entry/[entryId]/week/Week.tsx
@@ -2,8 +2,7 @@
 // Licensed under the MIT License.
 
 'use client';
-import React, { JSX, useEffect, useState } from 'react';
-import { Button } from '@/components/Button/Button';
+import React, { ChangeEvent, JSX, useEffect, useState } from 'react';
 import {
   FormField,
   FormItem,
@@ -18,6 +17,10 @@ import { parseUserPick } from '@/utils/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useDataStore } from '@/store/dataStore';
 import { ISchedule } from './WeekTeams.interface';
+import LinkCustom from '@/components/LinkCustom/LinkCustom';
+import { ChevronLeft } from 'lucide-react';
+import { getCurrentLeague } from '@/api/apiFunctions';
+import { ILeague } from '@/api/apiFunctions.interface';
 import WeekTeams from './WeekTeams';
 
 /**
@@ -28,12 +31,22 @@ import WeekTeams from './WeekTeams';
 // eslint-disable-next-line no-unused-vars
 const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
   const [schedule, setSchedule] = useState<ISchedule[]>([]);
+  const [selectedLeague, setSelectedLeague] = useState<ILeague | undefined>();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [userPick, setUserPick] = useState<string>('');
-
   const { user, updateWeeklyPicks, weeklyPicks } = useDataStore(
     (state) => state,
   );
 
+  /**
+   * Fetches the selected league.
+   * @returns {Promise<void>}
+   */
+  const getSelectedLeague = async (): Promise<void> => {
+    const res = await getCurrentLeague(league);
+    setSelectedLeague(res);
+  };
+
   const NFLTeamsList = NFLTeams.map((team) => team.teamName) as [
     string,
     ...string[]
@@ -73,20 +86,28 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
    * @param data - The form data.
    * @returns {void}
    */
-  const onSubmit = async (data: z.infer<typeof FormSchema>): Promise<void> => {
+  const onWeeklyPickChange = async (
+    data: ChangeEvent<HTMLInputElement>,
+  ): Promise<void> => {
     try {
-      const teamSelect = data.type.toLowerCase();
+      const teamSelect = data.target.value;
       const teamID = NFLTeams.find(
-        (team) => team.teamName.toLowerCase() === teamSelect,
-      )?.teamId;
+        (team) => team.teamName === teamSelect,
+      )?.teamName;
 
       const currentUserPick = parseUserPick(user.id, entry, teamID || '');
 
       // combines current picks and the user pick into one object.
       // if the user pick exists then it overrides the pick of the user.
       const updatedWeeklyPicks = {
         ...weeklyPicks.userResults,
-        ...currentUserPick,
+        [user.id]: {
+          ...weeklyPicks.userResults[user.id],
+          [entry]: {
+            ...weeklyPicks.userResults[user.id]?.[entry],
+            ...currentUserPick[user.id][entry],
+          },
+        },
       };
 
       // update weekly picks in the database
@@ -110,44 +131,59 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
   };
 
   useEffect(() => {
+    if (!selectedLeague) {
+      getSelectedLeague();
+      return;
+    }
     getSchedule(week);
-  }, [week]);
+    setIsLoading(false);
+  }, [week, selectedLeague]);
 
-  if (schedule.length === 0) {
+  if (schedule.length === 0 || isLoading) {
     return <p>Loading...</p>;
   }
 
   return (
-    <section className="w-full pt-8" data-testid="weekly-picks">
-      <h1 className="pb-8 text-center text-[2rem] font-bold text-white">
-        Your pick sheet
-      </h1>
-
-      <FormProvider {...form}>
-        <form
-          className="mx-auto flex w-[90%] max-w-3xl flex-col items-center gap-8"
-          onSubmit={form.handleSubmit(onSubmit)}
+    <div className="league-entry-week">
+      <nav className="py-6 text-orange-500 hover:no-underline">
+        <LinkCustom
+          className="text-orange-500 flex gap-3 items-center font-semibold text-xl hover:no-underline"
+          href={`/league/${league}/entry/all`}
         >
-          <FormField
-            control={form.control as Control<object>}
-            name="type"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <WeekTeams
-                    schedule={schedule}
-                    field={field}
-                    userPick={userPick}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button label="Submit Button" type="submit" />
-        </form>
-      </FormProvider>
-    </section>
+          <span aria-hidden="true">
+            <ChevronLeft size={16} />
+          </span>
+          {selectedLeague?.leagueName as string}
+        </LinkCustom>
+      </nav>
+      <section className="w-full pt-8" data-testid="weekly-picks">
+        <h1 className="pb-8 text-center text-[2rem] font-bold text-white">
+          Week {week} pick
+        </h1>
+
+        <FormProvider {...form}>
+          <form className="mx-auto flex w-[90%] max-w-3xl flex-col items-center">
+            <FormField
+              control={form.control as Control<object>}
+              name="type"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <WeekTeams
+                      schedule={schedule}
+                      field={field}
+                      userPick={userPick}
+                      onWeeklyPickChange={onWeeklyPickChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </FormProvider>
+      </section>
+    </div>
   );
 };
 

diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.interface.ts
@@ -1,6 +1,7 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
+import { ChangeEvent } from 'react';
 import { ControllerRenderProps, FieldValues } from 'react-hook-form';
 
 export interface ISchedule {
@@ -9,6 +10,7 @@ export interface ISchedule {
   date: string;
   name: string;
   shortName: string;
+  startDate: string;
   season: {
     year: number;
     type: number;
@@ -26,6 +28,8 @@ export interface IWeekTeamsProps {
   field: ControllerRenderProps<FieldValues, string>;
   schedule: ISchedule[];
   userPick: string;
+  // eslint-disable-next-line no-unused-vars
+  onWeeklyPickChange: (data: ChangeEvent<HTMLInputElement>) => Promise<void>;
 }
 
 interface ICompetition {

diff --git a/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx b/app/league/[leagueId]/entry/[entryId]/week/WeekTeams.tsx
@@ -1,33 +1,66 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-import React, { JSX } from 'react';
+import React, { JSX, ChangeEvent } from 'react';
 import { FormItem, FormControl } from '@/components/Form/Form';
 import { RadioGroup } from '@radix-ui/react-radio-group';
 import { IWeekTeamsProps } from './WeekTeams.interface';
 import { WeeklyPickButton } from '@/components/WeeklyPickButton/WeeklyPickButton';
 
+/**
+ * Formats the date to 'day, mon date' format and the time to either 12 or 24-hour format based on the user's locale.
+ * @param dateString The date string to format.
+ * @returns The formatted date and time string.
+ */
+const formatDateTime = (dateString: string): string => {
+  const date = new Date(dateString);
+
+  const dateOptions: Intl.DateTimeFormatOptions = {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  };
+  const timeOptions: Intl.DateTimeFormatOptions = {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true,
+  };
+
+  const formattedDate = date.toLocaleDateString('en-US', dateOptions);
+  const formattedTime = date.toLocaleTimeString('en-US', timeOptions);
+
+  return `${formattedDate} ・ ${formattedTime}`;
+};
+
 /**
  * Renders the weekly picks page.
  * @param props The parameters for the weekly picks page.
  * @param props.field The form field.
  * @param props.schedule The schedule for the week.
  * @param props.userPick The user's pick.
+ * @param props.onWeeklyPickChange The function to call when the user's pick changes.
  * @returns The rendered weekly picks page.
  */
 const WeekTeams = ({
   field,
   schedule,
   userPick,
+  onWeeklyPickChange,
 }: IWeekTeamsProps): JSX.Element => (
   <>
     {schedule.map((scheduledGame) => (
       <RadioGroup
         onValueChange={field.onChange}
         defaultValue={userPick}
         key={scheduledGame.id}
-        className="grid w-full grid-cols-2 gap-4"
+        className="grid w-full grid-cols-2 gap-4 pb-8"
+        onChange={(event) =>
+          onWeeklyPickChange(event as unknown as ChangeEvent<HTMLInputElement>)
+        }
       >
+        <div className="week-page-game-schedule col-span-2 text-center">
+          <p>{formatDateTime(scheduledGame.date)}</p>
+        </div>
         {scheduledGame.competitions[0].competitors.map((competition) => (
           <FormItem key={competition.id}>
             <FormControl>
@@ -42,5 +75,4 @@ const WeekTeams = ({
     ))}
   </>
 );
-
 export default WeekTeams;
diff --git a/components/Form/Form.tsx b/components/Form/Form.tsx
@@ -92,7 +92,7 @@ const FormItem = React.forwardRef<
   return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn('mb-4 w-full', className)} {...props} />
+      <div ref={ref} className={cn('w-full', className)} {...props} />
     </FormItemContext.Provider>
   );
 });

diff --git a/components/LinkCustom/LinkCustom.tsx b/components/LinkCustom/LinkCustom.tsx
@@ -3,9 +3,11 @@
 
 import Link from 'next/link';
 import React, { JSX } from 'react';
+import { cn } from '@/utils/utils';
 
 interface ILinkCustomProps {
-  children: string;
+  children: React.ReactNode;
+  className?: string;
   href: string;
 }
 
@@ -14,12 +16,17 @@ interface ILinkCustomProps {
  * @param props - The props
  * @param props.children - any additional items you want inside the link. This could include things like the link text, icons, etc.
  * @param props.href - this is the URL you want the link to point to
+ * @param props.className - any additional classes you want to add to that instance of the LinkCustom component.
  * @returns The custom link component
  */
-const LinkCustom = ({ children, href }: ILinkCustomProps): JSX.Element => {
+const LinkCustom = ({
+  children,
+  className,
+  href,
+}: ILinkCustomProps): JSX.Element => {
   return (
     <Link
-      className={'hover:text-orange-600 hover:underline'}
+      className={cn('hover:text-orange-600 hover:underline', className)}
       data-testid="linkCustom"
       href={href}
       passHref

diff --git a/utils/utils.ts b/utils/utils.ts
@@ -120,7 +120,7 @@ export const parseUserPick = (
 /**
  * Get the list of leagues the user is a part of
  * @param leagues - The list of leagues
- * @returns {ILeague | Error} - The list of leagues
+ * @returns {Promise<ILeague[]>} The list of leagues the user is a part of
  */
 export const getUserLeagues = async (
   leagues: IUser['leagues'],