init

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

@@ -0,0 +1,42 @@
+import { Group, 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";
+
+interface TeamListProps {
+  teams: Team[];
+  loading?: boolean;
+}
+
+const TeamList = ({ teams, loading = false }: TeamListProps) => {
+  const navigate = useNavigate();
+
+  if (loading) return <List>
+    {Array.from({ length: 10 }).map((_, i) => (
+      <ListItem 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={() => navigate({ to: `/teams/${team.id}` })}
+          >
+            <Stack gap={0}>
+              <Text fw={500}>{`${team.name}`}</Text>
+              {team.players?.map(p => <Text size='xs' c='dimmed'>{p.first_name} {p.last_name}</Text>)}
+            </Stack>
+
+        </ListItem>
+    ))}
+  </List>
+}
+
+export default TeamList;

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

@@ -0,0 +1,22 @@
+import { Flex, Title } from "@mantine/core";
+import Avatar from "@/components/avatar";
+import { Team } from "../../types";
+
+interface HeaderProps {
+  team: Team;
+}
+
+const Header = ({ team }: 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>
+      </Flex>
+    </>
+  )
+};
+
+export default Header;

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

@@ -0,0 +1,21 @@
+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";
+
+interface ProfileProps {
+  team: Team;
+}
+
+const TeamProfile = ({ team }: ProfileProps) => {
+  return <>
+    <Header team={team} />
+    <Box m='sm' mt='lg'>
+      <Text size='xl' fw={600}>Players</Text>
+      <PlayerList players={team.players} />
+    </Box>
+  </>;
+};
+
+export default TeamProfile;

src/features/teams/index.tsx

@@ -0,0 +1,3 @@
+import { Logger } from "@/lib/logger";
+
+export const logger = new Logger("Teams");

src/features/teams/queries.ts

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

src/features/teams/server.ts

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

src/features/teams/types.ts

@@ -0,0 +1,47 @@
+import { Player } from "@/features/players/types";
+import { z } from 'zod';
+
+export interface Team {
+  id: string;
+  name: string;
+  logo_url: string;
+  primary_color: string;
+  accent_color: string;
+  song_id: string;
+  song_name: string;
+  song_artist: string;
+  song_album: string;
+  song_year: number;
+  song_start: number;
+  song_end: number;
+  song_image_url: string;
+  created: string;
+  updated: string;
+  players: Player[];
+}
+
+export const teamInputSchema = z.object({
+  name: z.string().min(1, "Team name is required").max(100, "Name too long"),
+  logo_url: z.url("Invalid logo URL").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>;