seperate fuel purchase modal into class of it own.

begin stubbing out api

back-end/app/main.py

@@ -1,7 +1,10 @@
 from fastapi import FastAPI
+from routers import vehicleInformation
 
 app = FastAPI()
 
+app.include_router(vehicleInformation.router)
+
 @app.get("/")
 async def root():
     return {"message": "Hello World!"}

back-end/app/routers/vehicleInformation.py

@@ -0,0 +1,9 @@
+from fastapi import APIRouter
+
+router = APIRouter(
+    prefix="/vehicle"
+)
+
+@router.get('/{vehicleId}/vin')
+async def get_vehicle_vin(vehicleId: str):
+    return ""

front-end/src/components/FleetManager-Components/FuelPurchases.js

@@ -9,7 +9,7 @@ export default class FuelPurchases extends Component {
 
         this.state = {
             expanded: false,
-            showModal: true
+            showModal: true,
         }
     }
 
@@ -43,7 +43,34 @@ export default class FuelPurchases extends Component {
 
                 {
                     (this.state.showModal)
-                    ? (
+                    ? <FuelPurchaseModal setShowModal={this.setShowModal} /> : null
+                }
+            </>
+        )
+    }
+}
+
+class FuelPurchaseModal extends Component {
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      date: '',
+      amount: 0.000,
+      cost: 0.00
+    }
+  }
+
+  handleChange = (event) => {
+    this.setState({
+      [event.target.id]: event.target.value
+    })
+  }
+
+  render() {
+
+    return (
       <>
         <div
           className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
@@ -68,15 +95,15 @@ export default class FuelPurchases extends Component {
               {/*body*/}
               <div className="relative p-6 flex-auto">
                 <div className="flex flex-col">
-                                    <input type="date"/>
+                  <input className="border" id="date" type="date" value={this.state.date} onChange={this.handleChange}/>
                   <div>Date</div>
                 </div>
                 <div className="flex flex-col">
-                                    <input type="number" step="0.001" className="border" />
+                  <input id="amount" type="number" step="0.001" className="border" value={this.state.amount} onChange={this.handleChange}/>
                   Fuel Purchased
                 </div>
                 <div className="flex flex-col">
-                                    <input type="number" step="0.01" className="border" />
+                  <input id="cost" type="number" step="0.01" className="border" value={this.state.cost} onChange={this.handleChange}/>
                   Total Cost
                 </div>
               </div>
@@ -85,14 +112,14 @@ export default class FuelPurchases extends Component {
                 <button
                   className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                   type="button"
-                                    onClick={() => this.setShowModal(false)}
+                  onClick={() => this.props.setShowModal(false)}
                 >
                   Close
                 </button>
                 <button
                   className="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                   type="button"
-                                    onClick={() => this.setShowModal(false)}
+                  onClick={() => this.props.setShowModal(false)}
                 >
                   Add
                 </button>
@@ -102,9 +129,6 @@ export default class FuelPurchases extends Component {
         </div>
         <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
       </>
-                      ) : null
-                }
-            </>
     )
   }
 }