delete pattern

web/src/pages/Patterns/add-pattern/add-pattern-button.tsx

@@ -23,8 +23,7 @@ import {
 import { useFormik } from 'formik'
 import { useQueryClient } from 'react-query'
 
-import { GetPatternsQuery } from '../query-builder'
-import { CreatePatternMutation } from '../query-builder/create-pattern-mutation'
+import { CreatePatternMutation, GetPatternsQuery } from '../query-builder'
 
 import { CreatePatternSchema, createPatternSchema } from './schema'
 

web/src/pages/Patterns/patterns.tsx

@@ -26,6 +26,7 @@ import { Pattern } from 'src/models'
 
 import { AddPatternButton } from './add-pattern'
 import { GetPatternsQuery } from './query-builder'
+import { RemovePatternIconButton } from './remove-pattern'
 
 const tableHeaders = ['Titulo', 'Descripcion', '#Implementaciones', '']
 
@@ -123,11 +124,7 @@ const ActionsRow: React.FC<ActionsRowProps> = ({ pattern }) => {
         variant="unstyled"
         icon={<Icon as={FaEdit} />}
       />
-      <IconButton
-        aria-label="delete pattern"
-        variant="unstyled"
-        icon={<Icon as={FaTrash} />}
-      />
+      <RemovePatternIconButton patternId={pattern.id} />
     </HStack>
   )
 }

web/src/pages/Patterns/query-builder/delete-pattern-mutation.ts

+import axiosService from 'src/services/axios-service'
+import { useMutation as useRQMutation, UseMutationOptions } from 'react-query'
+import { AxiosError } from 'axios'
+
+export namespace DeletePatternMutation {
+  export type Params = { id: string }
+
+  export type Response = {}
+
+  export const key = ['delete', 'pattern']
+
+  export const mutationFn = (params: Params) =>
+    axiosService
+      .delete<Response>(`/pattern/${params.id}`)
+      .then((res) => res.data)
+
+  export const useMutation = (
+    options: UseMutationOptions<Response, AxiosError, Params> = {}
+  ) => {
+    return useRQMutation(mutationFn, { ...options, mutationKey: key })
+  }
+}

web/src/pages/Patterns/query-builder/index.ts

 export * from './get-patterns-query'
+export * from './create-pattern-mutation'
+export * from './delete-pattern-mutation'

web/src/pages/Patterns/remove-pattern/index.ts

+export * from './remove-pattern-icon-button'

web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx

+import React from 'react'
+
+import { IconButtonProps, IconButton, Icon } from '@chakra-ui/react'
+import { FaTrash } from 'react-icons/fa'
+import { DeletePatternMutation, GetPatternsQuery } from '../query-builder'
+import { useQueryClient } from 'react-query'
+
+export type RemovePatternIconButtonProps = {
+  patternId: string
+} & Partial<IconButtonProps>
+
+export const RemovePatternIconButton: React.FC<
+  RemovePatternIconButtonProps
+> = ({ patternId, ...props }) => {
+  const queryClient = useQueryClient()
+
+  const deletePatternMutation = DeletePatternMutation.useMutation({
+    onSuccess: () => {
+      queryClient.invalidateQueries(GetPatternsQuery.getKey({}))
+    },
+  })
+
+  const handleDeletePattern = () => {
+    deletePatternMutation.mutate({ id: patternId })
+  }
+  return (
+    <IconButton
+      aria-label="view pattern"
+      variant="unstyled"
+      icon={<Icon as={FaTrash} />}
+      {...props}
+      onClick={handleDeletePattern}
+    />
+  )
+}