fix: load games directly from api data

src/common/GameBar/index.tsx

@@ -16,7 +16,8 @@ import {
  CurrencyTypesEnum,
  AllPossibleCurrencyTypes,
  AllPossibleWagerTypes,
- HexishString
+ HexishString,
+ Wega
 } from '../../models';
 import { useSelector } from 'react-redux'; 
 import { dateFromTs } from '../../utils';
@@ -42,18 +43,19 @@ export const BADGE_TEXTS: any = {
 
 interface GameBarProps {
   gameId: number;
+  loadedFromApi: Wega;
 }
 
 function GameBar({ 
   gameId,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   css, 
+  loadedFromApi,
   ...rest
 }: { gameId: number } & React.Attributes & Partial<React.AllHTMLAttributes<HTMLDivElement>> & GameBarProps) {
-  const game = useSelector(state => selectGameById(state, gameId));
+  const game = useSelector(state => selectGameById(state, gameId)) ?? loadedFromApi;
   const { user, network } = useWegaStore();
   const tokenDecimals: number = SupportedWagerTokenAddresses[game?.wager.wagerCurrency as AllPossibleCurrencyTypes][game?.networkId as number].decimals as number;
-
   return game && user?.uuid && network && tokenDecimals ? (
    <BarWrapper tw="w-full grid grid-cols-5 " {...rest}>
     {/* date */}

src/components/JoinableGamesSection/index.tsx

@@ -1,16 +1,15 @@
 import Section from '../../common/Section';
 import GameBar from '../../common/GameBar';
 import { JoinableGamesHeaderBar } from '../../common/JoinableGameBar/types';
+import { Wega } from '../../models';
 // import {  constants } from 'ethers'
 
 interface JoinableGamesSectionProps extends React.Attributes {
- gameIds: any[]
+ games: Wega[]
 }
-
 // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-function JoinableGamesSection({ gameIds , ...rest }: JoinableGamesSectionProps){
+function JoinableGamesSection({ games , ...rest }: JoinableGamesSectionProps){
 
-
   return (<Section hdr="Available Matches" direction="col" className="gap-2" { ...rest } >
     <JoinableGamesHeaderBar>
       <span>Date created</span>
@@ -19,8 +18,7 @@ function JoinableGamesSection({ gameIds , ...rest }: JoinableGamesSectionProps){
       <span>Escrow</span>
     </JoinableGamesHeaderBar>
     {
-      gameIds.map(
-      (dg, i) => (<GameBar gameId={dg} key={`joinable-game-bar${i}`} className="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]"/>))
+      games.map((dg) => (<GameBar loadedFromApi={dg} gameId={dg.id} key={`joinable-game-bar${dg.id}`} className="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]"/>))
     }
     </Section>
   )

src/components/JoinableOrPlayableGamesSection/index.tsx

@@ -1,22 +1,21 @@
 import Section from '../../common/Section';
 import GameBar from '../../common/GameBar';
 import { GameBarHeader } from '../../common/GameBar/GameBarHeader';
-
+import { Wega } from '../../models';
 interface JoinableOrPlayableGamesSectionProps extends React.Attributes {
- gameIds: number[];
+ games: Wega[];
 }
 
 // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-function JoinableOrPlayableGamesSection({ gameIds , ...rest }: 
+function JoinableOrPlayableGamesSection({ games , ...rest }: 
   JoinableOrPlayableGamesSectionProps
 ) {
 
   return (
     <Section hdr="Available Matches" direction="col" className="gap-2" { ...rest } >
       <GameBarHeader />
       {
-        gameIds.map(
-        (dg, i) => ( <GameBar gameId={dg} key={`joinable-playable-game-bar${i}`} className="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" /> ))
+        games.map((dg) => ( <GameBar loadedFromApi={dg} gameId={dg.id} key={`joinable-playable-game-bar${dg.id}`} className="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" /> ))
       }
     </Section>
   )

src/components/PlayableGamesSection/index.tsx

@@ -1,18 +1,17 @@
 import Section from '../../common/Section';
 import GameBar  from '../../common/GameBar'
 import {GameBarHeader}  from '../../common/GameBar/GameBarHeader'
-
+import { Wega } from '../../models';
 interface PlayableGamesSectionProps extends React.Attributes {
- gameIds: number[]
+ games: Wega[]
 }
 
 // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-function PlayableGamesSection({ gameIds , ...rest }: PlayableGamesSectionProps){
+function PlayableGamesSection({ games , ...rest }: PlayableGamesSectionProps){
   return (<Section hdr="Playable games" direction="col" className="gap-2" { ...rest } >
     <GameBarHeader />
     {
-      gameIds.map(
-      (dg, i) => (<GameBar gameId={dg} key={`playable-game-bar${i}`} className="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" />))
+      games.map((dg) => (<GameBar loadedFromApi={dg} gameId={dg.id} key={`playable-game-bar${dg.id}`} className="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" />))
     }
     </Section>
   )

src/components/WegaGames/index.tsx

@@ -20,15 +20,17 @@ const filterWaitingGames = (data: Wega[], userUuid: string) => data.filter(game
 const sortPlayableGames = (data: Wega[]) => data.sort((a: any, b: any) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
 export const JoinableAndPlayableGames: React.FC<JoinableAndPlayableGamesProps> = ({ gamesCount, userUuid, networkId, ...rest }: JoinableAndPlayableGamesProps) => {
  const { data, isLoading, isSuccess} = useGetGamesQuery({ networkId: networkId ?? defaultNetwork?.id });
- const [gameIds, setGameIds] = useState<number[]>([]);
+ const [sortedGames, setSortedGames] = useState<Wega[]>();
+
  useEffect(() => {
+  console.log(sortedGames)
    if(isSuccess && data && data?.entities) {                                     
-     const dataArray = data.ids.map((id: number) => data.entities[id]) as Wega[];
+     const dataArray = data?.ids.map((id: number) => data.entities[id]) as Wega[];
      const playableGames = filterPlayableGames(dataArray, userUuid);
      const joinableGames = filterJoinableGames(dataArray, userUuid);
      const waitingGames  = filterWaitingGames(dataArray, userUuid);
      const sortedGameIds = sortPlayableGames([...playableGames, ...joinableGames, ...waitingGames]).map(game => game.id);
-     setGameIds(sortedGameIds);
+     setSortedGames(sortedGameIds.map(id => data.entities[id] as Wega) ?? []);
     }
  }, [data, gamesCount, isSuccess, defaultNetwork?.id]);
 
@@ -41,21 +43,21 @@ export const JoinableAndPlayableGames: React.FC<JoinableAndPlayableGamesProps> =
    <span tw="invisible"></span>
   </JoinableGamesHeaderBar>
     {
-     gameIds ? gameIds.map((gameId: number) => (<GameBar gameId={gameId} key={`joinable-and-playable-game-bar${gameId}`} tw="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" /> )) : <></>
+     sortedGames && sortedGames.map((game: Wega) => (<GameBar loadedFromApi={game} gameId={game.id} key={`joinable-and-playable-game-bar${game.id}`} tw="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" /> )) 
     }
   </Section>
  ) : <ComponentLoader tw="mt-[2rem] w-full flex justify-center" />
 }
 
 export const JoinableGames: React.FC<JoinableAndPlayableGamesProps> = ({ gamesCount, userUuid, networkId, ...rest }: JoinableAndPlayableGamesProps) => {
  const { data, isLoading, isSuccess} = useGetGamesQuery({ state: WegaState.PENDING, networkId: networkId ?? defaultNetwork?.id });
- const [gameIds, setGameIds] = useState<number[]>();
+ const [sortedGames, setSortedGames] = useState<Wega[]>();
  useEffect(() => {
   if(isSuccess && data && data?.entities) {
     const dataArray = data.ids.map((id: number) => data.entities[id]) as Wega[];
     const joinableGames = filterJoinableGames(dataArray, userUuid);
     const sortedGameIds = sortPlayableGames(joinableGames).map(game => game.id);
-    setGameIds(sortedGameIds ?? []);
+    setSortedGames(sortedGameIds.map(id => data.entities[id] as Wega) ?? []);
   }
  }, [data, gamesCount, isSuccess, defaultNetwork?.id]);
 
@@ -67,21 +69,23 @@ export const JoinableGames: React.FC<JoinableAndPlayableGamesProps> = ({ gamesCo
    <span>Escrow</span>
   </JoinableGamesHeaderBar>
   {
-   gameIds && gameIds.map((gameId: number) => (<GameBar gameId={gameId} key={`joinable-game-bar${gameId}`} tw="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" />)) 
+   sortedGames && sortedGames.length > 0 && sortedGames.map((game: Wega) => (<GameBar gameId={game.id} loadedFromApi={game} key={`joinable-game-bar${game.id}`} tw="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" />)) 
   }
   </Section>
  ) : <ComponentLoader tw="w-full flex justify-center" />
 }
 
 export const PlayableGames: React.FC<JoinableAndPlayableGamesProps> = ({ gamesCount, userUuid,  networkId, ...rest }: JoinableAndPlayableGamesProps) => {
  const { data, isLoading, isSuccess } = useGetGamesQuery({ state: WegaState.PLAYING, networkId: networkId ?? defaultNetwork?.id });
- const [gameIds, setGameIds] = useState<number[]>();
+ const [sortedGames, setSortedGames] = useState<Wega[]>();
+
  useEffect(() => {
   if(isSuccess && data && data?.entities) {
     const dataArray = data.ids.map((id: number) => data.entities[id]) as Wega[];
     const joinableGames = filterJoinableGames(dataArray, userUuid);
     const sortedGameIds = sortPlayableGames(joinableGames).map(game => game.id);
-    setGameIds(sortedGameIds ?? []);
+    setSortedGames(sortedGameIds.map(id => data.entities[id] as Wega) ?? []);
+
   }
  }, [data, gamesCount, isSuccess, defaultNetwork?.id]);
 
@@ -93,7 +97,7 @@ export const PlayableGames: React.FC<JoinableAndPlayableGamesProps> = ({ gamesCo
    <span>Escrow</span>
   </JoinableGamesHeaderBar>
   {
-   gameIds && gameIds.map((gameId: number) => (<GameBar gameId={gameId} key={`playable-game-bar${gameId}`} tw="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" />)) 
+   sortedGames && sortedGames.map((game: Wega) => (<GameBar loadedFromApi={game} gameId={game.id} key={`playable-game-bar${game.id}`} tw="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]" />)) 
   }
   </Section>
  ) : <ComponentLoader tw="w-full flex justify-center" />