implement leave/delete server options

Author: multimokia

components/home/Server.tsx

@@ -24,6 +24,8 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { ServerPermissions } from '@/types/permissions';
 import PlusIcon from '@/components/icons/PlusIcon';
 import GearIcon from '@/components/icons/GearIcon';
+import { deleteServer, leaveServer } from '@/services/server.service';
+import TrashIcon from '@/components/icons/TrashIcon';
 
 export default function Server({
   server,
@@ -57,6 +59,8 @@ export default function Server({
     handleAsync();
   }, [server, supabase]);
 
+  console.log((serverPermissions & 1) === 0 ? 'Not owner' : 'Owner' );
+
   if (expand) {
     return (
       <div className="relative overflow-x-visible">
@@ -127,6 +131,35 @@ export default function Server({
                     <span className="ml-2 w-full">Server Settings</span>
                   </div>
                 </DropdownMenu.Item>
+                <DropdownMenu.Separator className="DropdownMenuSeparator" />
+                {(serverPermissions & 1) === 0 && (
+                  <DropdownMenu.Item asChild
+                    className="flex justify-center items-center text-red-500 hover:text-grey-300 cursor-pointer"
+                    onClick={async () => {
+                      await leaveServer(supabase, user!.id, server.id);
+                    }}
+                    hidden={(serverPermissions & 1) === 1}
+                  >
+                    <div className="flex flex-row w-full">
+                      <GearIcon width={5} height={5} />
+                      <span className="ml-2 w-full">Leave Server</span>
+                    </div>
+                  </DropdownMenu.Item>
+                )}
+                {(serverPermissions & 1) === 1 && (
+                  <DropdownMenu.Item asChild
+                    className="flex justify-center items-center text-red-500 hover:text-grey-300 cursor-pointer"
+                    onClick={async () => {
+                      // TODO: Add confirmation modal
+                      await deleteServer(supabase, server.id);
+                    }}
+                  >
+                    <div className="flex flex-row w-full">
+                      <TrashIcon />
+                      <span className="ml-2 w-full">Delete Server</span>
+                    </div>
+                  </DropdownMenu.Item>
+                )}
               </DropdownMenu.Content>
             </DropdownMenu.Portal>
           </DropdownMenu.Root>

services/server.service.ts

@@ -65,19 +65,37 @@ export type UpdateServerResponseError = UpdateServerResponse['error'];
 
 export async function deleteServer(
   supabase: SupabaseClient<Database>,
-  user_id: string,
   server_id: number
 ) {
   // NOTE: only the owner should be able to delete a server. This is enforced by RLS
   // NOTE: Supabase has been set up to cascade delete all items related to a server (roles/invites/channels/messages)
   // So we can delete the server itself
-  return await supabase.from('servers').delete().eq('id', server_id);
+  return await supabase
+    .from('servers')
+    .delete()
+    .eq('id', server_id);
 }
 
 type DeleteServerResponse = Awaited<ReturnType<typeof deleteServer>>;
 export type DeleteServerResponseSuccess = DeleteServerResponse['data'];
 export type DeleteServerResponseError = DeleteServerResponse['error'];
 
+export async function leaveServer(
+  supabase: SupabaseClient<Database>,
+  user_id: string,
+  server_id: number
+) {
+  return await supabase
+    .from('server_users')
+    .delete()
+    .eq('profile_id', user_id)
+    .eq('server_id', server_id);
+}
+
+type LeaveServerResponse = Awaited<ReturnType<typeof leaveServer>>;
+export type LeaveServerResponseSuccess = LeaveServerResponse['data'];
+export type LeaveServerResponseError = LeaveServerResponse['error'];
+
 export async function getServersForUser(
   supabase: SupabaseClient<Database>,
   user_id: string