Merge pull request #53 from Typext/chore/design-adjusts-and-inputs-validation

fix(inputs validation and design): implementing validation in inputs …

Author: MatheusCampos-450

src/components/FormUpdate/index.tsx

@@ -1,19 +1,21 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
+import React, { useCallback } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
 
 import { Form } from '@unform/web';
 
 import InputForm from 'components/InputForm';
 import Button from 'components/Button/Button';
 import Input from 'components/Input/Input';
 
-import { Container } from './styles';
+import { Container, SectionButton } from './styles';
 
 interface FormUpdateProps {
   emailIsNotAllowed?: boolean;
   handleSubmit: any;
   formRef: any;
   hasPasswordField?: boolean;
+  goBackEnabled?: boolean;
+  buttonText?: string;
   inviteInfo: { name: string; email: string };
   user?: {
     id: string;
@@ -37,12 +39,19 @@ function FormUpdate({
   formRef,
   inviteInfo,
   hasPasswordField,
+  goBackEnabled,
+  buttonText,
   user,
 }: FormUpdateProps) {
+  const history = useHistory();
   const params = useParams<ParamsProps>();
 
   const paramsEmail = params.email;
 
+  const handleGoBack = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
   return (
     <Container>
       <Form onSubmit={handleSubmit} ref={formRef} className="Content">
@@ -106,7 +115,14 @@ function FormUpdate({
           )}
         </div>
 
-        <Button color="var(--green)">Cadastrar</Button>
+        <SectionButton>
+          {goBackEnabled && (
+            <Button color="var(--gray)" onClick={handleGoBack}>
+              Voltar
+            </Button>
+          )}
+          <Button color="var(--green)">{buttonText || 'Cadastrar'}</Button>
+        </SectionButton>
       </Form>
     </Container>
   );
@@ -115,6 +131,8 @@ function FormUpdate({
 FormUpdate.defaultProps = {
   emailIsNotAllowed: false,
   hasPasswordField: false,
+  goBackEnabled: false,
+  buttonText: '',
   user: {
     name: '',
     email: '',

src/components/FormUpdate/styles.ts

@@ -36,3 +36,17 @@ export const Container = styled.div`
     }
   }
 `;
+
+export const SectionButton = styled.section`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  max-width: 90rem;
+  padding: 0 35px;
+
+  button:nth-child(1) {
+    margin-right: 2rem;
+  }
+`;

src/components/Input/styles.ts

@@ -17,8 +17,8 @@ export const StyledInput = styled.div<Props>`
   margin: 0;
 
   h3 {
-    font-weight: 500;
-    font-size: ${props => props.Size || '1.5rem'};
+    font-weight: bold;
+    font-size: ${props => props.Size};
     color: ${props => props.Color || 'var(--black)'};
 
     margin-bottom: 5px;
@@ -37,7 +37,7 @@ export const StyledInput = styled.div<Props>`
     font-weight: ${props => props.weight || '400'};
 
     outline: none;
-    border: 0;
+    border: none;
     border-radius: 1.25rem;
 
     color: ${props => props.Color || 'var(--black)'};

src/components/InputForm/styles.ts

@@ -34,14 +34,14 @@ export const Container = styled.div<ContainerProps>`
     background-color: var(--soft-gray);
 
     border-radius: 1.25rem;
-    border: 2px solid rgba(206, 207, 208, 0.2);
+    border: 2px solid rgb(245 245 246);
 
-    transition: border-color .3s;
+    transition: border-color 0.3s;
 
     ${props =>
       props.isErrored &&
       css`
-        transition: border-color .3s;
+        transition: border-color 0.3s;
         border-color: #c53030;
       `}
 
@@ -52,7 +52,7 @@ export const Container = styled.div<ContainerProps>`
       font-family: Roboto;
       font-size: 1.3rem;
       font-style: normal;
-      font-weight: bold;
+      font-weight: normal;
 
       width: 100%;
 

src/components/Logo/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import logoIcon from 'assets/logo.svg';
+
+import * as s from './styles';
+
+const TypextLogo = () => {
+  return (
+    <s.Link href="/">
+      <s.Image src={logoIcon} alt="logo" />
+    </s.Link>
+  );
+};
+
+export default TypextLogo;

src/components/Logo/styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Link = styled.a``;
+
+export const Image = styled.img`
+  width: 18.125rem;
+  height: 3.125rem;
+`;

src/components/Select/styles.ts

@@ -34,5 +34,4 @@ export const StyledSelect = styled.div<Props>`
     max-width: ${props => props.SelectWidth || '23.75rem'};
     width: 100%;
   }
-
 `;

src/pages/Invite/components/Select/styles.ts

@@ -12,7 +12,7 @@ export const Container = styled.div<ContainerProps>`
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 41.875rem;
+  max-width: 40rem;
   position: relative;
 
   .inputSelect {
@@ -24,6 +24,7 @@ export const Container = styled.div<ContainerProps>`
       font-style: normal;
       font-weight: 500;
       font-size: 2rem;
+      color: var(--black);
 
       width: 100%;
       display: flex;
@@ -39,6 +40,7 @@ export const Container = styled.div<ContainerProps>`
     background-color: var(--soft-gray);
     border-radius: 1.25rem;
     width: 100%;
+    max-width: 40rem;
     height: 4.063rem;
 
     display: flex;
@@ -73,7 +75,7 @@ export const SelectContainer = styled.ul`
   position: absolute;
   list-style: none;
   width: 100%;
-  max-width: 41.875rem;
+  max-width: 40rem;
   margin-top: 6rem;
   background: #f5f5f6;
   border-radius: 0 0 12px 12px;

src/pages/Invite/index.tsx

@@ -1,9 +1,12 @@
-import React, { useState, useCallback } from 'react';
-import { message } from 'antd';
+import React, { useRef, useState, useCallback } from 'react';
+import * as Yup from 'yup';
+import { Form } from '@unform/web';
+import { FormHandles } from '@unform/core';
 
 import { useAuth } from 'contexts/auth';
+import getValidationErrors from 'utils/getValidationErrors';
 
-import Input from 'components/Input/Input';
+import InputForm from 'components/InputForm';
 import Button from 'components/Button/Button';
 import Select from './components/Select';
 
@@ -14,31 +17,40 @@ import InviteConfirmationModal from './components/InviteConfirmationModal';
 function InviteUsers() {
   const { inviteUser } = useAuth();
 
+  const formRef = useRef<FormHandles>(null);
+
   const [openInvitationModal, setOpenInvitationModal] = useState<boolean>(
     false,
   );
 
   const [userPermission, setUserPermission] = useState<string>('Usuário');
-  const [userName, setUserName] = useState<string>('');
-  const [userEmail, setUserEmail] = useState<string>('');
 
   const handleInviteUser = useCallback(
-    e => {
-      e.preventDefault();
-
-      if (!userName || !userEmail) {
-        message.error('Todos os campos devem estar preenchidos');
-        return;
+    async (data: { name: string; email: string }) => {
+      try {
+        formRef.current?.setErrors({});
+
+        const schema = Yup.object().shape({
+          email: Yup.string()
+            .required('O email é obrigatório')
+            .email('Digite um email valído'),
+          name: Yup.string().required('O nome é obrigatório'),
+        });
+
+        await schema.validate(data, { abortEarly: false });
+
+        setOpenInvitationModal(true);
+        inviteUser({
+          name: data.name,
+          email: data.email,
+          type: userPermission,
+        });
+      } catch (err) {
+        const errors = getValidationErrors(err);
+        formRef.current?.setErrors(errors);
       }
-
-      setOpenInvitationModal(true);
-      inviteUser({
-        name: userName,
-        email: userEmail,
-        type: userPermission,
-      });
     },
-    [inviteUser, userName, userEmail, userPermission],
+    [inviteUser, userPermission],
   );
 
   return (
@@ -50,22 +62,14 @@ function InviteUsers() {
       <StyleInviteUsers>
         <h1>Convidar Participante</h1>
 
-        <form className="emailAndPermission" onSubmit={handleInviteUser}>
-          <Input
-            title="Nome"
-            color="black"
-            Size="large"
-            styleWidth="41.875rem"
-            onChange={event => setUserName(event.target.value)}
-          />
+        <Form
+          ref={formRef}
+          className="emailAndPermission"
+          onSubmit={handleInviteUser}
+        >
+          <InputForm title="Nome" name="name" color="black" />
 
-          <Input
-            title="E-mail"
-            color="black"
-            Size="large"
-            styleWidth="41.875rem"
-            onChange={event => setUserEmail(event.target.value)}
-          />
+          <InputForm title="E-mail" name="email" color="black" />
 
           <Select
             title="Nível de permissão"
@@ -81,7 +85,7 @@ function InviteUsers() {
           >
             Convidar
           </Button>
-        </form>
+        </Form>
       </StyleInviteUsers>
     </>
   );

src/pages/Invite/styles.tsx

@@ -47,8 +47,8 @@ export const StyleInviteUsers = styled.div`
 
     margin: 6rem 0;
 
-    input {
-      margin-bottom: 2rem;
+    > div {
+      margin: 1rem 0;
     }
 
     .input-styled h3 {