finished invit page and generate invite url

Author: the-coder-o

app/(invite)/(routes)/invite/[inviteCode]/page.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { redirect } from 'next/navigation'
+import { redirectToSignIn } from '@clerk/nextjs'
+
+import { db } from '@/lib/db'
+import { currentProfile } from '@/lib/current-profile'
+
+import ServerSideBar from '@/components/server/server-sidebar'
+
+const ServerIdLayout = async ({ children, params }: { children: React.ReactNode; params: { serverId: string } }) => {
+  const profile = await currentProfile()
+
+  if (!profile) return redirectToSignIn()
+
+  const server = await db.server.findUnique({
+    where: {
+      id: params.serverId,
+      members: {
+        some: {
+          profileId: profile.id,
+        },
+      },
+    },
+  })
+
+  if (!server) return redirect('/')
+
+  return (
+    <div className={'h-full'}>
+      <div className={'hidden md:flex h-full w-60 z-20 flex-col fixed inset-y-0'}>
+        <ServerSideBar serverId={params.serverId} />
+      </div>
+      <main className={'h-full md:pl-60'}>{children}</main>
+    </div>
+  )
+}
+
+export default ServerIdLayout

app/(main)/(routes)/servers/[serverId]/layout.tsx

@@ -0,0 +1,30 @@
+import { v4 as uuidv4 } from 'uuid'
+import { NextResponse } from 'next/server'
+
+import { db } from '@/lib/db'
+import { currentProfile } from '@/lib/current-profile'
+
+export async function PATCH(req: Request, { params }: { params: { serverId: string } }) {
+  try {
+    const profile = await currentProfile()
+
+    if (!profile) return new NextResponse('Unauthorized', { status: 401 })
+
+    if (!params.serverId) return new NextResponse('Server ID Missing', { status: 400 })
+
+    const server = await db.server.update({
+      where: {
+        id: params.serverId,
+        profileId: profile.id,
+      },
+      data: {
+        invitedCode: uuidv4(),
+      },
+    })
+
+    return NextResponse.json(server)
+  } catch (error) {
+    console.log('[SERVER_ID]', error)
+    return new NextResponse('Internal Error', { status: 500 })
+  }
+}

app/api/servers/[serverId]/invite-code/route.ts

