feat: Leave organisation button

Author: TheMythologist

components/admin/OrganisationModal.tsx

@@ -221,7 +221,7 @@ export default function OrganisationModal({
               )}
             />
             <DialogFooter className='sm:justify-between'>
-              {selectedOrganisation !== null && (
+              {selectedOrganisation !== null && authToken?.isAdmin && (
                 <AlertDialog>
                   <AlertDialogTrigger asChild>
                     <Button

components/admin/Organisations.tsx

@@ -6,6 +6,7 @@ import {
   ChevronRightIcon,
   ChevronsLeftIcon,
   ChevronsRightIcon,
+  CircleArrowLeftIcon,
   EditIcon,
   SearchIcon,
   Trash2Icon,
@@ -48,7 +49,9 @@ import {
   createOrganisation,
   deleteOrganisation,
   editOrganisation,
+  leaveOrganisation,
 } from '@/lib/actions/organisation';
+import { useAuth } from '@/lib/hooks/useAuth';
 import { NewOrganisationClientSchema } from '@/lib/schema/organisation';
 import { IGCategory, type Organisation } from '@/prisma/generated/prisma';
 
@@ -61,6 +64,7 @@ interface OrganisationsPageProps {
 export default function OrganisationsPage({
   organisations,
 }: OrganisationsPageProps) {
+  const isAuthenticated = useAuth();
   const [searchTerm, setSearchTerm] = useState('');
   const [categoryFilter, setCategoryFilter] = useState('All categories');
 
@@ -84,6 +88,11 @@ export default function OrganisationsPage({
     deleteOrganisationAction,
     deleteOrganisationPending,
   ] = useActionState(deleteOrganisation, null);
+  const [
+    leaveOrganisationState,
+    leaveOrganisationAction,
+    leaveOrganisationPending,
+  ] = useActionState(leaveOrganisation, null);
 
   const form = useForm<z.input<typeof NewOrganisationClientSchema>>({
     resolver: standardSchemaResolver(NewOrganisationClientSchema),
@@ -160,6 +169,14 @@ export default function OrganisationsPage({
     });
   };
 
+  const handleLeaveSubmit = (organisationId: number) => {
+    const leaveOrganisation = new FormData();
+    leaveOrganisation.set('id', organisationId.toString());
+    leaveOrganisationAction(leaveOrganisation);
+    setSelectedOrganisation(null);
+    setIsModalOpen(false);
+  };
+
   // Filter organizations based on search and category
   const filteredOrganisations = organisations.filter((org) => {
     const matchesSearch = org.name
@@ -322,37 +339,74 @@ export default function OrganisationsPage({
                     <EditIcon className='mr-1 h-4 w-4' />
                     EDIT
                   </Button>
-                  <AlertDialog>
-                    <AlertDialogTrigger asChild>
-                      <Button
-                        variant='outline'
-                        size='sm'
-                        className='border-orange-200 text-orange-600 hover:border-orange-300 hover:text-orange-800'
-                      >
-                        <Trash2Icon className='mr-1 h-4 w-4' />
-                        DELETE
-                      </Button>
-                    </AlertDialogTrigger>
-                    <AlertDialogContent>
-                      <AlertDialogHeader>
-                        <AlertDialogTitle>
-                          Are you absolutely sure?
-                        </AlertDialogTitle>
-                        <AlertDialogDescription>
-                          This action cannot be undone. This will permanently
-                          delete the organisation &quot;{org.name}&quot;.
-                        </AlertDialogDescription>
-                      </AlertDialogHeader>
-                      <AlertDialogFooter>
-                        <AlertDialogCancel>Cancel</AlertDialogCancel>
-                        <AlertDialogAction
-                          onClick={() => handleDeleteSubmit(org.id)}
+                  {isAuthenticated?.userOrgs?.find(
+                    (userOrg) => userOrg.id === org.id,
+                  ) && (
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button
+                          variant='outline'
+                          size='sm'
+                          className='border-orange-200 text-orange-600 hover:border-orange-300 hover:text-orange-800'
+                        >
+                          <CircleArrowLeftIcon className='mr-1 h-4 w-4' />
+                          LEAVE
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>
+                            Are you absolutely sure?
+                          </AlertDialogTitle>
+                          <AlertDialogDescription>
+                            This action cannot be undone. You will no longer be
+                            a part of the organisation &quot;{org.name}&quot;.
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={() => handleLeaveSubmit(org.id)}
+                          >
+                            Continue
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  )}
+                  {isAuthenticated?.isAdmin && (
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button
+                          variant='outline'
+                          size='sm'
+                          className='border-orange-200 text-orange-600 hover:border-orange-300 hover:text-orange-800'
                         >
-                          Continue
-                        </AlertDialogAction>
-                      </AlertDialogFooter>
-                    </AlertDialogContent>
-                  </AlertDialog>
+                          <Trash2Icon className='mr-1 h-4 w-4' />
+                          DELETE
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>
+                            Are you absolutely sure?
+                          </AlertDialogTitle>
+                          <AlertDialogDescription>
+                            This action cannot be undone. This will permanently
+                            delete the organisation &quot;{org.name}&quot;.
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={() => handleDeleteSubmit(org.id)}
+                          >
+                            Continue
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  )}
                 </div>
               </div>
             </div>

lib/actions/organisation.ts

@@ -9,6 +9,7 @@ import prisma from '@/lib/prisma';
 import {
   DeleteOrganisationSchema,
   EditOrganisationServerSchema,
+  LeaveOrganisationSchema,
   NewOrganisationServerSchema,
 } from '@/lib/schema/organisation';
 import { formDataToObject } from '@/lib/utils';
@@ -185,3 +186,56 @@ export const deleteOrganisation = async (
     message: 'Successfully deleted organisation!',
   };
 };
+
+export const leaveOrganisation = async (
+  _prevState: ServerActionState,
+  formData: FormData,
+): Promise<ServerActionState> => {
+  const token = await getAuthCookie();
+  if (!token) {
+    return {
+      success: false,
+      message: 'Please login!',
+    };
+  }
+
+  let data;
+  try {
+    data = LeaveOrganisationSchema.parse(formDataToObject(formData));
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        message: z.prettifyError(error),
+      };
+    }
+    return {
+      success: false,
+      message: 'Unknown error occurred. Please contact admin.',
+    };
+  }
+
+  // TODO: Use soft delete
+  const deleted = await prisma.userOnOrg.delete({
+    where: {
+      userId_orgId: {
+        orgId: data.id,
+        userId: token.userId,
+      },
+    },
+  });
+
+  if (!deleted) {
+    return {
+      success: false,
+      message: 'You are not part of the organisation!',
+    };
+  }
+
+  revalidatePath('/admin/organisations');
+
+  return {
+    success: true,
+    message: 'You have successfully left th organisation.',
+  };
+};

lib/schema/organisation.ts

@@ -18,6 +18,8 @@ export const DeleteOrganisationSchema = z.object({
   id: z.coerce.number<number>().int().positive(),
 });
 
+export const LeaveOrganisationSchema = DeleteOrganisationSchema;
+
 export const EditOrganisationClientSchema = z.object({
   ...NewOrganisationClientSchema.shape,
   ...DeleteOrganisationSchema.shape,