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

106 lines
2.8 KiB
TypeScript
Raw Normal View History

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPaperPlane } from "@fortawesome/pro-regular-svg-icons";
import { useForm } from "react-hook-form";
2021-08-01 10:46:10 +00:00
import { useMutation, useQuery } from "blitz";
2021-07-31 14:33:18 +00:00
import sendMessage from "../mutations/send-message";
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";
2021-08-01 07:40:18 +00:00
import { FunctionComponent } from "react";
2021-07-31 14:33:18 +00:00
type Form = {
content: string;
};
2021-07-31 14:33:18 +00:00
2021-08-01 07:40:18 +00:00
type Props = {
recipient: string;
onSend?: () => void;
};
const NewMessageArea: FunctionComponent<Props> = ({ recipient, onSend }) => {
const { customer } = useCurrentCustomer();
const phoneNumber = useCustomerPhoneNumber();
const sendMessageMutation = useMutation(sendMessage)[0];
2021-07-31 14:33:18 +00:00
const { setQueryData: setConversationsQueryData, refetch: refetchConversations } = useQuery(
getConversationsQuery,
2021-08-01 12:04:04 +00:00
{},
)[1];
2021-07-31 14:33:18 +00:00
const {
register,
handleSubmit,
setValue,
formState: { isSubmitting },
} = useForm<Form>();
2021-07-31 14:33:18 +00:00
const onSubmit = handleSubmit(async ({ content }) => {
2021-08-01 07:40:18 +00:00
if (!recipient) {
return;
}
2021-07-31 14:33:18 +00:00
if (isSubmitting) {
return;
2021-07-31 14:33:18 +00:00
}
const id = uuidv4();
2021-07-31 14:33:18 +00:00
const message: Message = {
id,
customerId: customer!.id,
twilioSid: id,
from: phoneNumber!.phoneNumber,
to: recipient,
content: content,
direction: Direction.Outbound,
status: MessageStatus.Queued,
sentAt: new Date(),
};
2021-07-31 14:33:18 +00:00
await setConversationsQueryData(
(conversations) => {
const nextConversations = { ...conversations };
2021-07-31 14:33:18 +00:00
if (!nextConversations[recipient]) {
nextConversations[recipient] = [];
2021-07-31 14:33:18 +00:00
}
nextConversations[recipient] = [...nextConversations[recipient]!, message];
return nextConversations;
2021-07-31 14:33:18 +00:00
},
2021-08-01 12:04:04 +00:00
{ refetch: false },
);
setValue("content", "");
2021-08-01 07:40:18 +00:00
onSend?.();
await sendMessageMutation({ to: recipient, content });
await refetchConversations({ cancelRefetch: true });
});
2021-07-31 14:33:18 +00:00
return (
<form
onSubmit={onSubmit}
className="absolute bottom-0 w-screen backdrop-filter backdrop-blur-xl bg-white bg-opacity-75 border-t flex flex-row h-16 p-2 pr-0"
>
<textarea
className="resize-none flex-1"
autoCapitalize="sentences"
autoCorrect="on"
placeholder="Text message"
rows={1}
spellCheck
{...register("content", { required: true })}
/>
<button type="submit">
<FontAwesomeIcon size="2x" className="h-8 w-8 pl-1 pr-2" icon={faPaperPlane} />
</button>
</form>
);
2021-08-01 07:40:18 +00:00
};
export default NewMessageArea;
2021-07-31 14:33:18 +00:00
function uuidv4() {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
const r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
2021-07-31 14:33:18 +00:00
}