Merge branch 'main' into prod

aukus-devs · Sep 26, 2024 · c41431d · c41431d
2 parents 6739c48 + 6126595
commit c41431d
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 166 deletions.
diff --git 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() {
       <ThemeProvider theme={darkTheme}>
         <CssBaseline />
         <QueryClientProvider client={queryClient}>
-          <RouterProvider router={router} />
+          <UserProvider>
+            <RouterProvider router={router} />
+          </UserProvider>
         </QueryClientProvider>
       </ThemeProvider>
     </React.StrictMode>

diff --git 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
@@ -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<number | null>(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 (
+    <UserContext.Provider value={{ userId: currentUserId }}>
+      {children}
+    </UserContext.Provider>
+  )
+}
diff --git a/src/hooks/useCurrentUser.tsx b/src/hooks/useCurrentUser.tsx
diff --git 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
@@ -1,5 +1,6 @@
 import {
   Box,
+  Table,
   TableBody,
   TableCell,
   TableContainer,
@@ -18,56 +19,58 @@ export default function PreviousGamesTable({ games, playerColor }: Props) {
   return (
     <Box justifyContent="center" display="flex" marginLeft={6} marginRight={6}>
       <TableContainer sx={{ width: 'auto' }}>
-        <TableHead>
-          <TableRow>
-            <TableCell
-              width={'200px'}
-              sx={{
-                borderBottom: `2px solid ${playerColor}`,
-              }}
-            >
-              Игра
-            </TableCell>
-            <TableCell
-              sx={{
-                borderBottom: `2px solid ${playerColor}`,
-              }}
-            >
-              Статус
-            </TableCell>
-            <TableCell
-              sx={{
-                borderBottom: `2px solid ${playerColor}`,
-              }}
-            >
-              Оценка
-            </TableCell>
-            <TableCell
-              width={'400px'}
-              sx={{
-                borderBottom: `2px solid ${playerColor}`,
-              }}
-            >
-              Отзыв
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {games.map((game, index) => (
-            <TableRow key={index}>
-              <TableCell>{game.game_title}</TableCell>
-              <TableCell>
-                {game.dropped ? (
-                  <MoveTypeItem move="drop" />
-                ) : (
-                  <MoveTypeItem move="completed" />
-                )}
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell
+                width={'200px'}
+                sx={{
+                  borderBottom: `2px solid ${playerColor}`,
+                }}
+              >
+                Игра
+              </TableCell>
+              <TableCell
+                sx={{
+                  borderBottom: `2px solid ${playerColor}`,
+                }}
+              >
+                Статус
+              </TableCell>
+              <TableCell
+                sx={{
+                  borderBottom: `2px solid ${playerColor}`,
+                }}
+              >
+                Оценка
+              </TableCell>
+              <TableCell
+                width={'400px'}
+                sx={{
+                  borderBottom: `2px solid ${playerColor}`,
+                }}
+              >
+                Отзыв
               </TableCell>
-              <TableCell>{game.rating}</TableCell>
-              <TableCell>{game.review}</TableCell>
             </TableRow>
-          ))}
-        </TableBody>
+          </TableHead>
+          <TableBody>
+            {games.map((game, index) => (
+              <TableRow key={index}>
+                <TableCell>{game.game_title}</TableCell>
+                <TableCell>
+                  {game.dropped ? (
+                    <MoveTypeItem move="drop" />
+                  ) : (
+                    <MoveTypeItem move="completed" />
+                  )}
+                </TableCell>
+                <TableCell>{game.rating}</TableCell>
+                <TableCell>{game.review}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       </TableContainer>
     </Box>
   )