slider

.env

@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
-# VITE_BASE_URL = 'https://api.danakcorp.com'
+VITE_BASE_URL = 'https://api.danakcorp.com'
-VITE_BASE_URL = 'http://192.168.1.117:4000'
+# VITE_BASE_URL = 'http://192.168.1.117:4000'

src/langs/fa.json

@@ -85,7 +85,8 @@
     "list_slider": "لیست اسلایدر ها",
     "submit_slider": "اسلایدر جدید",
     "active": "فعال",
-    "inactive": "غیرفعال"
+    "inactive": "غیرفعال",
+    "slider_deleted": "اسلایدر با موفقیت حذف شد"
   },
   "submenu": {
     "services_list": "لیست سرویس ها",

src/pages/slider/Create.tsx

@@ -74,7 +74,7 @@ const CreateSlider: FC = () => {
                 <Button
                     className='w-[172px]'
                     onClick={() => formik.handleSubmit()}
-                    isLoading={createSlider.isPending}
+                    isLoading={createSlider.isPending || singleUpload.isPending}
                 >
                     <div className='flex gap-2 items-center'>
                         <TickCircle size={20} color='white' />

src/pages/slider/List.tsx

@@ -2,16 +2,31 @@ 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 { Add, Edit, Trash } from 'iconsax-react'
 import { useTranslation } from 'react-i18next'
 import Td from '../../components/Td'
-import { useGetSliders } from './hooks/useSliderData'
+import { useDeleteSlider, useGetSliders } from './hooks/useSliderData'
 import { SliderItemType } from './types/SliderTypes'
 import PageLoading from '../../components/PageLoading'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
 const SliderList: FC = () => {
 
     const { t } = useTranslation('global')
-    const { data: sliders, isPending } = useGetSliders()
+    const { data: sliders, isPending, refetch } = useGetSliders()
+    const deleteSlider = useDeleteSlider()
+
+    const handleDelete = (id: string) => {
+        deleteSlider.mutate(id, {
+            onSuccess: () => {
+                toast.success(t('slider.slider_deleted'))
+                refetch()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
 
     return (
         <div className='mt-4'>
@@ -49,6 +64,7 @@ const SliderList: FC = () => {
                                     <Td text={t('slider.description')} />
                                     <Td text={t('slider.order')} />
                                     <Td text={t('slider.isActive')} />
+                                    <Td text={''} />
                                 </tr>
                             </thead>
                             <tbody>
@@ -61,6 +77,21 @@ const SliderList: FC = () => {
                                         <Td text={item.description} />
                                         <Td text={item.order.toString()} />
                                         <Td text={item.isActive ? t('slider.active') : t('slider.inactive')} />
+                                        <Td text={''}>
+                                            <div className='flex gap-2'>
+                                                <Link to={Pages.sliders.detail + item.id}>
+                                                    <Edit
+                                                        className='size-5'
+                                                        color='#888'
+                                                    />
+                                                </Link>
+                                                <Trash
+                                                    onClick={() => handleDelete(item.id)}
+                                                    className='size-5'
+                                                    color='#888'
+                                                />
+                                            </div>
+                                        </Td>
                                     </tr>
                                 ))}
                             </tbody>

src/pages/slider/Update.tsx

@@ -0,0 +1,149 @@
+import { useFormik } from 'formik'
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CreateSliderType } from './types/SliderTypes'
+import * as Yup from 'yup'
+import Button from '../../components/Button'
+import { useGetSliderDetail, useUpdateSlider } 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, useParams } from 'react-router-dom'
+import { ErrorType } from '../../helpers/types'
+const UpdateSlider: FC = () => {
+
+    const { id } = useParams()
+    const navigate = useNavigate()
+    const { t } = useTranslation('global')
+    const updateSlider = useUpdateSlider()
+    const singleUpload = useSingleUpload()
+    const { data: sliderDetail } = useGetSliderDetail(id || '')
+
+    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) {
+                const formData = new FormData()
+                formData.append('file', file)
+                await singleUpload.mutateAsync(formData, {
+                    onSuccess: (data) => {
+                        values.imageUrl = data?.data?.url
+                    }
+                })
+            }
+
+            values.order = +values.order
+
+            updateSlider.mutate({ id: id || '', data: values }, {
+                onSuccess: () => {
+                    toast.success(t('slider.slider_created'))
+                    navigate(Pages.sliders.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error.message[0])
+                }
+            })
+        }
+    })
+
+    useEffect(() => {
+        if (sliderDetail?.data?.slider) {
+            formik.setValues(sliderDetail?.data?.slider)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sliderDetail])
+
+    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={updateSlider.isPending || singleUpload.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 UpdateSlider

src/pages/slider/hooks/useSliderData.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/SliderService";
-
+import { CreateSliderType } from "../types/SliderTypes";
 export const useCreateSlider = () => {
   return useMutation({
     mutationFn: api.createSlider,
@@ -13,3 +13,23 @@ export const useGetSliders = () => {
     queryFn: api.getSliders,
   });
 };
+
+export const useGetSliderDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["slider-detail", id],
+    queryFn: () => api.getSliderDetail(id),
+  });
+};
+
+export const useUpdateSlider = () => {
+  return useMutation({
+    mutationFn: (params: { id: string; data: CreateSliderType }) =>
+      api.updateSlider(params.id, params.data),
+  });
+};
+
+export const useDeleteSlider = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteSlider(id),
+  });
+};

src/pages/slider/service/SliderService.ts

@@ -10,3 +10,18 @@ export const getSliders = async () => {
   const { data } = await axios.get("/sliders");
   return data;
 };
+
+export const getSliderDetail = async (id: string) => {
+  const { data } = await axios.get(`/sliders/${id}`);
+  return data;
+};
+
+export const updateSlider = async (id: string, params: CreateSliderType) => {
+  const { data } = await axios.patch(`/sliders/${id}`, params);
+  return data;
+};
+
+export const deleteSlider = async (id: string) => {
+  const { data } = await axios.delete(`/sliders/${id}`);
+  return data;
+};

src/router/Main.tsx

@@ -63,6 +63,7 @@ import UpdateDiscount from '../pages/discounts/UpdateDiscount'
 import UpdateUser from '../pages/users/Update'
 import CreateSlider from '../pages/slider/Create'
 import SliderList from '../pages/slider/List'
+import UpdateSlider from '../pages/slider/Update'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -137,6 +138,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.payment.list} element={<PaymentList />} />
                             <Route path={Pages.sliders.create} element={<CreateSlider />} />
                             <Route path={Pages.sliders.list} element={<SliderList />} />
+                            <Route path={Pages.sliders.detail + ':id'} element={<UpdateSlider />} />
                         </Routes>
                     </div>
                 </div>