🧪 feat: add action to change the current project

Implements a new action to allow users to change their current project.

- Adds a new file `apps/web/actions/changeProject.ts` for handling project change requests.
- Defines a schema for validating project change requests using Zod.
- Checks if the user is logged in and has access to the target project before updating their current project.
- Triggers revalidation of the `/app` path after a successful project change.
- Exports the `changeProject` function from `apps/web/actions/index.ts`.
- Removes the `changeProject` function from the `Dashboard` component and uses the imported action instead.
- Adds a utility function `parseZodError` to convert Zod errors into user-friendly messages.

Author: mangledbottles

apps/web/actions/changeProject.ts

@@ -0,0 +1,50 @@
+'use server'
+import { getSession, parseZodError, prisma } from "@/app/utils";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+// Schema for project change request validation
+const changeProjectSchema = z.object({
+    projectIdToChangeTo: z.string(),
+});
+
+// Handles project change requests
+export const changeProject = async (params: { projectIdToChangeTo: string }) => {
+    // Ensure user is logged in
+    const session = await getSession();
+    if (!session || !session.user) {
+        throw new Error("You must be logged in to change projects");
+    }
+    const userId = session.user.id;
+
+    // Validate input format
+    const result = changeProjectSchema.safeParse(params);
+    if (!result.success) {
+        throw new Error(parseZodError(result.error));
+    }
+
+    // Check user access to the target project
+    const canUserSwitchToProject = await prisma.projectUsers.findFirst({
+        where: {
+            projectId: params.projectIdToChangeTo,
+            userId,
+        },
+    });
+    if (!canUserSwitchToProject) {
+        throw new Error("You do not have access to this project");
+    }
+
+    // Update user's current project
+    await prisma.user.update({
+        where: {
+            id: userId,
+        },
+        data: {
+            currentProjectId: params.projectIdToChangeTo,
+        },
+    });
+
+    // Trigger revalidation of the /app path
+    revalidatePath("/app");
+    return;
+};

apps/web/actions/index.ts

@@ -1,3 +1,4 @@
 export * from './updateUploadTitle';
 export * from './navigate';
 
+export * from './changeProject';

apps/web/app/(dashboard)/app/page.tsx

@@ -1,12 +1,8 @@
 import { authOptions } from "@/app/api/auth/[...nextauth]/AuthOptions";
 import { Role } from "@prisma/client";
 import { getServerSession } from "next-auth";
-import { formatDistanceToNow } from "date-fns";
-import Link from "next/link";
-import { AiOutlineDownload, AiOutlineVideoCameraAdd } from "react-icons/ai";
 import TeamSwitcher from "@/components/TeamSwitcher";
 import DashboardStatistics from "@/components/DashboardStatistics";
-import { IconShareUploadButton } from "@/app/(view)/view/[id]/ShareUploadButton";
 import { redirect } from "next/navigation";
 import Uploads from "./Uploads";
 import { prisma } from "@/app/utils";
@@ -33,30 +29,6 @@ export default async function Dashboard() {
     },
   });
 
-  const changeProject = async (projectIdToChangeTo: string) => {
-    "use server";
-
-    const canUserSwitchToProject = await prisma.projectUsers.findFirst({
-      where: {
-        projectId: projectIdToChangeTo,
-        userId,
-      },
-    });
-
-    if (!canUserSwitchToProject) {
-      throw new Error("You do not have access to this project");
-    }
-
-    await prisma.user.update({
-      where: {
-        id: userId,
-      },
-      data: {
-        currentProjectId: projectIdToChangeTo,
-      },
-    });
-    return;
-  };
 
   const isUserOwner = !!(await prisma.projectUsers.findFirst({
     where: {
@@ -99,7 +71,6 @@ export default async function Dashboard() {
             projects={projects}
             className="mb-3"
             currentProjectId={currentProjectId}
-            changeProject={changeProject}
           />
           <DashboardStatistics />
           <div

apps/web/app/utils.ts

@@ -16,6 +16,7 @@ prisma = global.prisma;
 export { prisma };
 
 import LoopsClient from "loops";
+import { ZodError, ZodIssue } from "zod";
 export const loops = new LoopsClient(process.env.LOOPS_API_KEY!);
 
 const isDev = process.env.NODE_ENV === "development";
@@ -98,10 +99,10 @@ interface WithSessionHandler {
 
 export const getSession = async () => {
     try {
-    const session = await getServerSession(authOptions) as Session;
-    if (!session?.user) return { user: null } as unknown as Session;
-    return session;
-    } catch(error) {
+        const session = await getServerSession(authOptions) as Session;
+        if (!session?.user) return { user: null } as unknown as Session;
+        return session;
+    } catch (error) {
         return { user: null } as unknown as Session;
     }
 };
@@ -150,4 +151,18 @@ export const getAvatarFallbackInitials = (name: string): string => {
         return `${nameParts[0][0]}${nameParts[nameParts.length - 1][0]}`.toUpperCase();
     }
     return nameParts[0][0].toUpperCase();
-}
+}
+
+/**
+ * Parses Zod errors into user-friendly messages.
+ * @param error ZodError instance containing validation errors.
+ * @returns A string with a user-friendly error message.
+ */
+export const parseZodError = (error: ZodError): string => {
+    // Combine all error messages into a single string
+    const messages = error.errors.map((e: ZodIssue) => {
+        const path = e.path.join('.');
+        return `${path}: ${e.message}`;
+    });
+    return messages.join(', ');
+};

apps/web/components/TeamSwitcher.tsx

@@ -19,9 +19,7 @@ import {
   CommandList,
   CommandSeparator,
 } from "@components/ui/command";
-import {
-  Dialog
-} from "@components/ui/dialog";
+import { Dialog } from "@components/ui/dialog";
 import {
   Popover,
   PopoverContent,
@@ -31,7 +29,8 @@ import { Project } from "@prisma/client";
 import { toast } from "sonner";
 import { Settings, Users } from "lucide-react";
 import Link from "next/link";
-import { signIn } from "next-auth/react";
+import { signIn, useSession } from "next-auth/react";
+import { changeProject } from "@/actions";
 
 type PopoverTriggerProps = React.ComponentPropsWithoutRef<
   typeof PopoverTrigger
@@ -40,29 +39,32 @@ type PopoverTriggerProps = React.ComponentPropsWithoutRef<
 interface TeamSwitcherProps extends PopoverTriggerProps {
   projects: Project[];
   currentProjectId: string;
-  changeProject: (projectId: string) => Promise<void>;
 }
 
 export default function TeamSwitcher({
   className,
   projects,
   currentProjectId,
-  changeProject,
 }: TeamSwitcherProps) {
   const [open, setOpen] = React.useState(false);
   const [showNewProjectDialog, setShowNewProjectDialog] = React.useState(false);
   const [selectedProject, setSelectedProject] = React.useState<Project>(
     projects.find((project) => project.id === currentProjectId) ?? projects[0]
   );
+  const { update: updateSession, data: sessionData } = useSession();
 
   const handleProjectChange = (project: Project) => {
-    toast.promise(changeProject(project.id), {
+    console.log({ project });
+    toast.promise(changeProject({ projectIdToChangeTo: project?.id }), {
       loading: "Switching project...",
       success() {
+        // Update session with updated project ID
+        updateSession({
+          currentProjectId: project.id,
+          ...sessionData,
+        });
         setSelectedProject(project);
-        // @ts-ignore
-        signIn(null);
-        return "Project switched. Refreshing page...";
+        return `Project switched to ${project.name}`;
       },
       error(errorMessage: string) {
         return `Failed to switch project ${errorMessage}`;