new api structure

src/components/FantasyStatus.tsx

@@ -3,8 +3,6 @@ import PlayerCell from "./fantasy/PlayerCell";
 import { type NFLAPIData, type NFLMatchupState } from "../utils/types";
 
 export default function FantasyStatus() {
-  const PLAYERS_URL = "https://api.alexav.gg/v4/football/players";
-
   const [personalRoster, setPersonalRoster] = useState<NFLMatchupState | null>(
     null
   );
@@ -15,7 +13,7 @@ export default function FantasyStatus() {
   // fetch roster information
   useEffect(() => {
     async function fetchData() {
-      const data = (await fetch("https://api.alexav.gg/v4/football/data").then(
+      const data = (await fetch("https://api.alexav.gg/v4/football").then(
         (res) => res.json()
       )) as NFLAPIData;
 
@@ -23,21 +21,12 @@ export default function FantasyStatus() {
       const ownMatchup = data.matchups[1] as NFLMatchupState;
       const oppMatchup = data.matchups[0] as NFLMatchupState;
 
-      const ownMatchupPlayers = await fetch(
-        PLAYERS_URL + "?players=" + ownMatchup.starters
-      ).then((res) => res.json());
-      const oppMatchupPlayers = await fetch(
-        PLAYERS_URL + "?players=" + oppMatchup.starters
-      ).then((res) => res.json());
-
       setPersonalRoster({
         ...ownMatchup,
-        playerInfo: ownMatchupPlayers.playerInfo,
         owner: data.users[1],
       });
       setOpposingRoster({
         ...oppMatchup,
-        playerInfo: oppMatchupPlayers.playerInfo,
         owner: data.users[0],
       });
     }
@@ -68,10 +57,10 @@ export default function FantasyStatus() {
         </div>
 
         <div className="space-y-2 space-x-2 whitespace-nowrap overflow-x-scroll">
-          {personalRoster?.playerInfo?.map((v, k) => {
+          {personalRoster?.starters.map((v, k) => {
             return (
               <div className="inline-block" key={k}>
-                <PlayerCell matchupData={personalRoster} player={v} />
+                <PlayerCell player={v} />
               </div>
             );
           })}
@@ -90,10 +79,10 @@ export default function FantasyStatus() {
         </div>
 
         <div className="space-y-2 space-x-2 whitespace-nowrap overflow-x-scroll">
-          {opposingRoster?.playerInfo?.map((v, k) => {
+          {opposingRoster?.starters.map((v, k) => {
             return (
               <div className="inline-block" key={k}>
-                <PlayerCell matchupData={opposingRoster} player={v} />
+                <PlayerCell player={v} />
               </div>
             );
           })}

src/components/fantasy/PlayerCell.tsx

@@ -1,34 +1,11 @@
-import type { NFLMatchupState, NFLPlayer } from "../../utils/types";
-
-export default function PlayerCell({
-  player,
-  matchupData,
-}: {
-  player: NFLPlayer | null;
-  matchupData: NFLMatchupState | null;
-}) {
-  const getScoreForPlayer = () => {
-    const rosterPosition = matchupData?.starters.findIndex(
-      (v) => v === player?.player_id
-    );
-
-    return matchupData?.starters_points[rosterPosition!] || 0;
-  };
-  const truncatedName = () => {
-    if (player) {
-      const firstName = player?.full_name.split(" ")[0];
-      const shortened =
-        firstName[0].toUpperCase() + "." + " " + player.last_name;
-
-      return shortened;
-    }
-  };
+import type { NFLPlayer } from "../../utils/types";
 
+export default function PlayerCell({ player }: { player: NFLPlayer | null }) {
   if (player && player.full_name) {
     return (
       <div className="flex-wrap flex space-x-2">
         <div>
-          <h1 className="font-semibold text-1xl">{truncatedName()}</h1>
+          <h1 className="font-semibold text-1xl">{player.abv_name}</h1>
           <p>
             {player?.position} · {player?.team} {player?.injury_status && "·"}{" "}
             {player?.injury_status && (
@@ -39,7 +16,7 @@ export default function PlayerCell({
           </p>
         </div>
         <p className="flex justify-center items-center">
-          <span className="font-semibold">{getScoreForPlayer()}</span>
+          <span className="font-semibold">{player.points}</span>
         </p>
         <div className="inline-block min-h-[1em] w-0.5 self-stretch bg-neutral-100 dark:bg-white/30"></div>
       </div>