From 0c60f48d1845dad342d9717f87543dccdf00ca27 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Mon, 27 Nov 2023 15:37:39 +0700 Subject: [PATCH] Refactor navigation links and update profile component --- .../src/components/navigations/Navbar.jsx | 4 +- .../profile/ProfileUpdateComponent.jsx | 50 +++++++--- .../src/components/profile/profilePage.jsx | 92 ++++++++++++++----- 3 files changed, 108 insertions(+), 38 deletions(-) diff --git a/frontend/src/components/navigations/Navbar.jsx b/frontend/src/components/navigations/Navbar.jsx index 22120b3..a31def6 100644 --- a/frontend/src/components/navigations/Navbar.jsx +++ b/frontend/src/components/navigations/Navbar.jsx @@ -39,12 +39,12 @@ export function NavBar() { tabIndex={0} className="mt-3 z-[10] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
  • - + Navigate(settings.Profile)} className="justify-between"> Profile
  • - Settings + Navigate(settings.Account)}>Settings
  • Logout diff --git a/frontend/src/components/profile/ProfileUpdateComponent.jsx b/frontend/src/components/profile/ProfileUpdateComponent.jsx index 12f5e98..a38558c 100644 --- a/frontend/src/components/profile/ProfileUpdateComponent.jsx +++ b/frontend/src/components/profile/ProfileUpdateComponent.jsx @@ -1,13 +1,30 @@ import { useState, useRef } from "react"; import { ApiUpdateUserProfile } from "src/api/UserProfileApi"; +import { axiosInstance } from "src/api/AxiosConfig"; +import { useEffect } from "react"; export function ProfileUpdateComponent() { const [file, setFile] = useState(null); - const [username, setUsername] = useState(""); - const [fullName, setFullName] = useState(""); - const [about, setAbout] = useState(""); - const defaultImage = "https://i1.sndcdn.com/artworks-cTz48e4f1lxn5Ozp-L3hopw-t500x500.jpg"; + const [firstName, setFirstName] = useState(""); + const [about, setAbout] = useState(); const fileInputRef = useRef(null); + const [profile_pic, setProfilePic] = useState(undefined); + useEffect(() => { + const fetchUser = async () => { + try { + const response = await axiosInstance.get("/user/data/"); + const fetchedProfilePic = response.data.profile_pic; + const fetchedName = response.data.first_name; + const fetchedAbout = response.data.about; + setProfilePic(fetchedProfilePic); + setAbout(fetchedAbout); + setFirstName(fetchedName); + } catch (error) { + console.error("Error fetching user:", error); + } + }; + fetchUser(); + }, []); const handleImageUpload = () => { if (fileInputRef.current) { @@ -25,7 +42,7 @@ export function ProfileUpdateComponent() { const handleSave = () => { const formData = new FormData(); formData.append("profile_pic", file); - formData.append("first_name", username); + formData.append("first_name", firstName); formData.append("about", about); ApiUpdateUserProfile(formData); @@ -45,12 +62,19 @@ export function ProfileUpdateComponent() { ref={fileInputRef} /> -
    +
    {file ? ( - Profile + Profile ) : ( <> - Default + Default @@ -58,7 +82,7 @@ export function ProfileUpdateComponent() {
    - {/* Username Field */} + {/* Username Field
    setUsername(e.target.value)} /> -
    + */} {/* Full Name Field */}
    - + setFullName(e.target.value)} />
    diff --git a/frontend/src/components/profile/profilePage.jsx b/frontend/src/components/profile/profilePage.jsx index d61368a..31284e3 100644 --- a/frontend/src/components/profile/profilePage.jsx +++ b/frontend/src/components/profile/profilePage.jsx @@ -1,36 +1,63 @@ import { ProfileUpdateComponent } from "./ProfileUpdateComponent"; +import { axiosInstance } from "src/api/AxiosConfig"; +import { useEffect, useState } from "react"; export function ProfileUpdatePage() { + const [profile_pic, setProfilePic] = useState(undefined); + const [about, setAbout] = useState(); + useEffect(() => { + const fetchUser = async () => { + try { + const response = await axiosInstance.get("/user/data/"); + const fetchedProfilePic = response.data.profile_pic; + const fetchedAbout = response.data.about; + setProfilePic(fetchedProfilePic); + setAbout(fetchedAbout); + } catch (error) { + console.error("Error fetching user:", error); + } + }; + fetchUser(); + }, []); return (
    -
    Username
    +
    Firstname
    Sirin
    -
    User ID
    + {/*
    User ID
    */}
    - + Profile Picture
    -
    + {/*
    Health
    234/3213
    - +
    32% Remain
    - -
    - + +
    */} +{/*
    Level
    @@ -40,13 +67,18 @@ export function ProfileUpdatePage() { xmlns="http://www.w3.org/2000/svg" fill="#3abff8" viewBox="0 0 24 24" - className="inline-block w-8 h-8"> + className="inline-block w-8 h-8" + >
    3213/321312321 points
    - +
    @@ -58,34 +90,43 @@ export function ProfileUpdatePage() { xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" - className="inline-block w-8 h-8 stroke-current"> + className="inline-block w-8 h-8 stroke-current" + > + d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" + >
    Top 12% of Global Ranking
    - - + + */}

    About me

    - +
    -
    + {/*
    @@ -110,18 +151,21 @@ export function ProfileUpdatePage() {
    -
    +
    */}