From 2993db6e54d542dc076ef1fd9c0ff4406cfe4876 Mon Sep 17 00:00:00 2001
From: Vazhin Tayeb <vazhintayeb@gmail.com>
Date: Fri, 15 Jan 2021 07:15:45 +0300
Subject: [PATCH] Renders out the vehicles

---
 React/src/pages/YourVehicles.js            |  67 +----------
 React/src/pages/components/Button.js       |  11 +-
 React/src/pages/components/Heading1.js     |  12 ++
 React/src/pages/components/LoginWindow.js  |   8 +-
 React/src/pages/components/Main.js         |   9 +-
 React/src/pages/components/VehiclesMain.js | 131 +++++++++++++++++++++
 6 files changed, 164 insertions(+), 74 deletions(-)
 create mode 100644 React/src/pages/components/Heading1.js
 create mode 100644 React/src/pages/components/VehiclesMain.js

diff --git a/React/src/pages/YourVehicles.js b/React/src/pages/YourVehicles.js
index 76cc69d..305c3a3 100644
--- a/React/src/pages/YourVehicles.js
+++ b/React/src/pages/YourVehicles.js
@@ -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>
-    // </>
   );
 };
 
diff --git a/React/src/pages/components/Button.js b/React/src/pages/components/Button.js
index 09f932f..2f43dda 100644
--- a/React/src/pages/components/Button.js
+++ b/React/src/pages/components/Button.js
@@ -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>
 );
 
diff --git a/React/src/pages/components/Heading1.js b/React/src/pages/components/Heading1.js
new file mode 100644
index 0000000..915fd7f
--- /dev/null
+++ b/React/src/pages/components/Heading1.js
@@ -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;
diff --git a/React/src/pages/components/LoginWindow.js b/React/src/pages/components/LoginWindow.js
index 9dc754e..a2d5df8 100644
--- a/React/src/pages/components/LoginWindow.js
+++ b/React/src/pages/components/LoginWindow.js
@@ -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>
   );
 };
diff --git a/React/src/pages/components/Main.js b/React/src/pages/components/Main.js
index 066454d..52318a4 100644
--- a/React/src/pages/components/Main.js
+++ b/React/src/pages/components/Main.js
@@ -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>
   );
diff --git a/React/src/pages/components/VehiclesMain.js b/React/src/pages/components/VehiclesMain.js
new file mode 100644
index 0000000..4647b02
--- /dev/null
+++ b/React/src/pages/components/VehiclesMain.js
@@ -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;