From eef3243eb6fc3850591a917011f3e774f4776ce2 Mon Sep 17 00:00:00 2001
From: Vazhin Tayeb <vazhintayeb@gmail.com>
Date: Fri, 15 Jan 2021 12:36:02 +0300
Subject: [PATCH] Uses composition in React to reuse components

---
 React/src/pages/components/Card.js                |  4 ++--
 React/src/pages/components/LoginWindow.js         | 10 +++-------
 React/src/pages/components/VehicleRegisterForm.js |  4 +++-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/React/src/pages/components/Card.js b/React/src/pages/components/Card.js
index b648ee3..6102fa1 100644
--- a/React/src/pages/components/Card.js
+++ b/React/src/pages/components/Card.js
@@ -1,9 +1,9 @@
 import React from "react";
 
-const Card = ({ component: Component }) => {
+const Card = ({ children }) => {
   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 />
+      {children}
     </div>
   );
 };
diff --git a/React/src/pages/components/LoginWindow.js b/React/src/pages/components/LoginWindow.js
index 8f22612..0070b48 100644
--- a/React/src/pages/components/LoginWindow.js
+++ b/React/src/pages/components/LoginWindow.js
@@ -5,7 +5,7 @@ import store from "../../store";
 import Heading1 from "./Heading1";
 import Card from "./Card";
 
-const LoginContent = () => {
+const LoginWindow = () => {
   const onUserLogin = () => {
     const user = { profile: { given_name: "John Doe" } };
     console.log(`User logged in!`);
@@ -13,19 +13,15 @@ const LoginContent = () => {
   };
 
   return (
-    <>
+    <Card>
       <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"} />
-    </>
+    </Card>
   );
 };
 
-const LoginWindow = () => {
-  return <Card component={LoginContent} />;
-};
-
 export default LoginWindow;
diff --git a/React/src/pages/components/VehicleRegisterForm.js b/React/src/pages/components/VehicleRegisterForm.js
index 7fa751a..92afd1d 100644
--- a/React/src/pages/components/VehicleRegisterForm.js
+++ b/React/src/pages/components/VehicleRegisterForm.js
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
+
+// Services
 import * as apiService from "../../services/apiService";
 
 const VehicleRegisterForm = () => {
@@ -19,7 +21,7 @@ const VehicleRegisterForm = () => {
   }
 
   return (
-    <form onSubmit={(e) => e.preventDefault()} className="shadow">
+    <form onSubmit={(e) => e.preventDefault()}>
       <h3>Register Vehicle:</h3>
       <div className="form-group">
         <label>Model: </label>