TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-18 21:44:07 +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 { useNavigate } from "react-router-dom";
import { apiUserLogout } from "src/api/AuthenticationApi"; import { apiUserLogout } from "src/api/AuthenticationApi";
import { useAuth } from "src/hooks/AuthHooks"; import { useAuth } from "src/hooks/AuthHooks";
import { axiosInstance } from "src/api/AxiosConfig";
import { useEffect, useState } from "react";
const settings = { const settings = {
Profile: "/profile", Profile: "/profile",
@ -10,6 +12,7 @@ const settings = {
export function NavBar() { export function NavBar() {
const Navigate = useNavigate(); const Navigate = useNavigate();
const { isAuthenticated, setIsAuthenticated } = useAuth(); const { isAuthenticated, setIsAuthenticated } = useAuth();
const [profile_pic, setProfilePic] = useState(undefined);
const logout = () => { const logout = () => {
apiUserLogout(); apiUserLogout();
@ -17,6 +20,25 @@ export function NavBar() {
Navigate("/"); 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 ( return (
<div data-theme="night" className="navbar bg-base-100"> <div data-theme="night" className="navbar bg-base-100">
<div className="flex-1"> <div className="flex-1">
@ -32,14 +54,18 @@ export function NavBar() {
<div className="dropdown dropdown-end"> <div className="dropdown dropdown-end">
<label tabIndex={0} className="btn btn-ghost btn-circle avatar"> <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
<div className="w-10 rounded-full"> <div className="w-10 rounded-full">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" /> <img src={profile_pic} />
</div> </div>
</label> </label>
<ul <ul
tabIndex={0} 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> <li>
<a onClick={() => Navigate(settings.Profile)} className="justify-between"> <a
onClick={() => Navigate(settings.Profile)}
className="justify-between"
>
Profile Profile
</a> </a>
</li> </li>
@ -53,10 +79,16 @@ export function NavBar() {
</div> </div>
) : ( ) : (
<div className="flex gap-2"> <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 Login
</button> </button>
<button className="btn btn-success" onClick={() => Navigate("/signup")}> <button
className="btn btn-success"
onClick={() => Navigate("/signup")}
>
Sign Up Sign Up
</button> </button>
</div> </div>