TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-18 13:34:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add profile picture to navbar

Browse Source
This commit is contained in:
Pattadon 2023-11-28 10:27:14 +07:00
parent 3a7437aa09
commit 22e2521413
1 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/navigations/Navbar.jsx
View File

@ -1,6 +1,8 @@
import { useNavigate } from "react-router-dom";
import { apiUserLogout } from "src/api/AuthenticationApi";
import { useAuth } from "src/hooks/AuthHooks";
import { axiosInstance } from "src/api/AxiosConfig";
import { useEffect, useState } from "react";
const settings = {
Profile: "/profile",
@ -10,6 +12,7 @@ const settings = {
export function NavBar() {
const Navigate = useNavigate();
const { isAuthenticated, setIsAuthenticated } = useAuth();
const [profile_pic, setProfilePic] = useState(undefined);
const logout = () => {
apiUserLogout();
@ -17,6 +20,25 @@ export function NavBar() {
Navigate("/");
};
useEffect(() => {
const fetchUser = async () => {
if (isAuthenticated) {
try {
const response = await axiosInstance.get("/user/data/");
const fetchedProfilePic = response.data.profile_pic;
setProfilePic(fetchedProfilePic);
} catch (error) {
console.error("Error fetching user:", error);
}
} else {
setProfilePic(
"https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
);
}
};
fetchUser();
}, []);
return (
<div data-theme="night" className="navbar bg-base-100">
<div className="flex-1">
@ -32,14 +54,18 @@ export function NavBar() {
<div className="dropdown dropdown-end">
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
<div className="w-10 rounded-full">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" />
<img src={profile_pic} />
</div>
</label>
<ul
tabIndex={0}
className="mt-3 z-[10] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
className="mt-3 z-[10] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
>
<li>
<a onClick={() => Navigate(settings.Profile)} className="justify-between">
<a
onClick={() => Navigate(settings.Profile)}
className="justify-between"
>
Profile
</a>
</li>
@ -53,10 +79,16 @@ export function NavBar() {
</div>
) : (
<div className="flex gap-2">
<button className="btn btn-outline btn-info" onClick={() => Navigate("/login")}>
<button
className="btn btn-outline btn-info"
onClick={() => Navigate("/login")}
>
Login
</button>
<button className="btn btn-success" onClick={() => Navigate("/signup")}>
<button
className="btn btn-success"
onClick={() => Navigate("/signup")}
>
Sign Up
</button>
</div>