migrate to blitzjs

app/phone-calls/api/webhook/incoming-call.ts

@@ -0,0 +1,3 @@
+import type { NextApiRequest, NextApiResponse } from "next"
+
+export default async function incomingCallHandler(req: NextApiRequest, res: NextApiResponse) {}

app/phone-calls/api/webhook/outgoing-call.ts

@@ -0,0 +1,3 @@
+import type { NextApiRequest, NextApiResponse } from "next"
+
+export default async function outgoingCallHandler(req: NextApiRequest, res: NextApiResponse) {}

app/phone-calls/components/phone-calls-list.tsx

@@ -0,0 +1,24 @@
+import { Direction } from "../../../db"
+import usePhoneCalls from "../hooks/use-phone-calls"
+
+export default function PhoneCallsList() {
+	const phoneCalls = usePhoneCalls()
+
+	if (phoneCalls.length === 0) {
+		return <div>empty state</div>
+	}
+
+	return (
+		<ul className="divide-y">
+			{phoneCalls.map((phoneCall) => {
+				const recipient = Direction.Outbound ? phoneCall.to : phoneCall.from
+				return (
+					<li key={phoneCall.twilioSid} className="flex flex-row justify-between py-2">
+						<div>{recipient}</div>
+						<div>{new Date(phoneCall.createdAt).toLocaleString("fr-FR")}</div>
+					</li>
+				)
+			})}
+		</ul>
+	)
+}

app/phone-calls/hooks/use-phone-calls.ts

@@ -0,0 +1,15 @@
+import { useQuery } from "blitz"
+
+import useCurrentCustomer from "../../core/hooks/use-current-customer"
+import getPhoneCalls from "../queries/get-phone-calls"
+
+export default function usePhoneCalls() {
+	const { customer } = useCurrentCustomer()
+	if (!customer) {
+		throw new Error("customer not found")
+	}
+
+	const { phoneCalls } = useQuery(getPhoneCalls, { customerId: customer.id })[0]
+
+	return phoneCalls
+}

app/phone-calls/pages/calls.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from "react"
+import type { BlitzPage } from "blitz"
+
+import Layout from "../../core/layouts/layout"
+import PhoneCallsList from "../components/phone-calls-list"
+import useRequireOnboarding from "../../core/hooks/use-require-onboarding"
+
+const PhoneCalls: BlitzPage = () => {
+	useRequireOnboarding()
+
+	return (
+		<Layout title="Calls">
+			<div className="flex flex-col space-y-6 p-6">
+				<p>PhoneCalls page</p>
+			</div>
+			<Suspense fallback="Loading...">
+				<PhoneCallsList />
+			</Suspense>
+		</Layout>
+	)
+}
+
+PhoneCalls.authenticate = true
+
+export default PhoneCalls

app/phone-calls/queries/get-phone-calls.ts

@@ -0,0 +1,32 @@
+import { paginate, resolver } from "blitz"
+import db, { Prisma, Customer } from "db"
+
+interface GetPhoneCallsInput
+	extends Pick<Prisma.PhoneCallFindManyArgs, "where" | "orderBy" | "skip" | "take"> {
+	customerId: Customer["id"]
+}
+
+export default resolver.pipe(
+	resolver.authorize(),
+	async ({ where, orderBy, skip = 0, take = 100 }: GetPhoneCallsInput) => {
+		// TODO: in multi-tenant app, you must add validation to ensure correct tenant
+		const {
+			items: phoneCalls,
+			hasMore,
+			nextPage,
+			count,
+		} = await paginate({
+			skip,
+			take,
+			count: () => db.phoneCall.count({ where }),
+			query: (paginateArgs) => db.phoneCall.findMany({ ...paginateArgs, where, orderBy }),
+		})
+
+		return {
+			phoneCalls,
+			nextPage,
+			hasMore,
+			count,
+		}
+	}
+)