Foi Criado a parte de atualização do avatar, utilizamos o pacote reac…

…t-native-image-picker, foi criado a função handleUpdateAvatar que atualiza o avatar do usuario. Foi adicionado um botão no dashboard para deslogar o usuario.
NecroKills · Jun 13, 2020 · 30e1e0d · 30e1e0d
1 parent f97e615
commit 30e1e0d
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "react": "16.11.0",
     "react-native": "0.62.2",
     "react-native-gesture-handler": "^1.6.1",
+    "react-native-image-picker": "^2.3.1",
     "react-native-iphone-x-helper": "^1.2.1",
     "react-native-reanimated": "^1.8.0",
     "react-native-safe-area-context": "^1.0.2",

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
@@ -19,6 +19,7 @@ import {
   ProviderName,
   ProviderMeta,
   ProviderMetaText,
+  Logoff,
 } from './styles';
 import api from '../../services/api';
 
@@ -31,7 +32,7 @@ export interface Provider {
 const Dashboard: React.FC = () => {
   const [providers, setProviders] = useState<Provider[]>([]);
 
-  const { user } = useAuth();
+  const { user, signOut } = useAuth();
   const { navigate } = useNavigation();
 
   useEffect(() => {
@@ -44,6 +45,10 @@ const Dashboard: React.FC = () => {
     navigate('Profile');
   }, [navigate]);
 
+  const navigateToLogon = useCallback(() => {
+    signOut();
+  }, [signOut]);
+
   const navigateToCreateAppointment = useCallback(
     (providerId: string) => {
       navigate('CreateAppointment', { providerId });
@@ -57,6 +62,7 @@ const Dashboard: React.FC = () => {
         <HeaderTitle>
           Bem vindo, {'\n'}
           <UserName>{user.name}</UserName>
+          <Logoff onPress={navigateToLogon}>{'\n'}Sair</Logoff>
         </HeaderTitle>
 
         <ProfileButton onPress={navigateToProfile}>

diff --git a/src/pages/Dashboard/styles.ts b/src/pages/Dashboard/styles.ts
@@ -84,3 +84,9 @@ export const ProviderMetaText = styled.Text`
   margin-left: 8px;
   font-family: 'RobotoSlab-Medium';
 `;
+
+export const Logoff = styled.Text`
+  color: #999591;
+  margin-left: 8px;
+  font-family: 'RobotoSlab-Medium';
+`;
diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx
@@ -3,6 +3,8 @@ import React, { useCallback, useRef } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { Form } from '@unform/mobile';
 
+import ImagePicker from 'react-native-image-picker';
+
 import { FormHandles } from '@unform/core';
 import {
   Image,
@@ -123,6 +125,39 @@ const Profile: React.FC = () => {
     [navigation, updateUser],
   );
 
+  const handleUpdateAvatar = useCallback(() => {
+    ImagePicker.showImagePicker(
+      {
+        title: 'Selecione um avatar',
+        cancelButtonTitle: 'Cancelar',
+        takePhotoButtonTitle: 'Usar câmera',
+        chooseFromLibraryButtonTitle: 'Escolher da galeria',
+      },
+      responseImage => {
+        if (responseImage.didCancel) {
+          return;
+        }
+
+        if (responseImage.error) {
+          Alert.alert('Erro ao atualizar seu avatar.');
+          return;
+        }
+
+        const data = new FormData();
+
+        data.append('avatar', {
+          uri: responseImage.uri,
+          type: 'image/jpeg',
+          name: `${user.id}.jpg`,
+        });
+
+        api.patch('users/avatar', data).then(response => {
+          updateUser(response.data);
+        });
+      },
+    );
+  }, [user.id, updateUser]);
+
   const handleGoBack = useCallback(() => {
     navigation.goBack();
   }, [navigation]);
@@ -147,7 +182,11 @@ const Profile: React.FC = () => {
               <Icon name="chevron-left" size={24} color="#999591" />
             </BackButton>
 
-            <UserAvatarButton onPress={() => {}}>
+            <UserAvatarButton
+              onPress={() => {
+                handleUpdateAvatar;
+              }}
+            >
               <UserAvatar
                 source={{
                   uri:

diff --git a/yarn.lock b/yarn.lock
@@ -5625,6 +5625,11 @@ react-native-gesture-handler@^1.6.1:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
+react-native-image-picker@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-2.3.1.tgz#1977b65e07793d2c0b2d1976fb675c5f75ad7f11"
+  integrity sha512-c/a2h7/T7yBo5KlNQhcSn4xf4+6Li6LfJ59+GZT1ZzzWrj/6X8DiJ/TJBOlOZMC5tJriZKuRkWSsr74k6z+brw==
+
 react-native-iphone-x-helper@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"