From 6de4f69fc52162fa77c96954c9b8efffa34fcd3a Mon Sep 17 00:00:00 2001 From: Daryl Lim Date: Sun, 10 Mar 2024 16:53:36 -0700 Subject: [PATCH] feat(ui): Use server components for workflows page + add error/loading pages --- frontend/src/app/workflows/[id]/loading.tsx | 17 ++ frontend/src/app/workflows/error.tsx | 25 +++ frontend/src/app/workflows/loading.tsx | 9 ++ frontend/src/app/workflows/page.tsx | 150 ++---------------- .../src/app/workflows/workflows-dashboard.tsx | 106 +++++++++++++ 5 files changed, 167 insertions(+), 140 deletions(-) create mode 100644 frontend/src/app/workflows/[id]/loading.tsx create mode 100644 frontend/src/app/workflows/error.tsx create mode 100644 frontend/src/app/workflows/loading.tsx create mode 100644 frontend/src/app/workflows/workflows-dashboard.tsx diff --git a/frontend/src/app/workflows/[id]/loading.tsx b/frontend/src/app/workflows/[id]/loading.tsx new file mode 100644 index 000000000..9227c7832 --- /dev/null +++ b/frontend/src/app/workflows/[id]/loading.tsx @@ -0,0 +1,17 @@ +import { Skeleton } from "@/components/ui/skeleton" + +export default function Loading() { + return ( +
+
+ +
+
+ +
+
+ +
+
+ ) +} diff --git a/frontend/src/app/workflows/error.tsx b/frontend/src/app/workflows/error.tsx new file mode 100644 index 000000000..c45159269 --- /dev/null +++ b/frontend/src/app/workflows/error.tsx @@ -0,0 +1,25 @@ +"use client" + +// Error components must be Client Components +import { useEffect } from "react" + +import { AlertDestructive } from "@/components/alert-destructive" + +export default function Error({ + error, + reset, +}: { + error: Error & { digest?: string } + reset: () => void +}) { + useEffect(() => { + // Log the error to an error reporting service + console.error(error) + }, [error]) + + return ( +
+ +
+ ) +} diff --git a/frontend/src/app/workflows/loading.tsx b/frontend/src/app/workflows/loading.tsx new file mode 100644 index 000000000..016bdadd7 --- /dev/null +++ b/frontend/src/app/workflows/loading.tsx @@ -0,0 +1,9 @@ +import { Loader2 } from "lucide-react" + +export default function Loading() { + return ( +
+ +
+ ) +} diff --git a/frontend/src/app/workflows/page.tsx b/frontend/src/app/workflows/page.tsx index 6b737f343..3b8e5acb6 100644 --- a/frontend/src/app/workflows/page.tsx +++ b/frontend/src/app/workflows/page.tsx @@ -1,147 +1,17 @@ -"use client" - import React from "react" -import Link from "next/link" -import { useSessionContext } from "@/providers/session" -import { useQuery } from "@tanstack/react-query" -import { PlusCircle } from "lucide-react" +import { redirect } from "next/navigation" +import { createClient } from "@/utils/supabase/server" -import { WorkflowMetadata } from "@/types/schemas" -import { fetchAllWorkflows } from "@/lib/flow" -import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" -import { Skeleton } from "@/components/ui/skeleton" -import { - NewWorkflowDialog, - NewWorkflowDialogTrigger, -} from "@/components/new-workflow-dialog" -import NoSSR from "@/components/no-ssr" +import { WorkflowsDashboard } from "./workflows-dashboard" -export default function Page() { - return ( - - - - ) -} -function WorkflowsPage(props: React.HTMLAttributes) { - const { session, isLoading: sessionIsLoading } = useSessionContext() +export default async function Page() { + const supabase = createClient() const { - data: userWorkflows, - isLoading, - error, - } = useQuery({ - queryKey: ["workflows"], - queryFn: async () => { - if (!session) { - console.error("Invalid session") - throw new Error("Invalid session") - } - console.log(session) - const workflows = await fetchAllWorkflows(session) - return workflows - }, - }) - - if (sessionIsLoading) { - return ( -
- - - - - -
- ) + data: { session }, + } = await supabase.auth.getSession() + if (!session) { + redirect("/login") } - if (error) { - throw new Error("Error fetching workflows") - } - - return ( -
-
-
-

Workflows

-

- Welcome back! Here's a list of your workflows. -

-
- - - - - - -
- {isLoading ? ( - - ) : ( - - )} -
- ) -} - -interface WorkflowListProps { - workflows: WorkflowMetadata[] -} - -export function WorkflowList({ workflows }: WorkflowListProps) { - return ( -
- {workflows.length === 0 ? ( - No workflows created. - ) : ( - <> - {workflows.map((wf) => ( - -
-
-
-
{wf.title}
-
-
- - - Last run: 2 hours ago - -
-
-
- {wf.description ?? ""} -
-
- - ))} - - )} -
- ) + return } diff --git a/frontend/src/app/workflows/workflows-dashboard.tsx b/frontend/src/app/workflows/workflows-dashboard.tsx new file mode 100644 index 000000000..1b41b28dc --- /dev/null +++ b/frontend/src/app/workflows/workflows-dashboard.tsx @@ -0,0 +1,106 @@ +import { Suspense } from "react" +import Link from "next/link" +import { type Session } from "@supabase/supabase-js" +import { PlusCircle } from "lucide-react" + +import { fetchAllWorkflows } from "@/lib/flow" +import { cn } from "@/lib/utils" +import { Button } from "@/components/ui/button" +import { Skeleton } from "@/components/ui/skeleton" +import { + NewWorkflowDialog, + NewWorkflowDialogTrigger, +} from "@/components/new-workflow-dialog" + +interface WorkflowsDashboardProps extends React.HTMLAttributes { + session: Session +} + +export async function WorkflowsDashboard({ session }: WorkflowsDashboardProps) { + return ( +
+
+
+

Workflows

+

+ Welcome back! Here's a list of your workflows. +

+
+ + + + + +
+ + + + + +
+ } + > + + + + ) +} + +interface WorkflowListProps { + session: Session +} + +export async function WorkflowList({ session }: WorkflowListProps) { + const workflows = await fetchAllWorkflows(session) + return ( +
+ {workflows.length === 0 ? ( + No workflows created. + ) : ( + <> + {workflows.map((wf) => ( + +
+
+
+
{wf.title}
+
+
+ + + Last run: 2 hours ago + +
+
+
+ {wf.description ?? ""} +
+
+ + ))} + + )} +
+ ) +}