From 5d181226d7a7190b6d6aa4cb6bc44676266d2ce0 Mon Sep 17 00:00:00 2001
From: brunoravera <bruno@process.st>
Date: Sun, 10 Mar 2024 13:20:34 -0300
Subject: [PATCH] create pattern
---
web/src/models/pattern-model.ts | 5 ++++
.../add-pattern/add-pattern-button.tsx | 29 ++++++++++++++++---
.../query-builder/create-pattern-mutation.ts | 22 ++++++++++++++
3 files changed, 52 insertions(+), 4 deletions(-)
create mode 100644 web/src/pages/Patterns/query-builder/create-pattern-mutation.ts
diff --git a/web/src/models/pattern-model.ts b/web/src/models/pattern-model.ts
index 4477863..94c3fa8 100644
--- a/web/src/models/pattern-model.ts
+++ b/web/src/models/pattern-model.ts
@@ -4,3 +4,8 @@ export interface Pattern {
description: string
numberOfImplementations: number
}
+
+export interface CreatePatternRequest {
+ title: string
+ description: string
+}
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 8c8c6c5..5a2cd11 100644
--- a/web/src/pages/Patterns/add-pattern/add-pattern-button.tsx
+++ b/web/src/pages/Patterns/add-pattern/add-pattern-button.tsx
@@ -21,6 +21,10 @@ import {
Textarea,
} from '@chakra-ui/react'
import { useFormik } from 'formik'
+import { useQueryClient } from 'react-query'
+
+import { GetPatternsQuery } from '../query-builder'
+import { CreatePatternMutation } from '../query-builder/create-pattern-mutation'
import { CreatePatternSchema, createPatternSchema } from './schema'
@@ -28,9 +32,20 @@ const FORM_ID = 'add-pattern-form'
export const AddPatternButton: React.FC<ButtonProps> = () => {
const { isOpen, onClose, onOpen } = useDisclosure()
+ const queryClient = useQueryClient()
+
+ const createMutation = CreatePatternMutation.useMutation({
+ onSuccess: () => {
+ queryClient.invalidateQueries(GetPatternsQuery.getKey({}))
+ },
+ })
- const handleOnSubmit = (values: CreatePatternSchema) => {
- console.log(values)
+ const handleOnSubmit = async (values: CreatePatternSchema) => {
+ await createMutation.mutateAsync({
+ title: values.title,
+ description: values.description,
+ })
+ onClose()
}
const {
@@ -72,7 +87,10 @@ export const AddPatternButton: React.FC<ButtonProps> = () => {
<VStack>
<FormControl isInvalid={Boolean(errors.title) && touched.title}>
<FormLabel>
- <Text fontSize="sm">Titulo</Text>
+ <HStack>
+ <Text fontSize="sm">Titulo</Text>
+ <Text color="red">*</Text>
+ </HStack>
</FormLabel>
<Input
name="title"
@@ -89,7 +107,10 @@ export const AddPatternButton: React.FC<ButtonProps> = () => {
isInvalid={Boolean(errors.description) && touched.description}
>
<FormLabel>
- <Text fontSize="sm">Descripcion</Text>
+ <HStack>
+ <Text fontSize="sm">Descripcion</Text>
+ <Text color="red">*</Text>
+ </HStack>
</FormLabel>
<Textarea
name="description"
diff --git a/web/src/pages/Patterns/query-builder/create-pattern-mutation.ts b/web/src/pages/Patterns/query-builder/create-pattern-mutation.ts
new file mode 100644
index 0000000..a18e1c5
--- /dev/null
+++ b/web/src/pages/Patterns/query-builder/create-pattern-mutation.ts
@@ -0,0 +1,22 @@
+import { AxiosError } from 'axios'
+import { useMutation as useRQMutation, UseMutationOptions } from 'react-query'
+
+import { CreatePatternRequest, Pattern } from 'src/models'
+import axiosService from 'src/services/axios-service'
+
+export namespace CreatePatternMutation {
+ export type Params = CreatePatternRequest
+
+ export type Response = Pattern
+
+ export const key = ['create', 'pattern']
+
+ export const mutationFn = (params: Params) =>
+ axiosService.post<Response>(`/pattern/`, params).then((res) => res.data)
+
+ export const useMutation = (
+ options: UseMutationOptions<Response, AxiosError, CreatePatternRequest> = {}
+ ) => {
+ return useRQMutation(mutationFn, { ...options, mutationKey: key })
+ }
+}
--
GitLab