diff --git a/api.ts b/api.ts index 14c6028..275793d 100644 --- a/api.ts +++ b/api.ts @@ -2,7 +2,9 @@ export const API_URL_ROOT = process.env.NEXT_PUBLIC_API_URL_ROOT || ""; export const API = { User : { - CURRENT: `${API_URL_ROOT}/users/current` + CURRENT: `${API_URL_ROOT}/users/current`, + MEDIA: `${API_URL_ROOT}/users/current/media`, + Update: (Id: number | string) => `${API_URL_ROOT}/users/${Id}`, }, Auth : { SIGNUP: `${API_URL_ROOT}/auth/signup`, diff --git a/src/app/(admin)/(others-pages)/profile/page.tsx b/src/app/(admin)/(others-pages)/profile/page.tsx index aae12bb..cbcc5bd 100644 --- a/src/app/(admin)/(others-pages)/profile/page.tsx +++ b/src/app/(admin)/(others-pages)/profile/page.tsx @@ -2,8 +2,10 @@ import UserAddressCard from "@/components/user-profile/UserAddressCard"; import UserInfoCard from "@/components/user-profile/UserInfoCard"; -import UserMetaCard, { UserMetaCardProps } from "@/components/user-profile/UserMetaCard"; +import UserMetaCard from "@/components/user-profile/UserMetaCard"; +import { UserMetaCardProps } from "@/interface/user"; import { apiGetCurrentUser } from "@/service/auth"; +import { apiGetCurrentUserMedia } from "@/service/userService"; import { RootState } from "@/store/store"; import { useEffect, useState } from "react"; import { useSelector } from "react-redux"; @@ -16,7 +18,9 @@ export default function Profile() { const fetchUser = async () => { try { const result = await apiGetCurrentUser(); + const mediaResult = await apiGetCurrentUserMedia(); console.log("Current User:", result); + console.log("User Media:", mediaResult); setUser(result); } catch (err) { console.error("Lỗi:", err); @@ -35,7 +39,7 @@ export default function Profile() {
- +
diff --git a/src/components/ui/button/Button.tsx b/src/components/ui/button/Button.tsx index fa9c7f1..ec608d5 100644 --- a/src/components/ui/button/Button.tsx +++ b/src/components/ui/button/Button.tsx @@ -9,6 +9,7 @@ interface ButtonProps { onClick?: () => void; // Click handler disabled?: boolean; // Disabled state className?: string; // Disabled state + type?: "button" | "submit" | "reset"; } const Button: React.FC = ({ @@ -20,6 +21,7 @@ const Button: React.FC = ({ onClick, className = "", disabled = false, + type = "button", }) => { // Size Classes const sizeClasses = { diff --git a/src/components/user-profile/UserAddressCard.tsx b/src/components/user-profile/UserAddressCard.tsx index e7430e3..0719083 100644 --- a/src/components/user-profile/UserAddressCard.tsx +++ b/src/components/user-profile/UserAddressCard.tsx @@ -1,31 +1,55 @@ "use client"; -import React from "react"; +import React, { useState } from "react"; import { useModal } from "../../hooks/useModal"; import { Modal } from "../ui/modal"; import Button from "../ui/button/Button"; import Input from "../form/input/InputField"; import Label from "../form/Label"; +import { Profile } from "@/interface/user"; export default function UserAddressCard() { const { isOpen, openModal, closeModal } = useModal(); - const handleSave = () => { - // Handle save logic here - console.log("Saving changes..."); - closeModal(); - }; + const [formData, setFormData] = useState({ + display_name: "", + phone: "", + bio: "", + location: "", + website: "", + // Thêm các field khác nếu cần + }); + + useEffect(() => { + if (data?.data?.profile) { + setFormData({ + display_name: data.data.profile.display_name || "", + phone: data.data.profile.phone || "", + bio: data.data.profile.bio || "", + location: data.data.profile.location || "", + website: data.data.profile.website || "", + }); + } + }, [data, isOpen]); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + }; return ( <>
-

- Address +

+ Account details

- Country + Username

United States @@ -40,30 +64,12 @@ export default function UserAddressCard() { Phoenix, Arizona, United States.

- -
-

- Postal Code -

-

- ERT 2489 -

-
- -
-

- TAX ID -

-

- AS4568384 -

-
@@ -73,13 +128,12 @@ export default function UserInfoCard() { onClick={openModal} className="flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 lg:inline-flex lg:w-auto" > + {/* SVG giữ nguyên */} -
+
-
-
- Social Links -
- -
-
- - -
- -
- - -
- -
- - -
- -
- - -
-
-
Personal Information
-
- - -
- -
- - +
+ +
- +
- + +
+ +
+ +
- + +
+
+ +
- -
diff --git a/src/components/user-profile/UserMetaCard.tsx b/src/components/user-profile/UserMetaCard.tsx index 5103533..4203cac 100644 --- a/src/components/user-profile/UserMetaCard.tsx +++ b/src/components/user-profile/UserMetaCard.tsx @@ -6,31 +6,7 @@ import Button from "../ui/button/Button"; import Input from "../form/input/InputField"; import Label from "../form/Label"; import Image from "next/image"; -interface Profile { - avatar_url?: string; - bio?: string; - country_code?: string; - display_name?: string; - full_name?: string; - location?: string; - phone?: string; - website?: string; -} -interface Data { - email?: string; - profile?: Profile; - roles?: Role[]; -} -interface Role { - id?: number; - name?: string; -} - -export interface UserMetaCardProps { - message?: string; - status?: boolean; - data?: Data; -} +import { UserMetaCardProps } from "@/interface/user"; export default function UserMetaCard({ data }: { data: UserMetaCardProps }) { const { isOpen, openModal, closeModal } = useModal(); @@ -48,13 +24,13 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) { user

- {data.data?.profile?.display_name || "Unknown User"} + {data.data?.profile?.display_name || "Full Name"}

@@ -64,6 +40,11 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {

{data.data?.profile?.location || "user location"}

+
+

+ {data.data?.roles?.map((role) => role.name).join(", ") || + "No roles available"} +

{/*
@@ -160,7 +141,7 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) { */}
- + {/*

@@ -251,7 +232,7 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {

- + */} ); } diff --git a/src/interface/user.ts b/src/interface/user.ts index 05f4cce..2754051 100644 --- a/src/interface/user.ts +++ b/src/interface/user.ts @@ -25,3 +25,29 @@ export interface UserData { roles: UserRole[]; } +export interface Profile { + avatar_url?: string; + bio?: string; + country_code?: string; + display_name?: string; + full_name?: string; + location?: string; + phone?: string; + website?: string; +} +export interface Data { + email?: string; + profile?: Profile; + roles?: Role[]; + id: string; +} +export interface Role { + id?: number; + name?: string; +} + +export interface UserMetaCardProps { + message?: string; + status?: boolean; + data?: Data; +} \ No newline at end of file diff --git a/src/service/auth.ts b/src/service/auth.ts index 4c6aeb0..4beadf8 100644 --- a/src/service/auth.ts +++ b/src/service/auth.ts @@ -29,4 +29,5 @@ export const apiSignIn = async (payload: any) => { export const apiGetCurrentUser = async () => { const response = await api.get(API.User.CURRENT); return response?.data; -}; \ No newline at end of file +}; + diff --git a/src/service/userService.ts b/src/service/userService.ts new file mode 100644 index 0000000..5e3fb66 --- /dev/null +++ b/src/service/userService.ts @@ -0,0 +1,14 @@ +import api from "@/config/config"; +import { API } from "../../api"; +import { Profile } from "@/interface/user"; + +export const apiGetCurrentUserMedia = async () => { + const response = await api.get(API.User.MEDIA); + return response?.data; +}; + +export const apiUpdateUser = async (id: number | string, payload: Profile) => { + const response = await api.put(API.User.Update(id), payload); + return response?.data; +}; +