Alterações e incluindo página Minhas Vans

src/App.tsx

@@ -43,6 +43,7 @@ import './theme/variables.css';
 import { search, home, person } from 'ionicons/icons';
 import { useState, useContext } from 'react';
 import React from 'react';
+import MinhasVans from './pages/MinhasVans';
 
 setupIonicReact();
 
@@ -62,6 +63,7 @@ const routes = (
   <Route exact path="/usuario/:id" component={Perfil}></Route>
 
   <Route exact path="/cadastro-van" component={CadastroVan}></Route>
+  <Route exact path="/minhas-vans" component={MinhasVans}></Route>
   <Route exact path="/">
     <Redirect to="/login" />
   </Route>

src/constants/routes/vansRoutes.ts

@@ -3,8 +3,11 @@ const vansRoutes = {
   list: {
     url: `${vansRoutesDefault}/list`
   },
-  getById: {
-    url: `${vansRoutesDefault}/`
+  getByPlate: {
+    url: `${vansRoutesDefault}/plate`
+  },
+  getByUserId: {
+    url: `${vansRoutesDefault}/user`
   },
   create: {
     url: `${vansRoutesDefault}/`

src/pages/MinhasVans.tsx

@@ -0,0 +1,118 @@
+import { IonBackButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToast, IonToolbar } from '@ionic/react';
+import { Color } from '@ionic/react/node_modules/@ionic/core';
+import { carOutline } from 'ionicons/icons';
+import { useContext, useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router';
+
+import { UserContext } from '../App';
+
+import * as vansRoutes from '../services/api/vans';
+
+import sessionsService from '../services/functions/sessionsService'
+
+interface VanInfo {
+  plate: string;
+  brand: string;
+  model: string;
+  seats_number: string;
+  document_status: boolean,
+  locator_name: string;
+  locator_address: string;
+  locator_complement: string;
+  locator_city: string;
+  locator_state: string;
+}
+
+const MinhasVans: React.FC = () => {
+  const history = useHistory();
+
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastColor, setToastColor] = useState<Color>("primary");
+
+  const [userVans, setUserVans] = useState<VanInfo[]>();
+
+  const redirectUserToLogin = () => {
+    history.push({ pathname: '/login' });
+  }
+
+  useEffect(() => {
+    const getUserVans = async () => {
+      let userId = ''
+
+      const refreshSessionRes = await sessionsService.refreshSession()
+  
+      if (refreshSessionRes.error) {
+        redirectUserToLogin()
+        return
+      }
+  
+      if (refreshSessionRes.userId) {
+        userId = refreshSessionRes.userId
+      }
+
+      vansRoutes.getByUserId(userId).then(response => {
+        if (response.status === 'error') {
+          setToastColor("danger")
+          setToastMessage(response.message);
+          setShowToast(true);
+  
+          return
+        }
+  
+        setUserVans(response.data)
+      }).catch((err) => {
+        setToastColor("danger")
+        setToastMessage(err);
+        setShowToast(true);
+      })
+    }
+
+    getUserVans()
+  }, [])
+  
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Minhas vans</IonTitle>
+            <IonButtons slot="start">
+              <IonBackButton defaultHref="/perfil" />
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+      
+        <IonContent>
+          { userVans ? userVans.map((van, index) => {
+            return (
+              <IonCard key={index}>
+              <IonCardHeader>
+                <IonCardTitle>{van.plate}</IonCardTitle>
+                <IonCardSubtitle>{van.brand} - {van.model}</IonCardSubtitle>
+              </IonCardHeader>
+                { van.locator_name ?
+                  <>
+                    <IonCardContent>{van.seats_number} assentos - Locador: {van.locator_name}</IonCardContent>
+                  </> :
+                  <>
+                    <IonCardContent>{van.seats_number} assentos - Não é alugado</IonCardContent>
+                  </>
+                }
+              </IonCard>
+            )
+          }) : <></>}
+
+          <IonToast
+            position="top"
+            color={toastColor}
+            isOpen={showToast}
+            onDidDismiss={() => setShowToast(false)}
+            message={toastMessage}
+            duration={2500}
+          />
+        </IonContent>
+    </IonPage>
+  );
+};
+
+export default MinhasVans;

src/pages/Perfil.tsx

@@ -78,7 +78,6 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
   );
 
   const redirectUserToLogin = () => {
-    // TODO, não impede o usuário de retornar a página de login
     history.push({ pathname: '/login' });
     setToastMessage("Por favor, autentique-se!");
     setShowToast(true);
@@ -271,6 +270,10 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
                 <IonIcon icon={carOutline} slot="start" />
                 <IonLabel>Cadastrar Van</IonLabel>
               </IonItem>
+              <IonItem button onClick={() => history.push({ pathname: '/minhas-vans'})}>
+                <IonIcon icon={carOutline} slot="start" />
+                <IonLabel>Minhas Vans</IonLabel>
+              </IonItem>
               <IonItem>
                 <IonIcon icon={cardOutline} slot="start" />
                 <IonLabel>Pagamentos</IonLabel>

src/pages/PerfilEditar.tsx

@@ -96,9 +96,13 @@ const PerfilEditar: React.FC = () => {
         return
       }
 
-      setToastColor("success")
-      setMessageToast(response.message);
-      setShowToast(true);
+      history.push({ pathname: '/perfil', state: {
+        redirectData: {
+          showToastMessage: true,
+          toastColor: "success",
+          toastMessage: response.message,
+        },
+      }})
     }).catch((err) => {
       setToastColor("danger")
       setMessageToast(err);

src/services/api/vans.ts

@@ -17,10 +17,20 @@ function updateHeader() {
   };
 }
 
-export async function getById(vanId: string) {
+export async function getByPlate(vanId: string) {
   updateHeader();
 
-  const response = await instance.get(vansRoutes.getById.url + `/${vanId}`, {
+  const response = await instance.get(vansRoutes.getByPlate.url + `/${vanId}`, {
+    headers: header,
+  });
+
+  return response.data;
+}
+
+export async function getByUserId(userId: string) {
+  updateHeader();
+
+  const response = await instance.get(vansRoutes.getByUserId.url + `/${userId}`, {
     headers: header,
   });