From fb0ee9e8f6d1be5ab651d2f03b5055a9f74db84f Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Wed, 31 Jul 2024 17:47:28 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20create=20room=20in=20db?= =?UTF-8?q?=20when=20creating=20a=20new=20room?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit With unregistered rooms being now forbidden, we need to call create a room in our Django db to get an access token. Clicking on the 'Create room' will create a new entry using a Post request. The output serialized already contains an access token to the LiveKit server, thus we won't need to run the useQuery hook when navigating to the room. /!\ this modification now prevent authenticated users to create rooms by simply navigating to it. It'll be fixed in the upcoming commits. --- .../src/features/home/routes/Home.tsx | 18 ++++++++++--- .../src/features/rooms/api/ApiRoom.ts | 3 +++ .../src/features/rooms/api/createRoom.ts | 25 +++++++++++++++++++ .../features/rooms/components/Conference.tsx | 6 +++++ src/frontend/src/features/rooms/index.ts | 1 + .../src/features/rooms/routes/Room.tsx | 2 ++ 6 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 src/frontend/src/features/rooms/api/createRoom.ts diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx index 69b5e234..bc47a847 100644 --- a/src/frontend/src/features/home/routes/Home.tsx +++ b/src/frontend/src/features/home/routes/Home.tsx @@ -8,10 +8,20 @@ import { Centered } from '@/layout/Centered' import { generateRoomId } from '@/features/rooms' import { authUrl, useUser, UserAware } from '@/features/auth' import { JoinMeetingDialog } from '../components/JoinMeetingDialog' +import { useCreateRoom } from '@/features/rooms' export const Home = () => { const { t } = useTranslation('home') const { isLoggedIn } = useUser() + + const { mutateAsync: createRoom } = useCreateRoom({ + onSuccess: (data) => { + navigateTo('room', data.slug, { + state: { create: true, initialRoomData: data }, + }) + } + }); + return ( @@ -32,10 +42,10 @@ export const Home = () => { variant="primary" onPress={ isLoggedIn - ? () => - navigateTo('room', generateRoomId(), { - state: { create: true }, - }) + ? async () => { + const slug = generateRoomId() + await createRoom({slug}) + } : undefined } href={isLoggedIn ? undefined : authUrl()} diff --git a/src/frontend/src/features/rooms/api/ApiRoom.ts b/src/frontend/src/features/rooms/api/ApiRoom.ts index 37137e57..03238046 100644 --- a/src/frontend/src/features/rooms/api/ApiRoom.ts +++ b/src/frontend/src/features/rooms/api/ApiRoom.ts @@ -8,4 +8,7 @@ export type ApiRoom = { room: string token: string } + configuration?: { + [key: string]: string | number | boolean; + } } diff --git a/src/frontend/src/features/rooms/api/createRoom.ts b/src/frontend/src/features/rooms/api/createRoom.ts new file mode 100644 index 00000000..28ac424f --- /dev/null +++ b/src/frontend/src/features/rooms/api/createRoom.ts @@ -0,0 +1,25 @@ +import { useMutation, UseMutationOptions } from "@tanstack/react-query"; +import { fetchApi } from '@/api/fetchApi'; +import { ApiError } from "@/api/ApiError"; +import { ApiRoom } from "./ApiRoom"; + +export interface CreateRoomParams { + slug: string; +} + +const createRoom = ({slug}: CreateRoomParams): Promise => { + return fetchApi(`rooms/`, { + method: 'POST', + body: JSON.stringify({ + name: slug, + }), + }) +}; + + +export function useCreateRoom(options?: UseMutationOptions) { + return useMutation({ + mutationFn: createRoom, + onSuccess: options?.onSuccess, + }); +} diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx index 5f0dd4ae..6c387450 100644 --- a/src/frontend/src/features/rooms/components/Conference.tsx +++ b/src/frontend/src/features/rooms/components/Conference.tsx @@ -11,24 +11,30 @@ import { navigateTo } from '@/navigation/navigateTo' import { Screen } from '@/layout/Screen' import { QueryAware } from '@/components/QueryAware' import { fetchRoom } from '../api/fetchRoom' +import { ApiRoom } from '../api/ApiRoom' import { InviteDialog } from './InviteDialog' export const Conference = ({ roomId, userConfig, + initialRoomData, mode = 'join', }: { roomId: string userConfig: LocalUserChoices mode?: 'join' | 'create' + initialRoomData?: ApiRoom }) => { const { status, data } = useQuery({ queryKey: [keys.room, roomId, userConfig.username], + enabled: !initialRoomData, + initialData: initialRoomData, queryFn: () => fetchRoom({ roomId: roomId as string, username: userConfig.username, }), + retry: false, }) const roomOptions = useMemo((): RoomOptions => { diff --git a/src/frontend/src/features/rooms/index.ts b/src/frontend/src/features/rooms/index.ts index c7027155..5ed1e499 100644 --- a/src/frontend/src/features/rooms/index.ts +++ b/src/frontend/src/features/rooms/index.ts @@ -2,3 +2,4 @@ export { Room as RoomRoute } from './routes/Room' export { FeedbackRoute } from './routes/Feedback' export { roomIdPattern, isRoomValid } from './utils/isRoomValid' export { generateRoomId } from './utils/generateRoomId' +export { useCreateRoom } from './api/createRoom' diff --git a/src/frontend/src/features/rooms/routes/Room.tsx b/src/frontend/src/features/rooms/routes/Room.tsx index a0e5e6f8..eef3184a 100644 --- a/src/frontend/src/features/rooms/routes/Room.tsx +++ b/src/frontend/src/features/rooms/routes/Room.tsx @@ -15,6 +15,7 @@ export const Room = () => { const [userConfig, setUserConfig] = useState(null) const { roomId } = useParams() + const initialRoomData = history.state?.initialRoomData const mode = isLoggedIn && history.state?.create ? 'create' : 'join' const skipJoinScreen = isLoggedIn && mode === 'create' @@ -33,6 +34,7 @@ export const Room = () => { return (