show in slider

src/pages/service/List.tsx

@@ -14,6 +14,7 @@ import moment from 'moment-jalaali'
 import Pagination from '../../components/Pagination'
 import ToggleStatusService from './components/ToggleStatusService'
 import CheckBoxComponent from '../../components/CheckBoxComponent'
+import ToggleSliderService from './components/ToggleSliderService'
 
 const ListService: FC = () => {
 
@@ -109,6 +110,7 @@ const ListService: FC = () => {
                                     <Td text={t('service.publish_date')} />
                                     <Td text={t('service.plans')} />
                                     <Td text={t('ticket.status')} />
+                                    <Td text={t('service.slider')} />
                                     <Td text={t('ticket.detail')} />
                                     <Td text={''} />
                                 </tr>
@@ -153,6 +155,12 @@ const ListService: FC = () => {
                                                         status={item.isActive}
                                                     />
                                                 </Td>
+                                                <Td text={''}>
+                                                    <ToggleSliderService
+                                                        id={item.id}
+                                                        status={item.showInSlider}
+                                                    />
+                                                </Td>
                                                 <Td text={''}>
                                                     <Link to={Pages.services.update + item.id}>
                                                         <Eye size={20} color='#8C90A3' />

src/pages/service/components/ToggleSliderService.tsx

@@ -0,0 +1,28 @@
+import { FC, useState } from 'react'
+import { useToggleSliderService } from '../hooks/useServiceData'
+import SwitchComponent from '../../../components/Switch'
+
+type Props = {
+    id: string,
+    status: boolean,
+}
+
+const ToggleSliderService: FC<Props> = (props: Props) => {
+
+    const [isActive, setIsActive] = useState<boolean>(props.status)
+    const toggleStatus = useToggleSliderService()
+
+    const handleChange = (value: boolean) => {
+        setIsActive(value)
+        toggleStatus.mutate(props.id)
+    }
+
+    return (
+        <SwitchComponent
+            active={isActive}
+            onChange={handleChange}
+        />
+    )
+}
+
+export default ToggleSliderService

src/pages/service/hooks/useServiceData.ts

@@ -99,6 +99,12 @@ export const useToggleStatusService = () => {
   });
 };
 
+export const useToggleSliderService = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.toggleSliderService(id),
+  });
+};
+
 export const useCreatePlan = () => {
   return useMutation({
     mutationFn: (variables: CreatePlanType) => api.createPlan(variables),

src/pages/service/service/ServiceService.ts

@@ -161,3 +161,8 @@ export const deleteCategory = async (id: string) => {
   const { data } = await axios.delete(`/danak-services/categories/${id}`);
   return data;
 };
+
+export const toggleSliderService = async (id: string) => {
+  const { data } = await axios.post(`/danak-services/toggle-slider/${id}`);
+  return data;
+};

src/pages/service/types/ServiceTypes.ts

@@ -54,6 +54,7 @@ export type ServiceItemType = {
   isActive: boolean;
   icon: string;
   subscriptionCount: number;
+  showInSlider: boolean;
 };
 
 export type CreateItemPlanType = {