send new message

app/features/messages/components/empty-messages.tsx

@@ -1,12 +1,11 @@
 import { IoCreateOutline, IoMailOutline } from "react-icons/io5";
-// import { useAtom } from "jotai";
+import { useAtom } from "jotai";
 
-// import { bottomSheetOpenAtom } from "../pages/messages";
+import { bottomSheetOpenAtom } from "~/routes/__app/messages";
 
 export default function EmptyMessages() {
-	// const setIsBottomSheetOpen = useAtom(bottomSheetOpenAtom)[1];
-	// const openNewMessageArea = () => setIsBottomSheetOpen(true);
-	const openNewMessageArea = () => void 0;
+	const setIsBottomSheetOpen = useAtom(bottomSheetOpenAtom)[1];
+	const openNewMessageArea = () => setIsBottomSheetOpen(true);
 
 	return (
 		<div className="text-center my-auto">

app/features/messages/components/new-message-area.tsx

@@ -1,8 +1,14 @@
+import type { FunctionComponent } from "react";
 import { useEffect, useRef } from "react";
 import { Form, useTransition } from "@remix-run/react";
 import { IoSend } from "react-icons/io5";
 
-function NewMessageArea() {
+type Props = {
+	onSend?: () => void;
+	recipient: string;
+};
+
+const NewMessageArea: FunctionComponent<Props> = ({ onSend, recipient }) => {
 	const transition = useTransition();
 	const formRef = useRef<HTMLFormElement>(null);
 	const textFieldRef = useRef<HTMLTextAreaElement>(null);
@@ -12,12 +18,14 @@ function NewMessageArea() {
 		if (isSendingMessage) {
 			formRef.current?.reset();
 			textFieldRef.current?.focus();
+			onSend?.();
 		}
-	}, [isSendingMessage]);
+	}, [isSendingMessage, onSend]);
 
 	return (
 		<Form
 			ref={formRef}
+			action={`/messages/${recipient}`}
 			method="post"
 			className="absolute bottom-0 w-screen backdrop-filter backdrop-blur-xl bg-white bg-opacity-75 border-t flex flex-row p-2 pr-0"
 			replace
@@ -41,6 +49,6 @@ function NewMessageArea() {
 			</button>
 		</Form>
 	);
-}
+};
 
 export default NewMessageArea;

app/features/messages/components/new-message-bottom-sheet.tsx

@@ -0,0 +1,54 @@
+import { Suspense, useRef, useState } from "react";
+import BottomSheet from "react-modal-sheet";
+import { useAtom } from "jotai";
+
+import NewMessageArea from "./new-message-area";
+import { bottomSheetOpenAtom } from "~/routes/__app/messages";
+
+export default function NewMessageBottomSheet() {
+	const [isOpen, setIsOpen] = useAtom(bottomSheetOpenAtom);
+	const [recipient, setRecipient] = useState("");
+	const recipientRef = useRef<HTMLInputElement>(null);
+
+	return (
+		<BottomSheet
+			isOpen={isOpen}
+			onOpenEnd={() => {
+				// doesn't work with iOS safari *sigh*
+				recipientRef.current?.focus();
+			}}
+			onClose={() => setIsOpen(false)}
+			snapPoints={[0.5]}
+		>
+			<BottomSheet.Container>
+				<BottomSheet.Header>
+					<div className="w-full flex items-center justify-center p-4 text-black relative">
+						<span className="font-semibold text-base">New Message</span>
+
+						<button onClick={() => setIsOpen(false)} className="absolute right-4">
+							Cancel
+						</button>
+					</div>
+				</BottomSheet.Header>
+				<BottomSheet.Content>
+					<main className="flex flex-col h-full overflow-hidden">
+						<div className="flex items-center p-4 border-t border-b">
+							<span className="mr-4 text-[#333]">To:</span>
+							<input
+								ref={recipientRef}
+								onChange={(event) => setRecipient(event.target.value)}
+								className="bg-none border-none outline-none flex-1 text-black"
+								type="tel"
+							/>
+						</div>
+						<Suspense fallback={null}>
+							<NewMessageArea onSend={() => setIsOpen(false)} recipient={recipient} />
+						</Suspense>
+					</main>
+				</BottomSheet.Content>
+			</BottomSheet.Container>
+
+			<BottomSheet.Backdrop onTap={() => setIsOpen(false)} />
+		</BottomSheet>
+	);
+}

app/features/messages/components/new-message-button.tsx

@@ -0,0 +1,20 @@
+import type { FunctionComponent, MouseEventHandler } from "react";
+import { IoCreateOutline } from "react-icons/io5";
+
+type Props = {
+	onClick: MouseEventHandler<HTMLButtonElement>;
+};
+
+const NewMessageButton: FunctionComponent<Props> = ({ onClick }) => {
+	return (
+		<button
+			onClick={onClick}
+			className="absolute bottom-20 right-6
+			w-14 h-14 bg-gray-800 rounded-full hover:bg-gray-900 active:shadow-lg shadow transition ease-in duration-200 focus:outline-none"
+		>
+			<IoCreateOutline className="m-auto pl-0.5 text-white w-8 h-8" />
+		</button>
+	);
+};
+
+export default NewMessageButton;