From 4c93db17f5691e55495660cdf201d770b4e4fe79 Mon Sep 17 00:00:00 2001 From: Daithi Hearn Date: Sat, 27 Jan 2024 19:50:08 +0100 Subject: [PATCH] fix: fixing queries --- src/caches/GameSlice.ts | 6 ++-- src/components/Game/Actions/PlayCard.tsx | 22 ++---------- src/components/Hooks/useGame.tsx | 20 +++++------ src/components/Hooks/useGameActions.tsx | 36 +++++++------------- src/components/Hooks/useGameState.tsx | 7 ++-- src/components/Hooks/useProfiles.tsx | 33 ++++++++++-------- src/components/Hooks/useSettings.tsx | 17 ++++----- src/components/Hooks/useStats.tsx | 4 +-- src/components/StartNewGame/StartNewGame.tsx | 4 +-- src/utils/GameUtils.ts | 2 +- 10 files changed, 63 insertions(+), 88 deletions(-) diff --git a/src/caches/GameSlice.ts b/src/caches/GameSlice.ts index 46aba38..8cb35ce 100644 --- a/src/caches/GameSlice.ts +++ b/src/caches/GameSlice.ts @@ -5,7 +5,7 @@ import { Player } from "model/Player" import { RoundStatus } from "model/Round" import { RootState } from "./caches" -const initialState: GameState = { +export const initialGameState: GameState = { revision: -1, iamSpectator: true, isMyGo: false, @@ -19,7 +19,7 @@ const initialState: GameState = { export const gameSlice = createSlice({ name: "game", - initialState: initialState, + initialState: initialGameState, reducers: { updateGame: (_, action: PayloadAction) => action.payload, updatePlayers: (state, action: PayloadAction) => { @@ -32,7 +32,7 @@ export const gameSlice = createSlice({ disableActions: state => { state.isMyGo = false }, - resetGame: () => initialState, + resetGame: () => initialGameState, }, }) diff --git a/src/components/Game/Actions/PlayCard.tsx b/src/components/Game/Actions/PlayCard.tsx index 6a8fa06..b92a370 100644 --- a/src/components/Game/Actions/PlayCard.tsx +++ b/src/components/Game/Actions/PlayCard.tsx @@ -93,25 +93,9 @@ const PlayCard = () => { ) const selectCardToPlay = useCallback(() => { - if (selectedCards.length === 1) - dispatch(updateCardToPlay(selectedCards[0])) - }, [selectedCards]) - - // 1. Play card when you've pre-selected a card - // 2. If best card lead or lead from bottom enabled, play worst card - // 3. If lead from the top enabled, play best card - useEffect(() => { - if (round?.suit && gameId && isMyGo) { - if (cardToPlay) playCard({ gameId, card: cardToPlay }) - else if (autoPlay === "worst" || bestCardLead(round)) { - const worstCard = getWorstCard(myCards, round) - if (worstCard) playCard({ gameId, card: worstCard.name }) - } else if (autoPlay === "best") { - const bestCard = getBestCard(myCards, round) - if (bestCard) playCard({ gameId, card: bestCard.name }) - } - } - }, [playCard, gameId, autoPlay, round, isMyGo, myCards, cardToPlay]) + if (selectedCards.length === 1 && gameId) + playCard({ gameId, card: selectedCards[0].name }) + }, [gameId, selectedCards]) return ( diff --git a/src/components/Hooks/useGame.tsx b/src/components/Hooks/useGame.tsx index e1d9621..13798b2 100644 --- a/src/components/Hooks/useGame.tsx +++ b/src/components/Hooks/useGame.tsx @@ -17,30 +17,26 @@ export const useGame = () => { if (!accessToken) { // Handle the case when accessToken is undefined // For example, return a default value or throw an error - throw new Error("Access token is not available") + return [] } - const res = await axios.get( + const res = await axios.get( `${process.env.REACT_APP_API_URL}/api/v1/game/all`, getDefaultConfig(accessToken), ) return res.data }, refetchInterval: 5 * 60_000, - enabled: !!accessToken, }) const createGame = useMutation({ mutationFn: async (createGame: CreateGame) => { - if (!accessToken) { - // Handle the case when accessToken is undefined - // For example, return a default value or throw an error - throw new Error("Access token is not available") + if (accessToken) { + axios.put( + `${process.env.REACT_APP_API_URL}/api/v1/game`, + createGame, + getDefaultConfig(accessToken), + ) } - axios.put( - `${process.env.REACT_APP_API_URL}/api/v1/game`, - createGame, - getDefaultConfig(accessToken), - ) }, onSuccess: data => queryClient.invalidateQueries({ queryKey: ["myGames"] }), diff --git a/src/components/Hooks/useGameActions.tsx b/src/components/Hooks/useGameActions.tsx index 6d8683c..b5f2591 100644 --- a/src/components/Hooks/useGameActions.tsx +++ b/src/components/Hooks/useGameActions.tsx @@ -1,10 +1,11 @@ import { useMutation, useQueryClient } from "@tanstack/react-query" import useAccessToken from "auth/accessToken" import axios from "axios" -import { updateGame } from "caches/GameSlice" +import { initialGameState, updateGame } from "caches/GameSlice" import { updateMyCards } from "caches/MyCardsSlice" import { useAppDispatch } from "caches/hooks" import { Card, CardName } from "model/Cards" +import { GameState } from "model/Game" import { Suit } from "model/Suit" import { useSnackbar } from "notistack" import { getDefaultConfig } from "utils/AxiosUtils" @@ -25,11 +26,9 @@ export const useGameActions = () => { call: string }) => { if (!accessToken) { - // Handle the case when accessToken is undefined - // For example, return a default value or throw an error - throw new Error("Access token is not available") + return initialGameState } - const response = await axios.put( + const response = await axios.put( `${process.env.REACT_APP_API_URL}/api/v1/game/${gameId}/call?call=${call}`, null, getDefaultConfig(accessToken), @@ -53,11 +52,9 @@ export const useGameActions = () => { cards: CardName[] }) => { if (!accessToken) { - // Handle the case when accessToken is undefined - // For example, return a default value or throw an error - throw new Error("Access token is not available") + return initialGameState } - const response = await axios.put( + const response = await axios.put( `${process.env.REACT_APP_API_URL}/api/v1/game/${gameId}/buy`, { cards }, getDefaultConfig(accessToken), @@ -83,9 +80,7 @@ export const useGameActions = () => { suit: Suit }) => { if (!accessToken) { - // Handle the case when accessToken is undefined - // For example, return a default value or throw an error - throw new Error("Access token is not available") + return initialGameState } const response = await axios.put( `${process.env.REACT_APP_API_URL}/api/v1/game/${gameId}/suit`, @@ -114,9 +109,7 @@ export const useGameActions = () => { card: CardName }) => { if (!accessToken) { - // Handle the case when accessToken is undefined - // For example, return a default value or throw an error - throw new Error("Access token is not available") + return initialGameState } const response = await axios.put( `${process.env.REACT_APP_API_URL}/api/v1/game/${gameId}/play?card=${card}`, @@ -135,15 +128,12 @@ export const useGameActions = () => { const deleteGame = useMutation({ mutationFn: async ({ gameId }: { gameId: string }) => { - if (!accessToken) { - // Handle the case when accessToken is undefined - // For example, return a default value or throw an error - throw new Error("Access token is not available") + if (accessToken) { + axios.delete( + `${process.env.REACT_APP_API_URL}/api/v1/game/${gameId}`, + getDefaultConfig(accessToken), + ) } - axios.delete( - `${process.env.REACT_APP_API_URL}/api/v1/game/${gameId}`, - getDefaultConfig(accessToken), - ) }, onSuccess: () => queryClient.invalidateQueries({ diff --git a/src/components/Hooks/useGameState.tsx b/src/components/Hooks/useGameState.tsx index ced0ad8..81bc1e9 100644 --- a/src/components/Hooks/useGameState.tsx +++ b/src/components/Hooks/useGameState.tsx @@ -1,9 +1,10 @@ import { useQuery } from "@tanstack/react-query" import useAccessToken from "auth/accessToken" import axios from "axios" -import { updateGame } from "caches/GameSlice" +import { initialGameState, updateGame } from "caches/GameSlice" import { updateMyCards } from "caches/MyCardsSlice" import { useAppDispatch } from "caches/hooks" +import { GameState } from "model/Game" import { useState } from "react" import { getDefaultConfig } from "utils/AxiosUtils" @@ -20,9 +21,9 @@ export const useGameState = (gameId: string) => { if (!accessToken) { // Handle the case when accessToken is undefined // For example, return a default value or throw an error - throw new Error("Access token is not available") + return initialGameState } - const res = await axios.get( + const res = await axios.get( `${process.env.REACT_APP_API_URL}/api/v1/game/${gameId}/state?revision=${revision}`, getDefaultConfig(accessToken), ) diff --git a/src/components/Hooks/useProfiles.tsx b/src/components/Hooks/useProfiles.tsx index 8c8fa8f..340699d 100644 --- a/src/components/Hooks/useProfiles.tsx +++ b/src/components/Hooks/useProfiles.tsx @@ -22,9 +22,14 @@ export const useProfiles = () => { if (!accessToken) { // Handle the case when accessToken is undefined // For example, return a default value or throw an error - throw new Error("Access token is not available") + return { + id: "", + name: "", + picture: "", + lastAccess: "", + } } - const res = await axios.get( + const res = await axios.get( `${process.env.REACT_APP_API_URL}/api/v1/profile`, getDefaultConfig(accessToken), ) @@ -42,7 +47,7 @@ export const useProfiles = () => { if (!accessToken) { // Handle the case when accessToken is undefined // For example, return a default value or throw an error - throw new Error("Access token is not available") + return [] } const res = await axios.get( `${process.env.REACT_APP_API_URL}/api/v1/profile/all`, @@ -58,20 +63,18 @@ export const useProfiles = () => { // Mutations const updateProfile = useMutation({ mutationFn: async (profile: UpdateProfilePayload) => { - if (!accessToken) { - // Handle the case when accessToken is undefined - // For example, return a default value or throw an error - throw new Error("Access token is not available") + if (accessToken) { + await axios.put( + `${process.env.REACT_APP_API_URL}/api/v1/profile`, + profile, + getDefaultConfig(accessToken), + ) } - axios.put( - `${process.env.REACT_APP_API_URL}/api/v1/profile`, - profile, - getDefaultConfig(accessToken), - ) }, - onSuccess: data => { - queryClient.setQueryData(["myProfile", accessToken], data) - queryClient.setQueryData(["playerProfiles", accessToken], data) + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ["myProfile", "playerProfiles"], + }) }, onError: e => enqueueSnackbar(e.message, { variant: "error" }), }) diff --git a/src/components/Hooks/useSettings.tsx b/src/components/Hooks/useSettings.tsx index 048c8a9..916dae9 100644 --- a/src/components/Hooks/useSettings.tsx +++ b/src/components/Hooks/useSettings.tsx @@ -16,11 +16,11 @@ export const useSettings = () => { queryKey: ["playerSettings", accessToken], queryFn: async () => { if (!accessToken) { - // Handle the case when accessToken is undefined - // For example, return a default value or throw an error - throw new Error("Access token is not available") + return { + autoBuyCards: false, + } } - const res = await axios.get( + const res = await axios.get( `${process.env.REACT_APP_API_URL}/api/v1/settings`, getDefaultConfig(accessToken), ) @@ -34,15 +34,16 @@ export const useSettings = () => { const updateSettings = useMutation({ mutationFn: async (settings: PlayerSettings) => { if (!accessToken) { - // Handle the case when accessToken is undefined - // For example, return a default value or throw an error - throw new Error("Access token is not available") + return { + autoBuyCards: false, + } } - axios.put( + const res = await axios.put( `${process.env.REACT_APP_API_URL}/api/v1/settings`, settings, getDefaultConfig(accessToken), ) + return res.data }, onSuccess: data => queryClient.setQueryData(["playerSettings", accessToken], data), diff --git a/src/components/Hooks/useStats.tsx b/src/components/Hooks/useStats.tsx index 0efd842..c9d8071 100644 --- a/src/components/Hooks/useStats.tsx +++ b/src/components/Hooks/useStats.tsx @@ -13,9 +13,9 @@ export const useStats = (playerId: string) => { if (!accessToken) { // Handle the case when accessToken is undefined // For example, return a default value or throw an error - throw new Error("Access token is not available") + return [] } - const response = await axios.get( + const response = await axios.get( `${ process.env.REACT_APP_API_URL }/api/v1/stats/${encodeURIComponent(playerId)}`, diff --git a/src/components/StartNewGame/StartNewGame.tsx b/src/components/StartNewGame/StartNewGame.tsx index ebab0ef..f661f98 100644 --- a/src/components/StartNewGame/StartNewGame.tsx +++ b/src/components/StartNewGame/StartNewGame.tsx @@ -48,7 +48,7 @@ const StartNewGame = () => { const togglePlayer = useCallback( (player: PlayerProfile) => { - if (selectedPlayers.includes(player)) { + if (selectedPlayers?.includes(player)) { setSelectedPlayers( selectedPlayers.filter(p => p.id !== player.id), ) @@ -159,7 +159,7 @@ const StartNewGame = () => { onClick={() => togglePlayer(player) } - selected={selectedPlayers.includes( + selected={selectedPlayers?.includes( player, )} sx={{ diff --git a/src/utils/GameUtils.ts b/src/utils/GameUtils.ts index 5bea95e..ff49ce8 100644 --- a/src/utils/GameUtils.ts +++ b/src/utils/GameUtils.ts @@ -53,7 +53,7 @@ export const processOrderedCardsAfterGameUpdate = ( // Find the delta between the existing cards and the updated cards we got from the api const delta = currentCardsNoBlanks.filter( - x => !updatedCardNames.includes(x.name), + x => !updatedCardNames?.includes(x.name), ) // 1. If cards in payload match ordered cards then don't change orderedCards