First
This commit is contained in:
Kenneth Jannette
16
src/components/Navbar.js
Normal file
16
src/components/Navbar.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
|
||||
const Navbar = (props) => {
|
||||
return (
|
||||
<div className="navBarContainer">
|
||||
<div className="navRow">
|
||||
<span className="navSpan">Home</span>
|
||||
<span className="navSpan">Edit Profile</span>
|
||||
<span className="navSpan">Edit Settings</span>
|
||||
<span className="navSpan">New Request</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
74
src/components/Vehicle.js
Normal file
74
src/components/Vehicle.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import React from "react";
|
||||
import { formatNums } from "../utilities/utilities";
|
||||
import Button from "../pageElements/button";
|
||||
|
||||
const Vehicle = (props) => {
|
||||
const { make, model, trim, color, year, category, mileage, price, id } =
|
||||
props;
|
||||
|
||||
return (
|
||||
<div className="veh-container">
|
||||
<div className="vehBox">
|
||||
<div className="veh-col">
|
||||
<div className="veh-row">
|
||||
<p className="veh-text">
|
||||
<b>Make: </b>
|
||||
{make}
|
||||
</p>
|
||||
<p className="veh-text">
|
||||
<b>Model: </b>
|
||||
{model}
|
||||
</p>
|
||||
<p className="veh-text">
|
||||
<b>Trim: </b>
|
||||
{trim}
|
||||
</p>
|
||||
<p className="veh-text">
|
||||
<b>Color: </b>
|
||||
{color}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="veh-col">
|
||||
<div className="veh-row">
|
||||
<p className="veh-text">
|
||||
<b>Year: </b>
|
||||
{year}
|
||||
</p>
|
||||
<p className="veh-text">
|
||||
<b>Category: </b>
|
||||
{category}
|
||||
</p>
|
||||
<p className="veh-text">
|
||||
<b>Mileage: </b>
|
||||
{formatNums(mileage)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="veh-col">
|
||||
<div className="veh-row-price">
|
||||
<p className="veh-text">
|
||||
<b>Price: </b>
|
||||
{`$${formatNums(price / 100)}.00`}
|
||||
</p>
|
||||
<p className="veh-text">
|
||||
<b>Id: </b>
|
||||
{id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="deleteButtonBox">
|
||||
<Button
|
||||
className="deleteButton"
|
||||
labelText="Delete Vehicle"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => props.onClick(props.id)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Vehicle;
|
||||
212
src/components/Vehicles.js
Normal file
212
src/components/Vehicles.js
Normal file
@@ -0,0 +1,212 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { db } from "../firebase.js";
|
||||
import {
|
||||
collection,
|
||||
getDoc,
|
||||
deleteDoc,
|
||||
onSnapshot,
|
||||
doc,
|
||||
addDoc,
|
||||
} from "firebase/firestore";
|
||||
import Vehicle from "./Vehicle";
|
||||
import TextInput from "../pageElements/textInput";
|
||||
import Button from "../pageElements/button";
|
||||
|
||||
const Vehicles = () => {
|
||||
const [savedVehicles, setSavedVehicles] = useState([]);
|
||||
const [inputs, setInputs] = useState({});
|
||||
const [vehId, setVehId] = useState();
|
||||
const [fetchedVeh, setfetchedVeh] = useState([]);
|
||||
const inputTypes = [
|
||||
"make",
|
||||
"model",
|
||||
"trim",
|
||||
"color",
|
||||
"year",
|
||||
"category",
|
||||
"mileage",
|
||||
"price",
|
||||
];
|
||||
const handleIdInput = (e) => setVehId(e.target.value);
|
||||
|
||||
const handleChange = (e) => {
|
||||
setInputs((prevState) => ({
|
||||
...prevState,
|
||||
[e.target.name]: e.target.value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleNumChange = (e) => {
|
||||
const value = e.target.value;
|
||||
const formattedValue = (
|
||||
Number(value.replace(/\D/g, "")) || ""
|
||||
).toLocaleString();
|
||||
setInputs((prevState) => ({
|
||||
...prevState,
|
||||
[e.target.name]: formattedValue,
|
||||
}));
|
||||
};
|
||||
|
||||
const format = (e) => {
|
||||
e.preventDefault();
|
||||
const formatMiles = parseFloat(inputs.mileage.replace(/,/g, ""));
|
||||
const formatPrice = parseFloat(inputs.price.replace(/,/g, "") * 100);
|
||||
inputs.mileage = formatMiles;
|
||||
inputs.price = formatPrice;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
onSnapshot(collection(db, "hdepot"), (snapshot) => {
|
||||
const data = snapshot.docs.map((doc) => doc.data());
|
||||
if (data) {
|
||||
const ids = snapshot.docs.map((doc) => doc.id);
|
||||
const dbVehs = data.map((item, i) => {
|
||||
return Object.assign(item, { id: ids[i] });
|
||||
});
|
||||
setSavedVehicles(dbVehs);
|
||||
} else {
|
||||
console.log("Error fetching vehicle data from database");
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(`A system error has occurred: ${error}`);
|
||||
}
|
||||
}, []);
|
||||
|
||||
async function getOneVehicle() {
|
||||
const docRef = doc(db, "hdepot", `${vehId}`);
|
||||
try {
|
||||
const docSnap = await getDoc(docRef);
|
||||
if (docSnap.exists()) {
|
||||
const newcar = docSnap.data();
|
||||
newcar.id = docSnap._key.path.segments[1];
|
||||
setfetchedVeh([newcar]);
|
||||
} else {
|
||||
console.log("DB item does not exist");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(`A system error has occurred: ${error}`);
|
||||
}
|
||||
setVehId("");
|
||||
}
|
||||
|
||||
async function addData(e) {
|
||||
e.preventDefault();
|
||||
format(e);
|
||||
setSavedVehicles([...savedVehicles, inputs]);
|
||||
try {
|
||||
const docRef = await addDoc(collection(db, "hdepot"), inputs);
|
||||
inputs.id = docRef.id;
|
||||
setSavedVehicles([...savedVehicles, inputs]);
|
||||
setInputs({});
|
||||
} catch (error) {
|
||||
console.log(`Error saving vehicle to db: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteData(e) {
|
||||
try {
|
||||
deleteDoc(doc(db, "hdepot", e));
|
||||
setfetchedVeh("");
|
||||
} catch (error) {
|
||||
console.log(`Error deleteing vehicle from db: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="vehicles-container">
|
||||
<h2 className="formHeader">Add A Vehicle to Your Queue</h2>
|
||||
<div className="vehiclesRow">
|
||||
<div className="vehiclesColumn">
|
||||
{inputTypes.map((type, i) => (
|
||||
<div className="inputContainer">
|
||||
<TextInput
|
||||
key={`${type}${i}`}
|
||||
className="text-input"
|
||||
name={type}
|
||||
placeholder={type}
|
||||
value={inputs[type] || ""}
|
||||
onChange={
|
||||
type === "mileage" || type === "price"
|
||||
? handleNumChange
|
||||
: handleChange
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="auxButton"
|
||||
labelText="Add Vehicle"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={addData}
|
||||
/>
|
||||
<div>
|
||||
{savedVehicles && (
|
||||
<h2 className="formHeader"> Your Saved Vehicles</h2>
|
||||
)}
|
||||
{savedVehicles.map((el, i) => (
|
||||
<Vehicle
|
||||
key={`${el.model}${i}`}
|
||||
make={el.make}
|
||||
model={el.model}
|
||||
trim={el.trim}
|
||||
color={el.color}
|
||||
category={el.category}
|
||||
mileage={el.mileage}
|
||||
price={el.price}
|
||||
year={el.year}
|
||||
id={el.id}
|
||||
onClick={deleteData}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="getHeader">
|
||||
<h2 className="formHeader">Get A Vehicle By Id</h2>
|
||||
</div>
|
||||
<div className="fetchBox">
|
||||
<div className="inputContainer">
|
||||
<TextInput
|
||||
className="text-input"
|
||||
name="vehId"
|
||||
placeholder="Vehicle Id"
|
||||
value={vehId}
|
||||
onChange={handleIdInput}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="auxButton"
|
||||
labelText="Get Vehicle"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={getOneVehicle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{fetchedVeh &&
|
||||
fetchedVeh.map((el, i) => (
|
||||
<Vehicle
|
||||
make={el.make}
|
||||
model={el.model}
|
||||
key={`${el.model}${i}`}
|
||||
trim={el.trim}
|
||||
color={el.color}
|
||||
year={el.year}
|
||||
category={el.category}
|
||||
mileage={el.mileage}
|
||||
price={el.price}
|
||||
id={el.id}
|
||||
onClick={deleteData}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Vehicles;
|
||||
Reference in New Issue
Block a user