Incluindo exibição de informações de contato no perfil

src/constants/routes/usersRoutes.ts

@@ -8,6 +8,9 @@ const usersRoutes = {
   },
   update: {
     url: `${usersRoutesDefault}/edit`
+  },
+  getSocialInfo: {
+    url: `${usersRoutesDefault}/social`
   }
 }
 

src/pages/Cadastro/Cadastro.tsx

@@ -1,14 +1,18 @@
 import { IonToast, IonProgressBar, IonItem, IonLabel, IonInput, IonBackButton, IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonToolbar } from '@ionic/react';
 import { arrowBack, logoFacebook, mail } from 'ionicons/icons';
 import { Action } from '../../components/Action';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router';
 import './Cadastro.css';
 import ModalExample from '../../components/Email';
 import * as UsersService from '../../services/api/users'
+import LocalStorage from '../../LocalStorage';
+import { UserContext } from '../../App';
 
 const Cadastro: React.FC = () => {
   const history = useHistory();
+
+  const user = useContext(UserContext);
   
   const [showToast, setShowToast] = useState(false);
   const [messageToast, setMessageToast ] = useState('');
@@ -87,6 +91,11 @@ const Cadastro: React.FC = () => {
                 // if(signIn.token) {
                     // await AsyncStorage.setItem('token', signIn.token);
                     // await AsyncStorage.setItem('cpf', retorno.cpf);
+
+                    LocalStorage.setToken(retorno.token.token);
+
+                    user.setIsLoggedIn(true);
+
                     history.push('home');
 
             } else {

src/pages/CadastroCompletar.tsx

@@ -1,6 +1,5 @@
 import {
 IonBackButton,
-IonButton,
 IonButtons,
 IonCard,
 IonCardContent,
@@ -17,9 +16,7 @@ import React, { useEffect, useReducer, useState } from "react";
 
 import './Perfil.css'
 import { useHistory, useLocation } from "react-router";
-import { bookOutline, callOutline, documentTextOutline, homeOutline, logoWhatsapp } from "ionicons/icons";
-
-import isEqual from 'lodash.isequal';
+import { bookOutline, callOutline, documentTextOutline, homeOutline } from "ionicons/icons";
 
 import * as usersRoutes from '../services/api/users';
 

src/pages/Home.tsx

@@ -1,9 +1,39 @@
-import { IonItem, IonLabel, IonInput, IonButton, IonCardTitle, IonCol, IonContent, IonGrid, IonPage, IonRow } from '@ionic/react';
+import { IonButton, IonContent, IonPage } from '@ionic/react';
+import { useContext, useEffect } from 'react';
 import { useHistory } from 'react-router';
-import { Action } from '../components/Action';
+
+import { UserContext } from '../App';
+
+import * as sessionRoutes from '../services/api/session';
 
 const Home: React.FC = () => {
   const history = useHistory()
+
+  const user = useContext(UserContext);
+
+  useEffect(() => {
+    const refreshUserToken = async () => {
+      await sessionRoutes.refresh().then(response => {
+        if (response.status === 'error') {
+          // setMessageToast(response.message);
+          // setShowToast(true);
+
+          return
+        }
+
+        user.setIsLoggedIn(true);
+      }).catch(error => {
+        // if (!error.response) return
+
+        // se o backend retornou uma mensagem de erro customizada
+        // if (error.response.data.message) {
+        console.dir('Houve um erro: ', { error })
+        alert('Houve um erro')
+      })
+    }
+
+    refreshUserToken()
+  })
   
   return (
     <IonPage>

src/pages/Perfil.tsx

@@ -1,4 +1,6 @@
 import {
+  IonBackButton,
+  IonButtons,
   IonCard,
   IonCardContent,
   IonCardHeader,
@@ -18,7 +20,7 @@ import {
 } from "@ionic/react";
 import { useHistory } from "react-router-dom";
 import React, { useState, useEffect, useReducer, useContext } from "react";
-import { cardOutline, carOutline, createOutline, exitOutline, shieldCheckmarkOutline, starOutline } from "ionicons/icons";
+import { callOutline, cardOutline, carOutline, createOutline, exitOutline, logoFacebook, logoWhatsapp, shieldCheckmarkOutline, starOutline } from "ionicons/icons";
 
 import './Perfil.css'
 import LocalStorage from "../LocalStorage";
@@ -54,6 +56,16 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
     }
   );
 
+  const [inputSocialInformationValues, setInputSocialInformationValues] = useReducer(
+    (state: any, newState: any) => ({ ...state, ...newState }),
+    {
+      phone: '',
+      whatsapp: '',
+      facebook: '',
+      telegram: '',
+    }
+  );
+
   const history = useHistory();
 
   const redirectUserToLogin = () => {
@@ -122,6 +134,34 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
           }
         }
       }
+      // get user social info
+      const getUserSocialInfoRes = await usersService.getUserSocialInfo(userId)
+  
+      if (getUserSocialInfoRes.error) {
+        if (isVisitor && props.match.params.id) {
+          setMessageToast('Usuário não existe!')
+          setShowToast(true)
+          history.push({ pathname: '/home' })
+        } else {
+          setMessageToast(getUserSocialInfoRes.error.errorMessage)
+          setShowToast(true)
+        }
+  
+        return
+      }
+  
+      if (getUserSocialInfoRes.data) {
+        const userSocialData = getUserSocialInfoRes.data
+
+        if (isMounted) {
+          setInputSocialInformationValues({
+            'phone': userSocialData.phone,
+            'whatsapp': userSocialData.whatsapp,
+            'facebook': userSocialData.facebook,
+            'telegram': userSocialData.telegram,
+          });
+        }
+      }
     }
 
     let isMounted = true;
@@ -142,6 +182,9 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
       <IonHeader>
         <IonToolbar>
           <IonTitle>Seu perfil</IonTitle>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/home" />
+          </IonButtons>
         </IonToolbar>
       </IonHeader>
 
@@ -174,11 +217,58 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
             <IonCardTitle>Biografia</IonCardTitle>
           </IonCardHeader>
           <IonCardContent>
-          {inputValues.bio ? inputValues.bio : 'Sem biografia.' }
+            {inputValues.bio ? inputValues.bio : 'Sem biografia.' }
           </IonCardContent>
         </IonCard>
 
-        {/* // TODO, card de informações de contato */}
+        <IonCard>
+          <IonCardHeader>
+            <IonCardTitle>Informações de contato</IonCardTitle>
+          </IonCardHeader>
+          <IonCardContent>
+            { !inputSocialInformationValues.phone && !inputSocialInformationValues.whatsapp && !inputSocialInformationValues.facebook && !inputSocialInformationValues.telegram ?
+                <>Sem informações de contato.</>
+            : <>
+                {
+                  inputSocialInformationValues.phone ?
+                  <>
+                    <IonChip>
+                      <IonIcon icon={callOutline} />
+                      <IonLabel>{inputSocialInformationValues.phone}</IonLabel>
+                    </IonChip>
+                  </> : <></>
+                }
+    
+                { inputSocialInformationValues.whatsapp ?
+                  <>
+                    <IonChip>
+                      <IonIcon icon={logoWhatsapp} />
+                      <IonLabel>{inputSocialInformationValues.whatsapp}</IonLabel>
+                    </IonChip>
+                  </> : <></>
+                }
+    
+                { inputSocialInformationValues.facebook ?
+                  <>
+                    <IonChip>
+                      <IonIcon icon={logoFacebook} />
+                      <IonLabel>{inputSocialInformationValues.facebook}</IonLabel>
+                    </IonChip>
+                  </> : <></>
+                }
+    
+                { inputSocialInformationValues.telegram ?
+                  <>
+                    <IonChip>
+                      <IonIcon icon={callOutline} />
+                      <IonLabel>{inputSocialInformationValues.telegram}</IonLabel>
+                    </IonChip>
+                  </> : <></>
+                }
+              </>
+            }
+          </IonCardContent>
+        </IonCard>
 
         { !isVisitor ?
           <IonList>

src/services/api/users.ts

@@ -68,4 +68,12 @@ export async function update(userData: UpdateUserRequest) {
 
   const response = await instance.patch(userRoutes.update.url, userData, { headers: header });
   return response.data;
+}
+
+// TODO, continuar
+export async function getSocialInfo(userId: string) {
+  updateHeader();
+
+  const response = await instance.get(userRoutes.getSocialInfo.url + `/${userId}`, { headers: header });
+  return response.data;
 }

src/services/functions/usersService.ts

@@ -50,4 +50,40 @@ const getById = async (userId: string): Promise<getByIdReturn> => {
   }
 };
 
-export default { getById }
+interface getByIdReturn {
+  data?: {
+    phone: '',
+    whatsapp: '',
+    facebook: '',
+    telegram: '',
+  },
+  error?: {
+    errorMessage: string;
+  }
+}
+
+const getUserSocialInfo = async (userId: string): Promise<getByIdReturn> => {
+  try {
+    let res: getByIdRes = await usersRoutes.getSocialInfo(userId)
+
+    if (res.status === "error") {
+      return {
+        error: {
+          errorMessage: res.message,
+        }
+      };
+    }
+
+    return {
+      userData: res.data,
+    };
+  } catch(err) {
+    return {
+      error: {
+        errorMessage: "Por favor, autentique-se.",
+      }
+    };
+  }
+};
+
+export default { getById, getUserSocialInfo }