init commit,
This commit is contained in:
louiscklaw
@@ -0,0 +1,226 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user