From 4d35f613521b45a7526abf4f90f6dcd65d79f9d6 Mon Sep 17 00:00:00 2001 From: Emiel Van Severen Date: Sat, 8 Jun 2024 14:33:44 +0200 Subject: [PATCH] Revert "Chore: don't use layout with data" This reverts commit caa56013c8af1d2e2e3e3afc8dd7f3800fd14768. --- packages/web-main/src/components/Player.tsx | 2 +- .../_global/player.$playerId.economy.tsx | 75 ------------------- .../_auth/_global/player.$playerId.events.tsx | 44 ----------- ...PlayerDetails.tsx => player.$playerId.tsx} | 64 ++++++++++++---- .../-PlayerCurrency.tsx} | 0 .../-PlayerInventoryTable.tsx} | 0 .../-PlayerRolesTable.tsx} | 0 .../style.ts => player.$playerId/-style.ts} | 0 .../_global/player.$playerId/economy.tsx | 47 ++++++++++++ .../_auth/_global/player.$playerId/events.tsx | 18 +++++ .../_auth/_global/player.$playerId/index.tsx | 7 ++ .../info.tsx} | 71 +++++++----------- .../inventory.tsx} | 6 +- .../role.assign.tsx} | 0 .../src/routes/_auth/_global/users.tsx | 2 +- 15 files changed, 158 insertions(+), 178 deletions(-) delete mode 100644 packages/web-main/src/routes/_auth/_global/player.$playerId.economy.tsx delete mode 100644 packages/web-main/src/routes/_auth/_global/player.$playerId.events.tsx rename packages/web-main/src/routes/_auth/_global/{-player/PlayerDetails.tsx => player.$playerId.tsx} (51%) rename packages/web-main/src/routes/_auth/_global/{-player/PlayerCurrency.tsx => player.$playerId/-PlayerCurrency.tsx} (100%) rename packages/web-main/src/routes/_auth/_global/{-player/PlayerInventoryTable.tsx => player.$playerId/-PlayerInventoryTable.tsx} (100%) rename packages/web-main/src/routes/_auth/_global/{-player/PlayerRolesTable.tsx => player.$playerId/-PlayerRolesTable.tsx} (100%) rename packages/web-main/src/routes/_auth/_global/{-player/style.ts => player.$playerId/-style.ts} (100%) create mode 100644 packages/web-main/src/routes/_auth/_global/player.$playerId/economy.tsx create mode 100644 packages/web-main/src/routes/_auth/_global/player.$playerId/events.tsx create mode 100644 packages/web-main/src/routes/_auth/_global/player.$playerId/index.tsx rename packages/web-main/src/routes/_auth/_global/{player.$playerId.info.tsx => player.$playerId/info.tsx} (70%) rename packages/web-main/src/routes/_auth/_global/{player.$playerId.inventory.tsx => player.$playerId/inventory.tsx} (75%) rename packages/web-main/src/routes/_auth/_global/{player.$playerId.role.assign.tsx => player.$playerId/role.assign.tsx} (100%) diff --git a/packages/web-main/src/components/Player.tsx b/packages/web-main/src/components/Player.tsx index cfdbfbe819..3925cb9b08 100644 --- a/packages/web-main/src/components/Player.tsx +++ b/packages/web-main/src/components/Player.tsx @@ -47,7 +47,7 @@ export const Player: FC = ({ playerId, name, avatarUrl, showAvatar, return ( diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId.economy.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId.economy.tsx deleted file mode 100644 index b92f055d78..0000000000 --- a/packages/web-main/src/routes/_auth/_global/player.$playerId.economy.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { Skeleton } from '@takaro/lib-components'; -import { redirect, createFileRoute } from '@tanstack/react-router'; -import { playerQueryOptions } from 'queries/player'; -import { playersOnGameServersQueryOptions } from 'queries/pog'; -import { hasPermission } from 'hooks/useHasPermission'; -import { PERMISSIONS } from '@takaro/apiclient'; -import { FC } from 'react'; -import { useQueries, useQuery } from '@tanstack/react-query'; -import { Currency } from './-player/PlayerCurrency'; -import { GameServerSelect } from 'components/selects'; -import { useForm } from 'react-hook-form'; -import { playerOnGameServerQueryOptions } from 'queries/pog'; -import { PlayerDetails } from './-player/PlayerDetails'; - -type FormFields = { - gameServerId: string | undefined; -}; - -export const Route = createFileRoute('/_auth/_global/player/$playerId/economy')({ - beforeLoad: ({ context }) => { - if (!hasPermission(context.auth.session, [PERMISSIONS.ReadPlayers])) { - throw redirect({ to: '/forbidden' }); - } - }, - loader: async ({ params, context }) => { - const [player, pogs] = await Promise.all([ - context.queryClient.ensureQueryData(playerQueryOptions(params.playerId)), - context.queryClient.ensureQueryData( - playersOnGameServersQueryOptions({ filters: { playerId: [params.playerId] } }) - ), - ]); - return { player, pogs }; - }, - component: Component, - pendingComponent: () => , -}); - -function Component() { - const { playerId } = Route.useParams(); - const loaderData = Route.useLoaderData(); - - const [{ data: player }, { data: pogs }] = useQueries({ - queries: [ - { ...playerQueryOptions(playerId), initialData: loaderData.player }, - { ...playersOnGameServersQueryOptions({ filters: { playerId: [playerId] } }), initialData: loaderData.pogs }, - ], - }); - - const { control, watch } = useForm({ - mode: 'onChange', - }); - const gameServerId = watch('gameServerId'); - - return ( - <> - - - {gameServerId && } - - ); -} - -const CurrencyWrapper: FC<{ playerId: string; gameServerId: string }> = ({ playerId, gameServerId }) => { - const { data, isPending } = useQuery(playerOnGameServerQueryOptions(gameServerId, playerId)); - - if (isPending) { - return
Loading currency data
; - } - - if (!data) { - return
could not load data
; - } - - return ; -}; diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId.events.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId.events.tsx deleted file mode 100644 index f62d3ceb41..0000000000 --- a/packages/web-main/src/routes/_auth/_global/player.$playerId.events.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Skeleton, useTheme } from '@takaro/lib-components'; -import { EventFeedWidget } from 'components/events/EventFeedWidget'; -import { Section } from './-player/style'; -import { createFileRoute } from '@tanstack/react-router'; -import { playerQueryOptions } from 'queries/player'; -import { playersOnGameServersQueryOptions } from 'queries/pog'; -import { useQueries } from '@tanstack/react-query'; -import { PlayerDetails } from './-player/PlayerDetails'; - -export const Route = createFileRoute('/_auth/_global/player/$playerId/events')({ - loader: async ({ params, context }) => { - const [player, pogs] = await Promise.all([ - context.queryClient.ensureQueryData(playerQueryOptions(params.playerId)), - context.queryClient.ensureQueryData( - playersOnGameServersQueryOptions({ filters: { playerId: [params.playerId] } }) - ), - ]); - return { player, pogs }; - }, - component: Component, - pendingComponent: () => , -}); - -function Component() { - const { playerId } = Route.useParams(); - const loaderData = Route.useLoaderData(); - const theme = useTheme(); - - const [{ data: player }, { data: pogs }] = useQueries({ - queries: [ - { ...playerQueryOptions(playerId), initialData: loaderData.player }, - { ...playersOnGameServersQueryOptions({ filters: { playerId: [playerId] } }), initialData: loaderData.pogs }, - ], - }); - - return ( - <> - -
- -
- - ); -} diff --git a/packages/web-main/src/routes/_auth/_global/-player/PlayerDetails.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId.tsx similarity index 51% rename from packages/web-main/src/routes/_auth/_global/-player/PlayerDetails.tsx rename to packages/web-main/src/routes/_auth/_global/player.$playerId.tsx index 80dc3f1f34..41a5f5346c 100644 --- a/packages/web-main/src/routes/_auth/_global/-player/PlayerDetails.tsx +++ b/packages/web-main/src/routes/_auth/_global/player.$playerId.tsx @@ -1,14 +1,37 @@ -import { Stats, styled, useTheme, Avatar, getInitials, HorizontalNav } from '@takaro/lib-components'; +import { Stats, styled, Skeleton, useTheme, Avatar, getInitials, HorizontalNav } from '@takaro/lib-components'; +import { Outlet, redirect, createFileRoute } from '@tanstack/react-router'; import { DateTime } from 'luxon'; +import { playerQueryOptions } from 'queries/player'; +import { playersOnGameServersQueryOptions } from 'queries/pog'; import { useDocumentTitle } from 'hooks/useDocumentTitle'; -import { PlayerOnGameserverOutputArrayDTOAPI, PlayerOutputDTO } from '@takaro/apiclient'; -import { FC } from 'react'; +import { ErrorBoundary } from 'components/ErrorBoundary'; +import { hasPermission } from 'hooks/useHasPermission'; + +export const Route = createFileRoute('/_auth/_global/player/$playerId')({ + beforeLoad: ({ context }) => { + if (!hasPermission(context.auth.session, ['READ_PLAYERS'])) { + throw redirect({ to: '/forbidden' }); + } + }, + loader: async ({ params, context }) => { + const [player, pogs] = await Promise.all([ + context.queryClient.ensureQueryData(playerQueryOptions(params.playerId)), + context.queryClient.ensureQueryData( + playersOnGameServersQueryOptions({ filters: { playerId: [params.playerId] } }) + ), + ]); + return { player, pogs }; + }, + component: Component, + pendingComponent: () => , +}); const Container = styled.div` + height: 100%; + display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing['4']}; - margin-bottom: ${({ theme }) => theme.spacing['2']}; `; const Header = styled.div` @@ -16,12 +39,11 @@ const Header = styled.div` gap: ${({ theme }) => theme.spacing['1']}; `; -export const PlayerDetails: FC<{ player: PlayerOutputDTO; pogs: PlayerOnGameserverOutputArrayDTOAPI }> = ({ - player, - pogs, -}) => { - const theme = useTheme(); +function Component() { + const { playerId } = Route.useParams(); + const { player, pogs } = Route.useLoaderData(); useDocumentTitle(player.name || 'Player Profile'); + const theme = useTheme(); return ( @@ -60,22 +82,38 @@ export const PlayerDetails: FC<{ player: PlayerOutputDTO; pogs: PlayerOnGameserv { text: 'Info', to: '/player/$playerId/info', - params: { playerId: player.id }, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore reusable link + params: { playerId }, }, { text: 'Events', to: '/player/$playerId/events', - params: { playerId: player.id }, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore reusable link + params: { playerId }, }, { text: 'Economy', to: '/player/$playerId/economy', - params: { playerId: player.id }, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore reusable link + params: { playerId }, }, ]} variant="underline" /> + {/* + text: 'Inventory', + to: '/player/$playerId/inventory', + params: { playerId }, + + */} + , + + + ); -}; +} diff --git a/packages/web-main/src/routes/_auth/_global/-player/PlayerCurrency.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerCurrency.tsx similarity index 100% rename from packages/web-main/src/routes/_auth/_global/-player/PlayerCurrency.tsx rename to packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerCurrency.tsx diff --git a/packages/web-main/src/routes/_auth/_global/-player/PlayerInventoryTable.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerInventoryTable.tsx similarity index 100% rename from packages/web-main/src/routes/_auth/_global/-player/PlayerInventoryTable.tsx rename to packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerInventoryTable.tsx diff --git a/packages/web-main/src/routes/_auth/_global/-player/PlayerRolesTable.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerRolesTable.tsx similarity index 100% rename from packages/web-main/src/routes/_auth/_global/-player/PlayerRolesTable.tsx rename to packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerRolesTable.tsx diff --git a/packages/web-main/src/routes/_auth/_global/-player/style.ts b/packages/web-main/src/routes/_auth/_global/player.$playerId/-style.ts similarity index 100% rename from packages/web-main/src/routes/_auth/_global/-player/style.ts rename to packages/web-main/src/routes/_auth/_global/player.$playerId/-style.ts diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId/economy.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/economy.tsx new file mode 100644 index 0000000000..381373d88c --- /dev/null +++ b/packages/web-main/src/routes/_auth/_global/player.$playerId/economy.tsx @@ -0,0 +1,47 @@ +import { FC } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { createFileRoute } from '@tanstack/react-router'; +import { Currency } from './-PlayerCurrency'; +import { GameServerSelect } from 'components/selects'; +import { useForm } from 'react-hook-form'; +import { playerQueryOptions } from 'queries/player'; +import { playerOnGameServerQueryOptions } from 'queries/pog'; + +export const Route = createFileRoute('/_auth/_global/player/$playerId/economy')({ + component: Component, + loader: async ({ context, params }) => context.queryClient.ensureQueryData(playerQueryOptions(params.playerId)), +}); + +type FormFields = { + gameServerId: string | undefined; +}; + +function Component() { + const { playerId } = Route.useParams(); + + const { control, watch } = useForm({ + mode: 'onChange', + }); + const gameServerId = watch('gameServerId'); + + return ( + <> + + {gameServerId && } + + ); +} + +const CurrencyWrapper: FC<{ playerId: string; gameServerId: string }> = ({ playerId, gameServerId }) => { + const { data, isPending } = useQuery(playerOnGameServerQueryOptions(gameServerId, playerId)); + + if (isPending) { + return
Loading currency data
; + } + + if (!data) { + return
could not load data
; + } + + return ; +}; diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId/events.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/events.tsx new file mode 100644 index 0000000000..ab33d8dc0f --- /dev/null +++ b/packages/web-main/src/routes/_auth/_global/player.$playerId/events.tsx @@ -0,0 +1,18 @@ +import { useTheme } from '@takaro/lib-components'; +import { EventFeedWidget } from 'components/events/EventFeedWidget'; +import { Section } from './-style'; +import { createFileRoute } from '@tanstack/react-router'; + +export const Route = createFileRoute('/_auth/_global/player/$playerId/events')({ + component: Component, +}); + +function Component() { + const { playerId } = Route.useParams(); + const theme = useTheme(); + return ( +
+ +
+ ); +} diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId/index.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/index.tsx new file mode 100644 index 0000000000..358cfd381f --- /dev/null +++ b/packages/web-main/src/routes/_auth/_global/player.$playerId/index.tsx @@ -0,0 +1,7 @@ +import { createFileRoute } from '@tanstack/react-router'; + +export const Route = createFileRoute('/_auth/_global/player/$playerId/')({ + beforeLoad: ({ navigate, params }) => { + navigate({ to: '/player/$playerId/info', params: { playerId: params.playerId } }); + }, +}); diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId.info.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/info.tsx similarity index 70% rename from packages/web-main/src/routes/_auth/_global/player.$playerId.info.tsx rename to packages/web-main/src/routes/_auth/_global/player.$playerId/info.tsx index 07e4cd9239..64da77750e 100644 --- a/packages/web-main/src/routes/_auth/_global/player.$playerId.info.tsx +++ b/packages/web-main/src/routes/_auth/_global/player.$playerId/info.tsx @@ -1,63 +1,48 @@ -import { FC } from 'react'; import { IpHistoryOutputDTO, PlayerOutputDTO } from '@takaro/apiclient'; import { Card, CopyId, Tooltip, styled } from '@takaro/lib-components'; import { createFileRoute } from '@tanstack/react-router'; -import { PlayerRolesTable } from './-player/PlayerRolesTable'; -import { Section, Container, Scrollable } from './-player/style'; +import { PlayerRolesTable } from './-PlayerRolesTable'; +import { FC } from 'react'; +import { Section, Container, Scrollable } from './-style'; import { CountryCodeToEmoji } from 'components/CountryCodeToEmoji'; import { DateTime } from 'luxon'; import { playerQueryOptions } from 'queries/player'; -import { useQueries } from '@tanstack/react-query'; -import { playersOnGameServersQueryOptions } from 'queries/pog'; -import { PlayerDetails } from './-player/PlayerDetails'; +import { useQuery } from '@tanstack/react-query'; export const Route = createFileRoute('/_auth/_global/player/$playerId/info')({ component: Component, - loader: async ({ params, context }) => { - const [player, pogs] = await Promise.all([ - context.queryClient.ensureQueryData(playerQueryOptions(params.playerId)), - context.queryClient.ensureQueryData( - playersOnGameServersQueryOptions({ filters: { playerId: [params.playerId] } }) - ), - ]); - return { player, pogs }; - }, + loader: async ({ context, params }) => context.queryClient.ensureQueryData(playerQueryOptions(params.playerId)), }); function Component() { + const loadedPLayer = Route.useLoaderData(); const { playerId } = Route.useParams(); - const loaderData = Route.useLoaderData(); - const [{ data: player }, { data: pogs }] = useQueries({ - queries: [ - { ...playerQueryOptions(playerId), initialData: loaderData.player }, - { ...playersOnGameServersQueryOptions({ filters: { playerId: [playerId] } }), initialData: loaderData.pogs }, - ], + const { data: player } = useQuery({ + ...playerQueryOptions(playerId), + initialData: loadedPLayer, }); return ( - <> - - - -
-

Info

- - - - -
-
-

IP History

- -
- -
- -
- - - + + +
+

Info

+ + + + +
+
+

IP History

+ +
+ +
+ +
+ + ); } diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId.inventory.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/inventory.tsx similarity index 75% rename from packages/web-main/src/routes/_auth/_global/player.$playerId.inventory.tsx rename to packages/web-main/src/routes/_auth/_global/player.$playerId/inventory.tsx index a765666a70..19c25ede68 100644 --- a/packages/web-main/src/routes/_auth/_global/player.$playerId.inventory.tsx +++ b/packages/web-main/src/routes/_auth/_global/player.$playerId/inventory.tsx @@ -1,5 +1,5 @@ import { createFileRoute } from '@tanstack/react-router'; -import { Section } from './-player/style'; +import { Section } from './-style'; // import { PlayerInventoryTable } from './-PlayerInventoryTable'; // import { PlayerOnGameserverOutputDTO } from '@takaro/apiclient'; import { playerQueryOptions } from 'queries/player'; @@ -10,6 +10,10 @@ export const Route = createFileRoute('/_auth/_global/player/$playerId/inventory' }); function Component() { + // TODO: should get pog here somehow + // const { pog } = useOutletContext<{ pog: PlayerOnGameserverOutputDTO }>(); + //const pog = {} as PlayerOnGameserverOutputDTO; + return (
Temporarily disabled diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId.role.assign.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/role.assign.tsx similarity index 100% rename from packages/web-main/src/routes/_auth/_global/player.$playerId.role.assign.tsx rename to packages/web-main/src/routes/_auth/_global/player.$playerId/role.assign.tsx diff --git a/packages/web-main/src/routes/_auth/_global/users.tsx b/packages/web-main/src/routes/_auth/_global/users.tsx index 9f68b18734..0b6ad79a7c 100644 --- a/packages/web-main/src/routes/_auth/_global/users.tsx +++ b/packages/web-main/src/routes/_auth/_global/users.tsx @@ -27,7 +27,7 @@ import { useQuery } from '@tanstack/react-query'; export const Route = createFileRoute('/_auth/_global/users')({ beforeLoad: ({ context }) => { - if (!hasPermission(context.auth.session, [PERMISSIONS.ReadUsers])) { + if (!hasPermission(context.auth.session, ['READ_USERS'])) { throw redirect({ to: '/forbidden' }); } },