From c708a1e9315771ee68ac6de962218a6230adeda2 Mon Sep 17 00:00:00 2001
From: heybereket <semagnbereket@gmail.com>
Date: Mon, 5 Jun 2023 23:15:14 -0400
Subject: [PATCH] lint + accessibility

---
 components/navbar/index.tsx                   |  26 ++-
 components/wrapped/WrappedContainer.tsx       |   2 +-
 components/wrapped/slides/TotalFavourited.tsx |   5 +-
 components/wrapped/spotify/SpotifyPlayer.tsx  |   2 +-
 pages/team/[team]/next.tsx                    |   2 +-
 pages/team/[team]/wrap.tsx                    |  83 ++++-----
 pages/teams.tsx                               | 174 +++++++++---------
 tailwind.config.js                            |   4 +-
 utils/lookup.ts                               |  31 ++--
 9 files changed, 169 insertions(+), 160 deletions(-)

diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
index ce9dedc..15ef097 100644
--- a/components/navbar/index.tsx
+++ b/components/navbar/index.tsx
@@ -132,15 +132,30 @@ export const Navbar = (props: {
               </h1>
             </a>
 
-            <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
+            <a
+              href={GITHUB_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Github"
+            >
               <Social icon={<FaGithub />} />
             </a>
 
-            <a href={DISCORD_URL} target="_blank" rel="noopener noreferrer">
+            <a
+              href={DISCORD_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Discord"
+            >
               <Social icon={<FaDiscord />} />
             </a>
 
-            <a href={BMAC_URL} target="_blank" rel="noopener noreferrer">
+            <a
+              href={BMAC_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Buy Me a Coffee"
+            >
               <Social icon={<FaCoffee />} />
             </a>
 
@@ -150,7 +165,10 @@ export const Navbar = (props: {
               } rounded-lg py-2 px-[13px]`}
               onClick={() => setShowLinks(!showLinks)}
             >
-              <FaBars className="2xl:hidden text-black dark:text-white text-xl" />
+              <FaBars
+                className="2xl:hidden text-black dark:text-white text-xl"
+                aria-label="Hamburger Menu"
+              />
             </button>
           </div>
 
diff --git a/components/wrapped/WrappedContainer.tsx b/components/wrapped/WrappedContainer.tsx
index 516d15f..7d69916 100644
--- a/components/wrapped/WrappedContainer.tsx
+++ b/components/wrapped/WrappedContainer.tsx
@@ -19,4 +19,4 @@ export const WrappedContainer = ({
       {children}
     </div>
   );
-}
\ No newline at end of file
+};
diff --git a/components/wrapped/slides/TotalFavourited.tsx b/components/wrapped/slides/TotalFavourited.tsx
index 45ed398..cca720c 100644
--- a/components/wrapped/slides/TotalFavourited.tsx
+++ b/components/wrapped/slides/TotalFavourited.tsx
@@ -17,8 +17,7 @@ export const TotalFavourited = (props: any) => {
   return (
     <WrappedContainer>
       <p className="text-2xl text-lightGray">
-        <b className="text-white">{props.team}</b> has been
-        favourited...
+        <b className="text-white">{props.team}</b> has been favourited...
       </p>
       <h1 className="text-primary font-bold text-7xl mt-[-10px] animate-in slide-in-from-bottom fade-in duration-1000">
         <CountUp end={props.totalFavourited} duration={2} /> times
@@ -28,4 +27,4 @@ export const TotalFavourited = (props: any) => {
       </p>
     </WrappedContainer>
   );
-};
\ No newline at end of file
+};
diff --git a/components/wrapped/spotify/SpotifyPlayer.tsx b/components/wrapped/spotify/SpotifyPlayer.tsx
index 3d14480..7bcaa31 100644
--- a/components/wrapped/spotify/SpotifyPlayer.tsx
+++ b/components/wrapped/spotify/SpotifyPlayer.tsx
@@ -6,4 +6,4 @@ export const SpotifyPlayer = () => {
       <div id="spotify"></div>
     </div>
   );
-}
\ No newline at end of file
+};
diff --git a/pages/team/[team]/next.tsx b/pages/team/[team]/next.tsx
index f274f96..75d96a3 100644
--- a/pages/team/[team]/next.tsx
+++ b/pages/team/[team]/next.tsx
@@ -116,7 +116,7 @@ export default function NextTeamMatch({
     );
   }
 
-  const title = `${teamQuery}'s Upcoming Match / Scout Machine`
+  const title = `${teamQuery}'s Upcoming Match / Scout Machine`;
 
   return (
     <>
diff --git a/pages/team/[team]/wrap.tsx b/pages/team/[team]/wrap.tsx
index 6b42d2a..b645f39 100644
--- a/pages/team/[team]/wrap.tsx
+++ b/pages/team/[team]/wrap.tsx
@@ -58,54 +58,55 @@ export const getServerSideProps: GetServerSideProps = async (
 ): Promise<{ props: any }> => {
   const { team }: any = context.params;
 
-  const [teamMatches, totalEvents, totalAwards, totalFavourited] = await Promise.all([
-    await db.match.findMany({
-      where: {
-        event_key: {
-          contains: "2023",
-        },
-        OR: [
-          {
-            alliances: {
-              path: ["red", "team_keys"],
-              array_contains: `frc${team}`,
+  const [teamMatches, totalEvents, totalAwards, totalFavourited] =
+    await Promise.all([
+      await db.match.findMany({
+        where: {
+          event_key: {
+            contains: "2023",
+          },
+          OR: [
+            {
+              alliances: {
+                path: ["red", "team_keys"],
+                array_contains: `frc${team}`,
+              },
+            },
+            {
+              alliances: {
+                path: ["blue", "team_keys"],
+                array_contains: `frc${team}`,
+              },
             },
+          ],
+        },
+      }),
+      await db.event.count({
+        where: {
+          key: {
+            contains: "2023",
           },
-          {
-            alliances: {
-              path: ["blue", "team_keys"],
-              array_contains: `frc${team}`,
+          teams: {
+            some: {
+              team_number: Number(team),
             },
           },
-        ],
-      },
-    }),
-    await db.event.count({
-      where: {
-        key: {
-          contains: "2023"
         },
-        teams: {
-          some: {
-            team_number: Number(team),
-          }
+      }),
+      await db.award.count({
+        where: {
+          recipient_list: {
+            array_contains: [{ awardee: null, team_key: `frc${team}` }],
+          },
+          year: 2023,
         },
-      },
-    }),
-    await db.award.count({
-      where: {
-        recipient_list: {
-          array_contains: [{ awardee: null, team_key: `frc${team}` }],
+      }),
+      await db.favouritedTeam.count({
+        where: {
+          team_number: Number(team),
         },
-        year: 2023,
-      },
-    }),
-    await db.favouritedTeam.count({
-      where: {
-        team_number: Number(team),
-      },
-    }),
-  ]);
+      }),
+    ]);
 
   return {
     props: {
diff --git a/pages/teams.tsx b/pages/teams.tsx
index 30ca9c9..488ddd8 100644
--- a/pages/teams.tsx
+++ b/pages/teams.tsx
@@ -19,7 +19,7 @@ import { getStorage, setStorage } from "@/utils/localStorage";
 import { Loading } from "@/components/Loading";
 
 const filterOptions = [
-  { name: <FaHome />, range: "" },
+  { name: <FaHome aria-label="Home Button" />, range: "" },
   { name: "999s", range: "1-999" },
   { name: "1000s", range: "1000-2000" },
   { name: "2000s", range: "2000-3000" },
@@ -35,7 +35,6 @@ const filterOptions = [
 export default function TeamsPage({ user }: any): JSX.Element {
   const [teams, setTeams] = useState<any>();
   const [allTeams, setAllTeams] = useState<any>();
-  const [isClient, setIsClient] = useState(false);
   const [teamExistsByTime, setTeamExistsByTime] = useState<any>({});
   const [time, setTime] = useState<any>();
   const [query, setQuery] = useState("");
@@ -68,7 +67,6 @@ export default function TeamsPage({ user }: any): JSX.Element {
   }, []);
 
   useEffect(() => {
-    setIsClient(true);
     const handleScroll = (): void => {
       const scrollPosition: number = window.innerHeight + window.scrollY;
       const contentHeight: number = document.documentElement.scrollHeight;
@@ -146,99 +144,97 @@ export default function TeamsPage({ user }: any): JSX.Element {
 
   return (
     <>
-      {isClient && (
-        <>
-          <SEO title="Teams / Scout Machine" />
-          <Navbar active="Teams" />
+      <>
+        <SEO title="Teams / Scout Machine" />
+        <Navbar active="Teams" />
 
-          <div className="flex flex-col">
-            <Header
-              title="Teams"
-              desc="Unleash the excitement of FRC with a new way to discover teams"
-            >
-              <div className="relative">
-                <input
-                  type="text"
-                  placeholder="Search teams (team #, location, name)..."
-                  value={query}
-                  onChange={changeSearch}
-                  spellCheck="false"
-                  className="border bg-white border-solid dark:border-[#2A2A2A] dark:bg-card outline-none rounded-lg text-lightGray px-3 py-[6px] px-5 text-sm pl-8 md:w-[450px] mt-5"
-                />
-                <span className="absolute inset-y-0 left-0 flex items-center pl-3 mt-5">
-                  <FaSearch className="text-sm text-lightGray" />
-                </span>
-              </div>
-              <div className="mt-3 gap-2 flex flex-wrap">
-                {filterOptions.map(
-                  (
-                    option:
-                      | { name: JSX.Element; range: string }
-                      | { name: string; range: string },
-                    index: number
-                  ) => (
-                    <FilterNumber
-                      key={index}
-                      name={option.name}
-                      range={option.range}
-                      setTeamNumberRange={setTeamNumberRange}
-                      setButtonClicked={setButtonClicked}
-                      buttonClicked={buttonClicked}
-                    />
-                  )
-                )}
-              </div>
-              <div>
-                <button
-                  className="mt-2 border bg-white border-solid hover:bg-gray-100 dark:bg-card dark:hover:bg-[#191919] px-3 py-1 text-lightGray text-sm rounded-lg dark:border-[#2A2A2A] hover:text-black dark:hover:text-white "
-                  onClick={(): void => {
-                    exportFromJSON({
-                      data: teams,
-                      fileName: `Teams_ScoutMachine_${CURR_YEAR}`,
-                      exportType: exportFromJSON.types.csv,
-                    });
-                  }}
-                >
-                  <FaFileCsv className="mr-1 inline-block text-xs mb-[3px]" />{" "}
-                  Export Data (CSV)
-                </button>
-              </div>
-
-              {teamExistsByTime && (
-                <div className="mt-5">
-                  <b className="text-black dark:text-white">
-                    Looks like the time is{" "}
-                    <span className="text-primary">{time}.</span>
-                  </b>{" "}
-                  <Link
-                    className="text-lightGray hover:text-primary"
-                    href={`/team/${teamExistsByTime.team_number}`}
-                  >
-                    Why don&apos;t ya check out {teamExistsByTime.team_number} |{" "}
-                    {teamExistsByTime.nickname}?
-                  </Link>
-                </div>
+        <div className="flex flex-col">
+          <Header
+            title="Teams"
+            desc="Unleash the excitement of FRC with a new way to discover teams"
+          >
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="Search teams (team #, location, name)..."
+                value={query}
+                onChange={changeSearch}
+                spellCheck="false"
+                className="border bg-white border-solid dark:border-[#2A2A2A] dark:bg-card outline-none rounded-lg text-lightGray px-3 py-[6px] px-5 text-sm pl-8 md:w-[450px] mt-5"
+              />
+              <span className="absolute inset-y-0 left-0 flex items-center pl-3 mt-5">
+                <FaSearch className="text-sm text-lightGray" />
+              </span>
+            </div>
+            <div className="mt-3 gap-2 flex flex-wrap">
+              {filterOptions.map(
+                (
+                  option:
+                    | { name: JSX.Element; range: string }
+                    | { name: string; range: string },
+                  index: number
+                ) => (
+                  <FilterNumber
+                    key={index}
+                    name={option.name}
+                    range={option.range}
+                    setTeamNumberRange={setTeamNumberRange}
+                    setButtonClicked={setButtonClicked}
+                    buttonClicked={buttonClicked}
+                  />
+                )
               )}
-            </Header>
+            </div>
+            <div>
+              <button
+                className="mt-2 border bg-white border-solid hover:bg-gray-100 dark:bg-card dark:hover:bg-[#191919] px-3 py-1 text-lightGray text-sm rounded-lg dark:border-[#2A2A2A] hover:text-black dark:hover:text-white "
+                onClick={(): void => {
+                  exportFromJSON({
+                    data: teams,
+                    fileName: `Teams_ScoutMachine_${CURR_YEAR}`,
+                    exportType: exportFromJSON.types.csv,
+                  });
+                }}
+              >
+                <FaFileCsv className="mr-1 inline-block text-xs mb-[3px]" />{" "}
+                Export Data (CSV)
+              </button>
+            </div>
 
-            <div className="w-full mx-auto pl-4 pr-4 md:pr-8 md:pl-8 mt-5">
-              <div className="flex flex-col w-full sm:grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
-                {displayedTeams.map((team: any, key: number) => {
-                  return (
-                    <TeamCard
-                      key={key}
-                      team={team}
-                      favourites={user?.favouritedTeams}
-                    />
-                  );
-                })}
+            {teamExistsByTime && (
+              <div className="mt-5">
+                <b className="text-black dark:text-white">
+                  Looks like the time is{" "}
+                  <span className="text-primary">{time}.</span>
+                </b>{" "}
+                <Link
+                  className="text-lightGray hover:text-primary"
+                  href={`/team/${teamExistsByTime.team_number}`}
+                >
+                  Why don&apos;t ya check out {teamExistsByTime.team_number} |{" "}
+                  {teamExistsByTime.nickname}?
+                </Link>
               </div>
+            )}
+          </Header>
+
+          <div className="w-full mx-auto pl-4 pr-4 md:pr-8 md:pl-8 mt-5">
+            <div className="flex flex-col w-full sm:grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
+              {displayedTeams.map((team: any, key: number) => {
+                return (
+                  <TeamCard
+                    key={key}
+                    team={team}
+                    favourites={user?.favouritedTeams}
+                  />
+                );
+              })}
             </div>
           </div>
+        </div>
 
-          <Footer />
-        </>
-      )}
+        <Footer />
+      </>
     </>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index b413caa..9f77f2a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,7 +19,5 @@ module.exports = {
       },
     },
   },
-  plugins: [
-		require("tailwindcss-animate"),
-	],
+  plugins: [require("tailwindcss-animate")],
 };
diff --git a/utils/lookup.ts b/utils/lookup.ts
index 3df4f3b..60bb411 100644
--- a/utils/lookup.ts
+++ b/utils/lookup.ts
@@ -1,18 +1,15 @@
-export default function lookup<T>(
-    value: number,
-    object: Record<number, T>
-  ): T {
-    const keys = Object.keys(object)
-      .map((key) => parseInt(key))
-      .sort((a, b) => a - b);
-    
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i];
-      
-      if (value < key) {
-        return object[key];
-      }
+export default function lookup<T>(value: number, object: Record<number, T>): T {
+  const keys = Object.keys(object)
+    .map((key) => parseInt(key))
+    .sort((a, b) => a - b);
+
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+
+    if (value < key) {
+      return object[key];
     }
-    
-    return object[keys[keys.length - 1]];
-  }
\ No newline at end of file
+  }
+
+  return object[keys[keys.length - 1]];
+}