mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

send message to recipient

Browse Source
This commit is contained in:
m5r 2022-05-20 00:55:02 +02:00
parent 29f405290c
commit 5bf885c060
8 changed files with 147 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/features/core/components/footer.tsx
View File

@ -6,8 +6,8 @@ import clsx from "clsx";
export default function Footer() {
return (
<footer
className="grid grid-cols-4 bg-[#F7F7F7] border-t border-gray-400 border-opacity-25 py-3 z-10"
style={{ flex: "0 0 50px" }}
className="grid grid-cols-4 bg-[#F7F7F7] h-16 border-t border-gray-400 border-opacity-25 py-2 z-10"
// className="grid grid-cols-4 border-t border-gray-400 border-opacity-25 py-3 z-10 backdrop-blur"
>
<FooterLink label="Calls" path="/calls" icon={<IoCall className="w-6 h-6" />} />
<FooterLink label="Keypad" path="/keypad" icon={<IoKeypad className="w-6 h-6" />} />

4
app/features/core/hooks/use-session.ts
View File

@ -1,6 +1,6 @@
import { useMatches } from "@remix-run/react";
import type { SessionOrganization, SessionUser } from "~/utils/auth.server";
import type { SessionData } from "~/utils/auth.server";
export default function useSession() {
const matches = useMatches();
@ -9,5 +9,5 @@ export default function useSession() {
throw new Error("useSession hook called outside _app route");
}
return __appRoute.data as SessionUser & { currentOrganization: SessionOrganization };
return __appRoute.data as SessionData;
}

61
app/features/messages/actions/messages.$recipient.tsx Normal file
View File

@ -0,0 +1,61 @@
import { type ActionFunction } from "@remix-run/node";
import { json } from "superjson-remix";
import db from "~/utils/db.server";
import { requireLoggedIn } from "~/utils/auth.server";
import getTwilioClient, { translateMessageDirection, translateMessageStatus } from "~/utils/twilio.server";
export type NewMessageActionData = {};
const action: ActionFunction = async ({ params, request }) => {
const user = await requireLoggedIn(request);
const organization = user.organizations[0];
const phoneNumber = await db.phoneNumber.findUnique({
where: { organizationId_isCurrent: { organizationId: user.organizations[0].id, isCurrent: true } },
});
const recipient = decodeURIComponent(params.recipient ?? "");
const formData = Object.fromEntries(await request.formData());
const { twilioAccountSid, twilioSubAccountSid } = organization;
// const twilioClient = getTwilioClient({ twilioSubAccountSid, twilioAccountSid });
const twilioClient = getTwilioClient({ twilioSubAccountSid: twilioAccountSid, twilioAccountSid });
try {
console.log({ twilioAccountSid, twilioSubAccountSid });
console.log({
body: formData.content.toString(),
to: recipient,
from: phoneNumber!.number,
});
const message = await twilioClient.messages.create({
body: formData.content.toString(),
to: recipient,
from: phoneNumber!.number,
});
await db.message.create({
data: {
phoneNumberId: phoneNumber!.id,
id: message.sid,
to: message.to,
from: message.from,
status: translateMessageStatus(message.status),
direction: translateMessageDirection(message.direction),
sentAt: new Date(message.dateCreated),
content: message.body,
},
});
} catch (error: any) {
// TODO: handle twilio error
console.log(error.code); // 21211
console.log(error.moreInfo); // https://www.twilio.com/docs/errors/21211
console.log(JSON.stringify(error));
throw error;
/*await db.message.update({
where: { id },
data: { status: MessageStatus.Error /!*errorMessage: "Reason: failed because of"*!/ },
});*/
}
return json<NewMessageActionData>({});
};
export default action;

25
app/features/messages/components/conversation.tsx
View File

@ -1,5 +1,5 @@
import { Suspense, useEffect, useMemo, useRef } from "react";
import { useParams } from "@remix-run/react";
import { useEffect, useRef } from "react";
import { useParams, useTransition } from "@remix-run/react";
import { useLoaderData } from "superjson-remix";
import clsx from "clsx";
import { Direction } from "@prisma/client";
@ -7,14 +7,31 @@ import { Direction } from "@prisma/client";
import NewMessageArea from "./new-message-area";
import { formatDate, formatTime } from "~/features/core/helpers/date-formatter";
import { type ConversationLoaderData } from "~/routes/__app/messages.$recipient";
import useSession from "~/features/core/hooks/use-session";
export default function Conversation() {
const { currentPhoneNumber } = useSession();
const params = useParams<{ recipient: string }>();
const recipient = decodeURIComponent(params.recipient ?? "");
const { conversation } = useLoaderData<ConversationLoaderData>();
const messages = useMemo(() => conversation?.messages ?? [], [conversation?.messages]);
const transition = useTransition();
const messagesListRef = useRef<HTMLUListElement>(null);
const messages = conversation.messages;
if (transition.submission) {
messages.push({
id: "temp",
phoneNumberId: currentPhoneNumber.id,
from: currentPhoneNumber.number,
to: recipient,
sentAt: new Date(),
direction: Direction.Outbound,
status: "Queued",
content: transition.submission.formData.get("content")!.toString()
})
}
useEffect(() => {
messagesListRef.current?.querySelector("li:last-child")?.scrollIntoView();
}, [messages, messagesListRef]);
@ -74,7 +91,7 @@ export default function Conversation() {
})}
</ul>
</div>
<NewMessageArea recipient={recipient} />
<NewMessageArea />
</>
);
}

