completed with the profile page

rebeljelly2147 · Dec 17, 2024 · 9c148cc · 9c148cc
1 parent 351bd83
commit 9c148cc
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 7 deletions.
diff --git a/frontend/public/avatar.png b/frontend/public/avatar.png
diff --git a/frontend/src/pages/ProfilePage.jsx b/frontend/src/pages/ProfilePage.jsx
@@ -1,10 +1,110 @@
-import React from 'react'
+import React from "react";
+import { useAuthStore } from "../store/useAuthStore";
+import { Camera, Mail, User } from "lucide-react";
 
 const ProfilePage = () => {
-
+  const { authUser, isUpdatingProfile, updateProfile } = useAuthStore();
+  const [selectedImg, setSelectedImg] = React.useState(null);
+
+  const handleImageUpload = async (e) => {
+    const file = e.target.files[0];
+    if(!file) return;
+    const reader=new FileReader();
+
+    reader.readAsDataURL(file);
+    reader.onload=async()=>{
+      const base64Image=reader.result;
+      setSelectedImg(base64Image);
+      await updateProfile({profilePic:base64Image});
+    }
+
+  };
+
   return (
-    <div>ProfilePage</div>
-  )
-}
+    <div className="h-screen pt-20">
+      <div className="max-w-2xl mx-auto p-4 py-8">
+        <div className="bg-base-300 rounded-xl p-6 space-y-8">
+          <div className="text-center">
+            <h1 className="text-2xl font-semibold ">Profile</h1>
+            <p className="mt-2">Your profile information</p>
+          </div>
+
+          {/* avatar upload section */}
+
+          <div className="flex flex-col items-center gap-4">
+            <div className="relative">
+              <img
+                src={selectedImg || authUser.profilePic || "/avatar.png"}
+                alt="Profile"
+                className="size-32 rounded-full object-cover border-4 "
+              />
+              <label
+                htmlFor="avatar-upload"
+                className={`
+                  absolute bottom-0 right-0 
+                  bg-base-content hover:scale-105
+                  p-2 rounded-full cursor-pointer 
+                  transition-all duration-200
+                  ${isUpdatingProfile ? "animate-pulse pointer-events-none" : ""}
+                `}
+              >
+                <Camera className="w-5 h-5 text-base-200" />
+                <input
+                  type="file"
+                  id="avatar-upload"
+                  className="hidden"
+                  accept="image/*"
+                  onChange={handleImageUpload}
+                  disabled={isUpdatingProfile}
+                />
+              </label>
+            </div>
+            <p className="text-sm text-zinc-400">
+              {isUpdatingProfile
+                ? "Uploading..."
+                : "Click the camera icon to update your photo"}
+            </p>
+          </div>
+
+          <div className="space-y-6">
+            <div className="space-y-1.5">
+              <div className="text-sm text-zinc-400 flex items-center gap-2">
+                <User className="w-4 h-4" />
+                Full Name
+              </div>
+              <p className="px-4 py-2.5 bg-base-200 rounded-lg border">
+                {authUser?.fullName}
+              </p>
+            </div>
+
+            <div className="space-y-1.5">
+              <div className="text-sm text-zinc-400 flex items-center gap-2">
+                <Mail className="w-4 h-4" />
+                Email Address
+              </div>
+              <p className="px-4 py-2.5 bg-base-200 rounded-lg border">
+                {authUser?.email}
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-6 bg-base-300 rounded-xl p-6">
+            <h2 className="text-lg font-medium  mb-4">Account Information</h2>
+            <div className="space-y-3 text-sm">
+              <div className="flex items-center justify-between py-2 border-b border-zinc-700">
+                <span>Member Since</span>
+                <span>{authUser.createdAt?.split("T")[0]}</span>
+              </div>
+              <div className="flex items-center justify-between py-2">
+                <span>Account Status</span>
+                <span className="text-green-500">Active</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default ProfilePage
+export default ProfilePage;
diff --git a/frontend/src/store/useAuthStore.js b/frontend/src/store/useAuthStore.js
@@ -11,7 +11,7 @@ export const useAuthStore = create((set) => ({
   checkAuth: async () => {
     try {
       const res = await axiosInstance.get("/auth/check");
-
+      
       set({ authUser: res.data });
     } catch (error) {
       console.log(error);
@@ -62,6 +62,21 @@ export const useAuthStore = create((set) => ({
     }
   },
 
+  updateProfile:async(data)=>{
+    set({isUpdatingProfile:true});
+    try{
+        const res=await axiosInstance.put("/auth/update-proflie",data);
+        set({authUser:res.data});
+        toast.success("Profile updated Successfully");
+    }
+    catch(error){
+        console.log(error);
+        toast.error(error.response.data.message);
+    }
+    finally{
+        set({isUpdatingProfile:false});
+    }
+  }