add a player description

src/components/Description.tsx

@@ -0,0 +1,89 @@
+import useUpdateUserMutation from '@hooks/mutations/useUpdateUserMutation';
+import { useRef, useState } from 'react';
+import toast from 'react-hot-toast/headless';
+
+interface DescriptionProps {
+  value: string | null;
+}
+
+const Description = ({ value }: DescriptionProps) => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [description, setDescription] = useState<string | undefined>(
+    value ?? undefined,
+  );
+
+  const { mutateAsync, isLoading } = useUpdateUserMutation();
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleCancel = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      setIsEditing(false);
+    }
+  };
+
+  const handleSave = async () => {
+    const value = ref.current?.value.trim();
+
+    if (value) {
+      try {
+        await mutateAsync({ description: value }).then(() => {
+          setDescription(value);
+          setIsEditing(false);
+        });
+      } catch (error) {
+        if (error instanceof Error) {
+          toast('Something went wrong!');
+          return;
+        }
+      }
+    }
+  };
+
+  if (!isEditing) {
+    return (
+      <div
+        className="-mx-2 -my-1 cursor-pointer rounded-lg px-2 py-1 text-sm transition-colors hover:bg-black-pearl-800"
+        onClick={handleEdit}
+      >
+        {!description ? (
+          <p className="text-slate-400">Tell something about yourself...</p>
+        ) : (
+          <p>{description}</p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-end">
+      <textarea
+        ref={ref}
+        defaultValue={description}
+        className="textarea textarea-bordered h-32 w-full"
+        onKeyDown={handleCancel}
+        autoFocus
+        onFocus={(e) => {
+          const val = e.target.value;
+          e.target.value = '';
+          e.target.value = val;
+        }}
+      />
+      <button
+        className="btn btn-sm mt-2 bg-primary text-neutral hover:bg-anzac-300"
+        onClick={handleSave}
+      >
+        {!isLoading ? (
+          'Save'
+        ) : (
+          <span className="loading loading-spinner"></span>
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default Description;

src/hooks/mutations/useUpdateUserMutation.ts

@@ -3,28 +3,31 @@ import { useAuth } from '@contexts/AuthContext';
 import { useMutation } from '@tanstack/react-query';
 
 interface UpdateUserMutationProps {
-  group: string | null;
+  group?: string | null;
+  description?: string | null;
 }
 
 const useUpdateUserMutation = () => {
   const { user } = useAuth();
 
-  return useMutation(async ({ group }: UpdateUserMutationProps) => {
-    if (!user) {
-      throw new Error('You must be logged in to do this.');
-    }
+  return useMutation(
+    async ({ group, description }: UpdateUserMutationProps) => {
+      if (!user) {
+        throw new Error('You must be logged in to do this.');
+      }
 
-    const { data, error } = await supabase
-      .from('users')
-      .update({ group_id: group })
-      .eq('id', user.id);
+      const { data, error } = await supabase
+        .from('users')
+        .update({ group_id: group, description })
+        .eq('id', user.id);
 
-    if (error) {
-      throw new Error(error.message);
-    }
+      if (error) {
+        throw new Error(error.message);
+      }
 
-    return data;
-  });
+      return data;
+    },
+  );
 };
 
 export default useUpdateUserMutation;

src/pages/Player.tsx

@@ -4,8 +4,12 @@ import { format } from 'date-fns';
 import usePlayerQuery from '@hooks/queries/usePlayerQuery';
 import Stats from '@components/Stats';
 import PlayerVote from '@components/PlayerVote';
+import Description from '@components/Description';
+import { useAuth } from '@contexts/AuthContext';
 
 const Player = () => {
+  const { user } = useAuth();
+
   const { username = '' } = useParams();
 
   const { data: player, isLoading } = usePlayerQuery(username);
@@ -18,16 +22,25 @@ const Player = () => {
     return <p>This player does not exist on runefinder.</p>;
   }
 
+  const isPlayerMe = player.id === user?.id;
+
   return (
     <div className="container pt-4">
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-5">
         <div className="col-span-1 rounded-xl bg-black-pearl-900 p-4 sm:col-span-2">
-          <div className="align flex items-center justify-between">
+          <div className="align mb-2 flex items-center justify-between">
             <p className="text-xl font-bold">{username}</p>
             <PlayerVote playerId={player.id} />
           </div>
+          {isPlayerMe ? (
+            <Description value={player.description} />
+          ) : (
+            player.description && (
+              <p className="text-sm">{player.description}</p>
+            )
+          )}
           <div className="divider my-1" />
-          <p className="text-xs font-bold">
+          <p className="mt-2 text-xs font-bold">
             {'Member since: '}
             <span className="font-normal">
               {format(new Date(player.created_at), 'd MMM yyyy')}

src/types/supabase.ts

@@ -83,12 +83,14 @@ export interface Database {
           {
             foreignKeyName: 'groups_created_by_fkey';
             columns: ['created_by'];
+            isOneToOne: false;
             referencedRelation: 'users';
             referencedColumns: ['id'];
           },
           {
             foreignKeyName: 'groups_type_fkey';
             columns: ['type'];
+            isOneToOne: false;
             referencedRelation: 'activities';
             referencedColumns: ['id'];
           },
@@ -117,12 +119,14 @@ export interface Database {
           {
             foreignKeyName: 'player_votes_player_id_fkey';
             columns: ['player_id'];
+            isOneToOne: false;
             referencedRelation: 'users';
             referencedColumns: ['id'];
           },
           {
             foreignKeyName: 'player_votes_user_id_fkey';
             columns: ['user_id'];
+            isOneToOne: false;
             referencedRelation: 'users';
             referencedColumns: ['id'];
           },
@@ -131,20 +135,23 @@ export interface Database {
       users: {
         Row: {
           created_at: string;
+          description: string | null;
           group_id: string | null;
           id: string;
           stats: Stats | null;
           username: string | null;
         };
         Insert: {
           created_at?: string;
+          description?: string | null;
           group_id?: string | null;
           id: string;
           stats?: Stats | null;
           username?: string | null;
         };
         Update: {
           created_at?: string;
+          description?: string | null;
           group_id?: string | null;
           id?: string;
           stats?: Stats | null;
@@ -154,12 +161,14 @@ export interface Database {
           {
             foreignKeyName: 'users_group_id_fkey';
             columns: ['group_id'];
+            isOneToOne: false;
             referencedRelation: 'groups';
             referencedColumns: ['id'];
           },
           {
             foreignKeyName: 'users_id_fkey';
             columns: ['id'];
+            isOneToOne: true;
             referencedRelation: 'users';
             referencedColumns: ['id'];
           },