delete foods

src/components/DefaulModal.tsx

@@ -28,12 +28,12 @@ const DefaulModal: FC<Props> = (props: Props) => {
                     <Fragment>
                         <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[60]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
                             <div className='relative xl:h-full h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
-                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2  outline-none focus:outline-none'>
+                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full bg-white  outline-none focus:outline-none'>
 
 
                                     {
                                         props.isHeader && props.title_header &&
-                                        <div className='pb-6 border-b border-white/20'>
+                                        <div className='pb-3 border-b border-border'>
                                             <div className='h-[5px] w-[200px] mx-auto bg-[#D1D3D7] rounded-full mb-4 xl:hidden'></div>
                                             <HeaderModal close={props.close} label={props.title_header} />
                                         </div>

src/pages/food/List.tsx

@@ -3,7 +3,7 @@ import Table from '@/components/Table'
 import Filters from '@/components/Filters'
 import { Add } from 'iconsax-react'
 import Button from '@/components/Button'
-import { useGetFoods } from './hooks/useFoodData'
+import { useGetFoods, useDeleteFood } from './hooks/useFoodData'
 import { useFoodFilters } from './hooks/useFoodFilters'
 import { getFoodTableColumns } from './components/FoodTableColumns'
 import { useFoodFiltersFields } from './components/FoodFiltersFields'
@@ -21,9 +21,13 @@ const FoodsList: FC = () => {
     } = useFoodFilters()
 
     const { data: foodsData, isLoading } = useGetFoods(apiParams)
+    const { mutate: deleteFood, isPending: isDeleting } = useDeleteFood()
 
     const foods = foodsData?.data || []
-    const columns = getFoodTableColumns()
+    const columns = getFoodTableColumns({
+        onDelete: (id: string) => deleteFood(id),
+        isDeleting
+    })
     const filterFields = useFoodFiltersFields()
 
     const totalPages = Math.ceil(foods.length / limit) || 1

src/pages/food/components/FoodTableColumns.tsx

@@ -5,8 +5,15 @@ import { formatPrice, formatTime } from '../utils/formatters'
 import Status from '@/components/Status'
 import { Link } from 'react-router-dom'
 import { Pages } from '@/config/Pages'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+
+interface GetFoodTableColumnsParams {
+    onDelete: (id: string) => void
+    isDeleting: boolean
+}
+
+export const getFoodTableColumns = ({ onDelete, isDeleting }: GetFoodTableColumnsParams): ColumnType<Food>[] => {
 
-export const getFoodTableColumns = (): ColumnType<Food>[] => {
     return [
         {
             key: 'image',
@@ -67,9 +74,15 @@ export const getFoodTableColumns = (): ColumnType<Food>[] => {
             title: '',
             render: (item: Food) => {
                 return (
-                    <Link to={Pages.foods.update + item.id} className='flex gap-2 items-center'>
-                        <Eye size={20} color='#8C90A3' />
-                    </Link>
+                    <div className='flex gap-2 items-center'>
+                        <Link to={Pages.foods.update + item.id} className='flex gap-2 items-center'>
+                            <Eye size={20} color='#8C90A3' />
+                        </Link>
+                        <TrashWithConfrim
+                            onDelete={() => onDelete(item.id)}
+                            isLoading={isDeleting}
+                        />
+                    </div>
                 )
             }
         },

src/pages/food/hooks/useFoodData.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/FoodService";
 import type { CreateFoodType, GetFoodsParams } from "../types/Types";
 
@@ -35,3 +35,13 @@ export const useGetCategories = () => {
     queryFn: api.getCategories,
   });
 };
+
+export const useDeleteFood = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.deleteFood,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["foods"] });
+    },
+  });
+};

src/pages/food/service/FoodService.ts

@@ -35,3 +35,8 @@ export const getCategories = async (): Promise<GetCategoriesResponseType> => {
   const { data } = await axios.get<GetCategoriesResponseType>(`/categories`);
   return data;
 };
+
+export const deleteFood = async (id: string) => {
+  const { data } = await axios.delete(`/foods/${id}`);
+  return data;
+};