improve role recommendation form (#228)

In this PR I fix some problems of UX in the "Publique sua vaga" form.

- Disable fields while the form is submitting
- Disable the submit button while the form is  submitting
- Verify if role recommendation already exists

apps/web/app/(roles)/api/vagas/publique/route.ts

@@ -5,6 +5,18 @@ import { StatusCodes } from 'http-status-codes'
 export const POST = async (req: Request) => {
   const body = (await req.json()) as FormSchema
   const supabaseClient = getSupabaseClient()
+
+  const persistedData = await supabaseClient
+    .from('rolesRecommendation')
+    .select('id')
+    .eq('title', body.title)
+    .eq('company', body.company)
+  if (persistedData.data.length) {
+    return new Response('Esta vaga já esta cadastrada', {
+      status: StatusCodes.BAD_REQUEST,
+    })
+  }
+
   const { error } = await supabaseClient.from('rolesRecommendation').insert({
     minimum_years: Number(body.minimumYears),
     topic_id: Number(body.topicsId),

apps/web/app/(roles)/formSchema.ts

@@ -2,11 +2,13 @@ import { Topics } from 'shared/src/enums/topics'
 import { z } from 'zod'
 
 export const formSchema = z.object({
-  url: z.string().url({ message: 'URL inválida.' }),
+  url: z
+    .string({ required_error: 'Campo obrigatório.' })
+    .url({ message: 'URL inválida.' }),
   title: z.string({ required_error: 'O título da vaga é obrigatório.' }),
   company: z.string({ required_error: 'Sem empresa -> Sem vaga 😶‍🌫️' }),
   currency: z.string({ required_error: 'Moeda inválida.' }),
-  description: z.string().nullable(),
+  description: z.string({ required_error: 'Campo obrigatório.' }).nullable(),
   language: z.string({ required_error: 'Idioma inválido.' }),
   skillsId: z.array(z.string(), {
     required_error: 'Adicione ao menos uma habilidade.',

apps/web/app/(roles)/vagas/publique/RoleTopic.tsx

@@ -17,6 +17,7 @@ export const RoleTopic = () => {
       </p>
       <FormRadioGroup
         key={id}
+        disabled={formState.isSubmitting}
         options={[
           {
             label: 'Internacional',

apps/web/app/(roles)/vagas/publique/page.tsx

@@ -9,6 +9,7 @@ import {
   TextInput,
 } from 'app/components/CustomFormField'
 import { Button } from 'app/components/ui/button'
+import { LoadingOverlay } from 'app/components/ui/loadingOverlay'
 import { useToast } from 'app/hooks/use-toast'
 import { SkillsField } from 'app/subscribers/profile/components/SkillsField'
 import { InputHTMLAttributes } from 'react'
@@ -115,16 +116,34 @@ export default function RolesCreate() {
       body: JSON.stringify(data),
     })
     if (response.ok) {
-      form.reset()
+      form.reset({
+        url: '',
+        company: '',
+        country: '',
+        currency: undefined,
+        description: '',
+        language: undefined,
+        minimumYears: undefined,
+        salary: undefined,
+        skillsId: undefined,
+        title: '',
+        topicsId: undefined,
+      })
       toast.toast({
         title: 'Vaga enviada com sucesso!',
         description: 'Muito obrigado por enviar a vaga.',
       })
       return
     }
+    toast.toast({
+      title: 'Já temos essa vaga cadastrada! 😁',
+      description: 'Por favor, verifique o formulário novamente. 😊',
+      variant: 'destructive',
+    })
   }
   return (
     <FormProvider {...form}>
+      {form.formState.isSubmitting && <LoadingOverlay className="flex" />}
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <section className="container pb-6">
           <h1 className="text-2xl font-bold tracking-tight">
@@ -163,7 +182,9 @@ export default function RolesCreate() {
             </section>
           </section>
           <section className="flex gap-4">
-            <Button type="submit">Enviar</Button>
+            <Button disabled={form.formState.isSubmitting} type="submit">
+              Enviar
+            </Button>
             <section className="md:invisible">
               <RolePreviewModal />
             </section>

apps/web/app/components/CustomFormField.tsx

@@ -89,7 +89,9 @@ export const TextInput = ({
   placeholder,
   isSubmitting,
   type = 'text',
+  name,
 }: FormInputProps) => {
+  const { watch } = useFormContext()
   return (
     <BaseInput
       type={type}
@@ -102,6 +104,7 @@ export const TextInput = ({
         }
         goToLastCharacter()
       }}
+      value={watch(name)}
       {...(field as ControllerRenderProps)}
       placeholder={placeholder || ''}
     />