diff --git a/src/Pages/Profile.jsx b/src/Pages/Profile.jsx index e13b5d6..c72702e 100644 --- a/src/Pages/Profile.jsx +++ b/src/Pages/Profile.jsx @@ -1,52 +1,56 @@ import { useEffect, useState } from "react"; -import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card"; -import { Input } from "@/Components/ui/input"; -import { Label } from "@/Components/ui/label"; -import { Avatar } from "@/Components/ui/avatar"; -import { Button } from "@/Components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Avatar } from "@/components/ui/avatar"; +import { Button } from "@/components/ui/button"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { SideNav, Navbar } from "../Components/compIndex"; import axios from "axios"; import { useNavigate } from "react-router-dom"; export default function AccountDetails() { - const [user, setUser] = useState(null); // Holds raw API response - const [loading, setLoading] = useState(true); // Loading state for API call - const [saveStatus, setSaveStatus] = useState(""); // Status after save attempt + const [user, setUser] = useState(null); + const [loading, setLoading] = useState(true); + const [saveStatus, setSaveStatus] = useState(""); const [formDetails, setFormDetails] = useState({ fullName: "", email: "", studying: "", currentRole: "", - githubLink: "", linkedinLink: "", phoneNumber: "", + countryCode: "+1", // Default country code + profilePicture: "", + bio: "", // New field for user bio }); + const [profilePreview, setProfilePreview] = useState(null); - // Fetch user details and set form state useEffect(() => { const fetchUserProfile = async () => { try { const response = await axios.get( - `${import.meta.env.VITE_BASE_URL}/api/auth/user/${localStorage.getItem( - "userId" - )}` + `${import.meta.env.VITE_BASE_URL}/api/auth/user/${localStorage.getItem("userId")}` ); const data = response.data; - setUser(data); // Set raw user data + setUser(data); setFormDetails({ fullName: data.name || "", email: data.email || "", - studying: "", // Field not in API response + studying: data.studying || "", currentRole: data.role || "", - githubLink: data.githubLink || "", linkedinLink: data.linkedinLink || "", phoneNumber: data.mnumber?.toString() || "", + countryCode: data.countryCode || "+1", + profilePicture: data.profilePicture || "", + bio: data.bio || "", }); + setProfilePreview(data.profilePicture || null); } catch (error) { console.error(`Error fetching user details: ${error}`); } finally { - setLoading(false); // Stop loading spinner + setLoading(false); } }; @@ -55,31 +59,33 @@ export default function AccountDetails() { const navigate = useNavigate(); - // Function to generate initials - const getInitials = (name) => { - const words = name?.trim().split(" ") || []; - if (words.length < 2) return words[0]?.[0]?.toUpperCase() || ""; - return `${words[0][0]?.toUpperCase() || ""}${ - words[1][0]?.toUpperCase() || "" - }`; - }; - const handleInputChange = (field, value) => { setFormDetails((prev) => ({ ...prev, [field]: value })); }; + const handleFileChange = (event) => { + const file = event.target.files[0]; + if (file) { + setProfilePreview(URL.createObjectURL(file)); + setFormDetails((prev) => ({ ...prev, profilePicture: file })); + } + }; + const handleSave = async () => { - setSaveStatus(""); // Reset save status + setSaveStatus(""); + const formData = new FormData(); + for (const [key, value] of Object.entries(formDetails)) { + formData.append(key, value); + } + try { - const response = await fetch("/api/save-account-details", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(formDetails), - }); - - if (response.ok) { + const response = await axios.post( + `${import.meta.env.VITE_BASE_URL}/api/save-account-details`, + formData, + { headers: { "Content-Type": "multipart/form-data" } } + ); + + if (response.status === 200) { setSaveStatus("Details saved successfully!"); } else { setSaveStatus("Failed to save changes. Please try again."); @@ -95,9 +101,7 @@ export default function AccountDetails() {
-

- Loading account details... -

+

Loading account details...

); @@ -110,71 +114,124 @@ export default function AccountDetails() {
- - Account Details - -

- Manage your account information below. -

+ Account Details +

Manage your account information below.

 {/* Profile Photo Section */}
- - {getInitials(formDetails.fullName)} + + {profilePreview ? ( + Profile + ) : ( + formDetails.fullName + .split(" ") + .map((name) => name[0]) + .join("") + )} -

- {formDetails.fullName || "Your Name"} -

-

{formDetails.email}

+
{/* Input Fields */}
- + + handleInputChange("fullName", e.target.value)} + className="mt-2 bg-gray-50 border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 rounded-md" + /> +
+ +
+ + handleInputChange("email", e.target.value)} + className="mt-2 bg-gray-50 border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 rounded-md" + /> +
+ +
+ - handleInputChange("studying", e.target.value) - } + onChange={(e) => handleInputChange("studying", e.target.value)} className="mt-2 bg-gray-50 border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 rounded-md" />
- {/* Other Input Fields */} - {["currentRole", "githubLink", "linkedinLink", "phoneNumber"].map( - (key) => ( -
- - handleInputChange(key, e.target.value)} - className="mt-2 bg-gray-50 border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 rounded-md" - /> -
- ) - )} -
+
+ + handleInputChange("currentRole", e.target.value)} + className="mt-2 bg-gray-50 border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 rounded-md" + /> +
- {/* Change Password Button */} -
- +
+ + handleInputChange("linkedinLink", e.target.value)} + className="mt-2 bg-gray-50 border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 rounded-md" + /> +
+ +
+ +
+ + handleInputChange("phoneNumber", e.target.value)} + className="flex-1 ml-2 bg-gray-50 border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 rounded-md" + /> +
+
+ +
+ +