Exibindo erros no Input

nivel-03/02-iniciando-o-front-end-web/.eslintrc.json

@@ -35,6 +35,7 @@
     "react/prop-types": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
+    "no-unused-expressions": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
     "import/prefer-default-export": "off",
     "no-use-before-define": "off",

nivel-03/02-iniciando-o-front-end-web/src/components/Input/index.tsx

@@ -51,6 +51,7 @@ const Input: React.FC<InputProps> = ({ name, icon: Icon, ...rest }) => {
         {...rest}
         type="text"
       />
+      {error}
     </Container>
   );
 };

nivel-03/02-iniciando-o-front-end-web/src/pages/SignUp/index.tsx

@@ -1,8 +1,11 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { FiArrowLeft, FiUser, FiMail, FiLock } from 'react-icons/fi';
+import { FormHandles } from '@unform/core';
 import { Form } from '@unform/web';
 import * as Yup from 'yup';
 
+import getValidationErrors from '../../utils/getValidationErrors';
+
 import logoImg from '../../assets/logo.svg';
 
 import Input from '../../components/Input';
@@ -11,8 +14,12 @@ import Button from '../../components/Button';
 import { Container, Content, Background } from './styles';
 
 const SignUp: React.FC = () => {
+  const formRef = useRef<FormHandles>(null);
+
   const handleSubmit = useCallback(async (data: object) => {
     try {
+      formRef.current?.setErrors({});
+
       const schema = Yup.object().shape({
         name: Yup.string().required('Nome obrigatório'),
         email: Yup.string()
@@ -25,7 +32,11 @@ const SignUp: React.FC = () => {
         abortEarly: false,
       });
     } catch (err) {
-      console.log(err);
+      if (err instanceof Yup.ValidationError) {
+        const errors = getValidationErrors(err);
+
+        formRef.current?.setErrors(errors);
+      }
     }
   }, []);
 
@@ -35,10 +46,10 @@ const SignUp: React.FC = () => {
       <Content>
         <img src={logoImg} alt="GoBarber" />
 
-        <Form onSubmit={handleSubmit}>
+        <Form ref={formRef} onSubmit={handleSubmit}>
           <h1>Faça seu cadastro</h1>
 
-          <Input name="name" icon={FiUser} placeholder="E-mail" />
+          <Input name="name" icon={FiUser} placeholder="Nome" />
 
           <Input name="email" icon={FiMail} placeholder="E-mail" />
 

nivel-03/02-iniciando-o-front-end-web/src/utils/getValidationErrors.ts

@@ -0,0 +1,15 @@
+import { ValidationError } from 'yup';
+
+interface Errors {
+  [key: string]: string;
+}
+
+export default function getValidationErrors(err: ValidationError): Errors {
+  const validationErrors: Errors = {};
+
+  err.inner.forEach(error => {
+    validationErrors[error.path] = error.message;
+  });
+
+  return validationErrors;
+}