styled and added basic functionality to TransportForm

1 files changed, 34 insertions, 30 deletions

diff --git a/src/components/Form/Transport/TransportForm.tsx b/src/components/Form/Transport/TransportForm.tsx
index 0611cc1..60dfee3 100644
--- a/src/components/Form/Transport/TransportForm.tsx
+++ b/src/components/Form/Transport/TransportForm.tsx
@@ -6,11 +6,12 @@
  * Copyright (c) 2021 Vidhu Kant Sharma
 */
 
-import React, { useState } from "react";
+import React, { useState, Dispatch, SetStateAction } from "react";
 import { Transport } from "./../../../interfaces"
 
 interface Props {
-  setVisibility: any // this component's visibility
+  setVisibility: Dispatch<SetStateAction<boolean>> // this component's visibility
+  setTransporter: Dispatch<SetStateAction<Transport>>
 }
 
 const TransportForm: React.FC<Props> = (props) => {
@@ -23,7 +24,6 @@ const TransportForm: React.FC<Props> = (props) => {
   const hideSelf = () =>
     props.setVisibility(false);
 
-
   const closeOnBGClicked = (event: any) =>
     event.target.className === "floatingMenuBG" && hideSelf();
 
@@ -37,7 +37,7 @@ const TransportForm: React.FC<Props> = (props) => {
       GSTIN: transporterGSTIN,
       Builty: builtyNumber
     }
-    console.log(newTransport);
+    props.setTransporter(newTransport);
 
     hideSelf();
   }
@@ -45,37 +45,41 @@ const TransportForm: React.FC<Props> = (props) => {
   return (
     <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
       <form className={"smallFloatingMenu TransportForm"} onSubmit={handleSubmit}>
-        <label>
-          Transporter Name: <input className={"wideInputBox"} type="text" value={transporterName} onChange={
-              (event) => (setTransporterName(event.target.value))
-            }/>
-        </label>
+        <div className={"inputs"}>
+          <label>
+            Transporter Name: <input className={"wideInputBox"} type="text" value={transporterName} onChange={
+                (event) => (setTransporterName(event.target.value))
+              }/>
+          </label>
 
-        <label>
-          Vehicle Number: <input className={"wideInputBox"} type="text" value={vehicleNum} onChange={
-              (event) => (setVehicleNum(event.target.value))
-              } required />
-        </label>
+          <label>
+            Vehicle Number: <input className={"wideInputBox"} type="text" value={vehicleNum} onChange={
+                (event) => (setVehicleNum(event.target.value))
+                } required />
+          </label>
 
-        <label>
-          Transport Method: <input className={"wideInputBox"} type="text" value={transportMethod} onChange={
-              (event) => (setTransportMethod(event.target.value))
-            } required />
-        </label>
+          <label>
+            Transport Method: <input className={"wideInputBox"} type="text" value={transportMethod} onChange={
+                (event) => (setTransportMethod(event.target.value))
+              } required />
+          </label>
 
-        <label>
-          Transporter GSTIN: <input className={"wideInputBox"} type="text" value={transporterGSTIN} onChange={
-              (event) => (setTransporterGSTIN(event.target.value))
-            }/>
-        </label>
+          <label>
+            Transporter GSTIN: <input className={"wideInputBox"} type="text" value={transporterGSTIN} onChange={
+                (event) => (setTransporterGSTIN(event.target.value))
+              }/>
+          </label>
 
-        <label>
-          Builty Number: <input className={"wideInputBox"} type="text" value={builtyNumber} onChange={
-              (event) => (setBuiltyNumber(event.target.value))
-            }/>
-        </label>
+          <label>
+            Builty Number: <input className={"wideInputBox"} type="text" value={builtyNumber} onChange={
+                (event) => (setBuiltyNumber(event.target.value))
+              }/>
+          </label>
+        </div>
         
-        <input type="submit" value="ok"/>
+        <div className={"menu"}>
+          <input type="submit" value="ok"/>
+        </div>
       </form>
     </div>
   );