significant refactor

src/features/teams/components/team-list.tsx

@@ -1,23 +1,32 @@
-import { Group, List, ListItem, Skeleton, Stack, Text } from "@mantine/core";
+import { List, ListItem, Skeleton, Stack, Text } from "@mantine/core";
 import Avatar from "@/components/avatar";
 import { Team } from "@/features/teams/types";
 import { useNavigate } from "@tanstack/react-router";
 import { useCallback, useMemo } from "react";
 import React from "react";
 
-interface TeamListItemProps { team: Team }
+interface TeamListItemProps {
+  team: Team;
+}
 const TeamListItem = React.memo(({ team }: TeamListItemProps) => {
-  const playerNames = useMemo(() => team.players?.map(p => `${p.first_name} ${p.last_name}`) || [], [team.players]);
+  const playerNames = useMemo(
+    () => team.players?.map((p) => `${p.first_name} ${p.last_name}`) || [],
+    [team.players]
+  );
 
-  return <>
-    <Stack gap={0}>
-      <Text fw={500}>{`${team.name}`}</Text>
-      {
-        playerNames.map(name => <Text size='xs' c='dimmed'>{name}</Text>)
-      }
-    </Stack>
-  </>
-})
+  return (
+    <>
+      <Stack gap={0}>
+        <Text fw={500}>{`${team.name}`}</Text>
+        {playerNames.map((name) => (
+          <Text size="xs" c="dimmed">
+            {name}
+          </Text>
+        ))}
+      </Stack>
+    </>
+  );
+});
 
 interface TeamListProps {
   teams: Team[];
@@ -27,30 +36,41 @@ interface TeamListProps {
 const TeamList = ({ teams, loading = false }: TeamListProps) => {
   const navigate = useNavigate();
 
-  const handleClick = useCallback((teamId: string) =>
-    navigate({ to: `/teams/${teamId}` }), [navigate]);
+  const handleClick = useCallback(
+    (teamId: string) => navigate({ to: `/teams/${teamId}` }),
+    [navigate]
+  );
 
-  if (loading) return <List>
-    {Array.from({ length: 10 }).map((_, i) => (
-      <ListItem key={`skeleton-${i}`} py='xs' icon={<Skeleton height={40} width={40} />}
-      >
-        <Skeleton height={35} width={200} />
-      </ListItem>
-    ))}
-  </List>
-
-  return <List>
-    {teams?.map((team) => (
-        <ListItem key={team.id}
-          py='xs'
-          icon={<Avatar radius='sm' size={40} name={`${team.name}`} />}
-          style={{ cursor: 'pointer' }}
-          onClick={() => handleClick(team.id)}
+  if (loading)
+    return (
+      <List>
+        {Array.from({ length: 10 }).map((_, i) => (
+          <ListItem
+            key={`skeleton-${i}`}
+            py="xs"
+            icon={<Skeleton height={40} width={40} />}
           >
-            <TeamListItem team={team} />
+            <Skeleton height={35} width={200} />
+          </ListItem>
+        ))}
+      </List>
+    );
+
+  return (
+    <List>
+      {teams?.map((team) => (
+        <ListItem
+          key={team.id}
+          py="xs"
+          icon={<Avatar radius="sm" size={40} name={`${team.name}`} />}
+          style={{ cursor: "pointer" }}
+          onClick={() => handleClick(team.id)}
+        >
+          <TeamListItem team={team} />
         </ListItem>
-    ))}
-  </List>
-}
+      ))}
+    </List>
+  );
+};
 
 export default TeamList;

src/features/teams/components/team-profile/header.tsx

@@ -3,20 +3,23 @@ import Avatar from "@/components/avatar";
 import { Team } from "../../types";
 
 interface HeaderProps {
-  team: Team;
+  name: string;
+  logo?: string;
 }
 
-const Header = ({ team }: HeaderProps) => {
+const Header = ({ name, logo }: HeaderProps) => {
   return (
     <>
-      <Flex px='xl' w='100%' align='self-end' gap='md'>
-        <Avatar radius='sm' name={team.name} size={125} />
-        <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
-          <Title ta='center' order={2}>{team.name}</Title>
+      <Flex px="xl" w="100%" align="self-end" gap="md">
+        <Avatar radius="sm" name={name} size={125} />
+        <Flex align="center" justify="center" gap={4} pb={20} w="100%">
+          <Title ta="center" order={2}>
+            {name}
+          </Title>
         </Flex>
       </Flex>
     </>
-  )
+  );
 };
 
-export default Header;
+export default Header;

src/features/teams/components/team-profile/index.tsx

@@ -1,39 +1,43 @@
 import { Box, Text } from "@mantine/core";
 import Header from "./header";
-import TeamList from "@/features/teams/components/team-list";
-import { Team } from "../../types";
-import PlayerList from "@/features/players/components/player-list";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import TournamentList from "@/features/tournaments/components/tournament-list";
+import { useTeam } from "../../queries";
 
 interface ProfileProps {
-  team: Team;
+  id: string;
 }
 
-const TeamProfile = ({ team }: ProfileProps) => {
-  console.log(team);
+const TeamProfile = ({ id }: ProfileProps) => {
+  const { data: team } = useTeam(id);
+  if (!team) return <Text p="md">Team not found</Text>;
+
   const tabs = [
     {
       label: "Overview",
-      content: <Text p="md">Stats/Badges will go here</Text>
+      content: <Text p="md">Stats/Badges will go here</Text>,
     },
     {
       label: "Matches",
-      content: <Text p="md">Matches feed will go here</Text>
+      content: <Text p="md">Matches feed will go here</Text>,
     },
     {
-      label: "Tournaments", 
-      content: <>
-        <TournamentList tournaments={team.tournaments || []} />
-      </>
-    }
+      label: "Tournaments",
+      content: (
+        <>
+          <TournamentList tournaments={team.tournaments || []} />
+        </>
+      ),
+    },
   ];
-  return <>
-    <Header team={team} />
-    <Box m='sm' mt='lg'>
-      <SwipeableTabs tabs={tabs} />
-    </Box>
-  </>;
+  return (
+    <>
+      <Header name={team.name} logo={team.logo} />
+      <Box m="sm" mt="lg">
+        <SwipeableTabs tabs={tabs} />
+      </Box>
+    </>
+  );
 };
 
 export default TeamProfile;

src/features/teams/queries.ts

@@ -1,13 +1,16 @@
-import { queryOptions } from "@tanstack/react-query";
+import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";  
 import { getTeam } from "./server";
 
-const teamKeys = {
+export const teamKeys = {
   details: (id: string) => ['teams', 'details', id] as const,
 };
 
 export const teamQueries = {
-  details: (id: string) => queryOptions({
+  details: (id: string) => ({
     queryKey: teamKeys.details(id),
     queryFn: () => getTeam({ data: id }),
   }),
 };
+
+export const useTeam = (id: string) =>
+  useServerSuspenseQuery(teamQueries.details(id));

src/features/teams/server.ts

@@ -1,13 +1,12 @@
 import { superTokensFunctionMiddleware } from "@/utils/supertokens";
 import { createServerFn } from "@tanstack/react-start";
 import { pbAdmin } from "@/lib/pocketbase/client";
-import { logger } from ".";
 import { z } from "zod";
+import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
 
 export const getTeam = createServerFn()
   .validator(z.string())
   .middleware([superTokensFunctionMiddleware])
-  .handler(async ({ data: teamId }) => {
-    logger.info('Getting team', teamId);
-    return await pbAdmin.getTeam(teamId);
-  });
+  .handler(async ({ data: teamId }) => 
+    toServerResult(() => pbAdmin.getTeam(teamId))
+  );

src/features/teams/types.ts

@@ -1,5 +1,5 @@
 import { Player } from "@/features/players/types";
-import { z } from 'zod';
+import { z } from "zod";
 import { Tournament } from "../tournaments/types";
 
 export interface Team {
@@ -22,28 +22,36 @@ export interface Team {
   tournaments: Tournament[];
 }
 
-export const teamInputSchema = z.object({
-  name: z.string().min(1, "Team name is required").max(100, "Name too long"),
-  logo: z.file("Invalid logo").optional(),
-  primary_color: z.string().regex(/^#[0-9A-F]{6}$/i, "Must be valid hex color (#FF0000)").optional(),
-  accent_color: z.string().regex(/^#[0-9A-F]{6}$/i, "Must be valid hex color (#FF0000)").optional(),
-  song_id: z.string().max(255).optional(),
-  song_name: z.string().max(255).optional(),
-  song_artist: z.string().max(255).optional(),
-  song_album: z.string().max(255).optional(),
-  song_year: z.number().int().optional(),
-  song_start: z.number().int().optional(),
-  song_end: z.number().int().optional(),
-  song_image_url: z.url("Invalid song image URL").optional(),
-}).refine(
-  (data) => {
-    if (data.song_start && data.song_end) {
-      return data.song_end > data.song_start;
-    }
-    return true;
-  },
-  { message: "Song end time must be after start time", path: ["song_end"] }
-);
+export const teamInputSchema = z
+  .object({
+    name: z.string().min(1, "Team name is required").max(100, "Name too long"),
+    logo: z.file("Invalid logo").optional(),
+    primary_color: z
+      .string()
+      .regex(/^#[0-9A-F]{6}$/i, "Must be valid hex color (#FF0000)")
+      .optional(),
+    accent_color: z
+      .string()
+      .regex(/^#[0-9A-F]{6}$/i, "Must be valid hex color (#FF0000)")
+      .optional(),
+    song_id: z.string().max(255).optional(),
+    song_name: z.string().max(255).optional(),
+    song_artist: z.string().max(255).optional(),
+    song_album: z.string().max(255).optional(),
+    song_year: z.number().int().optional(),
+    song_start: z.number().int().optional(),
+    song_end: z.number().int().optional(),
+    song_image_url: z.url("Invalid song image URL").optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.song_start && data.song_end) {
+        return data.song_end > data.song_start;
+      }
+      return true;
+    },
+    { message: "Song end time must be after start time", path: ["song_end"] }
+  );
 
 export type TeamInput = z.infer<typeof teamInputSchema>;
 export type TeamUpdateInput = Partial<TeamInput>;