diff --git a/src/app/tools/session/page.tsx b/src/app/tools/session/page.tsx index 93d8d0e9f..227463c74 100644 --- a/src/app/tools/session/page.tsx +++ b/src/app/tools/session/page.tsx @@ -1,10 +1,6 @@ 'use client'; -import { - ArrowDownIcon, - InfoCircledIcon, - MagnifyingGlassIcon, -} from '@radix-ui/react-icons'; +import { ArrowDownIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons'; import { AlertDialog, Button, @@ -20,7 +16,6 @@ import { debounce } from 'lodash'; import { use, useEffect, useMemo, useRef, useState } from 'react'; import PageWrapper from '../../../components/PageWrapper'; import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../../constants/regions'; -import { authURL } from '../../../core/blitz/authURL'; import { generateStats, prettifyStats, @@ -40,6 +35,7 @@ import { tankDefinitions } from '../../../core/blitzkit/tankDefinitions'; import { tankIcon } from '../../../core/blitzkit/tankIcon'; import { tankAverages } from '../../../core/blitzstars/tankAverages'; import { deltaTankStats } from '../../../core/statistics/deltaTankStats'; +import { useWideFormat } from '../../../hooks/useWideFormat'; import { theme } from '../../../stitches.config'; import { useApp } from '../../../stores/app'; import mutateSession, { @@ -49,12 +45,14 @@ import mutateSession, { import { IndividualTankStats } from '../../../types/tanksStats'; export default function Page() { + const wideFormat = useWideFormat(640); const awaitedTankDefinitions = use(tankDefinitions); const awaitedTankAvearges = use(tankAverages); const [showSearch, setShowSearch] = useState(false); const [searching, setSearching] = useState(false); const [searchResults, setSearchResults] = useState([]); - const [showFurtherVerification, setShowFurtherVerification] = useState(false); + const [showCCInaccessibilityPrompt, setShowCCInaccessibilityPrompt] = + useState(false); const input = useRef(null); const session = useSession(); const login = useApp((state) => state.login); @@ -109,105 +107,44 @@ export default function Page() { }, 500); useEffect(() => { - (async () => { - if (!session.tracking || !input.current) return; + async function update() { + if (!session.tracking) return; - let accountInfo = await getAccountInfo( - session.player.region, + const tankStats = await getTankStats( + idToRegion(session.player.id), session.player.id, ); - let tankStats = await getTankStats( - session.player.region, - session.player.id, - ); - - if (accountInfo === null) { - if (login?.id === session.player.id) { - accountInfo = await getAccountInfo( - idToRegion(session.player.id), - session.player.id, - [], - { access_token: login.token }, - ); - tankStats = await getTankStats( - idToRegion(session.player.id), - session.player.id, - { access_token: login.token }, - ); - - console.log(accountInfo, tankStats); - - input.current.value = accountInfo.nickname; - } else { - setShowFurtherVerification(true); - } - } - })(); - - if (session.tracking) { - const interval = setInterval(async () => { - const tankStats = await getTankStats( - idToRegion(session.player.id), - session.player.id, - ); - setTankStatsB(tankStats); - - // TODO: make refresh rate configurable - }, 1000); - - return () => clearInterval(interval); + setTankStatsB(tankStats); } + + update(); + const interval = setInterval(update, 5 * 1000); + + return () => clearInterval(interval); }, [session.tracking && session.player.id]); return ( - {/* omit totally to avoid accessing undefined player */} - {showFurtherVerification && ( - - - We need further verification - - You're trying to track a CC account which have private statistics. - Please sign in to verify the ownership of this account. Individual - tank statistics won't be available. - + + + + You're attempting to track a CC account + + + CC (community contributor) accounts do not have public tank + statistics. Looking for embeds? + - {login && ( - - You are currently signed with a different - account. - - )} - - - - - - - - - - - - - - )} + + + + + + + {!session.tracking && ( { - const stats = (await getTankStats( + const stats = await getTankStats( player.region, player.account_id, - ))!; + ); + + if (stats === null) { + setShowCCInaccessibilityPrompt(true); + return; + } setShowSearch(false); mutateSession((draft) => { @@ -312,32 +254,50 @@ export default function Page() { )} {session.tracking && ( - - Tracking {accountInfo?.nickname} - - Since {new Date(session.player.since).toLocaleString()} - + + + Tracking {accountInfo?.nickname} + + Since {new Date(session.player.since).toLocaleString()} + + - + + -