create a user with mutation and connect to the form

src/components/FormSignIn/__snapshots__/test.tsx.snap

@@ -51,6 +51,12 @@ exports[`<FormSignIn /> should render the form 1`] = `
   width: 100%;
 }
 
+.c5:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 2.4rem #EAEAEA inset;
+  -webkit-filter: none;
+  filter: none;
+}
+
 .c8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -234,4 +240,4 @@ exports[`<FormSignIn /> should render the form 1`] = `
     </div>
   </div>
 </body>
-`
+`;

src/components/FormSignUp/__snapshots__/test.tsx.snap

@@ -51,6 +51,12 @@ exports[`<FormSignUp /> should render the form 1`] = `
   width: 100%;
 }
 
+.c5:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 2.4rem #EAEAEA inset;
+  -webkit-filter: none;
+  filter: none;
+}
+
 .c7 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -142,9 +148,9 @@ exports[`<FormSignUp /> should render the form 1`] = `
         </div>
         <input
           class="c5"
-          name="name"
-          placeholder="Name"
-          type="name"
+          name="username"
+          placeholder="Username"
+          type="text"
           value=""
         />
       </div>
@@ -270,6 +276,7 @@ exports[`<FormSignUp /> should render the form 1`] = `
     </div>
     <button
       class="c6 c7"
+      type="submit"
     >
       <span>
         Sign up now
@@ -288,4 +295,4 @@ exports[`<FormSignUp /> should render the form 1`] = `
     </div>
   </form>
 </div>
-`
+`;

src/components/FormSignUp/index.tsx

@@ -1,50 +1,87 @@
+import React, { useState } from 'react'
 import Link from 'next/link'
 import { AccountCircle, Email, Lock } from '@styled-icons/material-outlined'
 
+import { UsersPermissionsRegisterInput } from 'graphql/generated/globalTypes'
+import { MUTATION_REGISTER } from 'graphql/mutations/register'
+
 import { FormWrapper, FormLink } from 'components/Form'
 import Button from 'components/Button'
 import TextField from 'components/TextField'
+import { useMutation } from '@apollo/client'
+
+const FormSignUp = () => {
+  const [values, setValues] = useState<UsersPermissionsRegisterInput>({
+    username: '',
+    email: '',
+    password: ''
+  })
+
+  const [createUser] = useMutation(MUTATION_REGISTER)
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+
+    createUser({
+      variables: {
+        input: {
+          username: values.username,
+          email: values.email,
+          password: values.password
+        }
+      }
+    })
+  }
+
+  const handleInput = (field: string, value: string) => {
+    setValues((s) => ({ ...s, [field]: value }))
+  }
+
+  return (
+    <FormWrapper>
+      <form onSubmit={handleSubmit}>
+        <TextField
+          name="username"
+          placeholder="Username"
+          type="text"
+          icon={<AccountCircle />}
+          onInputChange={(v) => handleInput('username', v)}
+        />
+        <TextField
+          name="email"
+          placeholder="Email"
+          type="email"
+          icon={<Email />}
+          onInputChange={(v) => handleInput('email', v)}
+        />
+        <TextField
+          name="password"
+          placeholder="Password"
+          type="password"
+          icon={<Lock />}
+          onInputChange={(v) => handleInput('password', v)}
+        />
+        <TextField
+          name="confirm-password"
+          placeholder="Confirm password"
+          type="password"
+          icon={<Lock />}
+          onInputChange={(v) => handleInput('confirm-password', v)}
+        />
+
+        <Button type="submit" size="large" fullWidth>
+          Sign up now
+        </Button>
 
-const FormSignUp = () => (
-  <FormWrapper>
-    <form>
-      <TextField
-        name="name"
-        placeholder="Name"
-        type="name"
-        icon={<AccountCircle />}
-      />
-      <TextField
-        name="email"
-        placeholder="Email"
-        type="email"
-        icon={<Email />}
-      />
-      <TextField
-        name="password"
-        placeholder="Password"
-        type="password"
-        icon={<Lock />}
-      />
-      <TextField
-        name="confirm-password"
-        placeholder="Confirm password"
-        type="password"
-        icon={<Lock />}
-      />
-
-      <Button size="large" fullWidth>
-        Sign up now
-      </Button>
-
-      <FormLink>
-        Already have an account?{' '}
-        <Link href="/sign-in">
-          <a>Sign in</a>
-        </Link>
-      </FormLink>
-    </form>
-  </FormWrapper>
-)
+        <FormLink>
+          Already have an account?{' '}
+          <Link href="/sign-in">
+            <a>Sign in</a>
+          </Link>
+        </FormLink>
+      </form>
+    </FormWrapper>
+  )
+}
 
 export default FormSignUp

src/components/FormSignUp/test.tsx

