Tabs agora aparecem somente para usuários logados

src/App.tsx

@@ -1,12 +1,16 @@
 import { Redirect, Route } from 'react-router-dom';
 import {
   IonApp,
+  IonIcon,
+  IonLabel,
   IonRouterOutlet,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
   setupIonicReact
 } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import Cadastro from './pages/Cadastro/Cadastro';
-import MainPages from './pages/MainPages';
 
 // importação das páginas
 import Login from './pages/Login';
@@ -31,26 +35,78 @@ import '@ionic/react/css/display.css';
 import './theme/variables.css';
 import Perfil from './pages/Perfil';
 import PerfilEditar from './pages/PerfilEditar';
+import { search, home, person } from 'ionicons/icons';
+import { useState, useContext, useEffect } from 'react';
+import React from 'react';
 
 setupIonicReact();
 
-const App: React.FC = () => (
+const routes = (
+  <>
+    <Route exact path="/cadastro" component={Cadastro}></Route>
+    <Route exact path="/login" component={Login}></Route>
+    <Route exact path="/perfil" component={Perfil}></Route>
+    <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
+    <Route exact path="/">
+      <Redirect to="/cadastro" />
+    </Route>
+  </>)
+
+interface IUserManager {
+  setIsLoggedIn: Function;
+}
+
+const user: IUserManager = {
+  setIsLoggedIn: () => {}
+};
+
+export const UserContext = React.createContext<IUserManager>(user);
+
+const IonicApp: React.FC = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const user = useContext(UserContext);
+
+  user.setIsLoggedIn = setIsLoggedIn;
+
+  useEffect(() => {
+    // TODO, verifica se usuário está logado
+    // fazer com serviço externo (evita duplicações)
+  })
+
+  return(
   <IonApp>
     <IonReactRouter>
-      
-        <IonRouterOutlet>
-          <Route exact path="/mainpages" component={MainPages}></Route>
-          <Route exact path="/cadastro" component={Cadastro}></Route>
-          <Route exact path="/login" component={Login}></Route>
-          <Route exact path="/perfil" component={Perfil}></Route>
-          <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
-          <Route exact path="/">
-            <Redirect to="/cadastro" />
-          </Route>
-        </IonRouterOutlet>
-        
-    </IonReactRouter>
+        {isLoggedIn ? (
+          <IonTabs>
+            <IonRouterOutlet>{routes}</IonRouterOutlet>
+            
+            <IonTabBar slot="bottom">
+              <IonTabButton tab="buscar" href="/buscar">
+                <IonIcon icon={search} />
+                <IonLabel>Buscar</IonLabel>
+              </IonTabButton>
+              <IonTabButton tab="home" href="/home">
+                <IonIcon icon={home} />
+                <IonLabel>Home</IonLabel>
+              </IonTabButton>
+              <IonTabButton tab="perfil" href="/perfil">
+                <IonIcon icon={person} />
+                <IonLabel>Perfil</IonLabel>
+              </IonTabButton>
+            </IonTabBar>
+          </IonTabs>
+        ) : (<IonRouterOutlet>{routes}</IonRouterOutlet>)}
+      </IonReactRouter>
   </IonApp>
-);
+  )
+}
+
+const App: React.FC = () => {
+  return (
+    <UserContext.Provider value={user}>
+      <IonicApp />
+    </UserContext.Provider>
+  );
+};
 
 export default App;

src/pages/Cadastro/Cadastro.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router';
 import './Cadastro.css';
 import ModalExample from '../../components/Email';
