migration

src/components/wrappers/dashboard/profile/Avatar/AvatarWithUpload.tsx

@@ -1,32 +1,27 @@
-"use client"
-import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
-import {User} from "@prisma/client";
-import {UploadIcon} from "lucide-react";
-import {toast} from "sonner";
-import {uploadImageAction} from "@/features/upload/public/upload.action";
-import {useMutation} from "@tanstack/react-query";
-import {prisma} from "@/prisma";
-import {updateImageUserAction} from "@/components/wrappers/dashboard/profile/Avatar/avatar.action";
-import {useRouter} from "next/navigation";
-import {useSession} from "next-auth/react";
+"use client";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { UploadIcon } from "lucide-react";
+import { toast } from "sonner";
+import { uploadImageAction } from "@/features/upload/public/upload.action";
+import { useMutation } from "@tanstack/react-query";
+import { updateImageUserAction } from "@/components/wrappers/dashboard/profile/Avatar/avatar.action";
+import { useRouter } from "next/navigation";
+import { User } from "@/db/schema/01_user";
 
 export type AvatarWithUploadProps = {
-    user: User
-}
-
+    user: User;
+};
 
 export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
-    const user = props.user
+    const user = props.user;
     const router = useRouter();
-    const { data: session, update } = useSession();
-
 
     const submitImage = useMutation({
         mutationFn: async (file: File) => {
             const formData = new FormData();
             formData.set("file", file);
-            const uploadImage = await uploadImageAction(formData)
-            const data = uploadImage?.data?.data
+            const uploadImage = await uploadImageAction(formData);
+            const data = uploadImage?.data?.data;
 
             if (uploadImage?.serverError || !data) {
                 console.log(uploadImage?.serverError);
@@ -34,8 +29,8 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
                 return;
             }
 
-            const updateUser = await updateImageUserAction(data.url)
-            const dataUser = updateUser?.data?.data
+            const updateUser = await updateImageUserAction(data.url);
+            const dataUser = updateUser?.data?.data;
 
             if (updateUser?.serverError || !dataUser) {
                 console.log(updateUser?.serverError);
@@ -43,42 +38,27 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
                 return;
             }
 
-            const newSession = {
-                ...session,
-                user: {
-                    ...session?.user,
-                    image: data.url
-                },
-            };
-
-            await update(newSession);
             toast.success("Successfully uploaded user image!");
-            router.refresh()
-
-
-
-        }
-    })
+            router.refresh();
+        },
+    });
 
     const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
         const file = event.target.files?.[0];
         if (!file) return;
         if (!file.type.includes("image")) {
-            toast.error("File not an image")
+            toast.error("File not an image");
             return;
         }
-        submitImage.mutate(file)
+        submitImage.mutate(file);
     };
 
-
     return (
-        <div className="relative " >
-                <Avatar className="size-14 mr-3 ">
-                    <AvatarFallback>{user.name?.[0]}</AvatarFallback>
-                    {user.image ? (
-                        <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`}/>
-                    ) : null}
-                </Avatar>
+        <div className="relative ">
+            <Avatar className="size-14 mr-3 ">
+                <AvatarFallback>{user.name[0]}</AvatarFallback>
+                {user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
+            </Avatar>
             <div
                 onClick={() => {
                     const fileInput = document.createElement("input");
@@ -90,8 +70,8 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
                 }}
                 className="cursor-pointer absolute inset-0 flex justify-center items-center opacity-0 transition-opacity hover:opacity-100 hover:bg-gray-500 hover:bg-opacity-50 rounded-full size-14"
             >
-                <UploadIcon className="w-8 h-8 text-primary"/>
+                <UploadIcon className="w-8 h-8 text-primary" />
             </div>
         </div>
-    )
-}
+    );
+};

src/components/wrappers/dashboard/profile/Avatar/avatar.action.ts

@@ -1,24 +1,14 @@
-"use server"
-import {userAction} from "@/safe-actions";
-import {z} from "zod";
-import {prisma} from "@/prisma";
+"use server";
+import { db } from "@/db";
+import { user as drizzleUser } from "@/db/schema";
+import { userAction } from "@/safe-actions";
+import { eq } from "drizzle-orm";
+import { z } from "zod";
 
+export const updateImageUserAction = userAction.schema(z.string()).action(async ({ parsedInput, ctx }) => {
+    const [updatedUser] = await db.update(drizzleUser).set({ image: parsedInput }).where(eq(drizzleUser.id, ctx.user.id)).returning();
 
-export const updateImageUserAction = userAction
-    .schema(z.string())
-    .action(async ({parsedInput, ctx}) => {
-
-        const user = await prisma.user.update({
-            where: {
-                id: ctx.user.id,
-            },
-            data: {
-                image: parsedInput,
-            }
-        })
-
-
-        return {
-            data: user,
-        }
-    });
+    return {
+        data: updatedUser,
+    };
+});