shellphone.app/app/features/messages/components/new-message-area.tsx
2022-05-14 12:22:06 +02:00

89 lines
2.4 KiB
TypeScript

import type { FunctionComponent } from "react";
import { IoSend } from "react-icons/io5";
import { type Message, Direction, MessageStatus } from "@prisma/client";
import useSession from "~/features/core/hooks/use-session";
type Props = {
recipient: string;
onSend?: () => void;
};
const NewMessageArea: FunctionComponent<Props> = ({ recipient, onSend }) => {
const { currentOrganization, /*hasOngoingSubscription*/ } = useSession();
// const phoneNumber = useCurrentPhoneNumber();
// const sendMessageMutation = useMutation(sendMessage)[0];
const onSubmit = async () => {
/*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?.();
};
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
name="content"
className="resize-none flex-1"
autoCapitalize="sentences"
autoCorrect="on"
placeholder="Text message"
rows={1}
spellCheck
required
/>
<button type="submit">
<IoSend className="h-8 w-8 pl-1 pr-2" />
</button>
</form>
);
};
export default NewMessageArea;
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);
});
}