style

src/components/Vehicle.js

@@ -48,8 +48,7 @@ const Vehicle = (props) => {
         <div className="veh-col">
           <div className="veh-row-price">
             <p className="veh-text">
-              <b>Price: </b>
+              <b>PVR Price: </b>${formatNums(price)}
-              {`$${formatNums(price / 100)}.00`}
             </p>
             <p className="veh-text">
               <b>ISDM: </b>

src/components/Vehicles.js

@@ -27,7 +27,7 @@ const Vehicles = () => {
     "Prod Year",
     "Category",
     "Mileage",
-    "Pre-QRV-Price",
+    "Price",
     "Date Received",
     "Purchase Order No.",
     "Purchase Order Date",
@@ -56,9 +56,9 @@ const Vehicles = () => {
   const format = (e) => {
     e.preventDefault();
     const formatMiles = parseFloat(inputs.mileage.replace(/,/g, ""));
-    const formatPrice = parseFloat(inputs.price.replace(/,/g, "") * 100);
+    const formatPrice = parseFloat(inputs["Price"].replace(/,/g, "") * 100);
     inputs.Mileage = formatMiles;
-    inputs["Pre-QRV-Price"] = formatPrice;
+    inputs["Price"] = formatPrice;
   };
 
   useEffect(() => {
@@ -88,7 +88,7 @@ const Vehicles = () => {
       if (docSnap.exists()) {
         const newcar = docSnap.data();
         newcar.id = docSnap._key.path.segments[1];
-        setfetchedVeh([newcar]);
+        setfetchedVeh(newcar);
       } else {
         console.log("DB item does not exist");
       }
@@ -106,7 +106,7 @@ const Vehicles = () => {
     const year = inputs["Prod Year"];
     const cat = inputs.Category;
     const miles = inputs.Mileage;
-    const price = inputs["Pre-QRV-Price"];
+    const price = inputs["Price"];
     const date = inputs["Date Received"];
     const poNo = inputs["Purchase Order No."];
     const poDate = inputs["Purchase Order Date"];
@@ -139,7 +139,7 @@ const Vehicles = () => {
     if (!valid) {
       return;
     }
-    console.log("inputs~~~~~~~~~~", inputs);
+
     setSavedVehicles([...savedVehicles, inputs]);
     try {
       const docRef = await addDoc(collection(db, "hdepot"), inputs);
@@ -159,10 +159,8 @@ const Vehicles = () => {
       console.log(`Error deleteing vehicle from db: ${error}`);
     }
   }
-  console.log("~~~~~~~~~~~~~savedVehicles", savedVehicles);
+  console.log("~~~~~~~~~~~~~~~fetchedVehicle", fetchedVeh);
-  savedVehicles.forEach((el) => {
+
-    console.log("~~~~~~~~~~~~~el", el);
-  });
   return (
     <>
       <div className="vehicles-container">
@@ -252,22 +250,22 @@ const Vehicles = () => {
           />
         </div>
         <div>
-          {fetchedVeh &&
+          {fetchedVeh ? (
-            fetchedVeh.map((el, i) => (
             <Vehicle
-                make={el.make}
+              make={fetchedVeh.Make}
-                model={el.model}
+              model={fetchedVeh.Model}
-                key={`${el.model}${i}`}
+              trim={fetchedVeh.Trim}
-                trim={el.trim}
+              color={fetchedVeh.Color}
-                color={el.color}
+              year={fetchedVeh.Year}
-                year={el.year}
+              category={fetchedVeh.Category}
-                category={el.category}
+              mileage={fetchedVeh.Mileage}
-                mileage={el.mileage}
+              price={fetchedVeh.Price}
-                price={el.price}
+              id={fetchedVeh.id}
-                id={el.id}
               onClick={deleteData}
             />
-            ))}
+          ) : (
+            <></>
+          )}
         </div>
       </div>
     </>

src/styles/App.css

@@ -45,12 +45,19 @@ body {
 
 .veh-col {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
 }
 
 .veh-row {
   display: flex;
   flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
 }
 
 .veh-row-price {