132 lines
3.7 KiB
TypeScript
132 lines
3.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { getUser, updateUser } from "../api/user";
|
||
import Cookies from "js-cookie";
|
||
|
||
interface User {
|
||
id: number;
|
||
username: string;
|
||
email: string;
|
||
role: string;
|
||
}
|
||
|
||
const Profile = () => {
|
||
const id = Cookies.get("user_id")
|
||
const navigate = useNavigate();
|
||
if (!id) {
|
||
navigate("/login")
|
||
}
|
||
const [user, setUser] = useState<User | null>(null);
|
||
const [editMode, setEditMode] = useState(false);
|
||
const [formData, setFormData] = useState({ username: "", email: "" });
|
||
|
||
useEffect(() => {
|
||
const fetchUser = async () => {
|
||
try {
|
||
const data = await getUser(Number(id));
|
||
setUser(data);
|
||
setFormData({ username: data.username, email: data.email });
|
||
} catch (err) {
|
||
console.error("Błąd podczas pobierania danych użytkownika:", err);
|
||
navigate("/tasks");
|
||
}
|
||
};
|
||
|
||
fetchUser();
|
||
}, [id]);
|
||
|
||
const handleUpdate = async () => {
|
||
try {
|
||
const updated = await updateUser(Number(id), formData);
|
||
setUser(updated);
|
||
setEditMode(false);
|
||
} catch (err) {
|
||
console.error("Błąd podczas aktualizacji użytkownika:", err);
|
||
}
|
||
};
|
||
|
||
if (!user) return <p>Ładowanie...</p>;
|
||
|
||
return (
|
||
<div className="p-6 max-w-xl mx-auto">
|
||
<h1 className="text-2xl font-bold mb-6">👤 Twój profil</h1>
|
||
|
||
<div className="mb-4">
|
||
<label className="block font-semibold mb-1"><strong>Nazwa użytkownika:</strong></label>
|
||
{editMode ? (
|
||
<input
|
||
type="text"
|
||
value={formData.username}
|
||
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
|
||
className="border p-2 rounded w-full"
|
||
/>
|
||
) : (
|
||
<p>{user.username}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<label className="block font-semibold mb-1"><strong>Email:</strong></label>
|
||
{editMode ? (
|
||
<input
|
||
type="email"
|
||
value={formData.email}
|
||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||
className="border p-2 rounded w-full"
|
||
/>
|
||
) : (
|
||
<p>{user.email}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mb-6">
|
||
<label className="block font-semibold mb-1"><strong>Rola:</strong></label>
|
||
<p>{user.role}</p>
|
||
</div>
|
||
|
||
{editMode ? (
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={handleUpdate}
|
||
className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
|
||
>
|
||
💾 Zapisz zmiany
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setEditMode(false);
|
||
setFormData({ username: user.username, email: user.email });
|
||
}}
|
||
className="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
|
||
>
|
||
Anuluj
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col gap-2">
|
||
<button
|
||
onClick={() => setEditMode(true)}
|
||
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
||
>
|
||
✏️ Edytuj profil
|
||
</button>
|
||
<button
|
||
onClick={() => navigate("/profile/change-password")}
|
||
className="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600"
|
||
>
|
||
🔒 Zmień hasło
|
||
</button>
|
||
<button
|
||
onClick={() => navigate("/profile/delete")}
|
||
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
|
||
>
|
||
❌ Usuń konto
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Profile;
|