🔧 fix: Update project switching logic

- Added current project ID tracking and project switching functionality in Dashboard and TeamSwitcher

These updates ensure a more dynamic and seamless user experience when interacting with different projects within the dashboard

Author: mangledbottles

app/(dashboard)/app/Uploads.tsx

@@ -158,7 +158,7 @@ const Upload = ({ upload }: { upload: Upload }) => {
 
 export const UploadSkeleton = ({ quantity }: { quantity: number }) => {
   return Array.from({ length: quantity }).map((_, i) => (
-    <div className="group animate-pulse">
+    <div className="group animate-pulse" key={i}>
       <div className="relative aspect-w-16 aspect-h-9">
         <div
           className="w-full h-40 bg-gray-300 dark:bg-gray-800"

app/(dashboard)/app/page.tsx

@@ -9,16 +9,17 @@ 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";
 
 export default async function Dashboard() {
   const session = await getServerSession(authOptions);
   if (!session) {
     redirect("/signin?redirect=/app");
   }
-
-  const prisma = new PrismaClient();
   // @ts-ignore
   const userId = session?.user?.id;
+  // @ts-ignore
+  const currentProjectId = session?.user?.currentProjectId;
   if (!userId) return redirect("/signin");
 
   const projects = await prisma.project.findMany({
@@ -32,16 +33,41 @@ export default async function Dashboard() {
     },
   });
 
-  // TODO: implement some logic behind changing projectId under user column
-  // const changeProject = async (projectIdToChangeTo: string) => {
-  //   "use server";
-  // };
+  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;
+  };
 
   return (
     <section className="relative">
       <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
         <div className="pt-12 md:pt-20 ">
-          <TeamSwitcher projects={projects} className="mb-3" />
+          <TeamSwitcher
+            projects={projects}
+            className="mb-3"
+            currentProjectId={currentProjectId}
+            changeProject={changeProject}
+          />
           <DashboardStatistics />
           <div
             key="1"

components/TeamSwitcher.tsx

@@ -20,52 +20,58 @@ import {
   CommandSeparator,
 } from "@components/ui/command";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+  Dialog
 } from "@components/ui/dialog";
-import { Input } from "@components/ui/input";
-import { Label } from "@components/ui/label";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@components/ui/select";
 import { Project } from "@prisma/client";
 import { toast } from "sonner";
 import { Settings, Users } from "lucide-react";
 import Link from "next/link";
-import { revalidatePath } from "next/cache";
+import { signIn } from "next-auth/react";
 
 type PopoverTriggerProps = React.ComponentPropsWithoutRef<
   typeof PopoverTrigger
 >;
 
 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[0] ?? { id: 0 }
+    projects.find((project) => project.id === currentProjectId) ?? projects[0]
   );
 
+  const handleProjectChange = (project: Project) => {
+    toast.promise(changeProject(project.id), {
+      loading: "Switching project...",
+      success() {
+        setSelectedProject(project);
+        // @ts-ignore
+        signIn(null);
+        return "Project switched. Refreshing page...";
+      },
+      error(errorMessage: string) {
+        return `Failed to switch project ${errorMessage}`;
+      },
+    });
+
+    setOpen(false);
+  };
+
   const CurrentProject = () => {
     return (
       <CommandGroup key={selectedProject.id}>
@@ -139,13 +145,8 @@ export default function TeamSwitcher({
                   .map((project) => (
                     <CommandItem
                       key={project.id}
-                      onSelect={() => {
-                        setSelectedProject(project);
-                        setOpen(false);
-                        revalidatePath('/app')
-                        // changeProject(project.id);
-                      }}
-                      className="text-sm"
+                      onSelect={() => handleProjectChange(project)}
+                      className="text-sm cursor-pointer"
                     >
                       <Avatar className="mr-2 h-5 w-5">
                         <AvatarImage
@@ -168,8 +169,8 @@ export default function TeamSwitcher({
                   ))}
               </CommandGroup>
             </CommandList>
-            <CommandSeparator />
-            <CommandList>
+            {/* <CommandSeparator /> */}
+            {/* <CommandList>
               <CommandGroup>
                 <DialogTrigger asChild>
                   <CommandItem
@@ -183,11 +184,12 @@ export default function TeamSwitcher({
                   </CommandItem>
                 </DialogTrigger>
               </CommandGroup>
-            </CommandList>
+            </CommandList> */}
           </Command>
         </PopoverContent>
       </Popover>
-      <DialogContent className="p-4">
+      {/* TODO: Add logic to support creating new team */}
+      {/* <DialogContent className="p-4">
         <DialogHeader>
           <DialogTitle>Create team</DialogTitle>
           <DialogDescription>
@@ -243,7 +245,7 @@ export default function TeamSwitcher({
             Continue
           </Button>
         </DialogFooter>
-      </DialogContent>
+      </DialogContent> */}
     </Dialog>
   );
 }