69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
'use client'
|
|
import { createClient } from '@/utils/supabase/client'
|
|
import { redirect } from 'next/navigation'
|
|
import { SubmitButton } from './submit-button'
|
|
import { useEffect, useState } from 'react'
|
|
import { RealtimeChannel } from '@supabase/supabase-js'
|
|
|
|
export default function CreateRoomModal({ channel }: { channel: RealtimeChannel | null }) {
|
|
const supabase = createClient()
|
|
const createRoom = async (formData: FormData) => {
|
|
const topic = formData.get('topic') as string
|
|
const user = await supabase.auth.getUser()
|
|
const token = (await supabase.auth.getSession()).data.session!.access_token
|
|
|
|
supabase.realtime.setAuth(token)
|
|
|
|
const rooms_response = await supabase.from('rooms').insert({ topic }).select('topic')
|
|
|
|
if (rooms_response.data) {
|
|
await supabase
|
|
.from('rooms_users')
|
|
.insert({ user_id: user.data.user!.id, room_topic: rooms_response.data![0].topic })
|
|
|
|
await channel?.send({
|
|
type: 'broadcast',
|
|
event: 'new_room',
|
|
payload: {},
|
|
})
|
|
|
|
return redirect(`/protected`)
|
|
}
|
|
}
|
|
|
|
const close = async () => {
|
|
return redirect(`/protected`)
|
|
}
|
|
|
|
return (
|
|
<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-[#000000EE]">
|
|
<form className="flex flex-col sm:max-w-md gap-2 text-foreground bg-background rounded-md p-4">
|
|
<label className="text-lg font-semibold" htmlFor="email">
|
|
Create a Room
|
|
</label>
|
|
<input
|
|
className="rounded-md px-4 py-2 bg-inherit border mb-6"
|
|
name="topic"
|
|
placeholder="room_1"
|
|
/>
|
|
<div className="flex justify-between gap-4">
|
|
<SubmitButton
|
|
formAction={createRoom}
|
|
className="border border-foreground/20 rounded-md px-4 py-2 text-foreground mb-2 w-[10rem]"
|
|
pendingText="Creating"
|
|
>
|
|
Create Room
|
|
</SubmitButton>
|
|
<SubmitButton
|
|
formAction={close}
|
|
className="border border-foreground/20 rounded-md px-4 py-2 text-foreground mb-2 w-[10rem]"
|
|
pendingText="Closing"
|
|
>
|
|
Close
|
|
</SubmitButton>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|