profile page

src/app/(admin)/(others-pages)/profile/page.tsx

@@ -1,14 +1,32 @@
-"use client"
+"use client";
 
 import UserAddressCard from "@/components/user-profile/UserAddressCard";
 import UserInfoCard from "@/components/user-profile/UserInfoCard";
-import UserMetaCard from "@/components/user-profile/UserMetaCard";
+import UserMetaCard, { UserMetaCardProps } from "@/components/user-profile/UserMetaCard";
+import { apiGetCurrentUser } from "@/service/auth";
 import { RootState } from "@/store/store";
+import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 
 export default function Profile() {
-  const user = useSelector((state: RootState) => state.user.data);
+  const [user, setUser] = useState<UserMetaCardProps | null>(null);
-  console.log("Current User:", user);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const result = await apiGetCurrentUser();
+        console.log("Current User:", result);
+        setUser(result);
+      } catch (err) {
+        console.error("Lỗi:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUser();
+  }, []);
+
   return (
     <div>
       <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
@@ -16,7 +34,7 @@ export default function Profile() {
           Profile
         </h3>
         <div className="space-y-6">
-          <UserMetaCard />
+          <UserMetaCard data={user ?? {}} />
           <UserInfoCard />
           <UserAddressCard />
         </div>

src/app/testing/page.tsx

@@ -1,11 +1,37 @@
-import { API } from "../../../api";
+'use client'; // Bắt buộc phải có dòng này
 
-export default async function GetUser() {
+import { useState, useEffect } from 'react';
-  let data = await fetch(API.User.CURRENT, {
+import { apiGetCurrentUser } from "@/service/auth";
-    credentials: "include",
-  });
 
-  let result = await data.json();
+export default function GetUser() {
-  console.log("Current User from GetUser component:", result);
+  const [user, setUser] = useState(null);
-  return <div className="">GetUser</div>;
+  const [loading, setLoading] = useState(true);
-}
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        setLoading(true);
+        const result = await apiGetCurrentUser();
+        console.log("Current User from useEffect:", result);
+        setUser(result);
+      } catch (err) {
+        console.error("Lỗi 401 hoặc lỗi kết nối:", err);
+        // setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchUser();
+  }, []); // Dependency array rỗng để chỉ chạy 1 lần khi mount
+
+  if (loading) return <div>Đang tải thông tin...</div>;
+  if (error) return <div>Bạn chưa đăng nhập (Lỗi 401)</div>;
+
+  return (
+    <div className="">
+      <h1>Thông tin người dùng hiện tại:</h1>
+    </div>
+  );
+}

src/components/user-profile/UserMetaCard.tsx

@@ -6,15 +6,39 @@ 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;
+}
 
-export default function UserMetaCard() {
+export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
   const { isOpen, openModal, closeModal } = useModal();
   const handleSave = () => {
-    // Handle save logic here
     console.log("Saving changes...");
     closeModal();
   };
+  console.log("UserMetaCard data:", data.data?.profile?.display_name);
   return (
     <>
       <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
@@ -24,25 +48,25 @@ export default function UserMetaCard() {
               <Image
                 width={80}
                 height={80}
-                src="/images/user/owner.jpg"
+                src= {data.data?.profile?.avatar_url || "/images/no-images.jpg"}
                 alt="user"
               />
             </div>
             <div className="order-3 xl:order-2">
               <h4 className="mb-2 text-lg font-semibold text-center text-gray-800 dark:text-white/90 xl:text-left">
-                Musharof Chowdhury
+                {data.data?.profile?.display_name || "Unknown User"}
               </h4>
               <div className="flex flex-col items-center gap-1 text-center xl:flex-row xl:gap-3 xl:text-left">
                 <p className="text-sm text-gray-500 dark:text-gray-400">
-                  Team Manager
+                  {data.data?.profile?.bio || "No bio available"}
                 </p>
                 <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
                 <p className="text-sm text-gray-500 dark:text-gray-400">
-                  Arizona, United States
+                  {data.data?.profile?.location || "user location"}
                 </p>
               </div>
             </div>
-            <div className="flex items-center order-2 gap-2 grow xl:order-3 xl:justify-end">
+            {/* <div className="flex items-center order-2 gap-2 grow xl:order-3 xl:justify-end">
               <a        
         target="_blank"
         rel="noreferrer" href='https://www.facebook.com/PimjoHQ' className="flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white 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">
@@ -111,9 +135,9 @@ export default function UserMetaCard() {
                   />
                 </svg>
               </a>
-            </div>
+            </div> */}
           </div>
-          <button
+          {/* <button
             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"
           >
@@ -133,7 +157,7 @@ export default function UserMetaCard() {
               />
             </svg>
             Edit
-          </button>
+          </button> */}
         </div>
       </div>
       <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[700px] m-4">