Admins - Mentor profile image update feature added

src/components/MentorApplication/MentorApplication.component.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { getStateColor } from '../../utils';
 import { useParams } from 'react-router-dom';
 import useMentor from '../../hooks/admin/useMentor';
 import Toast from '../Toast';
-import ProfilePic from '../ProfilePic';
 import ActionButtons from '../ActionButtons';
 import { ApplicationStatus } from '../../enums';
+import axios from 'axios';
+import { API_URL } from '../../constants';
 
 const MentorApplication: React.FC = () => {
   const { mentorId } = useParams();
@@ -19,6 +20,38 @@ const MentorApplication: React.FC = () => {
   const handleStateChange = async (newState: string) => {
     await changeState(newState);
   };
+  const [profilePic, setProfilePic] = useState<string | null>(
+    mentor?.profile.image_url ?? ''
+  );
+
+  const handleImageClick = () => {
+    document.getElementById('profilePic')?.click();
+  };
+
+  const handleProfilePicChange = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (file && mentorId) {
+      const formData = new FormData();
+      formData.append('profile_image', file);
+      try {
+        const response = await axios.put(
+          `${API_URL}/admin/mentors/${mentorId}`,
+          formData,
+          {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+            },
+            withCredentials: true,
+          }
+        );
+        setProfilePic(response.data.mentor.profile.image_url);
+      } catch (error) {
+        console.error('Error uploading profile picture:', error);
+      }
+    }
+  };
 
   return (
     <>
@@ -33,11 +66,40 @@ const MentorApplication: React.FC = () => {
       ) : (
         <div className="w-full space-y-8">
           <div className="flex items-center">
-            <ProfilePic
-              src={mentor?.profile.image_url}
-              alt="Mentee Avatar"
-              size="6rem"
-            />
+            <div className="relative">
+              <input
+                type="file"
+                id="profilePic"
+                accept="image/*"
+                className="hidden"
+                onChange={handleProfilePicChange}
+                name="profilePic"
+              />
+              <div
+                onClick={handleImageClick}
+                className="cursor-pointer relative group mb-4"
+              >
+                {profilePic ? (
+                  <img
+                    src={profilePic}
+                    alt="Profile"
+                    className="w-[90px] h-[90px] rounded-full object-cover"
+                    referrerPolicy="no-referrer"
+                  />
+                ) : (
+                  <div className="w-[90px] h-[90px] rounded-full bg-gray-200 flex items-center justify-center">
+                    <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto flex items-center justify-center">
+                      <span className="text-gray-400">+</span>
+                    </div>
+                  </div>
+                )}
+                <div className="absolute bottom-0 w-[90px] h-1/2 bg-black bg-opacity-40 rounded-b-full flex items-center p-5 justify-center">
+                  <span className="text-white text-center text-xs">
+                    Change Photo
+                  </span>
+                </div>
+              </div>
+            </div>
             <div className="ml-5">
               <div className="flex items-center space-x-3">
                 <span className="text-2xl font-semibold">