twilio connect

app/routes/__app.tsx

@@ -1,11 +1,30 @@
-import type { LoaderFunction } from "@remix-run/node";
+import { type LoaderFunction, json } from "@remix-run/node";
 import { Outlet, useCatch, useMatches } from "@remix-run/react";
 
-import { requireLoggedIn } from "~/utils/auth.server";
+import { type SessionData, type SessionOrganization, requireLoggedIn } from "~/utils/auth.server";
 import Footer from "~/features/core/components/footer";
+import db from "~/utils/db.server";
+
+export type AppLoaderData = SessionData
 
 export const loader:LoaderFunction = async ({ request }) => {
-	return requireLoggedIn(request);
+	const user = await requireLoggedIn(request);
+	const organization = await db.organization.findUnique({
+		where: { id: user.organizations[0].id },
+		include: {
+			memberships: {
+				where: { userId: user.id },
+				select: { role: true },
+			},
+		},
+	});
+	const currentOrganization: SessionOrganization = {
+		id: organization!.id,
+		twilioAccountSid: organization!.twilioAccountSid,
+		role: organization!.memberships[0].role,
+	};
+
+	return json<AppLoaderData>({ ...user, currentOrganization });
 }
 
 export default function __App() {

app/routes/__app/settings/phone.tsx

@@ -1,10 +1,10 @@
-import TwilioApiForm from "~/features/settings/components/phone/twilio-api-form";
+import TwilioConnect from "~/features/settings/components/phone/twilio-connect";
 import PhoneNumberForm from "~/features/settings/components/phone/phone-number-form";
 
 function PhoneSettings() {
 	return (
 		<div className="flex flex-col space-y-6">
-			<TwilioApiForm />
+			<TwilioConnect />
 			<PhoneNumberForm />
 		</div>
 	);

app/routes/twilio.authorize.ts

@@ -0,0 +1,25 @@
+import { type LoaderFunction, redirect } from "@remix-run/node";
+import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
+import db from "~/utils/db.server";
+import { commitSession } from "~/utils/session.server";
+
+export const loader: LoaderFunction = async ({ request }) => {
+	const user = await requireLoggedIn(request);
+	const url = new URL(request.url);
+	const twilioAccountSid = url.searchParams.get("AccountSid");
+	if (!twilioAccountSid) {
+		throw new Error("unreachable");
+	}
+
+	await db.organization.update({
+		where: { id: user.organizations[0].id },
+		data: { twilioAccountSid },
+	});
+
+	const { session } = await refreshSessionData(request);
+	return redirect("/settings/phone", {
+		headers: {
+			"Set-Cookie": await commitSession(session),
+		},
+	});
+};