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);
-  console.log("Current User:", user);
+  const [user, setUser] = useState<UserMetaCardProps | null>(null);
+  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() {
-  let data = await fetch(API.User.CURRENT, {
-    credentials: "include",
-  });
+import { useState, useEffect } from 'react';
+import { apiGetCurrentUser } from "@/service/auth";
 
-  let result = await data.json();
-  console.log("Current User from GetUser component:", result);
-  return <div className="">GetUser</div>;
-}
+export default function GetUser() {
+  const [user, setUser] = useState(null);
+  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>
+  );
+}