slider
This commit is contained in:
hamid zarghami
@@ -0,0 +1,141 @@
|
||||
import { useFormik } from 'formik'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { CreateSliderType } from './types/SliderTypes'
|
||||
import * as Yup from 'yup'
|
||||
import Button from '../../components/Button'
|
||||
import { useCreateSlider } from './hooks/useSliderData'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import Input from '../../components/Input'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import UploadBox from '../../components/UploadBox'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import { toast } from 'react-toastify'
|
||||
import { useSingleUpload } from '../service/hooks/useServiceData'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
const CreateSlider: FC = () => {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const createSlider = useCreateSlider()
|
||||
const singleUpload = useSingleUpload()
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const formik = useFormik<CreateSliderType>({
|
||||
initialValues: {
|
||||
title: '',
|
||||
description: '',
|
||||
imageUrl: '',
|
||||
link: '',
|
||||
order: 0,
|
||||
isActive: true,
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
title: Yup.string().required(t('errors.required')),
|
||||
description: Yup.string().required(t('errors.required')),
|
||||
link: Yup.string().required(t('errors.required')),
|
||||
order: Yup.number().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
if (!file) {
|
||||
toast.error(t('slider.image_required'))
|
||||
return
|
||||
}
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
await singleUpload.mutateAsync(formData, {
|
||||
onSuccess: (data) => {
|
||||
values.imageUrl = data?.data?.url
|
||||
}
|
||||
})
|
||||
|
||||
values.order = +values.order
|
||||
|
||||
createSlider.mutate(values, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('slider.slider_created'))
|
||||
navigate(Pages.sliders.list)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('slider.new_slider')}
|
||||
</div>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createSlider.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('slider.submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex-1 mt-9 bg-white py-10 xl:px-10 px-5 rounded-3xl'>
|
||||
<div className='flex flex-col gap-6'>
|
||||
<div className='rowTwoInput'>
|
||||
<Input
|
||||
label={t('slider.title')}
|
||||
{...formik.getFieldProps('title')}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('slider.link')}
|
||||
{...formik.getFieldProps('link')}
|
||||
error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='rowTwoInput'>
|
||||
<Textarea
|
||||
label={t('slider.description')}
|
||||
{...formik.getFieldProps('description')}
|
||||
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='rowTwoInput'>
|
||||
<div className='w-full'>
|
||||
<UploadBox
|
||||
label={t('slider.image')}
|
||||
onChange={(file) => setFile(file[0])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label={t('slider.order')}
|
||||
{...formik.getFieldProps('order')}
|
||||
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='rowTwoInput'>
|
||||
<div className='w-full'>
|
||||
<SwitchComponent
|
||||
label={t('slider.isActive')}
|
||||
active={formik.values.isActive}
|
||||
onChange={(value) => formik.setFieldValue('isActive', value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateSlider
|
||||
@@ -0,0 +1,75 @@
|
||||
import { FC } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import Button from '../../components/Button'
|
||||
import { Add } from 'iconsax-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Td from '../../components/Td'
|
||||
import { useGetSliders } from './hooks/useSliderData'
|
||||
import { SliderItemType } from './types/SliderTypes'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
const SliderList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { data: sliders, isPending } = useGetSliders()
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div>
|
||||
{t('slider.list_slider')}
|
||||
</div>
|
||||
<div>
|
||||
<Link to={Pages.sliders.create}>
|
||||
<Button
|
||||
className='px-5'
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add
|
||||
className='size-5'
|
||||
color='#fff'
|
||||
/>
|
||||
<div>{t('slider.submit_slider')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('slider.image')} />
|
||||
<Td text={t('slider.title')} />
|
||||
<Td text={t('slider.description')} />
|
||||
<Td text={t('slider.order')} />
|
||||
<Td text={t('slider.isActive')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sliders?.data?.sliders?.map((item: SliderItemType) => (
|
||||
<tr className='tr' key={item.id}>
|
||||
<Td text={''}>
|
||||
<img src={item.imageUrl} alt={item.title} className='w-14' />
|
||||
</Td>
|
||||
<Td text={item.title} />
|
||||
<Td text={item.description} />
|
||||
<Td text={item.order.toString()} />
|
||||
<Td text={item.isActive ? t('slider.active') : t('slider.inactive')} />
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SliderList
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/SliderService";
|
||||
|
||||
export const useCreateSlider = () => {
|
||||
return useMutation({
|
||||
mutationFn: api.createSlider,
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetSliders = () => {
|
||||
return useQuery({
|
||||
queryKey: ["sliders"],
|
||||
queryFn: api.getSliders,
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
import axios from "../../../config/axios";
|
||||
import { CreateSliderType } from "../types/SliderTypes";
|
||||
|
||||
export const createSlider = async (params: CreateSliderType) => {
|
||||
const { data } = await axios.post("/sliders", params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getSliders = async () => {
|
||||
const { data } = await axios.get("/sliders");
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
export type CreateSliderType = {
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
link: string;
|
||||
order: number;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
export type SliderItemType = {
|
||||
createdAt: string;
|
||||
description: string;
|
||||
id: string;
|
||||
imageUrl: string;
|
||||
isActive: boolean;
|
||||
link: string;
|
||||
order: number;
|
||||
title: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
Reference in New Issue
Block a user