Add avatar input and update

src/pages/Profile/AvatarInput/index.js

@@ -0,0 +1,57 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { useField } from '@rocketseat/unform'
+import api from '~/services/api'
+
+import { Container } from './styles'
+
+export default function AvatarInput() {
+  const { defaultValue, registerField } = useField('avatar')
+
+  const [file, setFile] = useState(defaultValue && defaultValue.id)
+  const [preview, setPreview] = useState(defaultValue && defaultValue.url)
+
+  const ref = useRef()
+  useEffect(() => {
+    if (ref.current) {
+      registerField({
+        name: 'avatar_id',
+        ref: ref.current,
+        path: 'dataset.file',
+      })
+    }
+  }, [ref, registerField])
+
+  async function handleChange(e) {
+    const data = new FormData()
+
+    data.append('file', e.target.files[0])
+
+    const response = await api.post('files', data)
+
+    const { id, url } = response.data
+
+    setFile(id)
+    setPreview(url)
+  }
+
+  return (
+    <Container>
+      <label htmlFor="avatar">
+        <img
+          src={
+            preview || 'https://api.adorable.io/avatars/50/abott@adorable.png'
+          }
+          alt=""
+        />
+        <input
+          type="file"
+          id="avatar"
+          accept="image/*"
+          data-file={file}
+          onChange={handleChange}
+          ref={ref}
+        />
+      </label>
+    </Container>
+  )
+}

src/pages/Profile/AvatarInput/styles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  align-self: center;
+  margin-bottom: 30px;
+
+  label {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    img {
+      height: 120px;
+      width: 120px;
+      border-radius: 50%;
+      border: 3px solid rgba(255, 255, 255, 0.3);
+      background: #eee;
+    }
+
+    input {
+      display: none;
+    }
+  }
+`

src/pages/Profile/index.js

@@ -4,6 +4,7 @@ import { Form, Input } from '@rocketseat/unform'
 
 import { updateProfileRequest } from '~/store/modules/user/actions'
 
+import AvatarInput from './AvatarInput'
 import { Container } from './styles'
 
 export default function Profile() {
@@ -17,6 +18,7 @@ export default function Profile() {
   return (
     <Container>
       <Form initialData={profile} onSubmit={handleSubmit}>
+        <AvatarInput name="avatar_id" />
         <Input name="name" placeholder="Nome Completo" />
         <Input name="email" type="email" placeholder="Seu endereço de e-mail" />
 

src/store/modules/user/sagas.js

@@ -6,9 +6,14 @@ import { updateProfileSuccess, updateProfileFailure } from './actions'
 
 export function* updateProfile({ payload }) {
   try {
-    const { name, email, ...rest } = payload.data
+    const { name, email, avatar_id, ...rest } = payload.data
 
-    const profile = { name, email, ...(rest.oldPassword ? rest : {}) }
+    const profile = {
+      name,
+      email,
+      avatar_id,
+      ...(rest.oldPassword ? rest : {}),
+    }
 
     const response = yield call(api.put, 'users', profile)