227 lines
7.9 KiB
TypeScript
227 lines
7.9 KiB
TypeScript
'use client'
|
|
import CreateRoomModal from '@/components/create-room-modal'
|
|
import { User, createClientComponentClient } from '@supabase/auth-helpers-nextjs'
|
|
import { RealtimeChannel } from '@supabase/supabase-js'
|
|
import { useState, useEffect, use } from 'react'
|
|
|
|
export default function Chat() {
|
|
const [user, setUser] = useState<User | null>(null)
|
|
const [loading, setLoading] = useState<boolean>(true)
|
|
const [rooms, setRooms] = useState<string[]>([])
|
|
const [users, setUsers] = useState<Set<string>>(new Set())
|
|
const [selectedRoom, setSelectedRoom] = useState<string | undefined>()
|
|
const [mainChannel, setMainChannel] = useState<RealtimeChannel | null>(null)
|
|
const [channel, setChannel] = useState<RealtimeChannel | null>(null)
|
|
const [showModal, setShowModal] = useState<boolean>(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const supabase = createClientComponentClient()
|
|
|
|
const getChannels = async () => {
|
|
const channels = await supabase.from('rooms').select('topic')
|
|
setRooms(channels.data?.map(({ topic }) => topic) || [])
|
|
}
|
|
|
|
const addUserToChannel = async (email: string) => {
|
|
const user = await supabase.from('profiles').select('id').eq('email', email)
|
|
if (!user.data?.length) {
|
|
addMessage(true, true, `User ${email} not found`)
|
|
} else {
|
|
const room = await supabase.from('rooms').select('topic').eq('topic', selectedRoom)
|
|
|
|
await supabase
|
|
.from('rooms_users')
|
|
.upsert({ user_id: user.data?.[0].id, room_topic: room.data?.[0].topic })
|
|
addMessage(true, true, `Added ${email} to channel ${selectedRoom}`)
|
|
}
|
|
}
|
|
|
|
const addMessage = async (mine: boolean, system: boolean, message: string) => {
|
|
const bubble = document.createElement('div')
|
|
const is_self_classes = mine ? ['bg-green-600', 'self-end'] : ['bg-blue-600', 'self-start']
|
|
const is_system_classes = system ? ['bg-stone-500', 'self-center', 'italic', 'text-center'] : []
|
|
const style = [
|
|
'flex',
|
|
'gap-2',
|
|
'items-center',
|
|
'rounded-xl',
|
|
'text-white',
|
|
'text-bold',
|
|
'w-2/3',
|
|
'p-2',
|
|
]
|
|
.concat(is_self_classes)
|
|
.concat(is_system_classes)
|
|
bubble.classList.add(...style)
|
|
bubble.innerHTML = message
|
|
document.getElementById('chat')!.appendChild(bubble)
|
|
}
|
|
|
|
useEffect(() => {
|
|
supabase.auth
|
|
.getUser()
|
|
.then((user) => setUser(user.data.user))
|
|
.then(async () => {
|
|
await supabase.auth.getUser()
|
|
const token = (await supabase.auth.getSession()).data.session?.access_token!
|
|
supabase.realtime.setAuth(token)
|
|
let main = supabase
|
|
.channel('supaslack')
|
|
.on('broadcast', { event: 'new_room' }, () => getChannels())
|
|
.subscribe()
|
|
setMainChannel(main)
|
|
getChannels()
|
|
})
|
|
.then(() => {
|
|
setLoading(false)
|
|
})
|
|
}, [supabase])
|
|
|
|
useEffect(() => {
|
|
if (document.getElementById('chat')) {
|
|
document.getElementById('chat')!.innerHTML = ''
|
|
}
|
|
|
|
if (selectedRoom) {
|
|
channel?.unsubscribe()
|
|
setUsers(new Set())
|
|
|
|
let newChannel = supabase.channel(selectedRoom, {
|
|
config: {
|
|
broadcast: { self: true },
|
|
private: true, // This line will tell the server that you want to use a private channel for this connection
|
|
},
|
|
})
|
|
|
|
newChannel
|
|
.on('broadcast', { event: 'message' }, ({ payload: payload }) =>
|
|
addMessage(payload.user_id == user?.id, false, payload.message)
|
|
)
|
|
.on('presence', { event: 'join' }, ({ newPresences }) => {
|
|
newPresences.map(({ email }) => users.add(email))
|
|
setUsers(new Set(users))
|
|
})
|
|
.on('presence', { event: 'leave' }, ({ leftPresences }) => {
|
|
leftPresences.map(({ email }) => users.delete(email))
|
|
setUsers(new Set(users))
|
|
})
|
|
.subscribe((status, err) => {
|
|
setLoading(false)
|
|
|
|
if (status == 'SUBSCRIBED') {
|
|
setChannel(newChannel)
|
|
newChannel.track({ email: user?.email })
|
|
setError(null)
|
|
}
|
|
if (status == 'CLOSED') {
|
|
setChannel(null)
|
|
}
|
|
if (status == 'CHANNEL_ERROR') {
|
|
setError(err?.message || null)
|
|
}
|
|
})
|
|
}
|
|
}, [selectedRoom])
|
|
|
|
return (
|
|
<div className="flex w-full h-full p-10">
|
|
{loading && (
|
|
<div className="fixed top-0 left-0 right-0 flex flex-col h-full w-full justify-center items-center align-middle gap-2 z-10 bg-[#000000CC]">
|
|
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-foreground"></div>
|
|
</div>
|
|
)}
|
|
{showModal ? <CreateRoomModal channel={mainChannel} /> : ''}
|
|
<div className="flex w-full h-full gap-4">
|
|
<div className="grow-0 flex flex-col gap-2 w-[20rem] overflow-hidden">
|
|
<div className="bg-white h-full rounded-sm text-slate-900">
|
|
<div className="flex flex-col">
|
|
<div className="p-2 font-semibold bg-stone-100 w-full text-center">Rooms</div>
|
|
{rooms?.map((room: string) => {
|
|
return (
|
|
<button
|
|
key={room}
|
|
onClick={() => {
|
|
setLoading(true)
|
|
setSelectedRoom(room)
|
|
}}
|
|
className={
|
|
selectedRoom == room
|
|
? 'bg-green-600 rounded-sm pointer p-2 text-white text-left'
|
|
: 'rounded-sm cursor-pointer hover:bg-green-100 p-2 text-black text-left'
|
|
}
|
|
>
|
|
#{room}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white h-full rounded-sm text-slate-900">
|
|
<div className="p-2 font-semibold bg-stone-100 w-full text-center">Users in Room</div>
|
|
<div className="flex flex-col gap-2 p-2">
|
|
{Array.from(users)?.map((email: string) => {
|
|
return <div key={email}>{email}</div>
|
|
})}
|
|
</div>
|
|
</div>
|
|
<button
|
|
className="border border-foreground/20 rounded-md px-4 py-2 text-foreground"
|
|
onClick={() => setShowModal(!showModal)}
|
|
>
|
|
Create Room
|
|
</button>
|
|
</div>
|
|
<div className="grow flex flex-col gap-2">
|
|
{error ? (
|
|
<div className="bg-white h-full rounded-md text-slate-900 p-1 flex justify-center items-center">
|
|
<h1 className="text-xl font-bold">You do not have access to this room</h1>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="bg-white h-full rounded-md text-slate-900 p-1 flex flex-col gap-2"
|
|
id="chat"
|
|
/>
|
|
)}
|
|
|
|
<form
|
|
className="flex text-foreground w-full gap-2"
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
const form = e.target as HTMLFormElement
|
|
const target = form.elements[0] as HTMLInputElement
|
|
const message = target.value
|
|
|
|
if (message.startsWith('/invite')) {
|
|
const email = message.replace('/invite ', '')
|
|
addUserToChannel(email)
|
|
} else {
|
|
channel?.send({
|
|
type: 'broadcast',
|
|
event: 'message',
|
|
payload: { message, user_id: user?.id },
|
|
})
|
|
}
|
|
|
|
target.value = ''
|
|
}}
|
|
>
|
|
<label className="hidden" htmlFor="message" />
|
|
<input
|
|
name="message"
|
|
className="grow rounded-md text-black p-2"
|
|
placeholder="Insert your message"
|
|
disabled={!channel}
|
|
></input>
|
|
<button
|
|
type="submit"
|
|
className="border border-foreground/20 rounded-md px-4 py-2 text-foreground"
|
|
>
|
|
Send
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|