-import * as UsersService from '../../services/users'
+import * as UsersService from '../../services/api/users'
 
 const Cadastro: React.FC = () => {
   const history = useHistory();
@@ -114,7 +114,7 @@ const Cadastro: React.FC = () => {
 			<IonHeader>
 				<IonToolbar>
           <IonButtons slot="start">
-            <IonBackButton text={''} icon={arrowBack} defaultHref='mainpages' />
+            <IonBackButton text={''} icon={arrowBack} defaultHref='login' />
           </IonButtons>
 				</IonToolbar>
 			</IonHeader>

src/pages/Login.tsx

@@ -5,7 +5,7 @@ import {
   IonTitle,
   IonToolbar
 } from "@ionic/react";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { IonGrid, IonRow, IonCol, IonToast } from "@ionic/react";
 import { useHistory } from "react-router-dom";
 import {
@@ -15,9 +15,10 @@ import {
   IonButton,
 } from "@ionic/react";
 
-import * as sessionRoutes from '../services/session';
+import * as sessionRoutes from '../services/api/session';
 import LocalStorage from '../LocalStorage';
 import { Action } from "../components/Action";
+import { UserContext } from "../App";
 
 const Page: React.FC = () => {
   const [showToast, setShowToast] = useState(false);
@@ -27,6 +28,8 @@ const Page: React.FC = () => {
   const [email, setEmail] = useState<string>("matheusalb3213@gmail.com");
   const [password, setPassword] = useState<string>("12345678");
 
+  const user = useContext(UserContext);
+
   function validateEmail(email: string) {
     const re =
       // eslint-disable-next-line no-control-regex
@@ -84,6 +87,8 @@ const Page: React.FC = () => {
 
       LocalStorage.setToken(token);
 
+      user.setIsLoggedIn(true);
+
       history.push({ pathname: '/home' });
     }).catch(error => {
       // if (!error.response) return

src/pages/Perfil.css

@@ -1,3 +1,9 @@
 #avatar {
     border-radius: 50%;
+    width: 64px;
+    height: 64px;
+}
+
+IonIcon {
+    color: blue;
 }

src/pages/Perfil.tsx

@@ -3,11 +3,17 @@ import {
   IonCardContent,
   IonCardHeader,
   IonCardTitle,
+  IonChip,
   IonContent,
   IonFab,
   IonFabButton,
+  IonGrid,
   IonHeader,
   IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
   IonPage,
   IonTitle,
   IonToast,
@@ -18,8 +24,8 @@ import React, { useState, useEffect, useReducer } from "react";
 import { IonRow, IonCol } from "@ionic/react";
 import { createOutline } from "ionicons/icons";
 
-import * as sessionRoutes from '../services/session';
-import * as usersRoutes from '../services/users';
+import * as sessionRoutes from '../services/api/session';
+import * as usersRoutes from '../services/api/users';
 
 import './Perfil.css'
 import LocalStorage from "../LocalStorage";
@@ -137,6 +143,32 @@ const Perfil: React.FC = () => {
           </IonCardContent>
         </IonCard>
 
+        <IonCard>
+          <IonCardContent>
+            <IonLabel>Status do perfil</IonLabel>
+            <IonChip>
+              <IonLabel color="primary">Passageiro</IonLabel>
+            </IonChip>
+          </IonCardContent>
+        </IonCard>
+
+        <IonList>
+        <IonListHeader>Dashboard</IonListHeader>
+          <IonItem>
+            <IonIcon></IonIcon>
+            <IonLabel>Confirmar perfil</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonLabel>Cadastrar Van</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonLabel>Pagamentos</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonLabel>Avaliações</IonLabel>
+          </IonItem>
+        </IonList>
+
         <IonFab vertical="bottom" horizontal="end" slot="fixed">
           <IonFabButton onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}>
             <IonIcon icon={createOutline} />

src/pages/PerfilEditar.tsx

@@ -25,7 +25,7 @@ import { saveOutline } from "ionicons/icons";
 
 import isEqual from 'lodash.isequal';
 
-import * as usersRoutes from '../services/users';
+import * as usersRoutes from '../services/api/users';
 
 import './Cadastro/Cadastro.css'
 

src/services/api/api.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import apiConfig from '../config/api.config';
+import apiConfig from '../../config/api.config';
 
 const instance = axios.create({
   baseURL: apiConfig.getBaseUrl(),

src/services/api/session.ts

@@ -1,6 +1,6 @@
-import instance from '../services/api';
-import sessionRoutes from '../constants/routes/sessionRoutes';
-import LocalStorage from '../LocalStorage';
+import instance from './api';
+import sessionRoutes from '../../constants/routes/sessionRoutes';
+import LocalStorage from '../../LocalStorage';
 import { AxiosRequestHeaders } from 'axios';
 
 let token: string | null;

src/services/api/users.ts

@@ -1,9 +1,9 @@
-import instance from '../services/api';
+import instance from './api';
 // import LocalStorage from '../LocalStorage';
 
-import userRoutes from '../constants/routes/usersRoutes';
+import userRoutes from '../../constants/routes/usersRoutes';
 import { AxiosRequestHeaders } from 'axios';
-import LocalStorage from '../LocalStorage';
+import LocalStorage from '../../LocalStorage';
 
 let token: string;
 let header: AxiosRequestHeaders;