From 61265951e77bda00c95de622a3cdda3b0856b151 Mon Sep 17 00:00:00 2001 From: Maxim Velesyuk Date: Fri, 27 Sep 2024 01:18:45 +0200 Subject: [PATCH] Add user provider --- src/App.tsx | 5 +- src/components/MainMenu.tsx | 6 +- src/context/UserProvider.tsx | 36 ++++ src/hooks/useCurrentUser.tsx | 22 --- src/pages/map/components/MapComponent.tsx | 6 +- .../player/components/PeviousGamesTable.tsx | 99 +++++----- src/pages/player/components/PlayerContent.tsx | 181 +++++++++--------- 7 files changed, 189 insertions(+), 166 deletions(-) create mode 100644 src/context/UserProvider.tsx delete mode 100644 src/hooks/useCurrentUser.tsx diff --git a/src/App.tsx b/src/App.tsx index 8b538481..e7b28aa2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import { ThemeProvider, } from '@mui/material' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { UserProvider } from 'context/UserProvider' import AboutPage from 'pages/about/AboutPage' import RulesPage from 'pages/rules/RulesPage' import StatsPage from 'pages/stats/StatsPage' @@ -120,7 +121,9 @@ function App() { - + + + diff --git a/src/components/MainMenu.tsx b/src/components/MainMenu.tsx index 813071a7..8555f477 100644 --- a/src/components/MainMenu.tsx +++ b/src/components/MainMenu.tsx @@ -1,6 +1,6 @@ import { Box, Button } from '@mui/material' import { useQuery } from '@tanstack/react-query' -import useCurrentUser from 'hooks/useCurrentUser' +import { useUser } from 'context/UserProvider' import { Link } from 'react-router-dom' import { fetchPlayers } from 'utils/api' import { Color, getPlayerColor, Page } from 'utils/types' @@ -12,7 +12,7 @@ type Props = { } export default function MainMenu({ currentPage }: Props) { - const { currentUserId } = useCurrentUser() + const { userId } = useUser() const { data: playersData } = useQuery({ queryKey: ['players'], @@ -21,7 +21,7 @@ export default function MainMenu({ currentPage }: Props) { }) const players = playersData?.players - const currentPlayer = players?.find((player) => player.id === currentUserId) + const currentPlayer = players?.find((player) => player.id === userId) const playerColor = currentPlayer && getPlayerColor(currentPlayer) return ( diff --git a/src/context/UserProvider.tsx b/src/context/UserProvider.tsx new file mode 100644 index 00000000..c89b20d9 --- /dev/null +++ b/src/context/UserProvider.tsx @@ -0,0 +1,36 @@ +import { useQuery } from '@tanstack/react-query' +import { createContext, useContext, useEffect, useState } from 'react' +import { fetchCurrentUser } from 'utils/api' + +const UserContext = createContext<{ + userId: number | null +}>({ + userId: null, +}) + +export function useUser() { + return useContext(UserContext) +} + +export function UserProvider({ children }: { children: React.ReactNode }) { + const [currentUserId, setCurrentUserId] = useState(null) + + const { data: currentUserData } = useQuery({ + queryKey: ['current_user'], + queryFn: fetchCurrentUser, + enabled: !currentUserId, + staleTime: 1000 * 30, + }) + + useEffect(() => { + if (currentUserData?.user_id) { + setCurrentUserId(currentUserData.user_id) + } + }, [currentUserData?.user_id]) + + return ( + + {children} + + ) +} diff --git a/src/hooks/useCurrentUser.tsx b/src/hooks/useCurrentUser.tsx deleted file mode 100644 index 16c0a3bd..00000000 --- a/src/hooks/useCurrentUser.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; -import { useEffect, useState } from "react"; -import { fetchCurrentUser } from "utils/api"; - -export default function useCurrentUser() { - const [currentUserId, setCurrentUserId] = useState(null); - - const { data: currentUserData } = useQuery({ - queryKey: ["current_user"], - queryFn: fetchCurrentUser, - enabled: !currentUserId, - staleTime: 5000, - }); - - useEffect(() => { - if (currentUserData?.user_id) { - setCurrentUserId(currentUserData.user_id); - } - }, [currentUserData?.user_id]); - - return { currentUserId }; -} diff --git a/src/pages/map/components/MapComponent.tsx b/src/pages/map/components/MapComponent.tsx index 3039800f..a43a595a 100644 --- a/src/pages/map/components/MapComponent.tsx +++ b/src/pages/map/components/MapComponent.tsx @@ -1,6 +1,6 @@ import { Box, Grid } from '@mui/material' import { useMutation, useQuery } from '@tanstack/react-query' -import useCurrentUser from 'hooks/useCurrentUser' +import { useUser } from 'context/UserProvider' import { Fragment, useState } from 'react' import { createPlayerMove, fetchPlayers } from 'utils/api' import { NextTurnParams, Player } from 'utils/types' @@ -37,9 +37,9 @@ export default function MapComponent() { }) const players = playersData?.players - const { currentUserId } = useCurrentUser() + const { userId } = useUser() - const currentPlayer = players?.find((player) => player.id === currentUserId) + const currentPlayer = players?.find((player) => player.id === userId) const makeMove = useMutation({ mutationFn: createPlayerMove, diff --git a/src/pages/player/components/PeviousGamesTable.tsx b/src/pages/player/components/PeviousGamesTable.tsx index 4c2474e6..8d133af0 100644 --- a/src/pages/player/components/PeviousGamesTable.tsx +++ b/src/pages/player/components/PeviousGamesTable.tsx @@ -1,5 +1,6 @@ import { Box, + Table, TableBody, TableCell, TableContainer, @@ -18,56 +19,58 @@ export default function PreviousGamesTable({ games, playerColor }: Props) { return ( - - - - Игра - - - Статус - - - Оценка - - - Отзыв - - - - - {games.map((game, index) => ( - - {game.game_title} - - {game.dropped ? ( - - ) : ( - - )} + + + + + Игра + + + Статус + + + Оценка + + + Отзыв - {game.rating} - {game.review} - ))} - + + + {games.map((game, index) => ( + + {game.game_title} + + {game.dropped ? ( + + ) : ( + + )} + + {game.rating} + {game.review} + + ))} + +
) diff --git a/src/pages/player/components/PlayerContent.tsx b/src/pages/player/components/PlayerContent.tsx index 439d9447..791a11ef 100644 --- a/src/pages/player/components/PlayerContent.tsx +++ b/src/pages/player/components/PlayerContent.tsx @@ -1,5 +1,6 @@ import { Box, + Table, TableBody, TableCell, TableContainer, @@ -83,95 +84,97 @@ export default function PlayerContent(props: Props) { display="flex" > - - - - Ход - - - Дата - - - Игра - - - Результат - - - Ролл - - - Позиция - - - Оценка - - - Отзыв - - - Смотреть - - - - - {playerMoves.map((move, index) => { - return ( - - - {playerMoves.length - index} - - - {formatDate(move.created_at)} - - {move.item_title} - - - - - {move.dice_roll} - - - {move.cell_to} - - {move.item_rating}/10 - {move.item_review} - - Ссылки - - - ) - })} - + + + + + Ход + + + Дата + + + Игра + + + Результат + + + Ролл + + + Позиция + + + Оценка + + + Отзыв + + + Смотреть + + + + + {playerMoves.map((move, index) => { + return ( + + + {playerMoves.length - index} + + + {formatDate(move.created_at)} + + {move.item_title} + + + + + {move.dice_roll} + + + {move.cell_to} + + {move.item_rating}/10 + {move.item_review} + + Ссылки + + + ) + })} + +
{aukus2games && (