V2 Website Upgrades

backend/src/site/team.py

@@ -20,7 +20,12 @@
 async def read_all_teams(response: StreamingResponse, no_cache: bool = False) -> Any:
     teams: List[Team] = await get_teams_cached(site=True, no_cache=no_cache)
     data = [
-        {"team": x.team, "name": x.name, "active": x.active}
+        {
+            "team": x.team,
+            "name": x.name,
+            "active": x.active,
+            "color": {"primary": x.primary_color, "secondary": x.secondary_color},
+        }
         for x in teams
         if not x.offseason
     ]

new/frontend/src/contexts/dataContext.tsx

@@ -3,21 +3,25 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { createContext, useContext } from "react";
 
-import { APIEvent, APITeamYear, APIYear } from "../types/api";
+import { APIEvent, APIShortEvent, APIShortTeam, APITeamYear, APIYear } from "../types/api";
 import { CURR_YEAR } from "../utils/constants";
 
 export const DataContext = createContext({
-  teamYearMiniDataDict: {},
-  setTeamYearMiniDataDict: (teamYearMiniDataDict: { [key: number]: APITeamYear[] }) => {},
+  allTeams: [],
+  setAllTeams: (allTeams: APIShortTeam[]) => {},
+  allEvents: [],
+  setAllEvents: (allEvents: APIShortEvent[]) => {},
   teamYearDataDict: {},
   setTeamYearDataDict: (teamYearDataDict: { [key: number]: APITeamYear[] }) => {},
   eventDataDict: {},
   setEventDataDict: (eventDataDict: { [key: number]: APIEvent[] }) => {},
   yearDataDict: {},
   setYearDataDict: (yearDataDict: { [key: number]: APIYear }) => {},
 } as {
-  teamYearMiniDataDict: { [key: number]: APITeamYear[] };
-  setTeamYearMiniDataDict: any;
+  allTeams: APIShortTeam[];
+  setAllTeams: any;
+  allEvents: APIShortEvent[];
+  setAllEvents: any;
   teamYearDataDict: { [key: number]: APITeamYear[] };
   setTeamYearDataDict: any;
   eventDataDict: { [key: number]: APIEvent[] };

new/frontend/src/layout/header.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { FaGithub } from "react-icons/fa";
 import { MdMenu as IconMenu, MdSearch as IconSearch } from "react-icons/md";
 import { RxMoon, RxSun } from "react-icons/rx";
@@ -11,8 +11,8 @@ import { Button, Group, Kbd, NavLink as MantineNavLink, Menu, Text } from "@mant
 import { Spotlight, spotlight } from "@mantine/spotlight";
 
 import { getAllEvents, getAllTeams } from "../api/header";
+import { useData } from "../contexts/dataContext";
 import { usePreferences } from "../contexts/preferencesContext";
-import { APIShortEvent, APIShortTeam } from "../types/api";
 import { loaderProp } from "../utils/utils";
 
 function NavLink({ href, label }: { href: string; label: string }) {
@@ -39,8 +39,8 @@ function NavLink({ href, label }: { href: string; label: string }) {
 
 function Header() {
   const router = useRouter();
-
   const { colorScheme, setColorScheme } = usePreferences();
+  const { allTeams, setAllTeams, allEvents, setAllEvents } = useData();
 
   const searchIcon = (
     <IconSearch
@@ -65,19 +65,16 @@ function Header() {
     />
   );
 
-  const [teams, setTeams] = useState<APIShortTeam[]>([]);
-  const [events, setEvents] = useState<APIShortEvent[]>([]);
-
   useEffect(() => {
-    getAllTeams().then((data) => setTeams(data));
+    getAllTeams().then((data) => setAllTeams(data));
   }, []);
 
   useEffect(() => {
-    getAllEvents().then((data) => setEvents(data));
+    getAllEvents().then((data) => setAllEvents(data));
   }, []);
 
   const seenTeams = new Set();
-  const teamOptions = teams
+  const teamOptions = allTeams
     ?.filter((team: any) => {
       const duplicate = seenTeams.has(team.team);
       seenTeams.add(team.team);
@@ -92,7 +89,7 @@ function Header() {
     }));
 
   const seenEvents = new Set();
-  const eventOptions = events
+  const eventOptions = allEvents
     ?.filter((event: any) => {
       const duplicate = seenEvents.has(event.key);
       seenEvents.add(event.key);

new/frontend/src/pages/_app.tsx

@@ -15,7 +15,7 @@ import { PreferencesContext } from "../contexts/preferencesContext";
 import Footer from "../layout/footer";
 import Header from "../layout/header";
 import "../styles/globals.css";
-import { APIEvent, APITeamYear, APIYear } from "../types/api";
+import { APIEvent, APIShortEvent, APIShortTeam, APITeamYear, APIYear } from "../types/api";
 import NoSSR from "../utils/no-ssr";
 
 const theme = createTheme({
@@ -24,17 +24,18 @@ const theme = createTheme({
 });
 
 function App({ Component, pageProps }: AppProps) {
-  const [teamYearMiniDataDict, setTeamYearMiniDataDict] = useState<{
-    [key: number]: APITeamYear[];
-  }>({});
+  const [allTeams, setAllTeams] = useState<APIShortTeam[]>([]);
+  const [allEvents, setAllEvents] = useState<APIShortEvent[]>([]);
   const [teamYearDataDict, setTeamYearDataDict] = useState<{ [key: number]: APITeamYear[] }>({});
   const [eventDataDict, setEventDataDict] = useState<{ [key: number]: APIEvent[] }>({});
   const [yearDataDict, setYearDataDict] = useState<{ [key: number]: APIYear }>({});
 
   const memoizedDataValue = useMemo(
     () => ({
-      teamYearMiniDataDict,
-      setTeamYearMiniDataDict,
+      allTeams,
+      setAllTeams,
+      allEvents,
+      setAllEvents,
       teamYearDataDict,
       setTeamYearDataDict,
       eventDataDict,
@@ -43,8 +44,10 @@ function App({ Component, pageProps }: AppProps) {
       setYearDataDict,
     }),
     [
-      teamYearMiniDataDict,
-      setTeamYearMiniDataDict,
+      allTeams,
+      setAllTeams,
+      allEvents,
+      setAllEvents,
       teamYearDataDict,
       setTeamYearDataDict,
       eventDataDict,

new/frontend/src/pages/teams/index.tsx

@@ -21,13 +21,7 @@ import { BREAKDOWN_YEARS, CURR_YEAR } from "../../utils/constants";
 
 export default function TeamsPage() {
   const { isReady } = useRouter();
-  const {
-    teamYearMiniDataDict,
-    setTeamYearMiniDataDict,
-    teamYearDataDict,
-    setTeamYearDataDict,
-    setYearDataDict,
-  } = useData();
+  const { teamYearDataDict, setTeamYearDataDict, setYearDataDict } = useData();
 
   const [year, setYear] = useState<number>(CURR_YEAR);
   const [location, setLocation] = useState<string | null>(null);
@@ -41,33 +35,11 @@ export default function TeamsPage() {
   const memoizedLocation = useMemo(() => ({ location, setLocation }), [location, setLocation]);
 
   const [error, setError] = useState(false);
-  const [loadingMini, setLoadingMini] = useState(false);
-  const [loadingFull, setLoadingFull] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    const getMiniDataForYear = async (yearNum: number) => {
-      setLoadingMini(true);
-      const {
-        year: yearData,
-        team_years: teamYearsData,
-      }: {
-        year: APIYear;
-        team_years: APITeamYear[];
-      } = await getYearTeamYears(yearNum, 50);
-      if (teamYearsData && yearData) {
-        setTeamYearMiniDataDict((prev: { [key: number]: APITeamYear[] }) => ({
-          ...prev,
-          [yearNum]: teamYearsData,
-        }));
-        setYearDataDict((prev: { [key: number]: APIYear }) => ({ ...prev, [yearNum]: yearData }));
-      } else {
-        setError(true);
-      }
-      setLoadingMini(false);
-    };
-
     const getDataForYear = async (yearNum: number) => {
-      setLoadingFull(true);
+      setLoading(true);
       const data = await getYearTeamYears(yearNum);
       const teamYearsData: APITeamYear[] = data?.team_years;
       const yearData: APIYear = data?.year;
@@ -80,23 +52,20 @@ export default function TeamsPage() {
       } else {
         setError(true);
       }
-      setLoadingFull(false);
+      setLoading(false);
     };
 
-    if (isReady && !error && !teamYearMiniDataDict[year] && !loadingMini) {
-      getMiniDataForYear(year);
-    } else if (isReady && !error && !teamYearDataDict[year] && !loadingFull) {
+    if (isReady && !error && !teamYearDataDict[year] && !loading) {
       getDataForYear(year);
     }
-  }, [isReady, teamYearMiniDataDict, teamYearDataDict, year]);
+  }, [isReady, teamYearDataDict, year]);
 
-  let data = teamYearDataDict[year] || teamYearMiniDataDict[year];
+  let data = teamYearDataDict[year];
   if (data) {
     data = data.sort(
       (a, b) => (a?.epa?.ranks?.total?.rank ?? 0) - (b?.epa?.ranks?.total?.rank ?? 0),
     );
   }
-  const loading = data?.length === 0;
 
   return (
     <div className="flex-grow pb-4">
@@ -146,13 +115,13 @@ export default function TeamsPage() {
               Figures
             </Tabs.Tab>
           </Tabs.List>
-          <TabPanel value="insights" loading={loading} error={error}>
+          <TabPanel value="insights" loading={false} error={error}>
             <div className="h-full w-full">
               <TeamYearsTable year={year} data={data} />
             </div>
           </TabPanel>
           {year >= 2016 && (
-            <TabPanel value="breakdown" loading={loading} error={error}>
+            <TabPanel value="breakdown" loading={false} error={error}>
               <div className="h-full w-full">
                 <TeamYearsBreakdownTable year={year} data={data} />
               </div>

new/frontend/src/types/api.tsx

@@ -287,6 +287,10 @@ export type APIShortTeam = {
   team: string;
   name: string;
   active: boolean;
+  color: {
+    primary: string;
+    secondary: string;
+  };
 };
 
 export type APIShortEvent = {