added create channel modal and route

app/api/channels/route.ts

@@ -0,0 +1,65 @@
+import { NextResponse } from "next/server";
+import { MemberRole } from "@prisma/client";
+
+import { currentProfile } from "@/lib/current-profile";
+import { db } from "@/lib/db";
+
+export async function POST(req: Request)
+{
+    try
+    {
+        const profile = await currentProfile();
+        const { name, type } = await req.json();
+        const {searchParams } = new URL(req.url);
+
+        const serverId = searchParams.get("serverId");
+
+        if (!profile)
+        {
+            return new NextResponse("Unauthorized", { status: 401 });
+        }
+
+        if (!serverId)
+        {
+            return new NextResponse("Server ID Missing", { status: 400 });
+        }
+
+        if (name === "general") 
+        {
+            return new NextResponse("Channel name cannot be general", { status: 400 });
+        }
+
+        const server = await db.server.update({
+            where:
+             {
+                id: serverId,
+                members: {
+                    some: {
+                        profileId: profile.id,
+                        role: {
+                            in: [MemberRole.ADMIN, MemberRole.MODERATOR]
+                        },
+                    }
+                },
+            },
+            data: {
+                channels: {
+                    create: [
+                        {
+                            profileId: profile.id,
+                            name,
+                            type,
+                        }
+                    ]
+                }
+            },            
+        });
+
+        return NextResponse.json(server);
+    } 
+    catch (error) 
+    {
+        console.log("[CHANNEL_POST]", error);
+        return new NextResponse("Internal Error", { status: 500 });
+    }
+}

components/modals/create-channel-modal.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import qs from "query-string";
+import axios from "axios";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { ChannelType } from "@prisma/client";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import{
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useParams, useRouter } from "next/navigation";
+import { useModal } from "@/hooks/use-modal-store";
+import  {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@/components/ui/select";
+
+const formSchema = z.object({
+    name: z.string().min(1, {
+        message: "Channel name is required",
+    }).refine(
+        name => name !== "general",
+        {
+            message: "Channel name cannot be 'general'",
+        }
+    ),
+    type: z.nativeEnum(ChannelType),
+});
+
+export const CreateChannelModal = () => {
+    const { isOpen, onClose, type } = useModal();
+    const router = useRouter();
+    const params = useParams();
+
+    const isModalOpen = isOpen && type === "createChannel";
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: "",
+            type: ChannelType.TEXT,
+        }
+    });
+
+    const isLoading = form.formState.isSubmitting;
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        try {
+            const url = qs.stringifyUrl({
+                url: "/api/channels",
+                query: {
+                    serverId: params?.serverId
+                }
+            });
+            await axios.post(url, values);
+
+            form.reset();
+            router.refresh();
+            onClose();
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    const handleClose = () => {
+        form.reset();
+        onClose();
+    }
+
+    return (
+        <Dialog open={isModalOpen} onOpenChange={handleClose}>
+            <DialogContent className="bg-white text-black p-0 overflow-hidden">
+                <DialogHeader className="pt-8 px-6">
+                    <DialogTitle className="text-2xl text-center">
+                        Create Channel
+                    </DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                        <div className="space-y-8 px-6">
+                            <FormField 
+                                control={form.control}
+                                name="name"
+                                render={({ field }) => (
+                                    <FormItem>                                        
+                                        <FormLabel
+                                            className="uppercase text-xs font-bold text-zinc-500 dark:text-secondary/70"
+                                        >
+                                            Channel name
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                disabled={isLoading}
+                                                className="bg-zinc-300/50 border-0 
+                                                focus-visible:ring-0 text-black
+                                                focus-visible:ring-offset-0"
+                                                placeholder="Enter channel name"
+                                                {...field}
+                                            />
+                                        </FormControl>
+                                        <FormMessage/>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField 
+                                control={form.control} 
+                                name="type"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Channel Type</FormLabel>                                            
+                                        <Select
+                                                disabled={isLoading}
+                                                onValueChange={field.onChange}
+                                                defaultValue={field.value}
+                                            >
+                                            <FormControl>
+                                                <SelectTrigger
+                                                    className="bg-zinc-300/50 border-0 focus:ring-0 text-black ring-offset-0 focus:ring-offset-0 capitalize outline-none"
+                                                >
+                                                    <SelectValue placeholder="Select a channel type"/>
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                {Object.values(ChannelType).map((type) => (
+                                                    <SelectItem key={type} value={type} className="capitalize">
+                                                        {type.toLocaleLowerCase()}
+                                                    </SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <DialogFooter className="bg-gray-100 px-6 py-4">
+                            <Button variant={"primary"} disabled={isLoading}>
+                                Create
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}

components/providors/modal-providor.tsx

@@ -6,6 +6,7 @@ import { EditServerModal } from "@/components/modals/edit-server-modal";
 import { CreateServerModal } from "@/components/modals/create-server-modal";
 import { InviteModal } from "@/components/modals/invite-modal";
 import { MembersModal } from "@/components/modals/members-modal";
+import { CreateChannelModal } from "@/components/modals/create-channel-modal";
 
 export const ModalProvidor = () => {
     const [isMounted, setIsMounted] = useState(false);
@@ -24,6 +25,7 @@ export const ModalProvidor = () => {
             <InviteModal />
             <EditServerModal />
             <MembersModal/>
+            <CreateChannelModal/>
         </>
     )
 }

components/server/server-header.tsx

@@ -59,6 +59,7 @@ export const SeverHeader = ({server, role}: ServerHeaderProps) => {
                 )}
                 {isModerator && (
                     <DropdownMenuItem
+                        onClick={() => onOpen("createChannel")}
                         className=" px-3 py-2 text-sm cursor-pointer"
                     >
                         Create Channel

hooks/use-modal-store.ts

@@ -2,7 +2,7 @@
 import { Server } from "@prisma/client";
 import { create } from "zustand";
 
-export type ModalType = "createServer" | "invite" | "editServer" | "members";
+export type ModalType = "createServer" | "invite" | "editServer" | "members" | "createChannel";
 
 interface ModalData {
     server?: Server