import type { FunctionComponent } from "react"; import { useMutation, useQuery } from "blitz"; import { IoSend } from "react-icons/io5"; import { useForm } from "react-hook-form"; import sendMessage from "../mutations/send-message"; import { Direction, Message, MessageStatus } from "../../../db"; import getConversationsQuery from "../queries/get-conversations"; import useCurrentUser from "../../core/hooks/use-current-user"; import useCurrentPhoneNumber from "../../core/hooks/use-current-phone-number"; type Form = { content: string; }; type Props = { recipient: string; onSend?: () => void; }; const NewMessageArea: FunctionComponent = ({ recipient, onSend }) => { const { organization, hasOngoingSubscription } = useCurrentUser(); const phoneNumber = useCurrentPhoneNumber(); const sendMessageMutation = useMutation(sendMessage)[0]; const { setQueryData: setConversationsQueryData, refetch: refetchConversations } = useQuery( getConversationsQuery, {}, )[1]; const { register, handleSubmit, setValue, formState: { isSubmitting }, } = useForm
(); const onSubmit = handleSubmit(async ({ content }) => { if (!recipient) { return; } if (isSubmitting) { return; } const id = uuidv4(); const message: Message = { id, organizationId: organization!.id, phoneNumberId: phoneNumber!.id, from: phoneNumber!.number, to: recipient, content: hasOngoingSubscription ? content : content + "\n\nSent from Shellphone (https://www.shellphone.app)", direction: Direction.Outbound, status: MessageStatus.Queued, sentAt: new Date(), }; await setConversationsQueryData( (conversations) => { const nextConversations = { ...conversations }; if (!nextConversations[recipient]) { nextConversations[recipient] = { recipient, formattedPhoneNumber: recipient, messages: [], }; } nextConversations[recipient]!.messages = [...nextConversations[recipient]!.messages, message]; return Object.fromEntries( Object.entries(nextConversations).sort( ([, a], [, b]) => b.messages[b.messages.length - 1]!.sentAt.getTime() - a.messages[a.messages.length - 1]!.sentAt.getTime(), ), ); }, { refetch: false }, ); setValue("content", ""); onSend?.(); await sendMessageMutation({ to: recipient, content }); await refetchConversations({ cancelRefetch: true }); }); return (