92
app/features/messages/components/new-message-area.tsx
View File

@ -1,68 +1,34 @@
import type { FunctionComponent } from "react";
import { useEffect, useRef } from "react";
import { Form, useTransition } from "@remix-run/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;
};
function NewMessageArea() {
const transition = useTransition();
const formRef = useRef<HTMLFormElement>(null);
const textFieldRef = useRef<HTMLTextAreaElement>(null);
const isSendingMessage = transition.state === "submitting";
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?.();
};
useEffect(() => {
if (isSendingMessage) {
formRef.current?.reset();
textFieldRef.current?.focus();
}
}, [isSendingMessage]);
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"
<Form
ref={formRef}
method="post"
className="absolute bottom-0 w-screen backdrop-filter backdrop-blur-xl bg-white bg-opacity-75 border-t flex flex-row h-14 mb-16 p-2 pr-0"
replace
>
<textarea
ref={textFieldRef}
name="content"
className="resize-none flex-1"
className="resize-none rounded-full flex-1"
style={{
scrollbarWidth: "none",
}}
autoCapitalize="sentences"
autoCorrect="on"
placeholder="Text message"
@ -73,16 +39,8 @@ const NewMessageArea: FunctionComponent<Props> = ({ recipient, onSend }) => {
<button type="submit">
<IoSend className="h-8 w-8 pl-1 pr-2" />
</button>
</form>
</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);
});
}

20
app/routes/__app.tsx
View File

