significant refactor

src/features/players/components/profile/index.tsx

@@ -1,15 +1,15 @@
-import { Box, Button, Text, Title } from "@mantine/core";
+import { Box, Text } from "@mantine/core";
 import Header from "./header";
-import { testEvent } from "@/utils/test-event";
 import { Player } from "@/features/players/types";
-import TeamList from "@/features/teams/components/team-list";
 import SwipeableTabs from "@/components/swipeable-tabs";
+import { usePlayer } from "../../queries";
 
 interface ProfileProps {
-  player: Player;
+  id: string;
 }
 
-const Profile = ({ player }: ProfileProps) => {
+const Profile = ({ id }: ProfileProps) => {
+  const { data: player } = usePlayer(id);
   const tabs = [
     {
       label: "Overview",
@@ -20,10 +20,8 @@ const Profile = ({ player }: ProfileProps) => {
       content: <Text p="md">Matches feed will go here</Text>
     },
     {
-      label: "Teams", 
-      content: <>
-        <TeamList teams={player.teams || []} />
-      </>
+      label: "Teams",
+      content: <Text p="md">Teams will go here</Text>
     }
   ];
 

src/features/players/components/profile/name-form.tsx

@@ -1,11 +1,10 @@
 import { updatePlayer } from "@/features/players/server";
-import { useMutation } from "@tanstack/react-query";
 import { Stack, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import toast from "@/lib/sonner";
-import { useRouter } from "@tanstack/react-router";
 import { Player } from "../../types";
 import Button from "@/components/button";
+import { useOptimisticMutation } from "@/lib/tanstack-query/hooks";
+import { playerKeys } from "../../queries";
 
 interface NameUpdateFormProps {
   player: Player;
@@ -13,8 +12,6 @@ interface NameUpdateFormProps {
 }
 
 const NameUpdateForm = ({ player, toggle }: NameUpdateFormProps) => {
-  const router = useRouter();
-
   const form = useForm({
     initialValues: {
       first_name: player.first_name,
@@ -23,30 +20,32 @@ const NameUpdateForm = ({ player, toggle }: NameUpdateFormProps) => {
     validate: {
       first_name: (value: string | undefined) => {
         if (!value || value.length === 0) return "First name is required";
-        if (!/^[a-zA-Z\s]{3,20}$/.test(value))
-          return "First name must be 3-20 characters long and contain only letters";
+        if (!/^[a-zA-Z\s]{2,20}$/.test(value))
+          return "First name must be 2-20 characters long and contain only letters";
       },
       last_name: (value: string | undefined) => {
         if (!value || value.length === 0) return "Last name is required";
-        if (!/^[a-zA-Z\s]{3,20}$/.test(value))
-          return "Last name must be 3-20 characters long and contain only letters";
+        if (!/^[a-zA-Z\s]{2,20}$/.test(value))
+          return "Last name must be 2-20 characters long and contain only letters";
       },
     },
   });
 
-  const { mutate: updateName, isPending } = useMutation({
+  const { mutate: updateName, isPending } = useOptimisticMutation({
     mutationFn: async (data: { first_name: string; last_name: string }) =>
       await updatePlayer({ data }),
-    onSuccess: () => {
-      toggle();
-      toast.success("Name updated successfully!");
-      router.invalidate();
-    },
-    onError: () => {
-      toast.error(
-        "There was an issue updating your name. Please try again later."
-      );
+    onSuccess: toggle,
+    onError: toggle,
+    successMessage: "Name updated successfully!",
+    optimisticUpdate: (oldData, variables) => {
+      if (!oldData) return oldData;
+      return {
+        ...oldData,
+        first_name: variables.first_name,
+        last_name: variables.last_name,
+      };
     },
+    queryKey: playerKeys.details(player.id)
   });
 
   const handleSubmit = async (data: {