send message to new recipient

app/messages/components/conversation.tsx

@@ -8,7 +8,8 @@ import NewMessageArea from "./new-message-area";
 
 export default function Conversation() {
 	const router = useRouter();
-	const conversation = useConversation(router.params.recipient)[0];
+	const recipient = decodeURIComponent(router.params.recipient);
+	const conversation = useConversation(recipient)[0];
 	const messagesListRef = useRef<HTMLUListElement>(null);
 
 	useEffect(() => {
@@ -75,7 +76,7 @@ export default function Conversation() {
 				</ul>
 			</div>
 			<Suspense fallback={null}>
-				<NewMessageArea />
+				<NewMessageArea recipient={recipient} />
 			</Suspense>
 		</>
 	);

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

@@ -8,14 +8,18 @@ import { Direction, Message, MessageStatus } from "../../../db";
 import getConversationsQuery from "../queries/get-conversations";
 import useCurrentCustomer from "../../core/hooks/use-current-customer";
 import useCustomerPhoneNumber from "../../core/hooks/use-customer-phone-number";
+import { FunctionComponent } from "react";
 
 type Form = {
 	content: string;
 };
 
-export default function NewMessageArea() {
-	const router = useRouter();
-	const recipient = router.params.recipient;
+type Props = {
+	recipient: string;
+	onSend?: () => void;
+};
+
+const NewMessageArea: FunctionComponent<Props> = ({ recipient, onSend }) => {
 	const { customer } = useCurrentCustomer();
 	const phoneNumber = useCustomerPhoneNumber();
 	const sendMessageMutation = useMutation(sendMessage)[0];
@@ -30,6 +34,10 @@ export default function NewMessageArea() {
 		formState: { isSubmitting },
 	} = useForm<Form>();
 	const onSubmit = handleSubmit(async ({ content }) => {
+		if (!recipient) {
+			return;
+		}
+
 		if (isSubmitting) {
 			return;
 		}
@@ -60,6 +68,7 @@ export default function NewMessageArea() {
 			{ refetch: false }
 		);
 		setValue("content", "");
+		onSend?.();
 		await sendMessageMutation({ to: recipient, content });
 		await refetchConversations({ cancelRefetch: true });
 	});
@@ -83,7 +92,9 @@ export default function NewMessageArea() {
 			</button>
 		</form>
 	);
-}
+};
+
+export default NewMessageArea;
 
 function uuidv4() {
 	return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {

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

@@ -0,0 +1,53 @@
+import { Suspense, useState } from "react";
+import { BottomSheet } from "react-spring-bottom-sheet";
+import { atom, useAtom } from "jotai";
+import { useRouter, Routes } from "blitz";
+
+import "react-spring-bottom-sheet/dist/style.css";
+
+import NewMessageArea from "./new-message-area";
+
+export const bottomSheetOpenAtom = atom(false);
+
+export default function NewMessageBottomSheet() {
+	const router = useRouter();
+	const [isOpen, setIsOpen] = useAtom(bottomSheetOpenAtom);
+	const [recipient, setRecipient] = useState("");
+
+	return (
+		<BottomSheet
+			open={isOpen}
+			onDismiss={() => setIsOpen(false)}
+			snapPoints={({ maxHeight }) => maxHeight / 2}
+			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>
+			}
+		>
+			<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
+						onChange={(event) => setRecipient(event.target.value)}
+						className="bg-none border-none outline-none flex-1 text-black"
+					/>
+				</div>
+				<Suspense fallback={null}>
+					<NewMessageArea
+						recipient={recipient}
+						onSend={() => {
+							router
+								.push(Routes.ConversationPage({ recipient }))
+								.then(() => setIsOpen(false));
+						}}
+					/>
+				</Suspense>
+			</main>
+		</BottomSheet>
+	);
+}

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

@@ -0,0 +1,21 @@
+import type { FunctionComponent, MouseEventHandler } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEdit } from "@fortawesome/pro-regular-svg-icons";
+
+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"
+		>
+			<FontAwesomeIcon size="lg" className="m-auto pl-1.5 text-white w-8 h-8" icon={faEdit} />
+		</button>
+	);
+};
+
+export default NewMessageButton;