delete foods

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;
+};