From be69a644746f61d206d9edd95d0e228ba3505abc Mon Sep 17 00:00:00 2001
From: Vazhin Tayeb <vazhintayeb@gmail.com>
Date: Fri, 15 Jan 2021 13:27:44 +0300
Subject: [PATCH] Abstracts away the input texts

---
 React/src/pages/components/Card.js            |  7 +-
 React/src/pages/components/Heading3.js        | 14 ++++
 .../pages/components/VehicleRegisterForm.js   | 83 ++++++++++---------
 React/src/pages/components/VehiclesMain.js    | 10 ++-
 .../pages/components/inputs/InputSelect.js    |  7 ++
 .../src/pages/components/inputs/InputText.js  | 12 +++
 6 files changed, 88 insertions(+), 45 deletions(-)
 create mode 100644 React/src/pages/components/Heading3.js
 create mode 100644 React/src/pages/components/inputs/InputSelect.js
 create mode 100644 React/src/pages/components/inputs/InputText.js

diff --git a/React/src/pages/components/Card.js b/React/src/pages/components/Card.js
index 6102fa1..3c22a51 100644
--- a/React/src/pages/components/Card.js
+++ b/React/src/pages/components/Card.js
@@ -1,8 +1,11 @@
 import React from "react";
 
-const Card = ({ children }) => {
+const Card = ({ children, styles = {} }) => {
   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-36 sm:py-36 px-20 py-16 mt-20">
+    <div
+      style={{ ...styles }}
+      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-36 sm:py-36 px-20 py-16 my-20"
+    >
       {children}
     </div>
   );
diff --git a/React/src/pages/components/Heading3.js b/React/src/pages/components/Heading3.js
new file mode 100644
index 0000000..8a32395
--- /dev/null
+++ b/React/src/pages/components/Heading3.js
@@ -0,0 +1,14 @@
+import React from "react";
+
+const Heading3 = ({ children, styles = {} }) => {
+  return (
+    <h3
+      style={{ ...styles }}
+      className="font-light font-inter text-black-custom my-20 self-start"
+    >
+      {children}
+    </h3>
+  );
+};
+
+export default Heading3;
diff --git a/React/src/pages/components/VehicleRegisterForm.js b/React/src/pages/components/VehicleRegisterForm.js
index 92afd1d..16c0168 100644
--- a/React/src/pages/components/VehicleRegisterForm.js
+++ b/React/src/pages/components/VehicleRegisterForm.js
@@ -4,6 +4,12 @@ import { useSelector } from "react-redux";
 // Services
 import * as apiService from "../../services/apiService";
 
+// Components
+import Card from "./Card";
+import Heading3 from "./Heading3";
+import Button from "./Button";
+import InputText from "./inputs/InputText";
+
 const VehicleRegisterForm = () => {
   const [model, setModel] = useState("");
   const [licensePlate, setlicensePlate] = useState("");
@@ -21,46 +27,45 @@ const VehicleRegisterForm = () => {
   }
 
   return (
-    <form onSubmit={(e) => e.preventDefault()}>
-      <h3>Register Vehicle:</h3>
-      <div className="form-group">
-        <label>Model: </label>
-        <input
-          value={model}
-          type="text"
-          name="model"
-          onChange={(e) => setModel(e.target.value)}
-        />
-        <label>License Plate: </label>
-        <input
-          value={licensePlate}
-          type="text"
-          name="licensePlate"
-          onChange={(e) => setlicensePlate(e.target.value)}
-        />
-        <label>Color: </label>
-        <input
-          value={color}
-          type="text"
-          name="color"
-          onChange={(e) => setColor(e.target.value)}
-        />
-        <label>Type: </label>
-        <select
-          value={type}
-          name="type"
-          onChange={(e) => setType(e.target.value)}
-        >
-          <option value="1">Sedan</option>
-          <option value="2">SUV</option>
-          <option value="3">Pickup</option>
-        </select>
-      </div>
+    <Card styles={{ padding: "60px" }}>
+      <form onSubmit={(e) => e.preventDefault()} className="m-0 flex flex-col">
+        <Heading3 styles={{ marginTop: "0" }}>Register A Vehicle</Heading3>
 
-      <button className="btn" onClick={() => registerVehicle()}>
-        Register
-      </button>
-    </form>
+        <div className="flex flex-col">
+          <InputText
+            label="Model"
+            value={model}
+            name="model"
+            onChangeEvent={(e) => setModel(e.target.value)}
+          />
+          <InputText
+            label="License Plate"
+            value={licensePlate}
+            name="licensePlate"
+            onChangeEvent={(e) => setlicensePlate(e.target.value)}
+          />
+          <InputText
+            label="Color"
+            value={color}
+            name="color"
+            onChangeEvent={(e) => setColor(e.target.value)}
+          />
+
+          <label>Type: </label>
+          <select
+            value={type}
+            name="type"
+            onChange={(e) => setType(e.target.value)}
+          >
+            <option value="1">Sedan</option>
+            <option value="2">SUV</option>
+            <option value="3">Pickup</option>
+          </select>
+        </div>
+
+        <Button text="Register" onClickEvent={registerVehicle} />
+      </form>
+    </Card>
   );
 };
 
diff --git a/React/src/pages/components/VehiclesMain.js b/React/src/pages/components/VehiclesMain.js
index cafa2a0..4f9d1b8 100644
--- a/React/src/pages/components/VehiclesMain.js
+++ b/React/src/pages/components/VehiclesMain.js
@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
+
+// Services
 import * as apiService from "../../services/apiService";
+
+// Components
 import Heading1 from "./Heading1";
+import Heading3 from "./Heading3";
 import Button from "./Button";
 import Table from "./table/Table";
 
@@ -70,10 +75,7 @@ const VehiclesMain = () => {
       {/* <p>Hello, {user.profile.given_name}.</p> */}
       {vehicleData ? (
         <>
-          <h3 className="font-light font-inter text-black-custom my-20 self-start">
-            Your Vehicles:
-          </h3>
-
+          <Heading3>Your Vehicles:</Heading3>
           <Table vehicleData={vehicleData} />
         </>
       ) : (
diff --git a/React/src/pages/components/inputs/InputSelect.js b/React/src/pages/components/inputs/InputSelect.js
new file mode 100644
index 0000000..2810ada
--- /dev/null
+++ b/React/src/pages/components/inputs/InputSelect.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const InputSelect = () => {
+  return <div></div>;
+};
+
+export default InputSelect;
diff --git a/React/src/pages/components/inputs/InputText.js b/React/src/pages/components/inputs/InputText.js
new file mode 100644
index 0000000..7ec2a63
--- /dev/null
+++ b/React/src/pages/components/inputs/InputText.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const InputText = ({ label, value, name, onChangeEvent }) => {
+  return (
+    <div>
+      <label>{label}</label>
+      <input value={value} type="text" name={name} onChange={onChangeEvent} />
+    </div>
+  );
+};
+
+export default InputText;