add import messages/calls ui feedback

app/phone-calls/api/queue/insert-calls.ts

@@ -34,6 +34,22 @@ const insertCallsQueue = Queue<Payload>("api/queue/insert-calls", async ({ calls
 		.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
 
 	await db.phoneCall.createMany({ data: phoneCalls, skipDuplicates: true });
+
+	const processingState = await db.processingPhoneNumber.findFirst({ where: { organizationId, phoneNumberId } });
+	if (!processingState) {
+		return;
+	}
+
+	if (processingState.hasFetchedMessages) {
+		await db.processingPhoneNumber.delete({
+			where: { organizationId_phoneNumberId: { organizationId, phoneNumberId } },
+		});
+	} else {
+		await db.processingPhoneNumber.update({
+			where: { organizationId_phoneNumberId: { organizationId, phoneNumberId } },
+			data: { hasFetchedCalls: true },
+		});
+	}
 });
 
 export default insertCallsQueue;

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

@@ -1,12 +1,25 @@
+import { useEffect } from "react";
 import { HiPhoneMissedCall, HiPhoneOutgoing } from "react-icons/hi";
-
-import { Direction } from "../../../db";
-import usePhoneCalls from "../hooks/use-phone-calls";
-import { formatRelativeDate } from "../../core/helpers/date-formatter";
 import clsx from "clsx";
 
+import { Direction } from "../../../db";
+import PhoneInitLoader from "../../core/components/phone-init-loader";
+import usePhoneCalls from "../hooks/use-phone-calls";
+import { formatRelativeDate } from "../../core/helpers/date-formatter";
+
 export default function PhoneCallsList() {
-	const phoneCalls = usePhoneCalls()[0];
+	const [phoneCalls, query] = usePhoneCalls();
+
+	useEffect(() => {
+		if (!phoneCalls) {
+			const pollInterval = setInterval(() => query.refetch(), 1500);
+			return () => clearInterval(pollInterval);
+		}
+	}, [phoneCalls, query]);
+
+	if (!phoneCalls) {
+		return <PhoneInitLoader />;
+	}
 
 	if (phoneCalls.length === 0) {
 		return <div>empty state</div>;

app/phone-calls/pages/calls.tsx

@@ -14,9 +14,11 @@ const PhoneCalls: BlitzPage = () => {
 			<div className="flex flex-col space-y-6 py-3 pl-12">
 				<h2 className="text-3xl font-bold">Calls</h2>
 			</div>
-			<Suspense fallback="Loading...">
-				<PhoneCallsList />
-			</Suspense>
+			<section className="flex flex-grow flex-col">
+				<Suspense fallback="Loading...">
+					<PhoneCallsList />
+				</Suspense>
+			</section>
 		</>
 	);
 };

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

@@ -10,6 +10,11 @@ const Body = z.object({
 
 export default resolver.pipe(resolver.zod(Body), resolver.authorize(), async ({ phoneNumberId }, context) => {
 	const organizationId = context.session.orgId;
+	const processingState = await db.processingPhoneNumber.findFirst({ where: { organizationId, phoneNumberId } });
+	if (processingState && !processingState.hasFetchedCalls) {
+		return;
+	}
+
 	const phoneCalls = await db.phoneCall.findMany({
 		where: { organizationId, phoneNumberId },
 		orderBy: { createdAt: Prisma.SortOrder.desc },