delete subscription

src/pages/subscriptions/List.tsx

@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useGetUserSubscriptions } from './hooks/useSucscriptionData'
+import { useDeleteSubscription, useGetUserSubscriptions } from './hooks/useSucscriptionData'
 import PageLoading from '../../components/PageLoading'
 import Td from '../../components/Td'
 import Pagination from '../../components/Pagination'
@@ -10,6 +10,9 @@ import Select from '../../components/Select'
 import Input from '../../components/Input'
 import { useGetAllServices } from '../service/hooks/useServiceData'
 import { ServiceItemType } from '../service/types/ServiceTypes'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
 
 const SubscriptionsList: FC = () => {
 
@@ -19,8 +22,9 @@ const SubscriptionsList: FC = () => {
     const [serviceId, setServiceId] = useState<string>('')
     const [search, setSearch] = useState<string>('')
 
-    const { data: subscriptionsResponse, isLoading } = useGetUserSubscriptions(page, status, serviceId, search)
+    const { data: subscriptionsResponse, isLoading, refetch } = useGetUserSubscriptions(page, status, serviceId, search)
     const getServices = useGetAllServices('', 1, '', '', false, 50)
+    const { mutate: deleteSubscription, isPending } = useDeleteSubscription()
 
     const subscriptionsData = (subscriptionsResponse as UserSubscriptionsResponse | undefined)?.data
     const subscriptionsList = subscriptionsData?.userSubscriptions || []
@@ -72,6 +76,17 @@ const SubscriptionsList: FC = () => {
         }
     }
 
+    const handleDelete = (id: string) => {
+        deleteSubscription(id, {
+            onSuccess: () => {
+                refetch()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
+
     return (
         <div className='mt-4'>
             <div className='flex w-full justify-between items-center'>
@@ -147,6 +162,7 @@ const SubscriptionsList: FC = () => {
                                 <Td text={t('subscription.subscription_end_date')} />
                                 <Td text={t('subscription.days_remaining')} />
                                 <Td text={t('status')} />
+                                <Td text={''} />
                             </tr>
                         </thead>
                         <tbody>
@@ -180,6 +196,12 @@ const SubscriptionsList: FC = () => {
                                             {getStatusText(item.status)}
                                         </div>
                                     </Td>
+                                    <Td text=''>
+                                        <TrashWithConfrim
+                                            onDelete={() => handleDelete(item.id)}
+                                            isLoading={isPending}
+                                        />
+                                    </Td>
                                 </tr>
                             ))}
                         </tbody>

src/pages/subscriptions/hooks/useSucscriptionData.ts

@@ -1,14 +1,20 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/SubscriptionService";
 
 export const useGetUserSubscriptions = (
   page: number,
   status?: string,
   serviceId?: string,
-  q?: string
+  q?: string,
 ) => {
   return useQuery({
     queryKey: ["user-subscriptions", page, status, serviceId, q],
     queryFn: () => api.getUserSubscriptions(page, status, serviceId, q),
   });
 };
+
+export const useDeleteSubscription = () => {
+  return useMutation({
+    mutationFn: api.deleteSubscription,
+  });
+};

src/pages/subscriptions/service/SubscriptionService.ts

@@ -4,7 +4,7 @@ export const getUserSubscriptions = async (
   page: number,
   status?: string,
   serviceId?: string,
-  q?: string
+  q?: string,
 ) => {
   let query = `?page=${page}`;
   if (status) {
@@ -17,7 +17,12 @@ export const getUserSubscriptions = async (
     query += `&q=${q}`;
   }
   const { data } = await axios.get(
-    `/subscriptions/admin/user-subscriptions/all${query}`
+    `/subscriptions/admin/user-subscriptions/all${query}`,
   );
   return data;
 };
+
+export const deleteSubscription = async (id: string) => {
+  const { data } = await axios.delete(`/subscriptions/${id}`);
+  return data;
+};