add validation for update organization

apps/web/src/pages/[organization]/settings/organization.tsx

@@ -8,30 +8,42 @@ import { SettingsLayout } from "@/components/layouts/SettingsLayout";
 import { toast } from "@/components/ui/use-toast";
 import { createServerSideProps } from "@/server/getServerSideProps";
 import { useOrganizationParams } from "@/hooks/useOrganizationParams";
+import { z } from "zod";
+import { InputError } from "@/components/forms/InputError";
+import { useRouter } from "next/router";
 
 export const getServerSideProps = createServerSideProps();
 
+const validator = z.object({
+  id: z.string().min(2),
+  name: z.string().min(2),
+});
+
+type IForm = z.infer<typeof validator>;
+
 export default function Organization() {
+  const router = useRouter()
   const params = useOrganizationParams();
   const query = api.organization.get.useQuery({
     slug: params.organization,
   });
   const mutation = api.organization.update.useMutation({
-    onSuccess() {
+    onSuccess(res) {
       toast({
         title: "Organization updated",
         description: "Your organization has been updated.",
       });
       query.refetch();
+      router.replace(`/${res.slug}/settings/organization`)
     },
     onError: handleError,
   });
   const data = query.data;
 
-  const { register, handleSubmit, reset, formState, getValues } = useForm({
+  const { register, handleSubmit, reset, formState } = useForm<IForm>({
     defaultValues: {
+      id: "",
       name: "",
-      slug: "",
     },
   });
 
@@ -45,7 +57,9 @@ export default function Organization() {
   return (
     <SettingsLayout>
       <form
-        onSubmit={handleSubmit((values) => mutation.mutate(values))}
+        onSubmit={handleSubmit((values) => {
+          mutation.mutate(values)
+        })}
         className="flex flex-col divide-y divide-border"
       >
         <ContentHeader
@@ -54,7 +68,7 @@ export default function Organization() {
         >
           <Button type="submit" disabled={!formState.isDirty}>Save</Button>
         </ContentHeader>
-        <ContentSection title="Name" text="The name of your organization.">
+        <ContentSection title="Name" text={["Notice. Changing name will result in a url change as well.", <InputError key="error" {...formState.errors.name} />]}>
           <Input {...register("name")} />
         </ContentSection>
         <ContentSection

apps/web/src/pages/[organization]/settings/profile.tsx

@@ -35,7 +35,7 @@ export default function Profile() {
   });
   const data = query.data;
 
-  const { register, handleSubmit, reset, formState } = useForm({
+  const { register, handleSubmit, reset, formState } = useForm<IForm>({
     resolver: zodResolver(validator),
     defaultValues: {
       name: "",

apps/web/src/server/api/routers/organization.ts

@@ -3,6 +3,7 @@ import { z } from "zod";
 import { createTRPCRouter, protectedProcedure } from "@/server/api/trpc";
 import { db } from "@/server/db";
 import { getOrganizationBySlug } from "@/server/services/organization.service";
+import { slug } from "@/utils/slug";
 
 export const organizationRouter = createTRPCRouter({
   first: protectedProcedure.query(({ ctx }) => {
@@ -28,17 +29,18 @@ export const organizationRouter = createTRPCRouter({
   update: protectedProcedure
     .input(
       z.object({
+        id: z.string(),
         name: z.string(),
-        slug: z.string(),
       }),
     )
     .mutation(({ input }) => {
       return db.organization.update({
         where: {
-          slug: input.slug,
+          id: input.id,
         },
         data: {
           name: input.name,
+          slug: slug(input.name)
         },
       });
     }),

apps/web/src/server/getServerSideProps.ts

@@ -3,6 +3,7 @@ import {
   type GetServerSidePropsResult,
 } from "next";
 import { getServerAuthSession } from "./auth";
+import { db } from "./db";
 
 export function createServerSideProps(
   cb?: (context: GetServerSidePropsContext) => Promise<any>,
@@ -10,7 +11,7 @@ export function createServerSideProps(
   return async function getServerSideProps(
     context: GetServerSidePropsContext,
   ): Promise<GetServerSidePropsResult<any>> {
-    const session = await getServerAuthSession(context);
+    const session = await getServerAuthSession(context); 
 
     if(!session) {
       return {
@@ -21,6 +22,23 @@ export function createServerSideProps(
       }
     }
 
+    if(context.params?.organization) {
+      const organization = await db.user.findFirst({
+        where: {
+          id: session.user.id,
+          organization: {
+            slug: context.params.organization as string
+          }
+        }
+      })
+      
+      if(!organization) {
+        return {
+          notFound: true,
+        }
+      }
+    }
+
     const res = await (typeof cb === "function"
       ? cb(context)
       : Promise.resolve({}));