Update UI

src/pages/bulk.tsx

@@ -1,4 +1,4 @@
-import { Button, Page, Spacer, Text, Textarea } from "@geist-ui/react";
+import { Button, Page, Spacer, Table, Text, Textarea } from "@geist-ui/react";
 import { CheckEmailOutput } from "@reacherhq/api/lib";
 import React, { useEffect, useState } from "react";
 
@@ -22,16 +22,12 @@ interface BulkProps {
 	onVerified?(result: CheckEmailOutput): Promise<void>;
 }
 
-interface BulkJobWithEmails extends Tables<"bulk_jobs"> {
-	bulk_emails: Tables<"bulk_emails">[];
-}
-
 export default function Bulk({ onVerified }: BulkProps): React.ReactElement {
 	const { user, userDetails } = useUser();
 	const [emails, setEmails] = useState("");
 	const [loading, setLoading] = useState(false);
 
-	const [bulkJobs, setBulkJobs] = useState<BulkJobWithEmails[]>([]);
+	const [bulkJobs, setBulkJobs] = useState<Tables<"bulk_jobs_info">[]>([]);
 
 	useEffect(() => {
 		// This is a temporary redirect to the dashboard while I still work
@@ -45,9 +41,8 @@ export default function Bulk({ onVerified }: BulkProps): React.ReactElement {
 		setInterval(async () => {
 			console.log("FETCHING BULK JOBS...");
 			const res = await supabase
-				.from<BulkJobWithEmails>("bulk_jobs")
-				.select(`*,bulk_emails(*)`)
-				.order("created_at", { ascending: false });
+				.from<Tables<"bulk_jobs_info">>("bulk_jobs_info")
+				.select("*");
 			if (res.error) {
 				sentryException(res.error);
 				return;
@@ -122,20 +117,15 @@ export default function Bulk({ onVerified }: BulkProps): React.ReactElement {
 
 				<Spacer />
 
-				<div>
-					ALLJOBS:
-					{bulkJobs.map((job) => (
-						<div key={job.id}>
-							{job.id} -{" "}
-							{
-								job.bulk_emails.filter(
-									({ call_id }) => !!call_id
-								).length
-							}
-							/{job.bulk_emails.length}
-						</div>
-					))}
-				</div>
+				<Table data={bulkJobs}>
+					<Table.Column prop="job_id" label="job_id" />
+					<Table.Column prop="verified" label="Verified" />
+					<Table.Column
+						prop="number_of_emails"
+						label="Total emails"
+					/>
+					<Table.Column prop="created_at" label="Created At" />
+				</Table>
 			</Page>
 		</>
 	);

src/supabase/database.types.ts

@@ -35,6 +35,13 @@ export interface Database {
 						isOneToOne: false;
 						referencedRelation: "bulk_jobs";
 						referencedColumns: ["id"];
+					},
+					{
+						foreignKeyName: "bulk_emails_bulk_job_id_fkey";
+						columns: ["bulk_job_id"];
+						isOneToOne: false;
+						referencedRelation: "bulk_jobs_info";
+						referencedColumns: ["job_id"];
 					}
 				];
 			};
@@ -364,6 +371,24 @@ export interface Database {
 			};
 		};
 		Views: {
+			bulk_jobs_info: {
+				Row: {
+					created_at: string | null;
+					job_id: number | null;
+					number_of_emails: number | null;
+					user_id: string | null;
+					verified: number | null;
+				};
+				Relationships: [
+					{
+						foreignKeyName: "bulk_jobs_user_id_fkey";
+						columns: ["user_id"];
+						isOneToOne: false;
+						referencedRelation: "users";
+						referencedColumns: ["id"];
+					}
+				];
+			};
 			sub_and_calls: {
 				Row: {
 					current_period_end: string | null;
@@ -385,7 +410,16 @@ export interface Database {
 			};
 		};
 		Functions: {
-			[_ in never]: never;
+			bulk_job_info: {
+				Args: {
+					job_id: number;
+				};
+				Returns: {
+					number_of_email: number;
+					verified: number;
+					created_at: string;
+				}[];
+			};
 		};
 		Enums: {
 			is_reachable_type: "safe" | "invalid" | "risky" | "unknown";

supabase/migrations/20231218194337_bulk_jobs_info.sql

@@ -0,0 +1,18 @@
+CREATE VIEW bulk_jobs_info AS
+    SELECT 
+        bj.id AS job_id,
+        bj.user_id,
+        bj.created_at,
+        COUNT(DISTINCT be.id) AS number_of_emails,
+        COUNT(DISTINCT CASE WHEN c.id IS NOT NULL THEN be.id ELSE NULL END) AS verified
+    FROM 
+        bulk_jobs bj
+    LEFT JOIN 
+        bulk_emails be ON bj.id = be.bulk_job_id
+    LEFT JOIN 
+        calls c ON be.id = c.bulk_email_id
+    GROUP BY 
+        bj.id
+    ORDER BY 
+        bj.created_at DESC;
+