profile update

2026-04-07 12:20:05 +07:00
parent a1af516879
commit 91f3b16634
9 changed files with 227 additions and 135 deletions
--- 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`,
--- 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() {
        </h3>
        <div className="space-y-6">
          <UserMetaCard data={user ?? {}} />
-          <UserInfoCard />
+          <UserInfoCard data={user ?? {}} />
          <UserAddressCard />
        </div>
      </div>
--- 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<ButtonProps> = ({
@@ -20,6 +21,7 @@ const Button: React.FC<ButtonProps> = ({
  onClick,
  className = "",
  disabled = false,
+ type = "button",
 }) => {
  // Size Classes
  const sizeClasses = {
--- 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<Profile>({
+      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<HTMLInputElement>) => {
+      const { name, value } = e.target;
+      setFormData((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+    };
  return (
    <>
      <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
        <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
          <div>
-            <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">
-              Address
+            <h4 className="text-lg font-semibold text-red-600 dark:text-white/90 lg:mb-6">
+              Account details
            </h4>

            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-7 2xl:gap-x-32">
              <div>
                <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                  Country
+                  Username
                </p>
                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                  United States
@@ -40,30 +64,12 @@ export default function UserAddressCard() {
                  Phoenix, Arizona, United States.
                </p>
              </div>
-
-              <div>
-                <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                  Postal Code
-                </p>
-                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                  ERT 2489
-                </p>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                  TAX ID
-                </p>
-                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                  AS4568384
-                </p>
-              </div>
            </div>
          </div>

          <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"
+            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-red-600 shadow-theme-xs hover:bg-gray-50 hover:text-red-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
              className="fill-current"
--- a/src/components/user-profile/UserInfoCard.tsx
+++ b/src/components/user-profile/UserInfoCard.tsx
@@ -1,17 +1,60 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 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, UserMetaCardProps } from "@/interface/user";
+import { apiUpdateUser } from "@/service/userService";
+import { toast } from "sonner";
+import Link from "next/link";

-export default function UserInfoCard() {
+export default function UserInfoCard({ data }: { data: UserMetaCardProps }) {
+  const router = useRouter();
  const { isOpen, openModal, closeModal } = useModal();
-  const handleSave = () => {
-    // Handle save logic here
-    console.log("Saving changes...");
-    closeModal();
+  // 1. Khởi tạo state cho form
+  const [formData, setFormData] = useState<Profile>({
+    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<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSave = async (e: React.FormEvent) => {
+    try {
+      const userId = data?.data?.id;
+      if (userId) {
+        await apiUpdateUser(userId, formData);
+        toast.success("Cập nhật thành công!");
+        router.refresh();
+      }
+    } catch (error) {
+      console.error("Lỗi khi cập nhật profile:", error);
+    }
  };
  return (
    <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
@@ -24,28 +67,18 @@ export default function UserInfoCard() {
          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-7 2xl:gap-x-32">
            <div>
              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                First Name
+                Full Name
              </p>
              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                Musharof
+                {data.data?.profile?.display_name || "Full Name"}
              </p>
            </div>
-
-            <div>
-              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                Last Name
-              </p>
-              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                Chowdhury
-              </p>
-            </div>
-
            <div>
              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
                Email address
              </p>
              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                randomuser@pimjo.com
+                {data.data?.email || "Email address"}
              </p>
            </div>

@@ -54,7 +87,7 @@ export default function UserInfoCard() {
                Phone
              </p>
              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                +09 363 398 46
+                {data.data?.profile?.phone || "+123 456 7890"}
              </p>
            </div>

@@ -63,9 +96,31 @@ export default function UserInfoCard() {
                Bio
              </p>
              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                Team Manager
+                {data.data?.profile?.bio || "No bio available"}
              </p>
            </div>
+
+            <div>
+              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
+                Address
+              </p>
+              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
+                {data.data?.profile?.location || "No location available"}
+              </p>
+            </div>
+             <div>
+              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
+                Website
+              </p>
+              <Link 
+                href={data.data?.profile?.website || "#"} 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-sm font-medium text-gray-800 dark:text-white/90 hover:text-blue-500 dark:hover:text-blue-400"
+              >
+                {data.data?.profile?.website || "No website"}
+              </Link>
+            </div>
          </div>
        </div>

@@ -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 */}
          <svg
            className="fill-current"
            width="18"
            height="18"
            viewBox="0 0 18 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
@@ -102,82 +156,84 @@ export default function UserInfoCard() {
              Update your details to keep your profile up-to-date.
            </p>
          </div>
-          <form className="flex flex-col">
+          <form className="flex flex-col" onSubmit={handleSave}>
            <div className="custom-scrollbar h-[450px] overflow-y-auto px-2 pb-3">
-              <div>
-                <h5 className="mb-5 text-lg font-medium text-gray-800 dark:text-white/90 lg:mb-6">
-                  Social Links
-                </h5>
-
-                <div className="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
-                  <div>
-                    <Label>Facebook</Label>
-                    <Input
-                      type="text"
-                      defaultValue="https://www.facebook.com/PimjoHQ"
-                    />
-                  </div>
-
-                  <div>
-                    <Label>X.com</Label>
-                    <Input type="text" defaultValue="https://x.com/PimjoHQ" />
-                  </div>
-
-                  <div>
-                    <Label>Linkedin</Label>
-                    <Input
-                      type="text"
-                      defaultValue="https://www.linkedin.com/company/pimjo"
-                    />
-                  </div>
-
-                  <div>
-                    <Label>Instagram</Label>
-                    <Input
-                      type="text"
-                      defaultValue="https://instagram.com/PimjoHQ"
-                    />
-                  </div>
-                </div>
-              </div>
              <div className="mt-7">
                <h5 className="mb-5 text-lg font-medium text-gray-800 dark:text-white/90 lg:mb-6">
                  Personal Information
                </h5>

                <div className="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
-                  <div className="col-span-2 lg:col-span-1">
-                    <Label>First Name</Label>
-                    <Input type="text" defaultValue="Musharof" />
-                  </div>
-
-                  <div className="col-span-2 lg:col-span-1">
-                    <Label>Last Name</Label>
-                    <Input type="text" defaultValue="Chowdhury" />
+                  <div className="col-span-2">
+                    <Label>Display Name</Label>
+                    <Input
+                      type="text"
+                      name="display_name"
+                      defaultValue={formData.display_name}
+                      onChange={handleChange}
+                    />
                  </div>

                  <div className="col-span-2 lg:col-span-1">
                    <Label>Email Address</Label>
-                    <Input type="text" defaultValue="randomuser@pimjo.com" />
+                    <Input
+                      type="text"
+                      disabled
+                      defaultValue={data.data?.email}
+                    />
                  </div>

                  <div className="col-span-2 lg:col-span-1">
                    <Label>Phone</Label>
-                    <Input type="text" defaultValue="+09 363 398 46" />
+                    <Input
+                      type="text"
+                      name="phone"
+                      defaultValue={formData.phone}
+                      onChange={handleChange}
+                    />
+                  </div>
+
+                  <div className="col-span-2">
+                    <Label>Location</Label>
+                    <Input
+                      type="text"
+                      name="location"
+                      defaultValue={formData.location}
+                      onChange={handleChange}
+                    />
                  </div>

                  <div className="col-span-2">
                    <Label>Bio</Label>
-                    <Input type="text" defaultValue="Team Manager" />
+                    <Input
+                      type="text"
+                      name="bio"
+                      defaultValue={formData.bio}
+                      onChange={handleChange}
+                    />
+                  </div>
+                   <div className="col-span-2">
+                    <Label>Website</Label>
+                    <Input
+                      type="text"
+                      name="website"
+                      defaultValue={formData.website}
+                      onChange={handleChange}
+                    />
                  </div>
                </div>
              </div>
            </div>
            <div className="flex items-center gap-3 px-2 mt-6 lg:justify-end">
-              <Button size="sm" variant="outline" onClick={closeModal}>
+              <Button
+                size="sm"
+                variant="outline"
+                type="button"
+                onClick={closeModal}
+              >
                Close
              </Button>
-              <Button size="sm" onClick={handleSave}>
+              <Button size="sm" type="submit">
                Save Changes
              </Button>
            </div>
--- 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 }) {
              <Image
                width={80}
                height={80}
-                src= {data.data?.profile?.avatar_url || "/images/no-images.jpg"}
-                alt="user"
+                src={data.data?.profile?.avatar_url || "/images/no-images.jpg"}
+                alt="avatar"
              />
            </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">
-                {data.data?.profile?.display_name || "Unknown User"}
+                {data.data?.profile?.display_name || "Full Name"}
              </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">
@@ -64,6 +40,11 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {data.data?.profile?.location || "user location"}
                </p>
+                <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
+                <p className="text-sm text-blue-500 dark:text-gray-400">
+                  {data.data?.roles?.map((role) => role.name).join(", ") ||
+                    "No roles available"}
+                </p>
              </div>
            </div>
            {/* <div className="flex items-center order-2 gap-2 grow xl:order-3 xl:justify-end">
@@ -160,7 +141,7 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
          </button> */}
        </div>
      </div>
-      <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[700px] m-4">
+      {/* <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[700px] m-4">
        <div className="no-scrollbar relative w-full max-w-[700px] overflow-y-auto rounded-3xl bg-white p-4 dark:bg-gray-900 lg:p-11">
          <div className="px-2 pr-14">
            <h4 className="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90">
@@ -251,7 +232,7 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
            </div>
          </form>
        </div>
-      </Modal>
+      </Modal> */}
    </>
  );
 }
--- 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;
+}
--- a/src/service/auth.ts
+++ b/src/service/auth.ts
@@ -30,3 +30,4 @@ export const apiGetCurrentUser = async () => {
  const response = await api.get(API.User.CURRENT);
  return response?.data;
 };
+
--- a/src/service/userService.ts
+++ 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;
+};
+