feat(userAccount): improve user profile handling with avatar upload and dynamic display name
This commit is contained in:
@@ -1,10 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { toast } from "react-toastify";
|
||||
import Form from "./form";
|
||||
import { request } from "@/services/response";
|
||||
import ButtonSendData from "./ButtonSendData";
|
||||
import { changeDateType, getParsedUserInfo, imageUrl } from "@/helper";
|
||||
import { changeDateType, getParsedUserInfo } from "@/helper";
|
||||
import { disease } from "./form/disease";
|
||||
import LoadingComponent from "@/app/component/LoadingComponent";
|
||||
|
||||
@@ -13,26 +11,6 @@ function Information({ information, setInformation }) {
|
||||
const [insurance, setInsurance] = useState();
|
||||
const [errors, setErrors] = useState({});
|
||||
const [loadingInfo, setLoadingInfo] = useState(true);
|
||||
const [avatarUploading, setAvatarUploading] = useState(false);
|
||||
|
||||
const handleAvatarChange = async (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
setAvatarUploading(true);
|
||||
try {
|
||||
const res = await request.uploadUserAvatar(file);
|
||||
const url = res?.data?.avatar || res?.data?.url;
|
||||
if (url) {
|
||||
setInformation((prev) => ({ ...(prev || {}), avatar: url }));
|
||||
toast.success("عکس پروفایل بهروزرسانی شد");
|
||||
}
|
||||
} catch {
|
||||
toast.error("خطا در آپلود عکس");
|
||||
} finally {
|
||||
setAvatarUploading(false);
|
||||
e.target.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const parsedUserInfo = getParsedUserInfo();
|
||||
@@ -51,11 +29,9 @@ function Information({ information, setInformation }) {
|
||||
setLoadingInfo(false);
|
||||
const profile = res?.data?.data;
|
||||
|
||||
const hasProfileData = Boolean(
|
||||
profile && (profile.label || profile.family || profile.national_code)
|
||||
);
|
||||
|
||||
if (hasProfileData) {
|
||||
// ملاک «پروفایل از قبل وجود دارد» وجود uuid پروفایل است (نه پر بودن فیلدها)؛
|
||||
// در غیر این صورت برای پروفایلِ خالیِ موجود، POST میزد و 409 میگرفت.
|
||||
if (profile?.uuid) {
|
||||
let changedData = { ...profile };
|
||||
// backend stores the first name in `label`; the form binds to `name`
|
||||
changedData.name = profile?.label ?? "";
|
||||
@@ -75,7 +51,6 @@ function Information({ information, setInformation }) {
|
||||
setInformation(changedData);
|
||||
} else {
|
||||
setInformation({
|
||||
uuid: profile?.uuid,
|
||||
prev_data: false,
|
||||
other: {
|
||||
disease: disease,
|
||||
@@ -123,25 +98,6 @@ function Information({ information, setInformation }) {
|
||||
return (
|
||||
<LoadingComponent loading={loadingInfo}>
|
||||
<div className="opacity-page">
|
||||
<div className="flex items-center gap-[16px] mb-[24px]">
|
||||
<Image
|
||||
src={imageUrl(information?.avatar, "/assets/images/profile-user.png")}
|
||||
alt="avatar"
|
||||
width={72}
|
||||
height={72}
|
||||
className="w-[72px] h-[72px] rounded-full object-cover border border-[#EFEFEF]"
|
||||
/>
|
||||
<label className="cursor-pointer text-[#5559CE] text-[14px] font-medium">
|
||||
{avatarUploading ? "در حال آپلود..." : "تغییر عکس"}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
hidden
|
||||
disabled={avatarUploading}
|
||||
onChange={handleAvatarChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<Form
|
||||
errors={errors}
|
||||
insurance={insurance}
|
||||
|
||||
Reference in New Issue
Block a user