mirror of
https://github.com/ditkrg/AuthorizationServerDemos.git
synced 2026-01-23 02:37:00 +00:00
Renders out the vehicles
This commit is contained in:
Vazhin Tayeb
parent
098808a19c
commit
2993db6e54
@ -1,73 +1,14 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import * as apiService from "../services/apiService";
|
||||
import { useSelector } from "react-redux";
|
||||
import { prettifyJson } from "../utils/jsonUtils";
|
||||
import React from "react";
|
||||
import Navbar from "./components/Navbar";
|
||||
import Main from "./components/Main";
|
||||
import VehiclesMain from "./components/VehiclesMain";
|
||||
|
||||
const YourVehicles = () => {
|
||||
const user = useSelector((state) => state.auth.user);
|
||||
const [vehicleData, setVehicleData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
getVehicles();
|
||||
}, []);
|
||||
|
||||
async function getVehicles() {
|
||||
console.log(user);
|
||||
const vehicles = await apiService.getVehiclesFromApi(user.access_token);
|
||||
setVehicleData(vehicles);
|
||||
}
|
||||
|
||||
function getType(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return "Sedan";
|
||||
case 2:
|
||||
return "SUV";
|
||||
case 3:
|
||||
return "Pickup";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen">
|
||||
<div className="h-screen overflow-hidden">
|
||||
<Navbar />
|
||||
<Main
|
||||
Component={() => <h1>hello world! this is the "Your Vehicles Page"</h1>}
|
||||
/>
|
||||
<Main Component={VehiclesMain} />
|
||||
</div>
|
||||
// <>
|
||||
// <h1>Traffic Police</h1>
|
||||
// <p>Hello, {user.profile.given_name}.</p>
|
||||
|
||||
// <h3>Your Vehicles:</h3>
|
||||
// {vehicleData ? (
|
||||
// <ul>
|
||||
// {vehicleData.map((v) => (
|
||||
// <li key={v.id}>
|
||||
// {v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}
|
||||
// </li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// ) : (
|
||||
// <p>No vehicles yet :(</p>
|
||||
// )}
|
||||
// <pre>
|
||||
// <code>
|
||||
// {prettifyJson(vehicleData ? vehicleData : "No vehicles yet :(")}
|
||||
// </code>
|
||||
// </pre>
|
||||
// <p>
|
||||
// <a
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// href="https://github.com/tappyy/react-IS4-auth-demo"
|
||||
// >
|
||||
// Github Repo
|
||||
// </a>
|
||||
// </p>
|
||||
// </>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
const Button = ({onClickEvent}) => (
|
||||
<button onClick={onClickEvent} className="bg-blue-custom border-0 font-inter font-semibold rounded text-xl m-0">
|
||||
Login
|
||||
const Button = ({ onClickEvent, text }) => (
|
||||
<button
|
||||
onClick={onClickEvent}
|
||||
className="bg-blue-custom border-0 font-inter font-semibold rounded text-xl m-0"
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
);
|
||||
|
||||
|
||||
12
React/src/pages/components/Heading1.js
Normal file
12
React/src/pages/components/Heading1.js
Normal file
@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
|
||||
const Heading1 = ({ text, classes = "", styles = {} }) => (
|
||||
<h1
|
||||
className={`font-playfair text-black-custom text-6xl mb-12 ${classes}`}
|
||||
style={{ ...styles }}
|
||||
>
|
||||
{text}
|
||||
</h1>
|
||||
);
|
||||
|
||||
export default Heading1;
|
||||
@ -2,6 +2,7 @@ import React from "react";
|
||||
import Button from "./Button";
|
||||
import { storeUser } from "../../actions/authActions";
|
||||
import store from "../../store";
|
||||
import Heading1 from "./Heading1";
|
||||
|
||||
const LoginWindow = () => {
|
||||
const onUserLogin = () => {
|
||||
@ -12,13 +13,12 @@ const LoginWindow = () => {
|
||||
|
||||
return (
|
||||
<div className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-40 sm:py-36 px-20 py-16">
|
||||
<h1 className="font-playfair text-black-custom text-6xl mb-12">
|
||||
Traffic Police Service
|
||||
</h1>
|
||||
<Heading1 text={"Traffic Police Service"} />
|
||||
|
||||
<p className="text-black-custom font-light text-3xl mb-20">
|
||||
Login to your account to view your dashboard and register a new vehicle.
|
||||
</p>
|
||||
<Button onClickEvent={onUserLogin} />
|
||||
<Button onClickEvent={onUserLogin} text={"Login"} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
const Main = ({ Component }) => {
|
||||
const Main = ({ Component, styles = {} }) => {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-4/5">
|
||||
<div
|
||||
className="flex flex-col items-center justify-center h-4/5"
|
||||
style={{ ...styles }}
|
||||
>
|
||||
<Component />
|
||||
</div>
|
||||
);
|
||||
|
||||
131
React/src/pages/components/VehiclesMain.js
Normal file
131
React/src/pages/components/VehiclesMain.js
Normal file
@ -0,0 +1,131 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import * as apiService from "../../services/apiService";
|
||||
import { prettifyJson } from "../../utils/jsonUtils";
|
||||
import Heading1 from "./Heading1";
|
||||
import Button from "./Button";
|
||||
|
||||
const VehiclesMain = () => {
|
||||
const user = useSelector((state) => state.auth.user);
|
||||
|
||||
// Initial state must be null ** Temporary **
|
||||
const [vehicleData, setVehicleData] = useState([
|
||||
{
|
||||
id: Math.floor(Math.random() * 200) + 1,
|
||||
color: "White",
|
||||
model: "Toyota Camry",
|
||||
licensePlate: "14324235",
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
id: Math.floor(Math.random() * 200) + 1,
|
||||
color: "Black",
|
||||
model: "Honda Accord",
|
||||
licensePlate: "8765658",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
id: Math.floor(Math.random() * 200) + 1,
|
||||
color: "Beige",
|
||||
model: "Toyota Corolla",
|
||||
licensePlate: "235464",
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
id: Math.floor(Math.random() * 200) + 1,
|
||||
color: "Grey",
|
||||
model: "Toyota Yaris",
|
||||
licensePlate: "1878767",
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
id: Math.floor(Math.random() * 200) + 1,
|
||||
color: "White",
|
||||
model: "Toyota Camry",
|
||||
licensePlate: "9956443",
|
||||
type: 1,
|
||||
},
|
||||
|
||||
{
|
||||
id: Math.floor(Math.random() * 200) + 1,
|
||||
color: "White",
|
||||
model: "Toyota Camry",
|
||||
licensePlate: "9956443",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
id: Math.floor(Math.random() * 200) + 1,
|
||||
color: "White",
|
||||
model: "Toyota Camry",
|
||||
licensePlate: "9956443",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
id: Math.floor(Math.random() * 200) + 1,
|
||||
color: "White",
|
||||
model: "Toyota Camry",
|
||||
licensePlate: "9956443",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
id: Math.floor(Math.random() * 200) + 1,
|
||||
color: "White",
|
||||
model: "Toyota Camry",
|
||||
licensePlate: "9956443",
|
||||
type: 1,
|
||||
},
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
getVehicles();
|
||||
}, []);
|
||||
|
||||
async function getVehicles() {
|
||||
console.log(user);
|
||||
const vehicles = await apiService.getVehiclesFromApi(user.access_token);
|
||||
setVehicleData(vehicles);
|
||||
}
|
||||
|
||||
function getType(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return "Sedan";
|
||||
case 2:
|
||||
return "SUV";
|
||||
case 3:
|
||||
return "Pickup";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<Heading1
|
||||
text={"Traffic Police Service"}
|
||||
styles={{ marginBottom: "0", marginTop: "20%" }}
|
||||
/>
|
||||
{/* <p>Hello, {user.profile.given_name}.</p> */}
|
||||
{vehicleData ? (
|
||||
<>
|
||||
<h3 className="font-light font-inter text-black-custom my-20 self-start">
|
||||
Your Vehicles:
|
||||
</h3>
|
||||
|
||||
<ul>
|
||||
{vehicleData.map((v) => (
|
||||
<li key={v.id}>
|
||||
{v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
) : (
|
||||
<h3 className="font-light font-inter text-black-custom my-32 self-center">
|
||||
No vehicles yet.
|
||||
</h3>
|
||||
)}
|
||||
<Button text={"Register A Vehicle"} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VehiclesMain;
|
||||
Loading…
Reference in New Issue
Block a user