q works now for creating a insta room
This commit is contained in:
Arjun Patel
@@ -376,9 +376,6 @@ export default function DashboardRoom() {
|
|||||||
title={"Press q to create an instant room if you have GSuite."}
|
title={"Press q to create an instant room if you have GSuite."}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
onClick={() =>
|
|
||||||
window.open("https://meet.google.com/new", "_blank")
|
|
||||||
}
|
|
||||||
className="right-1 rounded-lg py-1 px-2 ml-1
|
className="right-1 rounded-lg py-1 px-2 ml-1
|
||||||
shadow-md text-center text-white text-sm font-bold"
|
shadow-md text-center text-white text-sm font-bold"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -99,7 +99,6 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
|
|||||||
|
|
||||||
if (hasGSuite) {
|
if (hasGSuite) {
|
||||||
// create google meet link based on the room name without spaces
|
// create google meet link based on the room name without spaces
|
||||||
|
|
||||||
var slugName =
|
var slugName =
|
||||||
user.firstName +
|
user.firstName +
|
||||||
"-" +
|
"-" +
|
||||||
@@ -252,18 +251,46 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
function createRoomNow() {
|
async function createRoomNow() {
|
||||||
console.log("creating room");
|
console.log("creating room");
|
||||||
|
|
||||||
// reset form for the right values to be in there
|
// reset form for the right values to be in there
|
||||||
// resetForm();
|
resetForm();
|
||||||
|
|
||||||
// handleGetAutoGSuiteLink();
|
|
||||||
|
|
||||||
// submit form
|
// submit form
|
||||||
// handleSubmit().then(() => {
|
// handleSubmit().then((res) => console.log(res));
|
||||||
// console.log("creating room instantly");
|
|
||||||
// });
|
const newRoom = new Room();
|
||||||
|
|
||||||
|
// create google meet link based on the room name without spaces
|
||||||
|
var slugName =
|
||||||
|
user.firstName + "-" + "room" + moment(new Date()).format("dddddohmma");
|
||||||
|
slugName = slugName.replace(/\s/g, "-");
|
||||||
|
|
||||||
|
const autoLink =
|
||||||
|
"https://accounts.google.com/AccountChooser/signinchooser?continue=https://g.co/meet/" +
|
||||||
|
slugName;
|
||||||
|
|
||||||
|
newRoom.link = autoLink;
|
||||||
|
newRoom.status = RoomStatus.empty;
|
||||||
|
newRoom.membersInRoom = [];
|
||||||
|
newRoom.approximateDateTime = null;
|
||||||
|
|
||||||
|
newRoom.members = [currUser.uid]; // add currUser to the list of "people"
|
||||||
|
newRoom.type = RoomType.now;
|
||||||
|
newRoom.name = roomName;
|
||||||
|
newRoom.createdByUserId = currUser.uid;
|
||||||
|
newRoom.teamId = team.id;
|
||||||
|
|
||||||
|
console.log(newRoom);
|
||||||
|
|
||||||
|
handleModalType(ShowModalType.na);
|
||||||
|
|
||||||
|
await roomService.createOrUpdateRoom(newRoom);
|
||||||
|
|
||||||
|
resetForm();
|
||||||
|
|
||||||
|
toast.success("created room");
|
||||||
}
|
}
|
||||||
|
|
||||||
const keyMap: KeyMap = {
|
const keyMap: KeyMap = {
|
||||||
@@ -278,123 +305,124 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<>
|
||||||
title="Room Details"
|
|
||||||
centered
|
|
||||||
visible={props.show}
|
|
||||||
onOk={handleSubmit}
|
|
||||||
onCancel={handleCloseModal}
|
|
||||||
>
|
|
||||||
<GlobalHotKeys keyMap={keyMap} handlers={handlers} />
|
<GlobalHotKeys keyMap={keyMap} handlers={handlers} />
|
||||||
|
|
||||||
<div className="flex flex-col">
|
<Modal
|
||||||
{hasGSuite ? (
|
title="Room Details"
|
||||||
<span className="flex flex-col items-start">
|
centered
|
||||||
<span className="text-lg">Link</span>
|
visible={props.show}
|
||||||
<span className="text-gray-300 text-xs flex-1">
|
onOk={handleSubmit}
|
||||||
We'll create a link for you. Don't have a GSuite?{" "}
|
onCancel={handleCloseModal}
|
||||||
<button
|
>
|
||||||
onClick={() => sethasGSuite(false)}
|
<div className="flex flex-col">
|
||||||
className="text-blue-500"
|
{hasGSuite ? (
|
||||||
>
|
<span className="flex flex-col items-start">
|
||||||
Click here.
|
<span className="text-lg">Link</span>
|
||||||
</button>
|
<span className="text-gray-300 text-xs flex-1">
|
||||||
</span>
|
We'll create a link for you. Don't have a GSuite?{" "}
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="flex flex-col items-start">
|
|
||||||
<span className="text-lg">Link</span>
|
|
||||||
{roomLink ? (
|
|
||||||
<span className="text-gray-300 text-xs mb-2">
|
|
||||||
Please make sure this is valid so that your team can join
|
|
||||||
properly.
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="text-xs mb-2">
|
|
||||||
<a
|
|
||||||
href="https://meet.google.com/new"
|
|
||||||
target={"_blank"}
|
|
||||||
rel={"noreferrer"}
|
|
||||||
className=""
|
|
||||||
>
|
|
||||||
Click here to create one
|
|
||||||
</a>{" "}
|
|
||||||
and then come back and paste the link for your team.{" "}
|
|
||||||
<button
|
<button
|
||||||
onClick={() => sethasGSuite(true)}
|
onClick={() => sethasGSuite(false)}
|
||||||
className="text-blue-500"
|
className="text-blue-500"
|
||||||
>
|
>
|
||||||
Have a GSuite? Click here.
|
Click here.
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
)}
|
</span>
|
||||||
|
|
||||||
<input
|
|
||||||
autoFocus
|
|
||||||
className="w-full rounded-lg bg-gray-50 p-3"
|
|
||||||
value={roomLink}
|
|
||||||
placeholder="https://meet.google.com/xxx-xxxx"
|
|
||||||
onChange={(e) => setRoomLink(e.target.value)}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<span className="flex flex-col items-start flex-1 mt-4 ">
|
|
||||||
<span className="text-lg">Room Name</span>
|
|
||||||
<span className="text-gray-300 text-xs mb-2 flex-1">
|
|
||||||
Be specific enough, everyone down the hall will see this.
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
placeholder="ex. Design - Ecommerce Figma"
|
|
||||||
className="w-full rounded-lg bg-gray-50 p-3"
|
|
||||||
value={roomName}
|
|
||||||
onChange={(e) => setRoomName(e.target.value)}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* room type selection */}
|
|
||||||
<span className="flex flex-col items-start flex-1 mt-4 ">
|
|
||||||
<span className="text-lg">Type</span>
|
|
||||||
<span className="text-gray-300 text-xs mb-2 flex-1"></span>
|
|
||||||
<Radio.Group
|
|
||||||
value={roomType}
|
|
||||||
onChange={(event) => setRoomType(event.target.value)}
|
|
||||||
>
|
|
||||||
<Radio.Button value={RoomType.now}>{RoomType.now}</Radio.Button>
|
|
||||||
<Radio.Button value={RoomType.scheduled}>
|
|
||||||
{RoomType.scheduled}
|
|
||||||
</Radio.Button>
|
|
||||||
<Radio.Button value={RoomType.recurring}>
|
|
||||||
{RoomType.recurring}
|
|
||||||
</Radio.Button>
|
|
||||||
</Radio.Group>
|
|
||||||
|
|
||||||
{roomType == RoomType.recurring ? (
|
|
||||||
<Tooltip
|
|
||||||
title={`Put things like "ping me when ready" or "sometime this afternoon"`}
|
|
||||||
>
|
|
||||||
<span className="flex flex-col items-stretch flex-1 mt-4">
|
|
||||||
<span className="text-md">Approximate Slot</span>
|
|
||||||
<span className="text-gray-300 text-xs mb-2 flex-1">
|
|
||||||
Sometimes you don't have a specific time or want to
|
|
||||||
propose a rough period.
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
placeholder="ex. 2pm-ish...after lunch...every evening"
|
|
||||||
className="w-full rounded-lg bg-gray-50 p-3"
|
|
||||||
value={roomAppxDateTime}
|
|
||||||
onChange={(e) => setRoomAppxDateTime(e.target.value)}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<span className="flex flex-col items-start">
|
||||||
|
<span className="text-lg">Link</span>
|
||||||
|
{roomLink ? (
|
||||||
|
<span className="text-gray-300 text-xs mb-2">
|
||||||
|
Please make sure this is valid so that your team can join
|
||||||
|
properly.
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="text-xs mb-2">
|
||||||
|
<a
|
||||||
|
href="https://meet.google.com/new"
|
||||||
|
target={"_blank"}
|
||||||
|
rel={"noreferrer"}
|
||||||
|
className=""
|
||||||
|
>
|
||||||
|
Click here to create one
|
||||||
|
</a>{" "}
|
||||||
|
and then come back and paste the link for your team.{" "}
|
||||||
|
<button
|
||||||
|
onClick={() => sethasGSuite(true)}
|
||||||
|
className="text-blue-500"
|
||||||
|
>
|
||||||
|
Have a GSuite? Click here.
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<input
|
||||||
|
autoFocus
|
||||||
|
className="w-full rounded-lg bg-gray-50 p-3"
|
||||||
|
value={roomLink}
|
||||||
|
placeholder="https://meet.google.com/xxx-xxxx"
|
||||||
|
onChange={(e) => setRoomLink(e.target.value)}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{roomType == RoomType.scheduled ? (
|
<span className="flex flex-col items-start flex-1 mt-4 ">
|
||||||
<span className="flex flex-col items-start flex-1 mt-4">
|
<span className="text-lg">Room Name</span>
|
||||||
<span className="text-md">Specific Time</span>
|
<span className="text-gray-300 text-xs mb-2 flex-1">
|
||||||
{/* <TimePicker
|
Be specific enough, everyone down the hall will see this.
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
placeholder="ex. Design - Ecommerce Figma"
|
||||||
|
className="w-full rounded-lg bg-gray-50 p-3"
|
||||||
|
value={roomName}
|
||||||
|
onChange={(e) => setRoomName(e.target.value)}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* room type selection */}
|
||||||
|
<span className="flex flex-col items-start flex-1 mt-4 ">
|
||||||
|
<span className="text-lg">Type</span>
|
||||||
|
<span className="text-gray-300 text-xs mb-2 flex-1"></span>
|
||||||
|
<Radio.Group
|
||||||
|
value={roomType}
|
||||||
|
onChange={(event) => setRoomType(event.target.value)}
|
||||||
|
>
|
||||||
|
<Radio.Button value={RoomType.now}>{RoomType.now}</Radio.Button>
|
||||||
|
<Radio.Button value={RoomType.scheduled}>
|
||||||
|
{RoomType.scheduled}
|
||||||
|
</Radio.Button>
|
||||||
|
<Radio.Button value={RoomType.recurring}>
|
||||||
|
{RoomType.recurring}
|
||||||
|
</Radio.Button>
|
||||||
|
</Radio.Group>
|
||||||
|
|
||||||
|
{roomType == RoomType.recurring ? (
|
||||||
|
<Tooltip
|
||||||
|
title={`Put things like "ping me when ready" or "sometime this afternoon"`}
|
||||||
|
>
|
||||||
|
<span className="flex flex-col items-stretch flex-1 mt-4">
|
||||||
|
<span className="text-md">Approximate Slot</span>
|
||||||
|
<span className="text-gray-300 text-xs mb-2 flex-1">
|
||||||
|
Sometimes you don't have a specific time or want to
|
||||||
|
propose a rough period.
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
placeholder="ex. 2pm-ish...after lunch...every evening"
|
||||||
|
className="w-full rounded-lg bg-gray-50 p-3"
|
||||||
|
value={roomAppxDateTime}
|
||||||
|
onChange={(e) => setRoomAppxDateTime(e.target.value)}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{roomType == RoomType.scheduled ? (
|
||||||
|
<span className="flex flex-col items-start flex-1 mt-4">
|
||||||
|
<span className="text-md">Specific Time</span>
|
||||||
|
{/* <TimePicker
|
||||||
minuteStep={15}
|
minuteStep={15}
|
||||||
use12Hours
|
use12Hours
|
||||||
format="h:mm a"
|
format="h:mm a"
|
||||||
@@ -403,101 +431,102 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
|
|||||||
onChange={handleTimePickerChange}
|
onChange={handleTimePickerChange}
|
||||||
/> */}
|
/> */}
|
||||||
|
|
||||||
<DatePicker
|
<DatePicker
|
||||||
minuteStep={15}
|
minuteStep={15}
|
||||||
use12Hours
|
use12Hours
|
||||||
format="YYYY-MM-DD h:mm a"
|
format="YYYY-MM-DD h:mm a"
|
||||||
value={dateTimePicker}
|
value={dateTimePicker}
|
||||||
onChange={handleDateTimePickerChange}
|
onChange={handleDateTimePickerChange}
|
||||||
showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
|
showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* people selection */}
|
|
||||||
<span className="flex flex-col items-start flex-1 mt-4">
|
|
||||||
<span className="flex flex-row w-full items-center">
|
|
||||||
<span className="text-lg flex-1">People</span>
|
|
||||||
{/* team or personal */}
|
|
||||||
|
|
||||||
<span className="flex flex-col items-end">
|
|
||||||
<Tooltip
|
|
||||||
title={
|
|
||||||
"Private mode coming soon, but keep it collaborative for now."
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Switch
|
|
||||||
disabled={true}
|
|
||||||
defaultChecked
|
|
||||||
checkedChildren={<span>Visible</span>}
|
|
||||||
unCheckedChildren={<span>Private</span>}
|
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</span>
|
||||||
<span className="text-gray-300 text-xs mb-2 flex-1">
|
) : (
|
||||||
Team sees this room.
|
<></>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* people selection */}
|
||||||
|
<span className="flex flex-col items-start flex-1 mt-4">
|
||||||
|
<span className="flex flex-row w-full items-center">
|
||||||
|
<span className="text-lg flex-1">People</span>
|
||||||
|
{/* team or personal */}
|
||||||
|
|
||||||
|
<span className="flex flex-col items-end">
|
||||||
|
<Tooltip
|
||||||
|
title={
|
||||||
|
"Private mode coming soon, but keep it collaborative for now."
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Switch
|
||||||
|
disabled={true}
|
||||||
|
defaultChecked
|
||||||
|
checkedChildren={<span>Visible</span>}
|
||||||
|
unCheckedChildren={<span>Private</span>}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
<span className="text-gray-300 text-xs mb-2 flex-1">
|
||||||
|
Team sees this room.
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
<span className="text-gray-300 text-xs mb-2 flex-1">
|
||||||
|
Optional - Add any mandatory attendees you want or just tell them
|
||||||
|
later.
|
||||||
|
</span>
|
||||||
|
{MemberSelection()}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span className="text-gray-300 text-xs mb-2 flex-1">
|
{showMoreDetails ? (
|
||||||
Optional - Add any mandatory attendees you want or just tell them
|
<>
|
||||||
later.
|
<Divider />
|
||||||
</span>
|
|
||||||
{MemberSelection()}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{showMoreDetails ? (
|
<button
|
||||||
<>
|
className="text-sm text-gray-300 text-left underline decoration-gray-300"
|
||||||
<Divider />
|
onClick={() => setShowMoreDetails(false)}
|
||||||
|
>
|
||||||
|
Hide details...
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span className="flex flex-col items-start flex-1 mt-4">
|
||||||
|
<span className="text-md">Agenda</span>
|
||||||
|
<span className="text-gray-300 text-xs mb-2 flex-1">
|
||||||
|
Optional
|
||||||
|
</span>
|
||||||
|
<textarea
|
||||||
|
placeholder="ex. Let's discuss ways to..."
|
||||||
|
className="w-full rounded-lg bg-gray-50 p-3"
|
||||||
|
value={roomDescription}
|
||||||
|
onChange={(e) => setRoomDescription(e.target.value)}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span className="flex flex-col items-start flex-1 mt-4">
|
||||||
|
<span className="text-md">Attachment</span>
|
||||||
|
<span className="text-gray-300 text-xs mb-2">
|
||||||
|
Optional - ppt, meeting notes...
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-300 text-xs mb-2">
|
||||||
|
have multiple? just post it in the team attachments
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
placeholder="https://"
|
||||||
|
className="w-full rounded-lg bg-gray-50 p-3"
|
||||||
|
value={roomAttachment}
|
||||||
|
onChange={(e) => setRoomAttachment(e.target.value)}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
<button
|
<button
|
||||||
className="text-sm text-gray-300 text-left underline decoration-gray-300"
|
className="text-sm text-gray-300 text-left underline decoration-gray-300 mt-5"
|
||||||
onClick={() => setShowMoreDetails(false)}
|
onClick={() => setShowMoreDetails(true)}
|
||||||
>
|
>
|
||||||
Hide details...
|
Click to show more details...
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
<span className="flex flex-col items-start flex-1 mt-4">
|
</div>
|
||||||
<span className="text-md">Agenda</span>
|
</Modal>
|
||||||
<span className="text-gray-300 text-xs mb-2 flex-1">
|
</>
|
||||||
Optional
|
|
||||||
</span>
|
|
||||||
<textarea
|
|
||||||
placeholder="ex. Let's discuss ways to..."
|
|
||||||
className="w-full rounded-lg bg-gray-50 p-3"
|
|
||||||
value={roomDescription}
|
|
||||||
onChange={(e) => setRoomDescription(e.target.value)}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span className="flex flex-col items-start flex-1 mt-4">
|
|
||||||
<span className="text-md">Attachment</span>
|
|
||||||
<span className="text-gray-300 text-xs mb-2">
|
|
||||||
Optional - ppt, meeting notes...
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-300 text-xs mb-2">
|
|
||||||
have multiple? just post it in the team attachments
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
placeholder="https://"
|
|
||||||
className="w-full rounded-lg bg-gray-50 p-3"
|
|
||||||
value={roomAttachment}
|
|
||||||
onChange={(e) => setRoomAttachment(e.target.value)}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
className="text-sm text-gray-300 text-left underline decoration-gray-300 mt-5"
|
|
||||||
onClick={() => setShowMoreDetails(true)}
|
|
||||||
>
|
|
||||||
Click to show more details...
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user