Abstracts away the Card component

React/package-lock.json

@@ -8280,14 +8280,6 @@
         "brorand": "^1.0.1"
       }
     },
-    "milligram": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/milligram/-/milligram-1.3.0.tgz",
-      "integrity": "sha1-pdmA746veTN8lqjXx+F2dkkxBCw=",
-      "requires": {
-        "normalize.css": "~5.0.0"
-      }
-    },
     "mime": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
@@ -8708,11 +8700,6 @@
         "sort-keys": "^1.0.0"
       }
     },
-    "normalize.css": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-5.0.0.tgz",
-      "integrity": "sha1-fOyHXOgXilMzxN6Ato6pwYudfDc="
-    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",

React/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
-    "milligram": "^1.3.0",
     "oidc-client": "^1.9.1",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",

React/src/App.js

@@ -37,7 +37,7 @@ function App() {
             <Route path="/login" component={Login} />
             <Route path="/signout-oidc" component={SignoutOidc} />
             <Route path="/signin-oidc" component={SigninOidc} />
-            <PrivateRoute exact path="/" component={Home} />
+            <PrivateRoute path="/" component={Home} />
           </Switch>
         </Router>
       </AuthProvider>

React/src/pages/RegisterVehicle.js

@@ -1,66 +1,14 @@
-import React, { useState } from "react";
-import { useSelector } from "react-redux";
-import * as apiService from "../services/apiService";
+import React from "react";
+import VehicleRegisterForm from "./components/VehicleRegisterForm";
+import Navbar from "./components/Navbar";
+import Main from "./components/Main";
 
 const RegisterVehicle = () => {
-  const [model, setModel] = useState("");
-  const [licensePlate, setlicensePlate] = useState("");
-  const [color, setColor] = useState("White");
-  const [type, setType] = useState(1);
-
-  const user = useSelector((state) => state.auth.user);
-
-  async function registerVehicle() {
-    await apiService.registerVehicle(
-      { model, licensePlate, color, type },
-      user.access_token
-    );
-    // await getVehicles();
-  }
-
   return (
-    <>
-      <h3>Register Vehicle:</h3>
-      <form onSubmit={(e) => e.preventDefault()}>
-        <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>
+      <Navbar />
+      <Main Component={VehicleRegisterForm} />
     </div>
-
-        <button className="btn" onClick={() => registerVehicle()}>
-          Register
-        </button>
-      </form>
-    </>
   );
 };
 

React/src/pages/components/Card.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Card = ({ component: Component }) => {
+  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">
+      <Component />
+    </div>
+  );
+};
+
+export default Card;

React/src/pages/components/LoginWindow.js

@@ -3,8 +3,9 @@ import Button from "./Button";
 import { storeUser } from "../../actions/authActions";
 import store from "../../store";
 import Heading1 from "./Heading1";
+import Card from "./Card";
 
-const LoginWindow = () => {
+const LoginContent = () => {
   const onUserLogin = () => {
     const user = { profile: { given_name: "John Doe" } };
     console.log(`User logged in!`);
@@ -12,15 +13,19 @@ 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-36 sm:py-36 px-20 py-16 mt-20">
+    <>
       <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} text={"Login"} />
-    </div>
+    </>
   );
 };
 
+const LoginWindow = () => {
+  return <Card component={LoginContent} />;
+};
+
 export default LoginWindow;

React/src/pages/components/VehicleRegisterForm.js

@@ -1,9 +1,65 @@
-import React from 'react';
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import * as apiService from "../../services/apiService";
 
-const VehicleRegisterForm = () => (
-  <form className="w-64 flex flex-col justify-center shadow">
-    <h3>Register A Vehicle</h3>
+const VehicleRegisterForm = () => {
+  const [model, setModel] = useState("");
+  const [licensePlate, setlicensePlate] = useState("");
+  const [color, setColor] = useState("White");
+  const [type, setType] = useState(1);
+
+  const user = useSelector((state) => state.auth.user);
+
+  async function registerVehicle() {
+    await apiService.registerVehicle(
+      { model, licensePlate, color, type },
+      user.access_token
+    );
+    // await getVehicles();
+  }
+
+  return (
+    <form onSubmit={(e) => e.preventDefault()} className="shadow">
+      <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>
+
+      <button className="btn" onClick={() => registerVehicle()}>
+        Register
+      </button>
     </form>
   );
+};
 
 export default VehicleRegisterForm;