Move dashboard to client components. (#26)

* Move to client components

* Move to client components

* Fix create team

apps/web/src/providers/dashboard-provider.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { FullScreenLoading } from "~/components/FullScreenLoading";
+import CreateTeam from "~/components/team/CreateTeam";
+import { api } from "~/trpc/react";
+
+export const DashboardProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const { data: teams, status } = api.team.getTeams.useQuery();
+
+  if (status === "pending") {
+    return <FullScreenLoading />;
+  }
+
+  if (!teams || teams.length === 0) {
+    return <CreateTeam />;
+  }
+
+  return <>{children}</>;
+};

apps/web/src/providers/next-auth.tsx

@@ -3,10 +3,13 @@
 import React from "react";
 
 import type { Session } from "next-auth";
-import { SessionProvider } from "next-auth/react";
+import { SessionProvider, useSession } from "next-auth/react";
+import LoginPage from "~/app/login/login-page";
+import { Rocket } from "lucide-react";
+import { FullScreenLoading } from "~/components/FullScreenLoading";
 
 export type NextAuthProviderProps = {
-  session?: Session | null;
+  session?: Session | null | undefined;
   children: React.ReactNode;
 };
 
@@ -14,5 +17,37 @@ export const NextAuthProvider = ({
   session,
   children,
 }: NextAuthProviderProps) => {
-  return <SessionProvider session={session}>{children}</SessionProvider>;
+  return (
+    <SessionProvider session={session}>
+      <AppAuthProvider>{children}</AppAuthProvider>
+    </SessionProvider>
+  );
+};
+
+const AppAuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const { data: session, status } = useSession({ required: true });
+
+  if (status === "loading") {
+    return <FullScreenLoading />;
+  }
+
+  if (!session) {
+    return <LoginPage />;
+  }
+
+  if (!session.user.isBetaUser) {
+    return (
+      <div className="flex items-center justify-center min-h-screen ">
+        <div className="p-8 shadow-lg rounded-lg flex flex-col gap-4">
+          <Rocket />
+          <h1 className="text-2xl font-bold">You're on the Waitlist!</h1>
+          <p className=" text-secondary-muted">
+            Hang tight, we'll get to you as soon as possible.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
 };