more optimizations

src/features/bracket/components/bracket-view.tsx

@@ -1,5 +1,5 @@
 import { Flex } from '@mantine/core';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { BracketMaps } from '../utils/bracket-maps';
 import { BracketRound } from './bracket-round';
 import { Match } from '../types';
@@ -16,7 +16,7 @@ const BracketView: React.FC<BracketViewProps> = ({
   onAnnounce,
 }) => {
 
-  const getParentMatchOrder = (parentLid: number): number | string => {
+  const getParentMatchOrder = useCallback((parentLid: number): number | string => {
     const parentMatch = bracketMaps.matchByLid.get(parentLid);
     if (
       parentMatch &&
@@ -26,7 +26,7 @@ const BracketView: React.FC<BracketViewProps> = ({
       return parentMatch.order;
     }
     return `Match ${parentLid}`;
-  };
+  }, [bracketMaps]);
 
   return (
     <Flex direction="row" gap={24} justify="left" pos="relative" p="xl">

src/features/bracket/components/match-card.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Card, Text } from '@mantine/core';
 import { PlayIcon } from '@phosphor-icons/react';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { MatchSlot } from './match-slot';
 import { Match } from '../types';
 
@@ -15,6 +15,14 @@ export const MatchCard: React.FC<MatchCardProps> = ({
   getParentMatchOrder, 
   onAnnounce 
 }) => {
+
+  const showAnnounce = useMemo(() => 
+    onAnnounce && match.home.team && match.away.team, 
+  [onAnnounce, match.home.team, match.away.team]);
+
+  const handleAnnounce = useCallback(() => 
+    onAnnounce?.(match.home.team, match.away.team), [match.home.team, match.away.team]);
+
   return (
     <Card
       withBorder
@@ -44,16 +52,14 @@ export const MatchCard: React.FC<MatchCardProps> = ({
         </Text>
       )}
       
-      {onAnnounce && match.home?.team && match.away?.team && (
+      {showAnnounce && (
         <ActionIcon
           pos="absolute"
           variant="filled"
           color="green"
           top={-20}
           right={-12}
-          onClick={() => {
+          onClick={handleAnnounce}
-            onAnnounce(match.home.team, match.away.team);
-          }}
           bd="none"
           style={{ boxShadow: 'none' }}
           size="xs"

src/features/players/components/player-list.tsx

@@ -2,6 +2,7 @@ import { List, ListItem, Skeleton, Text } from "@mantine/core";
 import { useNavigate } from "@tanstack/react-router";
 import Avatar from "@/components/avatar";
 import { Player } from "@/features/players/types";
+import { useCallback } from "react";
 
 interface PlayerListProps {
   players: Player[];
@@ -11,6 +12,9 @@ interface PlayerListProps {
 const PlayerList = ({ players, loading = false }: PlayerListProps) => {
   const navigate = useNavigate();
 
+  const handleClick = useCallback((playerId: string) => 
+    navigate({ to: `/profile/${playerId} `}), [navigate]);
+  
   if (loading) return <List>
     {Array.from({ length: 10 }).map((_, i) => (
       <ListItem py='xs' key={`skeleton-${i}`}
@@ -27,9 +31,7 @@ const PlayerList = ({ players, loading = false }: PlayerListProps) => {
         py='xs'
         icon={<Avatar size={40} name={`${player.first_name} ${player.last_name}`} />}
         style={{ cursor: 'pointer' }}
-        onClick={() => {
+        onClick={() => handleClick(player.id)}
-          navigate({ to: `/profile/${player.id}` });
-        }}
       >
         <Text fw={500}>{`${player.first_name} ${player.last_name}`}</Text>
       </ListItem>

src/features/players/types.ts

@@ -2,7 +2,7 @@ import { Team } from "@/features/teams/types";
 import { z } from 'zod';
 
 export interface Player {
-  id?: string;
+  id: string;
   auth_id?: string;
   first_name?: string;
   last_name?: string;

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

@@ -2,6 +2,22 @@ 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";
+import { useCallback, useMemo } from "react";
+import React from "react";
+
+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]);
+
+  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[];
@@ -11,6 +27,9 @@ interface TeamListProps {
 const TeamList = ({ teams, loading = false }: TeamListProps) => {
   const navigate = useNavigate();
 
+  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} />}
@@ -26,13 +45,9 @@ const TeamList = ({ teams, loading = false }: TeamListProps) => {
           py='xs'
           icon={<Avatar radius='sm' size={40} name={`${team.name}`} />}
           style={{ cursor: 'pointer' }}
-          onClick={() => navigate({ to: `/teams/${team.id}` })}
+          onClick={() => handleClick(team.id)}
           >
-            <Stack gap={0}>
+            <TeamListItem team={team} />
-              <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>

src/features/tournaments/components/tournament-form.tsx

@@ -11,6 +11,7 @@ import { logger } from "..";
 import { useQueryClient } from "@tanstack/react-query";
 import { tournamentQueries } from "@/features/tournaments/queries";
 import { DateTimePicker } from "@mantine/dates";
+import { useCallback } from "react";
 
 interface TournamentFormProps {
   close: () => void;
@@ -48,7 +49,7 @@ const TournamentForm = ({ close, initialValues, tournamentId }: TournamentFormPr
   
   const isPending = createPending || updatePending;
 
-  const handleSubmit = async (values: TournamentFormInput) => {
+  const handleSubmit = useCallback(async (values: TournamentFormInput) => {
     const { logo, ...tournamentData } = values;
     
     const mutation = isEditMode ? updateTournament : createTournament;
@@ -100,7 +101,7 @@ const TournamentForm = ({ close, initialValues, tournamentId }: TournamentFormPr
         logger.error(`Tournament ${isEditMode ? 'update' : 'create'} error`, error);
       }
     });
-  }
+  }, [isEditMode, createTournament, updateTournament, queryClient]);
 
   return (
     <SlidePanel

src/features/tournaments/components/tournament-list.tsx

@@ -2,6 +2,7 @@ import { List, ListItem, Skeleton, Text } from "@mantine/core";
 import { useNavigate } from "@tanstack/react-router";
 import Avatar from "@/components/avatar";
 import { Tournament } from "../types";
+import { useCallback } from "react";
 
 interface TournamentListProps {
   tournaments: Tournament[];
@@ -11,6 +12,9 @@ interface TournamentListProps {
 const TournamentList = ({ tournaments, loading = false }: TournamentListProps) => {
   const navigate = useNavigate();
 
+  const handleClick = useCallback((tournamentId: string) => 
+    navigate({ to: `/tournaments/${tournamentId}` }), [navigate]);
+  
   if (loading) return <List>
     {Array.from({ length: 10 }).map((_, i) => (
       <ListItem py='xs' key={`skeleton-${i}`}
@@ -27,9 +31,7 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
         py='xs'
         icon={<Avatar radius='xs' size={40} name={`${tournament.name}`} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />}
         style={{ cursor: 'pointer' }}
-        onClick={() => {
+        onClick={() => handleClick(tournament.id)}
-          navigate({ to: `/tournaments/${tournament.id}` });
-        }}
       >
         <Text fw={500}>{`${tournament.name}`}</Text>
       </ListItem>