@@ -12,8 +12,8 @@ import { ThemeProvider } from '@/components/providers/theme-provider'
 const font = Open_Sans({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Team chat application',
-  description: 'Generated by create next app',
+  title: 'Discord | Your place for communication and relaxation',
+  description: 'Generated by Abdul basit',
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

app/favicon.ico

@@ -45,6 +45,7 @@ const CreateServerModal = () => {
 
       form.reset()
       router.refresh()
+      onClose()
     } catch (error) {
       console.log(error)
     }

app/layout.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import axios from 'axios'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+import { Check, Copy, RefreshCcw } from 'lucide-react'
+
+import { useOrigin } from '@/hooks/use-origin'
+import { useModal } from '@/hooks/use-modal.store'
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+
+const InviteModal = () => {
+  const { onOpen, isOpen, onClose, type, data } = useModal()
+  const origin = useOrigin()
+
+  const { server } = data
+
+  const [copied, setCopied] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const inviteUrl = `${origin}/invite/${server?.invitedCode}`
+
+  const onCopy = () => {
+    navigator.clipboard.writeText(inviteUrl)
+    setCopied(true)
+
+    setTimeout(() => {
+      setCopied(false)
+    }, 1000)
+  }
+
+  const onNew = async () => {
+    try {
+      setIsLoading(true)
+      const response = await axios.patch(`/api/servers/${server?.id}/invite-code`)
+
+      onOpen('invite', { server: response.data })
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const router = useRouter()
+
+  const isModalOpen = isOpen && type === 'invite'
+
+  return (
+    <Dialog open={isModalOpen} onOpenChange={onClose}>
+      <DialogContent className={'bg-white text-black p-0 overflow-hidden'}>
+        <DialogHeader className={'pt-8 px-6'}>
+          <DialogTitle className={'text-2xl text-center font-bold'}>Invite Friends</DialogTitle>
+        </DialogHeader>
+        <div className={'p-6'}>
+          <Label className={'uppercase text-xs font-bold text-zinc-500 dark:text-secondary/70'}>Server invite link</Label>
+          <div className={'flex items-center mt-2 gap-x-2'}>
+            <Input disabled={isLoading} className={'bg-zinc-300/50 border-0 focus-visible:ring-0 text-black focus-visible:ring-offset-0'} value={inviteUrl} />
+            <Button disabled={isLoading} onClick={onCopy} size={'icon'}>
+              {copied ? <Check className={'w-4 h-4 text-green-500'} /> : <Copy className={'w-4 h-4'} />}
+            </Button>
+          </div>
+          <Button onClick={onNew} disabled={isLoading} variant={'link'} size={'sm'} className={'text-xs text-zinc-500 mt-4'}>
+            Generate a new link
+            <RefreshCcw className={'w-4 h-4 ml-2'} />
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default InviteModal

components/modals/create-server-modal.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react'
 
+import InviteModal from '@/components/modals/invite-modal'
 import CreateServerModal from '../../components/modals/create-server-modal'
 
 const ModalProvider = () => {
@@ -16,6 +17,7 @@ const ModalProvider = () => {
   return (
     <>
       <CreateServerModal />
+      <InviteModal />
     </>
   )
 }

components/modals/invite-modal.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { MemberRole, Server } from '@prisma/client'
+import { ServerWithMembersWithProfiles } from '@/types'
+
+import { useModal } from '@/hooks/use-modal.store'
+import { ChevronDown, LogOut, PlusCircle, Settings, Trash, UserPlus, Users } from 'lucide-react'
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+
+interface ServerHeaderProps {
+  server: ServerWithMembersWithProfiles
+  role?: MemberRole
+}
+
+const ServerHeader = ({ role, server }: ServerHeaderProps) => {
+  const { onOpen } = useModal()
+
+  const isAdmin = role === MemberRole.ADMIN
+  const isModerator = isAdmin || role === MemberRole.MODERATOR
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className={'focus:outline-none'} asChild>
+        <button className={'w-full text-md font-semibold px-3 flex items-center h-12 border-neutral-200 dark:border-neutral-800 border-b-2 hover:bg-zinc-700/10 dark:hover:bg-zinc-700/50 transition'}>
+          {server.name}
+          <ChevronDown className={'h-5 w-5 ml-auto'} />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className={'w-56 text-xs font-medium text-black dark:text-neutral-400 space-y-[2px]'}>
+        {isModerator && (
+          <DropdownMenuItem onClick={() => onOpen('invite', { server })} className={'text-indigo-600 dark:text-indigo-400 px-3 py-2 text-sm cursor-pointer'}>
+            Invite People
+            <UserPlus className={'h-4 w-4 ml-auto'} />
+          </DropdownMenuItem>
+        )}
+        {isAdmin && (
+          <DropdownMenuItem className={'px-3 py-2 text-sm cursor-pointer'}>
+            Server Settings
+            <Settings className={'h-4 w-4 ml-auto'} />
+          </DropdownMenuItem>
+        )}
+        {isAdmin && (
+          <DropdownMenuItem className={'px-3 py-2 text-sm cursor-pointer'}>
+            Manage Members
+            <Users className={'h-4 w-4 ml-auto'} />
+          </DropdownMenuItem>
+        )}
+        {isModerator && (
+          <DropdownMenuItem className={'px-3 py-2 text-sm cursor-pointer'}>
+            Create Channel
+            <PlusCircle className={'h-4 w-4 ml-auto'} />
+          </DropdownMenuItem>
+        )}
+        {isModerator && <DropdownMenuSeparator />}
+        {isAdmin && (
+          <DropdownMenuItem className={'text-rose-500 px-3 py-2 text-sm cursor-pointer'}>
+            Delete Channel
+            <Trash className={'h-4 w-4 ml-auto'} />
+          </DropdownMenuItem>
+        )}
+        {!isAdmin && (
+          <DropdownMenuItem className={'text-rose-500 px-3 py-2 text-sm cursor-pointer'}>
+            Leave Channel
+            <LogOut className={'h-4 w-4 ml-auto'} />
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default ServerHeader

components/providers/modal-provider.tsx

@@ -0,0 +1,57 @@
+import { ChannelType } from '@prisma/client'
+import { redirect } from 'next/navigation'
+
+import { db } from '@/lib/db'
+import { currentProfile } from '@/lib/current-profile'
+
+import ServerHeader from '@/components/server/server-header'
+
+interface ServerSidebarProps {
+  serverId: string
+}
+
+const ServerSideBar = async ({ serverId }: ServerSidebarProps) => {
+  const profile = await currentProfile()
+
+  if (!profile) return redirect('/')
+
+  const server = await db.server.findUnique({
+    where: {
+      id: serverId,
+    },
+    include: {
+      channels: {
+        orderBy: {
+          createdAt: 'asc',
+        },
+      },
+      members: {
+        include: {
+          profile: true,
+        },
+        orderBy: {
+          role: 'asc',
+        },
+      },
+    },
+  })
+
+  const textChannels = server?.channels.filter((channel) => channel.type === ChannelType.TEXT)
+  const audioChannels = server?.channels.filter((channel) => channel.type === ChannelType.AUDIO)
+  const videoChannels = server?.channels.filter((channel) => channel.type === ChannelType.VIDEO)
+  const members = server?.members.filter((member) => member.profileId !== profile.id)
+
+  if (!server) {
+    return redirect('/')
+  }
+
+  const role = server.members.find((member) => member.profileId === profile.id)?.role
+
+  return (
+    <div className={'flex flex-col h-full text-primary w-full dark:bg-[#2B2D31] bg-[#F2F3F5]'}>
+      <ServerHeader server={server} role={role} />
+    </div>
+  )
+}
+
+export default ServerSideBar

components/server/server-header.tsx

@@ -1,17 +1,24 @@
 import { create } from 'zustand'
+import { Server } from '@prisma/client'
 
-export type ModalType = 'createServer'
+export type ModalType = 'createServer' | 'invite'
+
+interface ModalData {
+  server?: Server
+}
 
 interface ModalStore {
   type: ModalType | null
+  data: ModalData
   isOpen: boolean
-  onOpen: (type: ModalType) => void
+  onOpen: (type: ModalType, data?: ModalData) => void
   onClose: () => void
 }
 
 export const useModal = create<ModalStore>((set) => ({
   type: null,
+  data: {},
   isOpen: false,
-  onOpen: (type) => set({ isOpen: true, type }),
+  onOpen: (type, data = {}) => set({ isOpen: true, type, data }),
   onClose: () => set({ type: null, isOpen: false }),
 }))

components/server/server-sidebar.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export const useOrigin = () => {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const origin = typeof window !== 'undefined' && window.location.origin ? window.location.origin : ''
+
+  if (!mounted) return ''
+
+  return origin
+}

hooks/use-modal.store.ts

@@ -0,0 +1,5 @@
+import { Member, Profile, Server } from '@prisma/client'
+
+export type ServerWithMembersWithProfiles = Server & {
+  members: Member & { profile: Profile }[]
+}