81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { Input } from "@tensamin/ui/cmp/input";
|
|
import { Button } from "@tensamin/ui/cmp/button";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@tensamin/ui/cmp/dialog";
|
|
import z from "zod";
|
|
import { toast } from "@tensamin/shared/log";
|
|
import { useSocket } from "@tensamin/ttp/context";
|
|
|
|
/**
|
|
* Executes Page.
|
|
* @param none This function has no parameters.
|
|
* @returns unknown.
|
|
*/
|
|
export default function Page() {
|
|
const { send } = useSocket();
|
|
|
|
function submit(username: string | null) {
|
|
const schema = z
|
|
.string()
|
|
.min(1, "Username is too short")
|
|
.max(15, "Username is too long");
|
|
|
|
const result = schema.safeParse(username?.toLowerCase().trim());
|
|
|
|
if (!result.success) {
|
|
toast("error", result.error.issues[0].message);
|
|
return;
|
|
}
|
|
|
|
send("add_conversation", {
|
|
chat_partner_name: result.data,
|
|
})
|
|
.then(() => toast("success", "Conversation added"))
|
|
.catch(() => toast("error", "Failed to add conversation"));
|
|
}
|
|
|
|
return (
|
|
<div className="p-3 flex gap-2">
|
|
<Dialog>
|
|
<DialogTrigger render={<Button>Add Conversation</Button>} />
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>New Conversation</DialogTitle>
|
|
</DialogHeader>
|
|
<DialogDescription>
|
|
Add a new conversation. Just enter the username of the person you
|
|
want to add as a conversation.
|
|
</DialogDescription>
|
|
<form
|
|
className="flex flex-col gap-5"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
const form = new FormData(event.currentTarget);
|
|
const username = form.get("username") as string | null;
|
|
submit(username);
|
|
}}
|
|
>
|
|
<Input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
placeholder="Enter username..."
|
|
/>
|
|
<div className="flex w-full justify-end gap-1">
|
|
<DialogClose render={<Button variant="outline">Cancel</Button>} />
|
|
<Button type="submit">Continue</Button>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<Button disabled>Add Community</Button>
|
|
</div>
|
|
);
|
|
}
|