@@ -1,10 +1,15 @@
+import { MockedProvider } from '@apollo/client/testing'
 import { render, screen } from 'utils/test-utils'
 
 import FormSignUp from '.'
 
 describe('<FormSignUp />', () => {
   it('should render the form', () => {
-    const { container } = render(<FormSignUp />)
+    const { container } = render(
+      <MockedProvider>
+        <FormSignUp />
+      </MockedProvider>
+    )
 
     expect(screen.getByPlaceholderText(/name/i)).toBeInTheDocument()
     expect(screen.getByPlaceholderText(/email/i)).toBeInTheDocument()
@@ -18,7 +23,11 @@ describe('<FormSignUp />', () => {
   })
 
   it('should render text and link to sign in', () => {
-    render(<FormSignUp />)
+    render(
+      <MockedProvider>
+        <FormSignUp />
+      </MockedProvider>
+    )
 
     expect(screen.getByRole('link', { name: /sign in/i })).toBeInTheDocument()
     expect(screen.getByText(/already have an account\?/i)).toBeInTheDocument()

src/components/TextField/__snapshots__/test.tsx.snap

@@ -66,6 +66,12 @@ exports[`<TextField /> should render with error 1`] = `
   width: 100%;
 }
 
+.c8:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 2.4rem #EAEAEA inset;
+  -webkit-filter: none;
+  filter: none;
+}
+
 .c9 {
   color: #FF6347;
   font-size: 1.2rem;

src/components/TextField/index.tsx

@@ -3,7 +3,7 @@ import React, { useState, InputHTMLAttributes } from 'react'
 import * as S from './styles'
 
 export type TextFieldProps = {
-  onInput?: (value: string) => void
+  onInputChange?: (value: string) => void
   label?: string
   initialValue?: string
   icon?: React.ReactNode
@@ -13,7 +13,7 @@ export type TextFieldProps = {
 } & InputHTMLAttributes<HTMLInputElement>
 
 const TextField = ({
-  onInput,
+  onInputChange,
   label,
   name,
   initialValue = '',
@@ -29,7 +29,7 @@ const TextField = ({
     const newValue = e.currentTarget.value
     setValue(newValue)
 
-    !!onInput && onInput(newValue)
+    !!onInputChange && onInputChange(newValue)
   }
 
   return (

src/components/TextField/test.tsx

@@ -19,9 +19,13 @@ describe('<TextField />', () => {
   })
 
   it('Changes its value when typing', async () => {
-    const onInput = jest.fn()
+    const onInputChange = jest.fn()
     render(
-      <TextField onInput={onInput} label="TextField" name="TextField" />
+      <TextField
+        onInputChange={onInputChange}
+        label="TextField"
+        name="TextField"
+      />
     )
 
     const input = screen.getByRole('textbox')
@@ -30,16 +34,16 @@ describe('<TextField />', () => {
 
     await waitFor(() => {
       expect(input).toHaveValue(text)
-      expect(onInput).toHaveBeenCalledTimes(text.length)
+      expect(onInputChange).toHaveBeenCalledTimes(text.length)
     })
-    expect(onInput).toHaveBeenCalledWith(text)
+    expect(onInputChange).toHaveBeenCalledWith(text)
   })
 
   it('Does not changes its value when disabled', async () => {
-    const onInput = jest.fn()
+    const onInputChange = jest.fn()
     render(
       <TextField
-        onInput={onInput}
+        onInputChange={onInputChange}
         label="TextField"
         name="TextField"
         disabled
@@ -55,7 +59,7 @@ describe('<TextField />', () => {
     await waitFor(() => {
       expect(input).not.toHaveValue(text)
     })
-    expect(onInput).not.toHaveBeenCalled()
+    expect(onInputChange).not.toHaveBeenCalled()
   })
 
   it('Is accessible by tab', () => {

src/graphql/generated/MutationRegister.ts

@@ -0,0 +1,23 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { UsersPermissionsRegisterInput } from "./globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: MutationRegister
+// ====================================================
+
+export interface MutationRegister_register {
+  __typename: "UsersPermissionsLoginPayload";
+  jwt: string | null;
+}
+
+export interface MutationRegister {
+  register: MutationRegister_register;
+}
+
+export interface MutationRegisterVariables {
+  input: UsersPermissionsRegisterInput;
+}

src/graphql/generated/globalTypes.ts

@@ -31,6 +31,12 @@ export enum ENUM_GAME_RATING {
   BR18 = "BR18",
 }
 
+export interface UsersPermissionsRegisterInput {
+  username: string;
+  email: string;
+  password: string;
+}
+
 //==============================================================
 // END Enums and Input Objects
 //==============================================================

src/graphql/mutations/register.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client'
+
+export const MUTATION_REGISTER = gql`
+  mutation MutationRegister($input: UsersPermissionsRegisterInput!) {
+    register(input: $input) {
+      jwt
+    }
+  }
+`