Update - Profile

- refresh Profile photo after upload new one

app/[locale]/(routes)/profile/components/ProfilePhotoForm.tsx

@@ -1,39 +1,48 @@
 "use client";
 
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import * as z from "zod";
-
-import { useToast } from "@/components/ui/use-toast";
+import Image from "next/image";
 
-import { useState } from "react";
-import axios from "axios";
-import { useRouter } from "next/navigation";
+import { Users } from "@prisma/client";
 
-import Image from "next/image";
 import { FileUploaderDropzone } from "@/components/ui/file-uploader-dropzone";
+import { useEffect, useState } from "react";
+import { useToast } from "@/components/ui/use-toast";
 
 interface ProfileFormProps {
-  data: any;
+  data: Users;
 }
 
-const FormSchema = z.object({
-  avatar: z.string().min(3).max(150),
-});
-
 export function ProfilePhotoForm({ data }: ProfileFormProps) {
+  const [avatar, setAvatar] = useState(data.avatar);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    setAvatar(data.avatar);
+  }, [data.avatar, toast]);
+
+  const handleUploadSuccess = (newAvatar: string) => {
+    setAvatar(newAvatar);
+    toast({
+      title: "Profile photo updated.",
+      description: "Your profile photo has been updated.",
+      duration: 5000,
+    });
+  };
   return (
     <div className="flex items-center space-x-5">
       <div>
         <Image
-          src={data?.avatar || "/images/nouser.png"}
+          src={avatar || "/images/nouser.png"}
           alt="avatar"
           width={100}
           height={100}
         />
       </div>
       <div>
-        <FileUploaderDropzone uploader={"profilePhotoUploader"} />
+        <FileUploaderDropzone
+          uploader={"profilePhotoUploader"}
+          onUploadSuccess={handleUploadSuccess}
+        />
       </div>
     </div>
   );

app/[locale]/(routes)/profile/page.tsx

@@ -1,15 +1,15 @@
-import { Separator } from "@/components/ui/separator";
 import { getUser } from "@/actions/get-user";
+
 import Container from "../components/ui/Container";
 import { NotionForm } from "./components/NotionForm";
-import H4Title from "@/components/typography/h4";
 import { ProfileForm } from "./components/ProfileForm";
-import { Users } from "@prisma/client";
 import { PasswordChangeForm } from "./components/PasswordChange";
 import { ProfilePhotoForm } from "./components/ProfilePhotoForm";
 
+import H4Title from "@/components/typography/h4";
+
 const ProfilePage = async () => {
-  const data: Users = await getUser();
+  const data = await getUser();
 
   if (!data) {
     return <div>No user data.</div>;

components/ui/file-uploader-dropzone.tsx

@@ -11,15 +11,18 @@ interface Props {
     | "imageUploader"
     | "docUploader"
     | "profilePhotoUploader";
+  onUploadSuccess?: (newAvatar: string) => void;
 }
 
-export const FileUploaderDropzone = ({ uploader }: Props) => (
+export const FileUploaderDropzone = ({ uploader, onUploadSuccess }: Props) => (
   <UploadDropzone<OurFileRouter>
     endpoint={uploader}
     onClientUploadComplete={(res) => {
       // Do something with the response
-
       console.log("Files: ", res);
+      if (onUploadSuccess && res) {
+        onUploadSuccess(res[0]?.url);
+      }
     }}
     onUploadError={(error: Error) => {
       alert(`ERROR! ${error.message}`);

next.config.js

@@ -14,6 +14,7 @@ const nextConfig = {
       "res.cloudinary.com",
       "lh3.googleusercontent.com",
       "uploadthing.com",
+      "utfs.io",
     ],
   },
 };