Allow to join any room even if it's already created
This commit is contained in:
harshithpabbati
parent
2abb63569a
commit
71987c3f2b
|
|
@ -1,100 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardHeader, CardBody } from '@custom/shared/components/Card';
|
||||
import Loader from '@custom/shared/components/Loader';
|
||||
import Well from '@custom/shared/components/Well';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export const CreatingRoom = ({ onCreated }) => {
|
||||
const [room, setRoom] = useState();
|
||||
const [fetching, setFetching] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (room) return;
|
||||
|
||||
async function createRoom() {
|
||||
setError(false);
|
||||
setFetching(true);
|
||||
|
||||
console.log(`🚪 Creating new demo room...`);
|
||||
|
||||
// Create a room server side (using Next JS serverless)
|
||||
const res = await fetch('/api/createRoom', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
const resJson = await res.json();
|
||||
|
||||
if (resJson.name) {
|
||||
setFetching(false);
|
||||
setRoom(resJson.name);
|
||||
return;
|
||||
}
|
||||
|
||||
setError(resJson.error || 'An unknown error occured');
|
||||
setFetching(false);
|
||||
}
|
||||
|
||||
createRoom();
|
||||
}, [room]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!room || !onCreated) return;
|
||||
|
||||
console.log(`🚪 Room created: ${room}, joining now`);
|
||||
|
||||
onCreated(room, true);
|
||||
}, [room, onCreated]);
|
||||
|
||||
return (
|
||||
<div className="creating-room">
|
||||
{fetching && (
|
||||
<div className="creating">
|
||||
<Loader /> Creating new demo room...
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<Card error>
|
||||
<CardHeader>An error occured</CardHeader>
|
||||
<CardBody>
|
||||
<Well variant="error">{error}</Well>
|
||||
An error occured when trying to create a demo room. Please check
|
||||
that your environmental variables are correct and try again.
|
||||
</CardBody>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.creating-room {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.creating-room .creating {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.creating-room :global(.loader) {
|
||||
margin-right: var(--spacing-xxxs);
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
CreatingRoom.propTypes = {
|
||||
onCreated: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default CreatingRoom;
|
||||
|
|
@ -120,6 +120,7 @@ export const Intro = ({
|
|||
</CardBody>
|
||||
<CardFooter divider>
|
||||
<Button
|
||||
loading={fetching}
|
||||
fullWidth
|
||||
onClick={() => onJoin(slugify.convert(roomName), 'create', duration, privacy)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
export default async function handler(req, res) {
|
||||
const { roomName } = req.query;
|
||||
const { privacy, expiryMinutes, ...rest } = req.body;
|
||||
|
||||
if (req.method === 'POST') {
|
||||
console.log(`Modifying room on domain ${process.env.DAILY_DOMAIN}`);
|
||||
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${process.env.DAILY_API_KEY}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
privacy: privacy || 'public',
|
||||
properties: {
|
||||
exp: Math.round(Date.now() / 1000) + (expiryMinutes || 5) * 60, // expire in x minutes
|
||||
eject_at_room_exp: true,
|
||||
enable_knocking: privacy !== 'public',
|
||||
...rest,
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
const dailyRes = await fetch(
|
||||
`${process.env.DAILY_REST_DOMAIN || 'https://api.daily.co/v1'}/rooms/${roomName}`,
|
||||
options
|
||||
);
|
||||
|
||||
const { name, url, error } = await dailyRes.json();
|
||||
|
||||
if (error) {
|
||||
return res.status(500).json({ error });
|
||||
}
|
||||
|
||||
return res
|
||||
.status(200)
|
||||
.json({ name, url, domain: process.env.DAILY_DOMAIN });
|
||||
}
|
||||
|
||||
return res.status(500);
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/*
|
||||
* This is an example server-side function that retrieves the room object.
|
||||
*/
|
||||
export default async function handler(req, res) {
|
||||
const { name } = req.query;
|
||||
|
||||
if (req.method === 'GET') {
|
||||
const options = {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${process.env.DAILY_API_KEY}`,
|
||||
},
|
||||
};
|
||||
|
||||
const dailyRes = await fetch(
|
||||
`${
|
||||
process.env.DAILY_REST_DOMAIN || 'https://api.daily.co/v1'
|
||||
}/rooms/${name}`,
|
||||
options
|
||||
);
|
||||
|
||||
const response = await dailyRes.json();
|
||||
return res.status(200).json(response);
|
||||
}
|
||||
|
||||
return res.status(500);
|
||||
}
|
||||
|
|
@ -57,30 +57,62 @@ export default function Index({
|
|||
setError(false);
|
||||
setFetching(true);
|
||||
|
||||
console.log(`🚪 Creating a new class...`);
|
||||
console.log(`🚪 Verifying if there's a class with same name`);
|
||||
|
||||
// Create a room server side (using Next JS serverless)
|
||||
const res = await fetch('/api/createRoom', {
|
||||
method: 'POST',
|
||||
const verifyingRes = await fetch(`/api/room?name=${room}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
roomName: room,
|
||||
expiryMinutes: Number(duration),
|
||||
privacy: !privacy ? 'private': 'public'
|
||||
}),
|
||||
});
|
||||
|
||||
const resJson = await res.json();
|
||||
const verifyingResJson = await verifyingRes.json();
|
||||
|
||||
if (resJson.name) {
|
||||
setFetching(false);
|
||||
await getMeetingToken(resJson.name, true);
|
||||
return;
|
||||
// it throws an error saying not-found if the room doesn't exist.
|
||||
// so we create a new room here.
|
||||
if (verifyingResJson.error === 'not-found') {
|
||||
console.log(`🚪 Creating a new class...`);
|
||||
|
||||
// Create a room server side (using Next JS serverless)
|
||||
const res = await fetch('/api/createRoom', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
roomName: room,
|
||||
expiryMinutes: Number(duration),
|
||||
privacy: !privacy ? 'private': 'public'
|
||||
}),
|
||||
});
|
||||
|
||||
const resJson = await res.json();
|
||||
|
||||
if (resJson.name) {
|
||||
await getMeetingToken(resJson.name, true);
|
||||
return;
|
||||
}
|
||||
|
||||
setError(resJson?.error || 'An unknown error occured');
|
||||
} else {
|
||||
if (verifyingResJson.name) {
|
||||
const editRes = await fetch(`/api/editRoom?roomName=${room}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
expiryMinutes: Number(duration),
|
||||
privacy: !privacy ? 'private': 'public'
|
||||
}),
|
||||
});
|
||||
|
||||
const editResJson = await editRes.json();
|
||||
await getMeetingToken(editResJson.name, true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setError(resJson.error || 'An unknown error occured');
|
||||
setFetching(false);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue