129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
import { Divider, Modal, Select } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
ShowModalType,
|
|
useKeyboardContext,
|
|
} from "../../contexts/keyboardContext";
|
|
|
|
const { Option } = Select;
|
|
|
|
const thisModalType = ShowModalType.createRoom;
|
|
|
|
export default function CreateRoomModal() {
|
|
const { pastedLink, handleModalType, showModalType } = useKeyboardContext();
|
|
|
|
useEffect(() => {
|
|
// todo: check if link is valid google meet link? again?
|
|
setRoomLink(pastedLink);
|
|
}, [pastedLink]);
|
|
|
|
const handleCloseModal = () => {
|
|
handleModalType(ShowModalType.na);
|
|
};
|
|
|
|
const handleSubmit = () => {};
|
|
|
|
const [roomLink, setRoomLink] = useState<string>(pastedLink);
|
|
const [membersSelected, setMembersSelected] = useState<string[]>([]);
|
|
|
|
function handleSelectMember(value) {
|
|
// setMemberSelection()
|
|
console.log(value);
|
|
}
|
|
|
|
const children = [];
|
|
for (let i = 10; i < 36; i++) {
|
|
children.push(
|
|
<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>
|
|
);
|
|
}
|
|
|
|
const MemberSelection = () => {
|
|
return (
|
|
<Select
|
|
mode="multiple"
|
|
allowClear
|
|
style={{ width: "100%" }}
|
|
placeholder="Please select"
|
|
defaultValue={["a10", "c12"]}
|
|
onChange={handleSelectMember}
|
|
>
|
|
{children}
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title="Create Room"
|
|
centered
|
|
visible={showModalType == thisModalType ? true : false}
|
|
onOk={handleSubmit}
|
|
onCancel={handleCloseModal}
|
|
>
|
|
<div className="flex flex-col">
|
|
<span className="flex flex-col items-start">
|
|
<span className="text-md">Link</span>
|
|
<span className="text-gray-300 text-xs mb-2">
|
|
Please make sure this is valid so that your team can join properly.
|
|
</span>
|
|
<input
|
|
className="w-full rounded-lg bg-gray-50 p-3"
|
|
value={roomLink}
|
|
onChange={(e) => setRoomLink(e.target.value)}
|
|
/>
|
|
</span>
|
|
|
|
<div className="flex flex-row justify-between space-x-3 mt-4">
|
|
<span className="flex flex-col items-start flex-1 ">
|
|
<span className="text-md">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={""}
|
|
onChange={(e) => setRoomLink(e.target.value)}
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
<Divider />
|
|
|
|
<span className="flex flex-col items-start flex-1 mt-4">
|
|
<span className="text-md">People</span>
|
|
<span className="text-gray-300 text-xs mb-2 flex-1">
|
|
Optional - Add anyone you want or just tell them later.
|
|
</span>
|
|
{MemberSelection()}
|
|
</span>
|
|
|
|
<span className="flex flex-col items-start flex-1 mt-4">
|
|
<span className="text-md">Subtitle</span>
|
|
<span className="text-gray-300 text-xs mb-2 flex-1">Optional</span>
|
|
<input
|
|
placeholder="ex. Looking for feedback if..."
|
|
className="w-full rounded-lg bg-gray-50 p-3"
|
|
value={""}
|
|
onChange={(e) => setRoomLink(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 - add a ppt or meeting notes for people to follow along
|
|
</span>
|
|
<input
|
|
placeholder="https://"
|
|
className="w-full rounded-lg bg-gray-50 p-3"
|
|
value={""}
|
|
onChange={(e) => setRoomLink(e.target.value)}
|
|
/>
|
|
</span>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|