danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dsc

Browse Source
This commit is contained in:
hamid zarghami
2025-01-26 09:07:21 +03:30
parent c349d1ce55
commit 49e09fa9ab
9 changed files with 268 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Select.tsx
+4 -1
View File
@@ -43,7 +43,10 @@ const Select: FC<Props> = (props: Props) => {
}
</select>
<ArrowDown2 size={16} color='black' className='absolute z-0 top-3 left-2' />
<ArrowDown2 size={16} color='black' className={clx(
'absolute z-0 top-3 left-2',
props.label && 'top-9'
)} />
{
props.error_text && props.error_text !== '' ?
<div className='text-xs text-right text-red-600 mt-2 mr-2 font-medium'>
src/index.css
+51
View File
@@ -131,3 +131,54 @@ tbody tr {
direction: rtl;
font-family: "irancell" !important;
}
/* loader */
.loader {
width: 22px;
height: 22px;
border-radius: 50%;
position: relative;
animation: rotate 1s linear infinite;
}
.loader::before,
.loader::after {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 2px solid #0047ff;
animation: prixClipFix 2s linear infinite;
}
.loader::after {
border-color: #000;
animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
inset: 6px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}
100% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
}
src/langs/fa.json
+6 -2
View File
@@ -282,7 +282,11 @@
"address_live": "آدرس محل سکونت خود را با دقت وارد کنید",
"province": "استان",
"city": "شهر",
"postal_code": "کد پستی"
"postal_code": "کد پستی",
"username_available": "نام کاربری موجود",
"username_not_available": "نام کاربری موجود نیست",
"username_save_success": "نام کاربری با موفقیت ذخیره شد"
},
"email": "ایمیل"
"email": "ایمیل",
"save": "ذخیره"
}
src/pages/profile/Profile.tsx
+7 -14
View File
@@ -7,10 +7,13 @@ import Input from '../../components/Input'
import DatePickerComponent from '../../components/DatePicker'
import Select from '../../components/Select'
import Textarea from '../../components/Textarea'
import { useGetProfile } from './hooks/useProfileData'
import Username from './components/Username'
const Profile: FC = () => {
const { t } = useTranslation('global')
const getProfile = useGetProfile()
return (
<div className='mt-4 '>
@@ -56,23 +59,13 @@ const Profile: FC = () => {
</div>
</div>
<div className='flex-1 '>
<div className='flex items-end xl:gap-6 gap-3'>
<Input
label={t('profile.username')}
value={'mehrdad'}
readOnly
<Username
username={getProfile.data?.data?.user?.userName}
/>
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
<div>
{t('edit')}
</div>
</div>
</div>
<div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
<Input
label={t('email')}
value={'info@example.com'}
value={getProfile.data?.data?.user?.email}
readOnly
/>
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
@@ -85,7 +78,7 @@ const Profile: FC = () => {
<div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
<Input
label={t('profile.phone_call')}
value={'۰۹۱۲۹۲۸۳۳۹۵'}
value={getProfile.data?.data?.user?.phone}
readOnly
/>
<div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
src/pages/profile/components/Username.tsx
+132
View File
@@ -0,0 +1,132 @@
import { FC, useEffect, useState } from 'react'
import Input from '../../../components/Input'
import { Edit } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import Button from '../../../components/Button'
import { useCheckUserName, useUpdateProfile } from '../hooks/useProfileData'
import { CheckUserNameType, UpdateProfileType } from '../types/ProfileTypes'
import { toast } from 'react-toastify'
import { ErrorType } from '../../../helpers/types'
type Props = {
username: string | null,
}
const Username: FC<Props> = (props: Props) => {
const { t } = useTranslation('global')
const [username, setUsername] = useState<string>(props.username ? props.username : '')
const [canSave, setCanSave] = useState<boolean>(false)
const [canEdit, setCanEdit] = useState<boolean>(false)
const [status, setStatus] = useState<'success' | 'error' | ''>('')
const checkUsername = useCheckUserName()
const updateProfile = useUpdateProfile()
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value
setCanSave(false)
if (value.indexOf(' ') === -1) {
if (value.length <= 3) {
setUsername(value)
return
}
setStatus('')
const params: CheckUserNameType = {
value: e.target.value,
type: 'userName'
}
setUsername(e.target.value)
checkUsername.mutate(params, {
onSuccess() {
setStatus('success')
setCanSave(true)
},
onError() {
setStatus('error')
}
})
}
}
const handleSave = () => {
const params: UpdateProfileType = {
userName: username
}
updateProfile.mutate(params, {
onSuccess: () => {
toast.success(t('profile.username_save_success'))
setCanEdit(false)
setCanSave(false)
setStatus('')
},
onError(error: ErrorType) {
toast.error(error.response?.data?.error?.message?.[0])
},
})
}
useEffect(() => {
if (username !== props.username) {
setUsername(props.username ? props.username : '')
}
}, [props.username])
return (
<>
<div className='flex items-end xl:gap-6 gap-3'>
<div className='relative w-full'>
<Input
label={t('profile.username')}
value={username}
readOnly={!canEdit}
onChange={handleChange}
minLength={3}
maxLength={20}
/>
{
checkUsername.isPending &&
<div className='absolute left-4 top-8'>
<div className='loader'></div>
</div>
}
</div>
<div className='flex relative gap-1 text-[#0047FF] text-xs items-center'>
{
!canEdit ?
<div onClick={() => setCanEdit(true)} className='flex gap-1 cursor-pointer relative -top-3'>
<Edit className='xl:size-[18px] size-4' color='#0047FF' />
<div>
{t('edit')}
</div>
</div>
:
<Button
label={t('save')}
onClick={handleSave}
className='px-4'
disabled={!canSave}
isLoading={updateProfile.isPending}
/>
}
</div>
</div>
{
status === 'success' ?
<div className='text-xs text-green-500 mt-2'>
{t('profile.username_available')}
</div>
:
status === 'error' ?
<div className='text-xs text-red-500 mt-2'>
{t('profile.username_not_available')}
</div>
: null
}
</>
)
}
export default Username
src/pages/profile/hooks/useProfileData.tsx
+22
View File
@@ -0,0 +1,22 @@
import { useMutation, useQuery } from '@tanstack/react-query';
import * as api from '../service/ProfileService'
import { CheckUserNameType, UpdateProfileType } from '../types/ProfileTypes';
export const useGetProfile = () => {
return useQuery({
queryKey: ["profile"],
queryFn: () => api.getProfile(),
});
};
export const useCheckUserName = () => {
return useMutation({
mutationFn: (variables: CheckUserNameType) => api.checkUserName(variables),
});
};
export const useUpdateProfile = () => {
return useMutation({
mutationFn: (variables: UpdateProfileType) => api.updateProfile(variables),
});
};
src/pages/profile/service/ProfileService.ts
+17
View File
@@ -0,0 +1,17 @@
import axios from "../../../config/axios";
import { CheckUserNameType, UpdateProfileType } from "../types/ProfileTypes";
export const getProfile = async () => {
const { data } = await axios.get(`/users/me`);
return data;
};
export const checkUserName = async (params: CheckUserNameType) => {
const { data } = await axios.post(`/users/check-validity`, params);
return data;
};
export const updateProfile = async (params: UpdateProfileType) => {
const { data } = await axios.patch(`/users/update-profile`, params);
return data;
};
src/pages/profile/types/ProfileTypes.ts
+11
View File
@@ -0,0 +1,11 @@
export type CheckUserNameType = {
type: "userName";
value: string;
};
export type UpdateProfileType = {
firstName?: string;
lastName?: string;
birthDate?: string;
userName?: string;
};
src/shared/Header.tsx
+8 -1
View File
@@ -7,11 +7,13 @@ import { Link } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Notifications from '../pages/notification/Notification'
import { useSharedStore } from './store/sharedStore'
import { useGetProfile } from '../pages/profile/hooks/useProfileData'
const Header: FC = () => {
const { t } = useTranslation('global')
const { setOpenSidebar, openSidebar } = useSharedStore()
const { data } = useGetProfile()
return (
<div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
@@ -32,6 +34,8 @@ const Header: FC = () => {
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
</Link>
<Notifications />
{
data &&
<div className='flex gap-2 items-center'>
<div className='size-6 rounded-full bg-description overflow-hidden'>
<Link to={Pages.profile}>
@@ -39,10 +43,13 @@ const Header: FC = () => {
</Link>
</div>
<div className='xl:flex hidden gap-1 items-center'>
<div className='text-xs'>مهرداد مظفری</div>
<div className='text-xs'>
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
</div>
<ArrowDown2 size={14} color='#8C90A3' />
</div>
</div>
}
</div>
</div>
)