import React, { useState, useEffect } from 'react';
const Profile = () => {
const [user, setUser] = useState(null);
const [goals, setGoals] = useState([]);
const [loadingUser, setLoadingUser] = useState(true);
const [loadingGoals, setLoadingGoals] = useState(true);
const [error, setError] = useState(null);
// Simulate getting token (replace with actual auth context/storage)
const authToken = typeof window !== 'undefined' ?
[Link]('unpluggedToken') : null;
useEffect(() => {
const fetchProfile = async () => {
if (!authToken) {
setLoadingUser(false);
setError("No authentication token found. Please log in.");
return;
}
try {
const response = await fetch('[Link] {
headers: {
'Authorization': `Bearer ${authToken}`,
'Content-Type': 'application/json',
},
});
if (![Link]) {
throw new Error(`HTTP error! status: ${[Link]}`);
}
const data = await [Link]();
setUser(data);
} catch (err) {
[Link]("Error fetching profile:", err);
setError("Failed to load profile data.");
} finally {
setLoadingUser(false);
}
};
const fetchGoals = async () => {
if (!authToken) {
setLoadingGoals(false);
return;
}
try {
const response = await fetch('[Link] {
headers: {
'Authorization': `Bearer ${authToken}`,
'Content-Type': 'application/json',
},
});
if (![Link]) {
throw new Error(`HTTP error! status: ${[Link]}`);
}
const data = await [Link]();
setGoals(data);
} catch (err) {
[Link]("Error fetching goals:", err);
} finally {
setLoadingGoals(false);
}
};
fetchProfile();
fetchGoals();
}, [authToken]);
if (loadingUser || loadingGoals) {
return <div className="p-4">Loading profile...</div>;
}
if (error) {
return <div className="p-4 text-red-600">Error: {error}</div>;
}
return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4">Your Profile</h1>
{user ? (
<div className="bg-white p-4 rounded shadow mb-4">
<div className="flex items-center mb-4">
<div className="w-16 h-16 rounded-full bg-blue-500 flex items-center
justify-center text-white text-xl font-bold">
{[Link] ? [Link](0).toUpperCase() : '?'}
</div>
<div className="ml-4">
<h2 className="text-xl font-semibold">{[Link] || 'User'}</h2>
<p className="text-gray-600">{[Link]}</p>
</div>
</div>
<div className="border-t pt-3">
<p><strong>Email:</strong> {[Link]}</p>
</div>
</div>
) : (
<div className="bg-white p-4 rounded shadow mb-4">User data not
available.</div>
)}
<h2 className="text-2xl font-bold mb-4 mt-6">Your Goals</h2>
{[Link] > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{[Link](goal => (
<div key={goal._id} className="bg-white p-4 rounded shadow">
<h3 className="font-semibold mb-2">{[Link]}</h3>
{[Link] && <p className="text-sm text-gray-600 mb-
2">{[Link]}</p>}
<p className="text-sm mb-2"><strong>Category:</strong>
{[Link]}</p>
{[Link] !== undefined && (
<p className="text-sm mb-2"><strong>Target:</strong>
{[Link]} {[Link]} {[Link]}</p>
)}
<p className="text-sm mb-2"><strong>Progress:</strong>
{[Link]}%</p>
<span className={`inline-block px-2 py-1 rounded text-xs ${
[Link] === 'active' ? 'bg-blue-100 text-blue-800' :
[Link] === 'completed' ? 'bg-green-100 text-green-800' :
'bg-gray-100 text-gray-800'
}`}>
{[Link](0).toUpperCase() + [Link](1)}
</span>
</div>
))}
</div>
) : (
<div className="bg-white p-4 rounded shadow">No goals set yet.</div>
)}
<div className="mt-6">
<button className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-
blue-600">Set New Goal</button>
</div>
</div>
);
};
export default Profile;