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;