From 4ba0b1ef4d89dead5d7637b3057a4b3aa96ba713 Mon Sep 17 00:00:00 2001
From: brunoravera <bruno@process.st>
Date: Sun, 10 Mar 2024 13:57:44 -0300
Subject: [PATCH] delete pattern

---
 .../add-pattern/add-pattern-button.tsx        |  3 +-
 web/src/pages/Patterns/patterns.tsx           |  7 ++--
 .../query-builder/delete-pattern-mutation.ts  | 22 ++++++++++++
 web/src/pages/Patterns/query-builder/index.ts |  2 ++
 .../pages/Patterns/remove-pattern/index.ts    |  1 +
 .../remove-pattern-icon-button.tsx            | 35 +++++++++++++++++++
 6 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 web/src/pages/Patterns/query-builder/delete-pattern-mutation.ts
 create mode 100644 web/src/pages/Patterns/remove-pattern/index.ts
 create mode 100644 web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx

diff --git a/web/src/pages/Patterns/add-pattern/add-pattern-button.tsx b/web/src/pages/Patterns/add-pattern/add-pattern-button.tsx
index 5a2cd11..62fe9ae 100644
--- a/web/src/pages/Patterns/add-pattern/add-pattern-button.tsx
+++ b/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'
 
diff --git a/web/src/pages/Patterns/patterns.tsx b/web/src/pages/Patterns/patterns.tsx
index 1e02260..0664c8b 100644
--- a/web/src/pages/Patterns/patterns.tsx
+++ b/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>
   )
 }
diff --git a/web/src/pages/Patterns/query-builder/delete-pattern-mutation.ts b/web/src/pages/Patterns/query-builder/delete-pattern-mutation.ts
new file mode 100644
index 0000000..a729d89
--- /dev/null
+++ b/web/src/pages/Patterns/query-builder/delete-pattern-mutation.ts
@@ -0,0 +1,22 @@
+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 })
+  }
+}
diff --git a/web/src/pages/Patterns/query-builder/index.ts b/web/src/pages/Patterns/query-builder/index.ts
index 249cf9f..c1af813 100644
--- a/web/src/pages/Patterns/query-builder/index.ts
+++ b/web/src/pages/Patterns/query-builder/index.ts
@@ -1 +1,3 @@
 export * from './get-patterns-query'
+export * from './create-pattern-mutation'
+export * from './delete-pattern-mutation'
diff --git a/web/src/pages/Patterns/remove-pattern/index.ts b/web/src/pages/Patterns/remove-pattern/index.ts
new file mode 100644
index 0000000..045e43b
--- /dev/null
+++ b/web/src/pages/Patterns/remove-pattern/index.ts
@@ -0,0 +1 @@
+export * from './remove-pattern-icon-button'
diff --git a/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx b/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx
new file mode 100644
index 0000000..67799fc
--- /dev/null
+++ b/web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx
@@ -0,0 +1,35 @@
+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}
+    />
+  )
+}
-- 
GitLab