refresh token
This commit is contained in:
hamid zarghami
@@ -1,61 +0,0 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import StatusWithText from '../../components/StatusWithText'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { ArrowLeft2 } from 'iconsax-react'
|
||||
import { useGetAnnoncementDetail } from './hooks/useAnnoncementData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
|
||||
const AnnouncementDetail: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const { t } = useTranslation('global')
|
||||
const navigate = useNavigate()
|
||||
const getDetail = useGetAnnoncementDetail(id ? id : '')
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between'>
|
||||
<div>
|
||||
{t('announcement.text_announcement')}
|
||||
</div>
|
||||
<div onClick={() => navigate(-1)} className='text-xs cursor-pointer flex gap-0.5 items-center font-extralight'>
|
||||
{t('back')}
|
||||
<ArrowLeft2 size={12} color='black' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
getDetail.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='flex-1 mt-4 bg-white py-6 px-4 rounded-2xl'>
|
||||
<div className='flex justify-between items-start'>
|
||||
<div className='text-sm max-w-[70%] leading-67'>
|
||||
{getDetail.data?.data?.announcement?.title}
|
||||
</div>
|
||||
<div className='flex gap-1'>
|
||||
{
|
||||
getDetail.data?.data?.announcement.isImportant &&
|
||||
<StatusWithText
|
||||
variant='error'
|
||||
text={t('announcement.important')}
|
||||
/>
|
||||
}
|
||||
|
||||
<StatusWithText
|
||||
variant='success'
|
||||
text={t('announcement.new')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div dangerouslySetInnerHTML={{ __html: getDetail.data?.data?.announcement?.content }} className='mt-5 leading-7 text-xs font-light'>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AnnouncementDetail
|
||||
@@ -2,19 +2,34 @@ import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useGetAnnoncements } from './hooks/useAnnoncementData'
|
||||
import { useDeleteAnnoncement, useGetAnnoncements } from './hooks/useAnnoncementData'
|
||||
import { AnnoncementItemType } from './types/AnnoncementTypes'
|
||||
import Button from '../../components/Button'
|
||||
import { Add } from 'iconsax-react'
|
||||
import { Add, Edit, Trash } from 'iconsax-react'
|
||||
import Td from '../../components/Td'
|
||||
import moment from 'moment-jalaali'
|
||||
import Pagination from '../../components/Pagination'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
|
||||
const AnnouncementtList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const getAnnoncements = useGetAnnoncements(page, '', '')
|
||||
const deleteAnnoncement = useDeleteAnnoncement()
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
deleteAnnoncement.mutate(id, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
getAnnoncements.refetch()
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-4 text-sm'>
|
||||
@@ -52,6 +67,7 @@ const AnnouncementtList: FC = () => {
|
||||
<Td text={t('announcement.service')} />
|
||||
<Td text={t('announcement.created_date')} />
|
||||
<Td text={t('announcement.publish_date')} />
|
||||
<Td text={t('')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -70,6 +86,21 @@ const AnnouncementtList: FC = () => {
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={moment(item.publishAt).format('jYYYY-jMM-jDD')} />
|
||||
<Td text={''}>
|
||||
<div className='flex gap-2'>
|
||||
<Link to={Pages.announcement.detail + item.id}>
|
||||
<Edit
|
||||
className='size-5'
|
||||
color='#888'
|
||||
/>
|
||||
</Link>
|
||||
<Trash
|
||||
className='size-5'
|
||||
color='#888'
|
||||
onClick={() => handleDelete(item.id)}
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
import { FC, useEffect, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { InfoCircle, TickCircle } from 'iconsax-react'
|
||||
import Input from '../../components/Input'
|
||||
import Quill from 'quill'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import CheckBoxComponent from '../../components/CheckBoxComponent'
|
||||
import Select from '../../components/Select'
|
||||
import { useGetAllServices } from '../service/hooks/useServiceData'
|
||||
import { useFormik } from 'formik'
|
||||
import { AnnoncementCreateType, UserServiceItemType } from './types/AnnoncementTypes'
|
||||
import * as Yup from 'yup'
|
||||
import { ServiceItemType } from '../service/types/ServiceTypes'
|
||||
import { useGetAnnoncementDetail, useGetCustomersService, useUpdateAnnoncement } from './hooks/useAnnoncementData'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
import { toast } from 'react-toastify'
|
||||
import moment from 'moment-jalaali'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const Update: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const navigate = useNavigate()
|
||||
const { id } = useParams()
|
||||
const editorRef = useRef<HTMLDivElement | null>(null);
|
||||
const [serviceId, setServiceId] = useState('')
|
||||
const [customerId, setCustomerId] = useState<string>('')
|
||||
const getServices = useGetAllServices('', 1, '', '', false)
|
||||
const getCustomer = useGetCustomersService(serviceId)
|
||||
const getAnnoncement = useGetAnnoncementDetail(id || '')
|
||||
const updateAnnoncement = useUpdateAnnoncement(id || '')
|
||||
|
||||
const formik = useFormik<AnnoncementCreateType>({
|
||||
initialValues: {
|
||||
title: '',
|
||||
content: '',
|
||||
publishAt: '',
|
||||
isPublic: false,
|
||||
isImportant: false,
|
||||
serviceId: '',
|
||||
groupIds: [],
|
||||
userIds: undefined
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
title: Yup.string().required(t('errors.required')),
|
||||
content: Yup.string().required(t('errors.required')),
|
||||
publishAt: Yup.string().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
if (!values.serviceId) {
|
||||
values.serviceId = undefined
|
||||
}
|
||||
if (customerId) {
|
||||
values.serviceId = undefined
|
||||
values.userIds = [customerId]
|
||||
}
|
||||
updateAnnoncement.mutate(values, {
|
||||
onSuccess: () => {
|
||||
formik.resetForm()
|
||||
toast.success(t('success'))
|
||||
navigate(Pages.announcement.list)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const quill = new Quill('#editor', {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: [
|
||||
[{ header: '1' }, { header: '2' }, { font: [] }],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||
['bold', 'italic', 'underline'],
|
||||
['link', 'image'],
|
||||
[{ align: [] }],
|
||||
['clean']
|
||||
]
|
||||
}
|
||||
});
|
||||
quill.on('text-change', () => {
|
||||
const html = editorRef.current?.querySelector('.ql-editor')?.innerHTML || '';
|
||||
formik.setFieldValue('content', html);
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (getAnnoncement.data) {
|
||||
formik.setValues(getAnnoncement.data?.data?.announcement)
|
||||
setServiceId(getAnnoncement.data?.data?.announcement?.targetService?.id)
|
||||
setCustomerId(getAnnoncement.data?.data?.announcement?.userIds?.[0])
|
||||
|
||||
const editorElement = editorRef.current?.querySelector('.ql-editor');
|
||||
if (editorElement) {
|
||||
editorElement.innerHTML = getAnnoncement.data?.data?.announcement?.content || '';
|
||||
}
|
||||
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getAnnoncement.data])
|
||||
|
||||
return (
|
||||
<div className='w-full mt-4'>
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div>
|
||||
ویرایش اطلاعیه
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
className='px-5'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={updateAnnoncement.isPending}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle
|
||||
className='size-5'
|
||||
color='#fff'
|
||||
/>
|
||||
<div>{t('announcement.submit_announcement')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
<div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
||||
<Input
|
||||
label={t('announcement.title')}
|
||||
name='title'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.title}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
|
||||
<div className='mt-7 text-sm'>{t('announcement.text')}</div>
|
||||
|
||||
<div className='mt-1'>
|
||||
<div ref={editorRef} id='editor' style={{ minHeight: '120px' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
|
||||
<DatePickerComponent
|
||||
label={t('announcement.publish_date')}
|
||||
onChange={(d) => formik.setFieldValue('publishAt', moment(d, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
|
||||
placeholder={t('select')}
|
||||
defaulValue={formik.values.publishAt}
|
||||
/>
|
||||
|
||||
<div className='flex gap-1 mt-3'>
|
||||
<InfoCircle
|
||||
color='#8C90A3'
|
||||
className='size-4 min-w-4'
|
||||
/>
|
||||
<p className='text-[10px] text-description'>
|
||||
{t('announcement.info_publishdata')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center mt-5'>
|
||||
<CheckBoxComponent
|
||||
checked={formik.values.isImportant}
|
||||
onChange={(e) => formik.setFieldValue('isImportant', e.target.checked)}
|
||||
/>
|
||||
|
||||
<div className='text-xs'>{t('announcement.label_importance')}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Select
|
||||
label={t('announcement.contact_announcement')}
|
||||
placeholder={t('announcement.select_service')}
|
||||
items={getServices?.data?.data?.services?.map((item: ServiceItemType) => ({
|
||||
label: item.name,
|
||||
value: item.id
|
||||
})) || []}
|
||||
name='serviceId'
|
||||
onChange={(e) => {
|
||||
formik.setFieldValue('serviceId', e.target.value)
|
||||
setServiceId(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-5'>
|
||||
<Select
|
||||
placeholder={t('select')}
|
||||
label={t('announcement.select_customer')}
|
||||
items={getCustomer?.data?.data?.users?.map((item: UserServiceItemType) => ({
|
||||
label: item.firstname + ' ' + item.lastname,
|
||||
value: item.id
|
||||
})) || []}
|
||||
onChange={(e) => setCustomerId(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Update
|
||||
@@ -24,6 +24,7 @@ export const useGetAnnoncementDetail = (id: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["announcement", id],
|
||||
queryFn: () => api.getAnnoncementDetail(id),
|
||||
enabled: !!id,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -34,3 +35,16 @@ export const useGetCustomersService = (serviceId: string) => {
|
||||
enabled: !!serviceId,
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateAnnoncement = (id: string) => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateAnnouncementType) =>
|
||||
api.updateAnnoncement(id, variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteAnnoncement = () => {
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => api.deleteAnnoncement(id),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -7,6 +7,14 @@ export const createAnnoncement = async (params: CreateAnnouncementType) => {
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateAnnoncement = async (
|
||||
id: string,
|
||||
params: CreateAnnouncementType
|
||||
) => {
|
||||
const { data } = await axios.patch(`/announcements/${id}`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getCustomerService = async (serviceId: string) => {
|
||||
const { data } = await axios.get(`/danak-services/${serviceId}/users`);
|
||||
return data;
|
||||
@@ -27,6 +35,11 @@ export const getAnnoncements = async (
|
||||
};
|
||||
|
||||
export const getAnnoncementDetail = async (id: string) => {
|
||||
const { data } = await axios.get(`/announcements/${id}`);
|
||||
const { data } = await axios.get(`/announcements/${id}/admin`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const deleteAnnoncement = async (id: string) => {
|
||||
const { data } = await axios.delete(`/announcements/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -12,6 +12,7 @@ import { Pages } from '../../../config/Pages'
|
||||
import { useOtpVerify } from '../hooks/useAuthData'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
import { toast } from 'react-toastify'
|
||||
import { setToken, setRefreshToken } from '../../../config/func'
|
||||
|
||||
const LoginStep2: FC = () => {
|
||||
|
||||
@@ -36,8 +37,8 @@ const LoginStep2: FC = () => {
|
||||
}
|
||||
otpVerify.mutate(params, {
|
||||
onSuccess(data) {
|
||||
localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token)
|
||||
localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token)
|
||||
setToken(data?.data?.accessToken?.token)
|
||||
setRefreshToken(data?.data?.refreshToken?.token)
|
||||
window.location.href = Pages.dashboard
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
|
||||
@@ -13,6 +13,8 @@ import ArrowLeftIcon from '../../../assets/images/arrow-left.svg'
|
||||
import { useLoginWithPassword } from '../hooks/useAuthData'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
import { setRefreshToken } from '../../../config/func'
|
||||
import { setToken } from '../../../config/func'
|
||||
|
||||
const LoginStep3: FC = () => {
|
||||
|
||||
@@ -32,8 +34,8 @@ const LoginStep3: FC = () => {
|
||||
onSubmit(values) {
|
||||
loginWithPassword.mutate(values, {
|
||||
onSuccess(data) {
|
||||
localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token)
|
||||
localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token)
|
||||
setToken(data?.data?.accessToken?.token)
|
||||
setRefreshToken(data?.data?.refreshToken?.token)
|
||||
window.location.href = Pages.dashboard
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
LoginWithOtpType,
|
||||
LoginWithPasswordType,
|
||||
OtpVerifyType,
|
||||
RefreshTokenType,
|
||||
RegisterType,
|
||||
} from "../types/AuthTypes";
|
||||
|
||||
@@ -37,3 +38,8 @@ export const register = async (params: RegisterType) => {
|
||||
const { data } = await axios.post(`/auth/register/complete`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const refreshToken = async (params: RefreshTokenType) => {
|
||||
const { data } = await axios.post(`/auth/refresh`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -49,3 +49,6 @@ export type RegisterType = {
|
||||
password: string;
|
||||
code: number;
|
||||
};
|
||||
export type RefreshTokenType = {
|
||||
refreshToken: string;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user