Revert "Chore: don't use layout with data"

This reverts commit caa5601.

packages/web-main/src/components/Player.tsx

@@ -47,7 +47,7 @@ export const Player: FC<PlayerProps> = ({ playerId, name, avatarUrl, showAvatar,
 
   return (
     <Link
-      to={'/player/$playerId/info'}
+      to={'/player/$playerId'}
       params={{ playerId }}
       style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', width: 'fit-content' }}
     >

packages/web-main/src/routes/_auth/_global/-player/PlayerDetails.tsx → packages/web-main/src/routes/_auth/_global/player.$playerId.tsx

@@ -1,27 +1,49 @@
-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: () => <Skeleton variant="rectangular" width="100%" height="100%" />,
+});
 
 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`
   display: flex;
   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 (
     <Container>
@@ -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 },
+
+        */}
+      ,
+      <ErrorBoundary>
+        <Outlet />
+      </ErrorBoundary>
     </Container>
   );
-};
+}

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<FormFields>({
+    mode: 'onChange',
+  });
+  const gameServerId = watch('gameServerId');
+
+  return (
+    <>
+      <GameServerSelect control={control} name="gameServerId" />
+      {gameServerId && <CurrencyWrapper playerId={playerId} gameServerId={gameServerId} />}
+    </>
+  );
+}
+
+const CurrencyWrapper: FC<{ playerId: string; gameServerId: string }> = ({ playerId, gameServerId }) => {
+  const { data, isPending } = useQuery(playerOnGameServerQueryOptions(gameServerId, playerId));
+
+  if (isPending) {
+    return <div>Loading currency data</div>;
+  }
+
+  if (!data) {
+    return <div>could not load data</div>;
+  }
+
+  return <Currency playerId={playerId} gameServerId={gameServerId} currency={data.currency} />;
+};

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 (
+    <Section style={{ height: '100%', overflowY: 'auto', paddingRight: theme.spacing[2] }}>
+      <EventFeedWidget query={{ filters: { playerId: [playerId] } }} />
+    </Section>
+  );
+}

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 } });
+  },
+});

packages/web-main/src/routes/_auth/_global/player.$playerId.info.tsx → 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 (
-    <>
-      <PlayerDetails player={player} pogs={pogs} />
-      <Scrollable>
-        <Container>
-          <Section>
-            <h2>Info</h2>
-            <CardContainer>
-              <PlayerInfoCard player={player} />
-              <SteamInfoCard player={player} />
-            </CardContainer>
-          </Section>
-          <Section>
-            <h2>IP History</h2>
-            <IpInfo ipInfo={player.ipHistory} />
-          </Section>
-
-          <Section>
-            <PlayerRolesTable roles={player?.roleAssignments} playerId={playerId} playerName={player?.name} />
-          </Section>
-        </Container>
-      </Scrollable>
-    </>
+    <Scrollable>
+      <Container>
+        <Section>
+          <h2>Info</h2>
+          <CardContainer>
+            <PlayerInfoCard player={player} />
+            <SteamInfoCard player={player} />
+          </CardContainer>
+        </Section>
+        <Section>
+          <h2>IP History</h2>
+          <IpInfo ipInfo={player.ipHistory} />
+        </Section>
+
+        <Section>
+          <PlayerRolesTable roles={player?.roleAssignments} playerId={playerId} playerName={player?.name} />
+        </Section>
+      </Container>
+    </Scrollable>
   );
 }