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;