@ -5,9 +5,9 @@ import { type SessionData, type SessionOrganization, requireLoggedIn } from "~/u
import Footer from "~/features/core/components/footer";
import db from "~/utils/db.server";
export type AppLoaderData = SessionData
export type AppLoaderData = SessionData;
export const loader:LoaderFunction = async ({ request }) => {
export const loader: LoaderFunction = async ({ request }) => {
const user = await requireLoggedIn(request);
const organization = await db.organization.findUnique({
where: { id: user.organizations[0].id },
@ -16,21 +16,27 @@ export const loader:LoaderFunction = async ({ request }) => {
where: { userId: user.id },
select: { role: true },
},
phoneNumbers: {
where: { isCurrent: true },
select: { id: true, number: true },
},
},
});
const currentOrganization: SessionOrganization = {
id: organization!.id,
twilioAccountSid: organization!.twilioAccountSid,
twilioSubAccountSid: organization!.twilioSubAccountSid,
role: organization!.memberships[0].role,
};
const currentPhoneNumber = organization!.phoneNumbers[0];
return json<AppLoaderData>({ ...user, currentOrganization });
}
return json<AppLoaderData>({ ...user, currentOrganization, currentPhoneNumber });
};
export default function __App() {
const hideFooter = false;
const matches = useMatches();
// matches[0].handle
// matches[0].handle.hideFooter
// console.log("matches", matches);
return (
@ -55,9 +61,7 @@ export function CatchBoundary() {
<div className="h-full w-full overflow-hidden fixed bg-gray-100">
<div className="flex flex-col w-full h-full">
<div className="flex flex-col flex-1 w-full overflow-y-auto">
<main className="flex flex-col flex-1 my-0 h-full">
{caught.status}
</main>
<main className="flex flex-col flex-1 my-0 h-full">{caught.status}</main>
</div>
<Footer />
</div>

30
app/routes/__app/messages.$recipient.tsx
View File

@ -1,15 +1,16 @@
import { Suspense } from "react";
import type { LoaderFunction, MetaFunction } from "@remix-run/node";
import { useNavigate, useParams } from "@remix-run/react";
import { Link, useNavigate, useParams } from "@remix-run/react";
import { json, useLoaderData } from "superjson-remix";
import { IoCall, IoChevronBack, IoInformationCircle } from "react-icons/io5";
import { IoCall, IoChevronBack } from "react-icons/io5";
import { parsePhoneNumber } from "awesome-phonenumber";
import { type Message, Prisma } from "@prisma/client";
import Conversation from "~/features/messages/components/conversation";
import { getSeoMeta } from "~/utils/seo";
import db from "~/utils/db.server";
import { parsePhoneNumber } from "awesome-phonenumber";
import { requireLoggedIn } from "~/utils/auth.server";
import newMessageAction from "~/features/messages/actions/messages.$recipient";
export const meta: MetaFunction = ({ params }) => {
const recipient = decodeURIComponent(params.recipient ?? "");
@ -21,6 +22,8 @@ export const meta: MetaFunction = ({ params }) => {
};
};
export const action = newMessageAction;
type ConversationType = {
recipient: string;
formattedPhoneNumber: string;
@ -70,20 +73,21 @@ export default function ConversationPage() {
const { conversation } = useLoaderData<ConversationLoaderData>();
return (
<>
<header className="absolute top-0 w-screen h-12 backdrop-filter backdrop-blur-sm bg-white bg-opacity-75 border-b grid grid-cols-3 items-center">
<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={() => navigate(-1)}>
<IoChevronBack className="h-8 w-8" />
</span>
<strong className="col-span-1">{conversation?.formattedPhoneNumber ?? recipient}</strong>
<span className="col-span-1 flex justify-end space-x-4 pr-2">
<IoCall className="h-8 w-8" />
<IoInformationCircle className="h-8 w-8" />
<section className="h-full">
<header className="absolute top-0 w-screen h-12 backdrop-filter backdrop-blur-sm bg-white bg-opacity-75 border-b items-center flex justify-between">
<span className="pl-2 cursor-pointer" onClick={() => navigate(-1)}>
<IoChevronBack className="h-6 w-6" />
</span>
<strong className="absolute right-0 left-0 text-center pointer-events-none">
{conversation?.formattedPhoneNumber ?? recipient}
</strong>
<Link to={`/outgoing-call/${encodeURI(recipient)}`} className="pr-2">
<IoCall className="h-6 w-6" />
</Link>
</header>
{/*<Suspense fallback={<div className="pt-12">Loading messages with {recipient}</div>}>*/}
<Conversation />
{/*</Suspense>*/}
</>
</section>
);
}

12
app/utils/auth.server.ts
View File

@ -1,7 +1,7 @@
import { redirect, type Session } from "@remix-run/node";
import type { FormStrategyVerifyParams } from "remix-auth-form";
import SecurePassword from "secure-password";
import type { MembershipRole, Organization, User } from "@prisma/client";
import type { MembershipRole, Organization, PhoneNumber, User } from "@prisma/client";
import db from "./db.server";
import logger from "./logger.server";
@ -12,10 +12,11 @@ import { commitSession, destroySession, getSession } from "./session.server";
export type SessionOrganization = Pick<Organization, "id" | "twilioSubAccountSid" | "twilioAccountSid"> & {
role: MembershipRole;
};
export type SessionPhoneNumber = Pick<PhoneNumber, "id" | "number">;
export type SessionUser = Omit<User, "hashedPassword"> & {
organizations: SessionOrganization[];
};
export type SessionData = SessionUser & { currentOrganization: SessionOrganization };
export type SessionData = SessionUser & { currentOrganization: SessionOrganization; currentPhoneNumber: SessionPhoneNumber };
const SP = new SecurePassword();
@ -136,10 +137,11 @@ export async function requireLoggedOut(request: Request) {
export async function requireLoggedIn(request: Request) {
const user = await authenticator.isAuthenticated(request);
const signInUrl = "/sign-in";
const redirectTo = buildRedirectTo(new URL(request.url));
const searchParams = new URLSearchParams({ redirectTo });
if (!user) {
const signInUrl = "/sign-in";
const redirectTo = buildRedirectTo(new URL(request.url));
const searchParams = new URLSearchParams({ redirectTo });
throw redirect(`${signInUrl}?${searchParams.toString()}`, {
headers: { "Set-Cookie": await destroySession(await getSession(request)) },
});