Refatora conteúdo da página MeusVeiculos

This commit is contained in:
Matheus Albino Brunhara
2022-09-03 16:42:39 -03:00
parent 086f39b2e4
commit dabb42eafc

View File

@@ -29,7 +29,7 @@ import sessionsService from "../services/functions/sessionsService";
import { closeToast } from "../services/utils"; import { closeToast } from "../services/utils";
import { PageHeader } from "../components/PageHeader"; import { PageHeader } from "../components/PageHeader";
interface VanInfo { interface VehicleInfo {
plate: string; plate: string;
brand: string; brand: string;
model: string; model: string;
@@ -42,21 +42,21 @@ interface VanInfo {
locator_state: string; locator_state: string;
} }
const MinhasVans: React.FC = () => { const MeusVeiculos: React.FC = () => {
const history = useHistory(); const history = useHistory();
const [showToast, setShowToast] = useState(false); const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState(""); const [toastMessage, setToastMessage] = useState("");
const [toastColor, setToastColor] = useState<Color>("primary"); const [toastColor, setToastColor] = useState<Color>("primary");
const [userVans, setUserVans] = useState<VanInfo[]>(); const [vehiclesList, setVehiclesList] = useState<VehicleInfo[]>();
const redirectUserToLogin = () => { const redirectUserToLogin = () => {
history.push({ pathname: "/login" }); history.push({ pathname: "/login" });
}; };
useEffect(() => { useEffect(() => {
const getUserVans = async () => { const getUserVehiclesList = async () => {
let userId = ""; let userId = "";
const refreshSessionRes = await sessionsService.refreshSession(); const refreshSessionRes = await sessionsService.refreshSession();
@@ -81,7 +81,7 @@ const MinhasVans: React.FC = () => {
return; return;
} }
setUserVans(response.data); setVehiclesList(response.data);
}) })
.catch((err) => { .catch((err) => {
setToastColor("danger"); setToastColor("danger");
@@ -90,37 +90,37 @@ const MinhasVans: React.FC = () => {
}); });
}; };
getUserVans(); getUserVehiclesList();
}, []); }, []);
return ( return (
<IonPage> <IonPage>
<PageHeader <PageHeader
pageName="Minhas vans" pageName="Meus veículos"
backButtonPageUrl="/perfil" backButtonPageUrl="/perfil"
></PageHeader> ></PageHeader>
<IonContent> <IonContent>
{userVans ? ( {vehiclesList ? (
userVans.map((van, index) => { vehiclesList.map((vehicle, index) => {
return ( return (
<IonCard key={index}> <IonCard key={index}>
<IonCardHeader> <IonCardHeader>
<IonCardTitle>{van.plate}</IonCardTitle> <IonCardTitle>{vehicle.plate}</IonCardTitle>
<IonCardSubtitle> <IonCardSubtitle>
{van.brand} - {van.model} {vehicle.brand} - {vehicle.model}
</IonCardSubtitle> </IonCardSubtitle>
</IonCardHeader> </IonCardHeader>
{van.locator_name ? ( {vehicle.locator_name ? (
<> <>
<IonCardContent> <IonCardContent>
{van.seats_number} assentos - Locador: {van.locator_name} {vehicle.seats_number} assentos - Locador: {vehicle.locator_name}
</IonCardContent> </IonCardContent>
</> </>
) : ( ) : (
<> <>
<IonCardContent> <IonCardContent>
{van.seats_number} assentos - Não é alugado {vehicle.seats_number} assentos - Não é alugado
</IonCardContent> </IonCardContent>
</> </>
)} )}
@@ -144,4 +144,4 @@ const MinhasVans: React.FC = () => {
); );
}; };
export default MinhasVans; export default MeusVeiculos;