Refactors organization management routes

Splits organization route into separate update and delete routes,
removing the old unified general route. Updates routes' structure
to improve modularity and better aligns with RESTful practices.
Integrates redirection logic for protected loaders.

Simplifies profile-related protected actions with added loaders
redirecting to profile page.

Enhances maintainability by organizing routes logically.

Fixes #123

Author: MichielOlijslagers

app/features/dashboard/routes/profile.delete.tsx

@@ -1,5 +1,6 @@
+import { redirect } from "react-router";
 import { auth } from "~/lib/auth";
-import { createProtectedAction } from "~/lib/secureRoute";
+import { createProtectedAction, createProtectedLoader } from "~/lib/secureRoute";
 
 export const action = createProtectedAction({
   function: async ({ request }) => {
@@ -17,3 +18,9 @@ export const action = createProtectedAction({
     }
   },
 });
+
+export const loader = createProtectedLoader({
+  function: async () => {
+    return redirect("/app/profile");
+  },
+});

app/features/dashboard/routes/profile.revoke-session.tsx

@@ -1,7 +1,8 @@
+import { redirect } from "react-router";
 import { z } from "zod";
 import { auth } from "~/lib/auth";
 import prisma from "~/lib/prismaClient";
-import { createProtectedAction } from "~/lib/secureRoute";
+import { createProtectedAction, createProtectedLoader } from "~/lib/secureRoute";
 
 export const action = createProtectedAction({
   formValidation: z.object({
@@ -37,3 +38,9 @@ export const action = createProtectedAction({
     }
   },
 });
+
+export const loader = createProtectedLoader({
+  function: async () => {
+    return redirect("/app/profile");
+  },
+});

app/features/dashboard/routes/profile.update.tsx

@@ -1,7 +1,7 @@
 import { redirect } from "react-router";
 import z from "zod";
 import { auth } from "~/lib/auth";
-import { createProtectedAction } from "~/lib/secureRoute";
+import { createProtectedAction, createProtectedLoader } from "~/lib/secureRoute";
 
 export const action = createProtectedAction({
   formValidation: z.object({
@@ -46,3 +46,9 @@ export const action = createProtectedAction({
     }
   },
 });
+
+export const loader = createProtectedLoader({
+  function: async () => {
+    return redirect("/app/profile");
+  },
+});

app/features/organization/routes.ts

@@ -12,7 +12,10 @@ export const organizationRoutes = [
       route("join", "./routes/onboarding.join.tsx"),
     ]),
     route("/onboarding/join/:inviteId", "./routes/onboarding.join.byId.tsx"),
-    route("/", "./routes/general.tsx"),
+    route("/", "./routes/organization.tsx", [
+      route("edit", "./routes/organization.update.tsx"),
+      route("delete", "./routes/organization.delete.tsx"),
+    ]),
     route("/members", "./routes/members.tsx", [
       route(":memberId/remove", "./routes/members.remove.tsx"),
       route(":memberId/set-role", "./routes/members.setRole.tsx"),

app/features/organization/routes/organization.delete.tsx

@@ -0,0 +1,37 @@
+import { redirect } from "react-router";
+import z from "zod";
+import { auth } from "~/lib/auth";
+import { createProtectedAction, createProtectedLoader } from "~/lib/secureRoute";
+
+export const action = createProtectedAction({
+  permissions: {
+    action: "delete",
+    subject: "Organization",
+  },
+  formValidation: z.object({
+    organizationId: z.string(),
+  }),
+  function: async ({ request, form }) => {
+    if (form.error) {
+      return { success: false, error: "Failed to update organization" };
+    }
+    const { organizationId } = form.data;
+
+    if (typeof auth.api.deleteOrganization !== "function") {
+      return { error: "Organization delete API not implemented" };
+    }
+    await auth.api.deleteOrganization({
+      headers: request.headers,
+      body: {
+        organizationId,
+      },
+    });
+    return redirect("/app/organization/select");
+  },
+});
+
+export const loader = createProtectedLoader({
+  function: async () => {
+    return redirect("/app/organization");
+  },
+});

app/features/organization/routes/general.tsx renamed to app/features/organization/routes/organization.tsx

@@ -1,11 +1,4 @@
-import {
-  useLoaderData,
-  useActionData,
-  useNavigation,
-  Form,
-  redirect,
-  type ActionFunctionArgs,
-} from "react-router";
+import { useLoaderData, useNavigation, Form, type ActionFunctionArgs } from "react-router";
 import { z } from "zod";
 import { InputWithLabel } from "~/components/input-with-label";
 import { Button } from "~/components/ui/button";
@@ -27,64 +20,60 @@ import {
 } from "~/components/ui/alert-dialog";
 import { useState } from "react";
 import { auth } from "~/lib/auth";
-import { ensureCanWithIdentity } from "~/lib/permissions.server";
-import { getUserInformation } from "~/lib/identity.server";
+
 import { createProtectedLoader } from "~/lib/secureRoute";
 
-const orgNameSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-});
+// const orgNameSchema = z.object({
+//   name: z.string().min(1, "Name is required"),
+// });
 
 // TODO: Move to secureRoute, split up into multiple actions
 export async function action({ request }: ActionFunctionArgs) {
-  const identity = await getUserInformation(request);
-
-  const formData = await request.formData();
-  const intent = formData.get("intent");
-  const name = formData.get("name") as string | undefined;
-  const organizationId = formData.get("organizationId") as string;
-
-  if (intent === "edit") {
-    ensureCanWithIdentity(identity, "update", "Organization");
-
-    try {
-      const validated = orgNameSchema.parse({ name });
-      // TODO: Replace with actual updateOrganization API if available
-      if (typeof auth.api.updateOrganization !== "function") {
-        return { error: "Organization update API not implemented" };
-      }
-      await auth.api.updateOrganization({
-        headers: request.headers,
-        body: {
-          organizationId,
-          data: {
-            name: validated.name,
-          },
-        },
-      });
-      return { success: true };
-    } catch (error) {
-      if (error instanceof z.ZodError) {
-        return { errors: error.flatten().fieldErrors };
-      }
-      return { error: "Failed to update organization" };
-    }
-  }
-
-  if (intent === "delete") {
-    ensureCanWithIdentity(identity, "delete", "Organization");
-
-    if (typeof auth.api.deleteOrganization !== "function") {
-      return { error: "Organization delete API not implemented" };
-    }
-    await auth.api.deleteOrganization({
-      headers: request.headers,
-      body: {
-        organizationId,
-      },
-    });
-    return redirect("/app/organization/select");
-  }
+  // const identity = await getUserInformation(request);
+
+  // const formData = await request.formData();
+  // const intent = formData.get("intent");
+  // // const name = formData.get("name") as string | undefined;
+  // const organizationId = formData.get("organizationId") as string;
+
+  // if (intent === "edit") {
+  //   ensureCanWithIdentity(identity, "update", "Organization");
+
+  //   try {
+  //     const validated = orgNameSchema.parse({ name });
+
+  //     await auth.api.updateOrganization({
+  //       headers: request.headers,
+  //       body: {
+  //         organizationId,
+  //         data: {
+  //           name: validated.name,
+  //         },
+  //       },
+  //     });
+  //     return { success: true };
+  //   } catch (error) {
+  //     if (error instanceof z.ZodError) {
+  //       return { errors: error.flatten().fieldErrors };
+  //     }
+  //     return { error: "Failed to update organization" };
+  //   }
+  // }
+
+  // if (intent === "delete") {
+  //   ensureCanWithIdentity(identity, "delete", "Organization");
+
+  //   if (typeof auth.api.deleteOrganization !== "function") {
+  //     return { error: "Organization delete API not implemented" };
+  //   }
+  //   await auth.api.deleteOrganization({
+  //     headers: request.headers,
+  //     body: {
+  //       organizationId,
+  //     },
+  //   });
+  //   return redirect("/app/organization/select");
+  // }
 
   return null;
 }
@@ -107,7 +96,6 @@ export const loader = createProtectedLoader({
 
 export default function OrganizationGeneral() {
   const { activeOrg } = useLoaderData<{ activeOrg: { id: string; name: string; slug: string } }>();
-  const actionData = useActionData<typeof action>();
   const navigation = useNavigation();
   const isSubmitting = navigation.state === "submitting";
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
@@ -119,14 +107,15 @@ export default function OrganizationGeneral() {
           <CardTitle>Organization Details</CardTitle>
           <CardDescription>Manage your organization settings.</CardDescription>
         </CardHeader>
-        <Form method="post" autoComplete="off">
+        <Form method="post" action="/app/organization/edit" autoComplete="off">
+          {/* TODO: add error feedback from action */}
           <CardContent className="space-y-4 py-4">
             <InputWithLabel
               label="Name"
               id="name"
               name="name"
               defaultValue={activeOrg.name}
-              error={actionData?.errors?.name?.[0]}
+              // error={actionData?.errors?.name?.[0]}
               autoFocus
             />
             <input type="hidden" name="organizationId" value={activeOrg.id} />
@@ -136,10 +125,12 @@ export default function OrganizationGeneral() {
             <Button type="submit" disabled={isSubmitting} className="w-full">
               {isSubmitting ? "Saving..." : "Save Changes"}
             </Button>
-            {actionData?.error && (
+            {/* TODO: add error feedback from action */}
+
+            {/* {actionData?.error && (
               <div className="text-destructive text-sm text-center">{actionData.error}</div>
-            )}
-            {actionData?.success && <div className="text-success text-sm text-center">Saved!</div>}
+            )} */}
+            {/* {actionData?.success && <div className="text-success text-sm text-center">Saved!</div>} */}
           </CardFooter>
         </Form>
       </Card>
@@ -172,7 +163,7 @@ export default function OrganizationGeneral() {
               undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
-          <Form method="post">
+          <Form method="post" action="/app/organization/delete">
             <input type="hidden" name="organizationId" value={activeOrg.id} />
             <input type="hidden" name="intent" value="delete" />
             <AlertDialogFooter>

app/features/organization/routes/organization.update.tsx

@@ -0,0 +1,45 @@
+import { redirect } from "react-router";
+import z from "zod";
+import { auth } from "~/lib/auth";
+import { createProtectedAction, createProtectedLoader } from "~/lib/secureRoute";
+
+export const action = createProtectedAction({
+  permissions: {
+    action: "update",
+    subject: "Organization",
+  },
+  formValidation: z.object({
+    name: z.string().min(1, "Name is required"),
+    organizationId: z.string(),
+  }),
+  function: async ({ request, form }) => {
+    if (form.error) {
+      return { success: false, error: "Failed to update organization" };
+    }
+    const { name, organizationId } = form.data;
+
+    try {
+      await auth.api.updateOrganization({
+        headers: request.headers,
+        body: {
+          organizationId,
+          data: {
+            name: name,
+          },
+        },
+      });
+      return { success: true };
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        return { errors: error.flatten().fieldErrors };
+      }
+      return { error: "Failed to update organization" };
+    }
+  },
+});
+
+export const loader = createProtectedLoader({
+  function: async () => {
+    return redirect("/app/organization");
+  },
+});