Migrate local copy of commanders map to chatterfang service based one

src/components/commanderOverview/CommanderDetails.tsx

@@ -1,5 +1,3 @@
-// CommanderDetails.tsx
-
 import { TooltipItem } from "chart.js";
 import React, { useCallback, useState } from "react";
 import { useSelector } from "react-redux";
@@ -25,10 +23,10 @@ import {
 
 import { AppState } from "../../redux/rootReducer";
 import { StatsSelectors } from "../../redux/stats/statsSelectors";
+import { CommandersSelectors } from "../../redux/commanders/commandersSelectors";
 import { Loading } from "../Loading";
-import { commanderList } from "../../services/commanderList";
 import { SortableTable } from "../dataVisualizations/SortableTable";
-import { matchHistoryColumns } from "../dataVisualizations/columnHelpers/matchHistoryColumnHelper";
+import { getMatchHistoryColumns } from "../dataVisualizations/columnHelpers/matchHistoryColumnHelper";
 import { Match } from "../../types/domain/Match";
 import { MatchPlayer } from "../../types/domain/MatchPlayer";
 import { LineGraph } from "../dataVisualizations/LineGraph";
@@ -50,6 +48,10 @@ export const CommanderDetails = React.memo(function CommanderDetails() {
     const navigate = useNavigate();
     const commanderId = useLoaderData() as string;
     const commander = useSelector((state: AppState) => StatsSelectors.getCommander(state, commanderId));
+    const commanderInfo = useSelector((state: AppState) =>
+        CommandersSelectors.getCommanderByName(state, commander?.name ?? "")
+    );
+    const commandersData = useSelector((state: AppState) => CommandersSelectors.getCommanders(state));
 
     const [showCommanderMatchups, setShowCommanderMatchups] = useState<boolean>(false);
     const [tabIndex, setTabIndex] = useState(0);
@@ -129,6 +131,8 @@ export const CommanderDetails = React.memo(function CommanderDetails() {
         return `Winrate: ${item.formattedValue}%`;
     };
 
+    const matchHistoryColumns = getMatchHistoryColumns(commandersData);
+
     return (
         <Flex direction="column" justifyContent="center" alignItems="center">
             <Flex
@@ -140,10 +144,10 @@ export const CommanderDetails = React.memo(function CommanderDetails() {
                 flexWrap="wrap"
                 marginBottom="32px"
             >
-                {commanderList[commander.name] ? (
+                {commanderInfo ? (
                     <Image
                         width="300px"
-                        src={commanderList[commander.name].image}
+                        src={commanderInfo.image}
                         boxShadow="0px 12px 18px 2px rgba(0,0,0,0.3)"
                         borderRadius="4%"
                         zIndex={1}
@@ -189,13 +193,13 @@ export const CommanderDetails = React.memo(function CommanderDetails() {
                     <Text padding="8px 16px" borderLeftWidth="1px" borderRightWidth="1px" borderBottomWidth="1px">
                         {`Qualified: ${commander.validMatchesCount >= COMMANDER_MINIMUM_GAMES_REQUIRED ? "Yes" : "No"}`}
                     </Text>
-                    {commanderList[commander.name] && (
+                    {commanderInfo && (
                         <Link
                             padding="8px 16px"
                             borderLeftWidth="1px"
                             borderRightWidth="1px"
                             borderBottomWidth="1px"
-                            href={commanderList[commander.name].scryfallUri}
+                            href={commanderInfo.scryfallUri}
                             isExternal
                         >
                             View on Scryfall <ExternalLinkIcon marginLeft="4px" marginBottom="5px" />

src/components/commanderOverview/CommanderMatchupsTable.tsx

@@ -5,11 +5,11 @@ import { useNavigate } from "react-router-dom";
 import { SortableTable } from "../dataVisualizations/SortableTable";
 import { AppState } from "../../redux/rootReducer";
 import { StatsSelectors } from "../../redux/stats/statsSelectors";
+import { CommandersSelectors } from "../../redux/commanders/commandersSelectors";
 import {
     CommanderMatchupItem,
-    commanderMatchupsColumns
+    getCommanderMatchupsColumns
 } from "../dataVisualizations/columnHelpers/commanderMatchupsColumnHelper";
-import { commanderList } from "../../services/commanderList";
 import { filterMatchesByPlayerCount } from "../../logic/dictionaryUtils";
 import { NUMBER_OF_PLAYERS_FOR_VALID_MATCH } from "../constants";
 
@@ -20,6 +20,8 @@ export const CommanderMatchupsTable = React.memo(function CommanderMatchupsTable
 }) {
     const navigate = useNavigate();
 
+    const commandersData = useSelector((state: AppState) => CommandersSelectors.getCommanders(state));
+
     // get all the valid matches the commander has participated in
     const matches = filterMatchesByPlayerCount(
         useSelector((state: AppState) => StatsSelectors.getMatchesByCommanderName(state, commanderName)),
@@ -45,11 +47,12 @@ export const CommanderMatchupsTable = React.memo(function CommanderMatchupsTable
                 // skip that since we don't want their record against themself
                 if (commander !== commanderName) {
                     const potentialCommander = commanderMatchups[commander];
+                    const commanderDataForThisCommander = commandersData ? commandersData[commander] : undefined;
                     // check to see if the commander already exists in our dictionary. if it doesn't, add it.
                     const commanderMatchup =
                         potentialCommander === undefined
                             ? {
-                                  id: commanderList[commander].id,
+                                  id: commanderDataForThisCommander ? commanderDataForThisCommander.scryfallId : "",
                                   name: commander,
                                   matchCount: 1,
                                   winCount: 0
@@ -68,10 +71,11 @@ export const CommanderMatchupsTable = React.memo(function CommanderMatchupsTable
     }
 
     const commanderMatchupsArray = Object.values(commanderMatchups).sort((a, b) => b.matchCount - a.matchCount);
+    const columns = getCommanderMatchupsColumns(commandersData);
 
     return (
         <SortableTable
-            columns={commanderMatchupsColumns}
+            columns={columns}
             data={commanderMatchupsArray}
             getRowProps={(row: any) => {
                 return {

src/components/commanderOverview/CommanderOverview.tsx

@@ -5,8 +5,9 @@ import { useNavigate } from "react-router-dom";
 import { Box, Checkbox, Flex, Input, Tooltip } from "@chakra-ui/react";
 
 import { SortableTable } from "../dataVisualizations/SortableTable";
-import { commanderOverviewColumns } from "../dataVisualizations/columnHelpers/commanderOverviewColumnHelper";
+import { getCommanderOverviewColumns } from "../dataVisualizations/columnHelpers/commanderOverviewColumnHelper";
 import { StatsSelectors } from "../../redux/stats/statsSelectors";
+import { CommandersSelectors } from "../../redux/commanders/commandersSelectors";
 import { Loading } from "../Loading";
 import { Commander } from "../../types/domain/Commander";
 import { COMMANDER_MINIMUM_GAMES_REQUIRED } from "../constants";
@@ -17,6 +18,7 @@ export const CommanderOverview = React.memo(function MatchHistory() {
     const navigate = useNavigate();
 
     const allCommanders = useSelector(StatsSelectors.getCommanders);
+    const commandersData = useSelector((state: AppState) => CommandersSelectors.getCommanders(state));
     const { showOnlyQualfied, searchInput, onShowOnlyQualifiedChange, onSearchChange } = useTableFilters();
 
     const commanders: Commander[] = useSelector((state: AppState) => StatsSelectors.getCommandersByDate(state));
@@ -37,6 +39,8 @@ export const CommanderOverview = React.memo(function MatchHistory() {
         );
     }
 
+    const columns = getCommanderOverviewColumns(commandersData);
+
     return (
         <Flex direction="column" justify="center" align="center">
             <Flex
@@ -63,7 +67,7 @@ export const CommanderOverview = React.memo(function MatchHistory() {
             </Flex>
             {commandersArray.length > 0 ? (
                 <SortableTable
-                    columns={commanderOverviewColumns}
+                    columns={columns}
                     data={commandersArray}
                     getRowProps={(row: any) => {
                         return {

src/components/commanderTrends/CommandersPlayedChart.tsx

@@ -27,8 +27,6 @@ export const CommandersPlayedChart = React.memo(function CommandersPlayedChart()
         return { x: Number(match.id) + 1, y: Object.keys(commandersDictionary).length };
     });
 
-    console.log(commandersCountData);
-
     const tooltipTitleCallback = (item: TooltipItem<"line">[]) => {
         return `Match Id: ${matches[item[0].dataIndex].id}`;
     };

src/components/dataVisualizations/columnHelpers/commanderMatchupsColumnHelper.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Image } from "@chakra-ui/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { getWinRatePercentage } from "../../../logic/utils";
-import { commanderList } from "../../../services/commanderList";
+import { CommanderData } from "../../../services/CommanderService";
 
 export type CommanderMatchupItem = {
     id: string;
@@ -12,13 +12,16 @@ export type CommanderMatchupItem = {
 
 const columnHelper = createColumnHelper<CommanderMatchupItem>();
 
-export const commanderMatchupsColumns: ColumnDef<CommanderMatchupItem, any>[] = [
+export const getCommanderMatchupsColumns = (
+    commandersMap: { [name: string]: CommanderData } | undefined
+): ColumnDef<CommanderMatchupItem, any>[] => [
     columnHelper.accessor((row) => row.name, {
         id: "name",
         cell: (info) => {
             const commander = info.getValue();
-            const commanderImage = commanderList[commander]
-                ? commanderList[commander].image.replace("normal", "art_crop")
+            const commanderData = commandersMap ? commandersMap[commander] : undefined;
+            const commanderImage = commanderData
+                ? commanderData.image.replace("normal", "art_crop")
                 : "";
 
             return (
@@ -49,3 +52,6 @@ export const commanderMatchupsColumns: ColumnDef<CommanderMatchupItem, any>[] =
         header: () => <span>Winrate Against</span>
     })
 ];
+
+// Keep the old export for backward compatibility
+export const commanderMatchupsColumns: ColumnDef<CommanderMatchupItem, any>[] = getCommanderMatchupsColumns(undefined);

src/components/dataVisualizations/columnHelpers/commanderOverviewColumnHelper.tsx

@@ -1,18 +1,21 @@
 import { Box, Flex, Image } from "@chakra-ui/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { getWinRatePercentage } from "../../../logic/utils";
-import { commanderList } from "../../../services/commanderList";
+import { CommanderData } from "../../../services/CommanderService";
 import { Commander } from "../../../types/domain/Commander";
 
 const columnHelper = createColumnHelper<Commander>();
 
-export const commanderOverviewColumns: ColumnDef<Commander, any>[] = [
+export const getCommanderOverviewColumns = (
+    commandersMap: { [name: string]: CommanderData } | undefined
+): ColumnDef<Commander, any>[] => [
     columnHelper.accessor((row) => row.name, {
         id: "name",
         cell: (info) => {
             const commander = info.getValue();
-            const commanderImage = commanderList[commander]
-                ? commanderList[commander].image.replace("normal", "art_crop")
+            const commanderData = commandersMap ? commandersMap[commander] : undefined;
+            const commanderImage = commanderData
+                ? commanderData.image.replace("normal", "art_crop")
                 : "";
 
             return (
@@ -46,3 +49,6 @@ export const commanderOverviewColumns: ColumnDef<Commander, any>[] = [
         }
     )
 ];
+
+// Keep the old export for backward compatibility, but use undefined for now
+export const commanderOverviewColumns: ColumnDef<Commander, any>[] = getCommanderOverviewColumns(undefined);

src/components/dataVisualizations/columnHelpers/matchHistoryColumnHelper.tsx

@@ -4,13 +4,15 @@ import { Flex, Image, Tag, TagLabel, TagRightIcon, Text } from "@chakra-ui/react
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 
 import { Match } from "../../../types/domain/Match";
-import { commanderList } from "../../../services/commanderList";
+import { CommanderData } from "../../../services/CommanderService";
 import { primaryColor } from "../../../themes/acorn";
 import { MatchTag, getMatchTags } from "../../../logic/matchTags";
 
 const columnHelper = createColumnHelper<Match>();
 
-export const matchHistoryColumns: ColumnDef<Match, any>[] = [
+export const getMatchHistoryColumns = (
+    commandersMap: { [name: string]: CommanderData } | undefined
+): ColumnDef<Match, any>[] => [
     columnHelper.accessor((row) => row.id, {
         id: "id",
         cell: (info) => info.getValue(),
@@ -71,8 +73,9 @@ export const matchHistoryColumns: ColumnDef<Match, any>[] = [
             // get the commander image for the winner
             const winner = match.players.find((player) => player.name === match.winner);
             const commander = winner ? winner.commanders[0] : "";
-            const commanderImage = commanderList[commander]
-                ? commanderList[commander].image.replace("normal", "art_crop")
+            const commanderData = commandersMap ? commandersMap[commander] : undefined;
+            const commanderImage = commanderData
+                ? commanderData.image.replace("normal", "art_crop")
                 : "";
 
             return (
@@ -92,3 +95,6 @@ export const matchHistoryColumns: ColumnDef<Match, any>[] = [
         header: () => <span>Turn Count</span>
     })
 ];
+
+// Keep the old export for backward compatibility
+export const matchHistoryColumns: ColumnDef<Match, any>[] = getMatchHistoryColumns(undefined);

src/components/matchHistory/MatchDetails.tsx

@@ -5,8 +5,8 @@ import { Flex, Heading, Tag, TagLabel, TagRightIcon, Text } from "@chakra-ui/rea
 import { AppState } from "../../redux/rootReducer";
 import { useSelector } from "react-redux";
 import { StatsSelectors } from "../../redux/stats/statsSelectors";
+import { CommandersSelectors } from "../../redux/commanders/commandersSelectors";
 import { Loading } from "../Loading";
-import { commanderList } from "../../services/commanderList";
 import { MatchDisplayPlayer } from "./types/MatchDisplayPlayer";
 import { MatchPlayerCard } from "./MatchPlayerCard";
 import { rankDictionary } from "../constants";
@@ -24,6 +24,7 @@ export const MatchDetails = React.memo(function MatchDetails() {
 
     // look up this matchId in the matchHistory
     const match = useSelector((state: AppState) => StatsSelectors.getMatch(state, matchId));
+    const commandersData = useSelector((state: AppState) => CommandersSelectors.getCommanders(state));
 
     if (match === undefined) {
         return <Loading text="" />;
@@ -36,9 +37,10 @@ export const MatchDetails = React.memo(function MatchDetails() {
             name: player.name,
             rank: rankDictionary[player.rank],
             commanders: player.commanders.map((commanderName: string) => {
+                const commanderData = commandersData ? commandersData[commanderName] : undefined;
                 return {
                     name: commanderName,
-                    id: commanderList[commanderName] ? commanderList[commanderName].id : undefined
+                    id: commanderData ? commanderData.scryfallId : undefined
                 };
             }),
             isWinner: match.winner === player.name

src/components/matchHistory/MatchHistory.tsx

@@ -1,28 +1,32 @@
 import { Flex } from "@chakra-ui/react";
 import React from "react";
 import { SortableTable } from "../dataVisualizations/SortableTable";
-import { matchHistoryColumns } from "../dataVisualizations/columnHelpers/matchHistoryColumnHelper";
+import { getMatchHistoryColumns } from "../dataVisualizations/columnHelpers/matchHistoryColumnHelper";
 import { StatsSelectors } from "../../redux/stats/statsSelectors";
+import { CommandersSelectors } from "../../redux/commanders/commandersSelectors";
 import { useSelector } from "react-redux";
 import { Loading } from "../Loading";
 import { useNavigate } from "react-router-dom";
 import { Match } from "../../types/domain/Match";
+import { AppState } from "../../redux/rootReducer";
 
 export const MatchHistory = React.memo(function MatchHistory() {
     const navigate = useNavigate();
     let matches = useSelector(StatsSelectors.getMatches);
+    const commandersData = useSelector((state: AppState) => CommandersSelectors.getCommanders(state));
 
     if (matches === undefined) {
         return <Loading text="" />;
     }
 
     // Cannot directly mutate state, copy to new array first
     matches = matches.slice().sort((a: Match, b: Match) => Number(b.id) - Number(a.id));
+    const columns = getMatchHistoryColumns(commandersData);
 
     return (
         <Flex direction="column" justify="center" align="center">
             <SortableTable
-                columns={matchHistoryColumns}
+                columns={columns}
                 data={matches}
                 getRowProps={(row: any) => {
                     return {