create pattern

web/src/models/pattern-model.ts

@@ -4,3 +4,8 @@ export interface Pattern {
   description: string
   numberOfImplementations: number
 }
+
+export interface CreatePatternRequest {
+  title: string
+  description: string
+}

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"

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

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