wip

Author: pontusab

apps/dashboard/jobs/tasks/inbox/provider/gmail-sync.ts

@@ -0,0 +1,29 @@
+import { schedules, schemaTask } from "@trigger.dev/sdk/v3";
+import { generateCronTag } from "jobs/utils/generate-cron-tag";
+import { z } from "zod";
+
+export const initialInboxSetup = schemaTask({
+  id: "initial-inbox-setup",
+  schema: z.object({
+    teamId: z.string().uuid(),
+    connectionId: z.string().uuid(),
+  }),
+  maxDuration: 300,
+  queue: {
+    concurrencyLimit: 50,
+  },
+  run: async (payload) => {
+    const { teamId, connectionId } = payload;
+
+    // Schedule the bank sync task to run daily at a random time to distribute load
+    // Use a deduplication key to prevent duplicate schedules for the same team
+    // Add teamId as externalId to use it in the bankSyncScheduler task
+    // await schedules.create({
+    //   task: bankSyncScheduler.id,
+    //   cron: generateCronTag(teamId),
+    //   timezone: "UTC",
+    //   externalId: teamId,
+    //   deduplicationKey: `${teamId}-${bankSyncScheduler.id}`,
+    // });
+  },
+});

apps/dashboard/jobs/tasks/inbox/provider/setup-sync.ts

@@ -1,4 +1,5 @@
 import { Inbox } from "@/components/inbox";
+import { InboxGetStarted } from "@/components/inbox/inbox-get-started";
 import { InboxViewSkeleton } from "@/components/inbox/inbox-skeleton";
 import { InboxView } from "@/components/inbox/inbox-view";
 import { loadInboxFilterParams } from "@/hooks/use-inbox-filter-params";
@@ -23,16 +24,20 @@ export default async function Page(props: Props) {
   const params = loadInboxParams(searchParams);
 
   // Change this to prefetch once this is fixed: https://github.com/trpc/trpc/issues/6632
-  await queryClient.fetchInfiniteQuery(
+  const data = await queryClient.fetchInfiniteQuery(
     trpc.inbox.get.infiniteQueryOptions({
       order: params.order,
-      filter: {
-        ...filter,
-        done: params.tab === "done",
-      },
+      filter,
     }),
   );
 
+  if (
+    data.pages[0]?.data.length === 0 &&
+    !Object.values(filter).some((value) => value !== null)
+  ) {
+    return <InboxGetStarted />;
+  }
+
   return (
     <Inbox>
       <Suspense fallback={<InboxViewSkeleton />}>

apps/dashboard/src/app/[locale]/(app)/(sidebar)/inbox/page.tsx

@@ -0,0 +1,38 @@
+import { getTeamId } from "@/utils/team";
+import { InboxConnector } from "@midday/inbox/connector";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const code = searchParams.get("code");
+  const state = searchParams.get("state") as "gmail" | "outlook";
+  const teamId = await getTeamId();
+
+  if (!code || !state || !teamId) {
+    return NextResponse.json(
+      { error: "Missing required parameters" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const connector = new InboxConnector(state);
+    const acount = await connector.exchangeCodeForAccount({ code, teamId });
+
+    console.log({ acount });
+
+    // Trigger initial setup
+    const eventId = "12wefwef23e23";
+
+    return NextResponse.redirect(
+      new URL(`/inbox?event_id=${eventId}`, request.url),
+      { status: 302 },
+    );
+  } catch (error) {
+    console.error(error);
+    return NextResponse.redirect(
+      new URL("/inbox?connect=failed", request.url),
+      { status: 302 },
+    );
+  }
+}

apps/dashboard/src/app/api/connector/callback/route.ts

@@ -20,7 +20,13 @@ type Props = {
 
 export function FileViewer({ mimeType, url }: Props) {
   if (mimeType === "application/pdf") {
-    return <DynamicPdfViewer url={url} />;
+    return (
+      <DynamicPdfViewer
+        url={url}
+        // We need to flush because of the React PDF Document Instance
+        key={Math.random()}
+      />
+    );
   }
 
   if (mimeType?.startsWith("image/")) {

apps/dashboard/src/components/file-viewer.tsx

@@ -23,7 +23,10 @@ export function ImageViewer({ url }: { url: string }) {
 
   return (
     <div className="relative flex h-full w-full items-center justify-center bg-primary/10">
-      {isLoading && <Skeleton className="absolute inset-0 h-full w-full" />}
+      {isLoading && !isError && (
+        <Skeleton className="absolute inset-0 h-full w-full" />
+      )}
+
       {isError && <ErrorImage />}
 
       <img

apps/dashboard/src/components/image-viewer.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useTRPC } from "@/trpc/client";
+import { Icons } from "@midday/ui/icons";
+import { SubmitButton } from "@midday/ui/submit-button";
+import { useMutation } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+export function ConnectGmail() {
+  const trpc = useTRPC();
+  const router = useRouter();
+
+  const connectMutation = useMutation(
+    trpc.inbox.connect.mutationOptions({
+      onSuccess: (data) => {
+        if (data) {
+          router.push(data);
+        }
+      },
+    }),
+  );
+
+  return (
+    <SubmitButton
+      className="px-6 py-4 w-full font-medium flex space-x-2 h-[40px]"
+      variant="outline"
+      onClick={() => connectMutation.mutate({ provider: "gmail" })}
+      isSubmitting={connectMutation.isPending}
+    >
+      <Icons.Gmail />
+      <span>Connect your Gmail</span>
+    </SubmitButton>
+  );
+}

apps/dashboard/src/components/inbox/connect-gmail.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Button } from "@midday/ui/button";
+import { Icons } from "@midday/ui/icons";
+
+export function ConnectOutlook() {
+  return (
+    <Button
+      className="px-6 py-4 w-full font-medium flex space-x-2 h-[40px]"
+      variant="outline"
+    >
+      <Icons.Outlook />
+      <span>Connect your Outlook</span>
+    </Button>
+  );
+}

apps/dashboard/src/components/inbox/connect-outlook.tsx

@@ -5,7 +5,7 @@ import { Skeleton } from "@midday/ui/skeleton";
 
 export function InboxDetailsSkeleton() {
   return (
-    <div className="h-[calc(100vh-120px)] overflow-hidden flex-col border w-[595px] hidden md:flex shrink-0 -mt-[54px]">
+    <div className="h-[calc(100vh-120px)] overflow-hidden flex-col border w-[615px] hidden md:flex shrink-0 -mt-[54px]">
       <div className="flex items-center p-2 h-[52px] w-full" />
 
       <Separator />
@@ -23,7 +23,7 @@ export function InboxDetailsSkeleton() {
           </div>
         </div>
         <Separator />
-        <div className="relative h-full p-4">
+        <div className="relative h-full">
           <Skeleton className="h-full w-full" />
         </div>
       </div>