Feat/10 service tab actions 2

.github/workflows/ci.yml

@@ -15,16 +15,18 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - uses: pnpm/action-setup@v4
+
       - uses: actions/setup-node@v4
         with:
           node-version: "25"
-          cache: npm
+          cache: pnpm
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Lint
-        run: npm run lint
+        run: pnpm lint
 
       - name: Unit tests
-        run: npm run test:ci
+        run: pnpm test:ci

__tests__/sanity.test.tsx

@@ -1,10 +1,9 @@
 import { render, screen } from "@testing-library/react";
-import DashboardPage from "@/app/(authenticated)/dashboard/page";
+import { TestComponent } from "./test-component";
 
 describe("jest setup", () => {
-  it("runs React + Testing Library", async () =>  {
-    const jsx = await DashboardPage();
-    render(jsx);
-    expect(screen.getByText("You are admin")).toBeInTheDocument();
-  });
+   it("runs React + Testing Library", () => {
+      render(<TestComponent />);
+      expect(screen.getByText("ok")).toBeInTheDocument();
+   });
 });

__tests__/test-component.tsx

@@ -0,0 +1,3 @@
+export function TestComponent() {
+   return <div>ok</div>;
+}

app/(authenticated)/checkout/success/page.tsx

@@ -1,11 +1,20 @@
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { createClient } from "@/utils/supabase/server";
 import { syncStripeData } from "@/lib/stripe";
 import { db } from "@/lib/db";
 import { profiles } from "@/lib/db/schema";
 import { eq } from "drizzle-orm";
 
-export default async function CheckoutSuccessPage() {
+export default function CheckoutSuccessPage() {
+   return (
+      <Suspense>
+         <SyncAndRedirect />
+      </Suspense>
+   );
+}
+
+async function SyncAndRedirect(): Promise<never> {
    const supabase = await createClient();
    const {
       data: { user },

app/(authenticated)/layout.tsx

@@ -1,14 +1,11 @@
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { createClient } from "@/utils/supabase/server";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { AppSidebar } from "@/components/app-sidebar";
 
-export default async function AuthenticatedLayout({
-   children,
-}: {
-   children: React.ReactNode;
-}) {
+async function AuthGate({ children }: { children: React.ReactNode }) {
    const supabase = await createClient();
    const {
       data: { user },
@@ -18,13 +15,23 @@ export default async function AuthenticatedLayout({
       redirect("/login");
    }
 
+   return <>{children}</>;
+}
+
+export default function AuthenticatedLayout({
+   children,
+}: {
+   children: React.ReactNode;
+}) {
    return (
       <TooltipProvider>
          <SidebarProvider>
             <AppSidebar />
             <SidebarInset>
                <div className="flex flex-1 flex-col gap-4 p-4">
-                  {children}
+                  <Suspense fallback={null}>
+                     <AuthGate>{children}</AuthGate>
+                  </Suspense>
                </div>
             </SidebarInset>
          </SidebarProvider>

app/(authenticated)/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { createClient } from "@/utils/supabase/server";
 import { signout } from "@/app/login/actions";
 import { getSubscriptionDetails } from "@/lib/stripe";
@@ -14,7 +15,15 @@ import { CheckoutButton } from "@/components/subscribe-button";
 const SUBSCRIPTION_PRICE_ID = process.env.STRIPE_PRICE_ID!;
 const PRODUCT_PRICE_ID = process.env.STRIPE_PRODUCT_PRICE_ID!;
 
-export default async function Page() {
+export default function Page() {
+   return (
+      <Suspense>
+         <HomeContent />
+      </Suspense>
+   );
+}
+
+async function HomeContent() {
    const supabase = await createClient();
    const {
       data: { user },