Car Vault app using MERN

//server.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const seedData = require('./seedData')
const cors = require('cors')

const app = express();
app.use(cors())
const PORT = process.env.PORT || 3001;

// Connect to MongoDB (make sure MongoDB is running)
mongoose.connect('mongodb://localhost:27017/vehicle-tracking', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});

// Middleware
app.use(bodyParser.json());

// MongoDB Schema for Car
const carSchema = new mongoose.Schema({
    companyName: String,
    distanceCovered: Number,
    mileage: Number,
    serviceDates: [Date],
    owner: {
        name: String,
        email: String,
    },
    image: String,
});

const Car = mongoose.model('Car', carSchema);

// Function to seed data
const seedDatabase = async () => {
    try {
        const existingCars = await Car.find();

        if (existingCars.length > 0) {
            // If there are existing cars, delete them
            await Car.deleteMany();
            console.log('Existing cars deleted.');
        }

        // Seed the database with new data
        await Car.create(seedData);
        console.log('Seed data added to the database.');
    } catch (error) {
        console.error('Error seeding the database:', error);
    }
};


// Call the seedDatabase function when the server starts
seedDatabase();

// API Endpoints
// Get all cars
app.get('/api/cars', async (req, res) => {
    try {
        const cars = await Car.find();
        res.json(cars);
    } catch (error) {
        res.status(500).json({ error: 'Internal Server Error' });
    }
});

// Get a specific car by ID
app.get('/api/cars/:id', async (req, res) => {
    try {
        const car = await Car.findById(req.params.id);
        if (!car) {
            return res.status(404).json({ error: 'Car not found' });
        }
        res.json(car);
    } catch (error) {
        res.status(500).json({ error: 'Internal Server Error' });
    }
});

// Add a new car
app.post('/api/cars', async (req, res) => {
    try {
        const newCar = await Car.create(req.body);
        res.status(201).json(newCar);
    } catch (error) {
        res.status(400).json({ error: 'Bad Request' });
    }
});

// Update a car by ID
app.put('/api/cars/:id', async (req, res) => {
    try {
        const updatedCar = await Car.findByIdAndUpdate(
            req.params.id,
            req.body,
            { new: true }
        );
        if (!updatedCar) {
            return res.status(404).json({ error: 'Car not found' });
        }
        res.json(updatedCar);
    } catch (error) {
        res.status(400).json({ error: 'Bad Request' });
    }
});
// Delete a car by ID
app.delete('/api/cars/:id', async (req, res) => {
    try {
        const deletedCar = await Car.findByIdAndDelete(req.params.id);
        if (!deletedCar) {
            return res.status(404).json({ error: 'Car not found' });
        }
        console.log('car is deleted successfully');

        res.json({ message: 'Car deleted successfully' });
    } catch (error) {
        res.status(500).json({ error: 'Internal Server Error' });
    }
});


// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

// seedData.js

module.exports = [
    {
        companyName: 'Toyota',
        distanceCovered: 10000,
        mileage: 25,
        serviceDates: [new Date('2022-01-15'), new Date('2022-03-20')],
        owner: {
            name: 'John Doe',
            email: 'john.doe@example.com',
        },
        image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20240122182422/images1.jpg',
    },
    {
        companyName: 'Honda',
        distanceCovered: 8000,
        mileage: 28,
        serviceDates: [new Date('2022-02-10'), new Date('2022-04-25')],
        owner: {
            name: 'Jane Smith',
            email: 'jane.smith@example.com',
        },
        image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20240122184958/images2.jpg',
    },

    {
        companyName: 'Volkswagen',
        distanceCovered: 10500,
        mileage: 26,
        serviceDates: [new Date('2022-10-05'), new Date('2022-12-15')],
        owner: {
            name: 'Ava Anderson',
            email: 'ava.anderson@example.com',
        },
        image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20240122184958/images2.jpg',
    },
    {
        companyName: 'Toyota',
        distanceCovered: 10000,
        mileage: 25,
        serviceDates: [new Date('2022-01-15'), new Date('2022-03-20')],
        owner: {
            name: 'John Doe',
            email: 'john.doe@example.com',
        },
        image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20240122184958/images2.jpg',
    },
    {
        companyName: 'Honda',
        distanceCovered: 8000,
        mileage: 28,
        serviceDates: [new Date('2022-02-10'), new Date('2022-04-25')],
        owner: {
            name: 'Jane Smith',
            email: 'jane.smith@example.com',
        },
        image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20240122182422/images1.jpg',
    },

    {
        companyName: 'Volkswagen',
        distanceCovered: 10500,
        mileage: 26,
        serviceDates: [new Date('2022-10-05'), new Date('2022-12-15')],
        owner: {
            name: 'Ava Anderson',
            email: 'ava.anderson@example.com',
        },
        image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20240122182422/images1.jpg',
    },
    {
        companyName: 'Toyota',
        distanceCovered: 10000,
        mileage: 25,
        serviceDates: [new Date('2022-01-15'), new Date('2022-03-20')],
        owner: {
            name: 'John Doe',
            email: 'john.doe@example.com',
        },
        image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20240122185312/images3.jpg',
    },
    {
        companyName: 'Honda',
        distanceCovered: 8000,
        mileage: 28,
        serviceDates: [new Date('2022-02-10'), new Date('2022-04-25')],
        owner: {
            name: 'Jane Smith',
            email: 'jane.smith@example.com',
        },
        image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20240122185312/images3.jpg',
    },

    {
        companyName: 'Volkswagen',
        distanceCovered: 10500,
        mileage: 26,
        serviceDates: [new Date('2022-10-05'), new Date('2022-12-15')],
        owner: {
            name: 'Ava Anderson',
            email: 'ava.anderson@example.com',
        },
        image: 
'https://media.geeksforgeeks.org/wp-content/uploads/20240122185312/images3.jpg',
    },

];

// src/App.js

import React, { useState, useEffect } from "react";
import VehicleList from "./components/VehicleList";
import AddVehicle from "./components/AddVehicle";
import axios from "axios";
import "./App.css";

const App = () => {
	const [vehicles, setVehicles] = useState([]);
	const [showForm, setShowForm] = useState(false);

	useEffect(() => {
		axios
			.get("http://localhost:3001/api/cars")
			.then((response) => setVehicles(response.data))
			.catch((error) => console.error(error));
	}, []);

	const handleAddVehicle = (newVehicle) => {
		console.log("new vehicle", newVehicle);

		setVehicles((prevVehicles) => [...prevVehicles, newVehicle]);
	};

	const handleContactOwner = (email) => {
		alert(`Contacting the owner of the vehicle at ${email}`);
	};

	const handleDeleteVehicle = (vehicleId) => {
		console.log(`Deleting ${vehicleId}`);
		axios
			.delete(`http://localhost:3001/api/cars/$%7BvehicleId%7D%60)
			.then((response) => {
				// Filter out the deleted vehicle from the state
				setVehicles((prevVehicles) =>
					prevVehicles.filter((vehicle) => vehicle._id !== vehicleId)
				);
			})
			.catch((error) => console.error(error));
	};

	const handleUpdateVehicle = async (updatedVehicle) => {
		try {
			const response = await axios.put(
				`
http://localhost:3001/api/cars/$%7BupdatedVehicle._id%7D%60,
				updatedVehicle
			);

			// Handle the response
			console.log("Vehicle updated successfully:", response.data);

			// Update the vehicles array with the updated vehicle
			setVehicles((prevVehicles) =>
				prevVehicles.map((vehicle) =>
					vehicle._id === updatedVehicle._id ? response.data : vehicle
				)
			);
		} catch (error) {
			// Handle errors, e.g., show an error message to the user
			console.error("Error updating vehicle:", error);
		}
	};

	return (
		<div className="main-container">
			<h1 className="gfg">GFG</h1>
			<h1>Vehicle Tracking System</h1>
			<button onClick={() => setShowForm(!showForm)}>
				{showForm ? "Close" : "Add New Vehicle"}
			</button>
			<div className="">
				{showForm && <AddVehicle onAddVehicle={handleAddVehicle} />}
				{vehicles && (
					<VehicleList
						onDeleteVehicle={handleDeleteVehicle}
						onUpdateVehicle={handleUpdateVehicle}
						vehicles={vehicles}
						onContactOwner={handleContactOwner}
					/>
				)}
			</div>
		</div>
	);
};

export default App;

//src/components/AddVehicle.js

import axios from "axios";
import React, { useState } from "react";

const AddVehicle = ({ onAddVehicle }) => {
	const [newVehicle, setNewVehicle] = useState({
		companyName: "",
		distanceCovered: "",
		mileage: "",
		serviceDates: "",
		owner: {
			name: "",
			email: "",
		},
		image: "",
	});

	const handleAddVehicle = () => {
		// Submit a new vehicle
		axios
			.post("http://localhost:3001/api/cars", newVehicle)
			.then((response) => {
				// Notify the parent component about the new vehicle
				onAddVehicle(response.data);

				// Clear the newVehicle state for the next entry
				setNewVehicle({
					companyName: "",
					distanceCovered: "",
					mileage: "",
					serviceDates: [],
					owner: {
						name: "",
						email: "",
					},
					image: "", // Reset image URL field
				});
			})
			.catch((error) => console.error(error));
	};

	return (
		<div className="form-container">
			<h2 style={{ color: "#007BFF", textAlign: "center" }}>
				Add a New Vehicle
			</h2>
			<form
				onSubmit={(e) => {
					e.preventDefault();
					handleAddVehicle();
				}}
			>
				<div className="form-row">
					<label>
						Company Name:
						<input
							type="text"
							value={newVehicle.companyName}
							onChange={(e) =>
								setNewVehicle({
									...newVehicle,
									companyName: e.target.value,
								})
							}
							required
							className="form-input"
						/>
					</label>
					<label>
						Distance Covered:
						<input
							type="number"
							value={newVehicle.distanceCovered}
							onChange={(e) =>
								setNewVehicle({
									...newVehicle,
									distanceCovered: e.target.value,
								})
							}
							required
							className="form-input"
						/>
					</label>
				</div>
				<div className="form-row">
					<label>
						Mileage:
						<input
							type="number"
							value={newVehicle.mileage}
							onChange={(e) =>
								setNewVehicle({
									...newVehicle,
									mileage: e.target.value,
								})
							}
							required
							className="form-input"
						/>
					</label>
					<label>
						Service Dates (comma-separated):
						<input
							type="text"
							value={newVehicle.serviceDates}
							onChange={(e) =>
								setNewVehicle({
									...newVehicle,
									serviceDates: e.target.value,
								})
							}
							required
							className="form-input"
						/>
					</label>
				</div>
				<div className="form-row">
					<label>
						Owner Name:
						<input
							type="text"
							value={newVehicle.owner.name}
							onChange={(e) =>
								setNewVehicle({
									...newVehicle,
									owner: {
										...newVehicle.owner,
										name: e.target.value,
									},
								})
							}
							required
							className="form-input"
						/>
					</label>
					<label>
						Owner Email:
						<input
							type="email"
							value={newVehicle.owner.email}
							onChange={(e) =>
								setNewVehicle({
									...newVehicle,
									owner: {
										...newVehicle.owner,
										email: e.target.value,
									},
								})
							}
							required
							className="form-input"
						/>
					</label>
				</div>
				<div className="form-row">
					<label>
						Image URL:
						<input
							type="text"
							value={newVehicle.image}
							onChange={(e) =>
								setNewVehicle({
									...newVehicle,
									image: e.target.value,
								})
							}
							className="form-input"
						/>
					</label>
				</div>
				<button type="submit" className="form-button">
					Add Vehicle
				</button>
			</form>
		</div>
	);
};

export default AddVehicle;

// src/components/VehicleList.js

import React, { useState, useMemo } from "react";
import VehicleCard from "./VehicleCard";

const VehicleList = ({
	vehicles,
	onContactOwner,
	onDeleteVehicle,
	onUpdateVehicle,
}) => {
	const [companyFilter, setCompanyFilter] = useState("");
	const [sortBy, setSortBy] = useState("distanceCovered"); // Default sorting by distanceCovered

	const filteredAndSortedVehicles = useMemo(() => {
		return vehicles
			.filter((vehicle) =>
				vehicle.companyName
					.toLowerCase()
					.includes(companyFilter.toLowerCase())
			)
			.sort((a, b) => (a[sortBy] > b[sortBy] ? 1 : -1));
	}, [vehicles, companyFilter, sortBy]);

	return (
		<div className="list" style={{ marginTop: "20px" }}>
			<h2 style={{ color: "#007BFF" }}>Vehicle List</h2>

			{/* Filter and Sort Controls */}
			<div style={{ marginBottom: "10px" }}>
				<label>
					Filter by Company Name:
					<input
						type="text"
						value={companyFilter}
						onChange={(e) => setCompanyFilter(e.target.value)}
					/>
				</label>
				<label style={{ marginLeft: "10px" }}>
					Sort by:
					<select
						value={sortBy}
						onChange={(e) => setSortBy(e.target.value)}
					>
						<option value="distanceCovered">
							Distance Covered
						</option>
						<option value="mileage">Mileage</option>
					</select>
				</label>
			</div>

			<div className="list-container">
				{filteredAndSortedVehicles.map((vehicle) => (
					<VehicleCard
						key={vehicle._id}
						vehicle={vehicle}
						onContactOwner={onContactOwner}
						onDeleteVehicle={onDeleteVehicle}
						onUpdateVehicle={onUpdateVehicle}
					/>
				))}
			</div>
		</div>
	);
};

export default VehicleList;

// src/components/VehicleCard.js

import React, { useState } from "react";
import moment from "moment";

const VehicleCard = ({
	vehicle,
	onContactOwner,
	onDeleteVehicle,
	onUpdateVehicle,
}) => {
	const [isEditing, setIsEditing] = useState(false);
	const [updatedVehicle, setUpdatedVehicle] = useState(vehicle);

	const handleUpdateClick = () => {
		setIsEditing(true);
	};

	const handleCancelClick = () => {
		setIsEditing(false);
		setUpdatedVehicle(vehicle); // Reset to original values
	};

	const handleSaveClick = () => {
		// Implement the logic to save the updated details

		onUpdateVehicle(updatedVehicle);
		setIsEditing(false);
	};

	const handleInputChange = (fieldName, value) => {
		const [field, subField] = fieldName.split(".");

		setUpdatedVehicle((prevVehicle) => ({
			...prevVehicle,
			[field]: subField
				? { ...prevVehicle[field], [subField]: value }
				: value,
		}));
	};

	return (
		<div className="vehicle-card">
			{isEditing ? (
				// Render editable fields for updating details
				<div>
					<label>
						Company Name:
						<input
							type="text"
							value={updatedVehicle.companyName}
							onChange={(e) =>
								handleInputChange("companyName", e.target.value)
							}
							required
						/>
					</label>
					<label>
						Distance Covered:
						<input
							type="number"
							value={updatedVehicle.distanceCovered}
							onChange={(e) =>
								handleInputChange(
									"distanceCovered",
									e.target.value
								)
							}
							required
						/>
					</label>
					<label>
						Mileage:
						<input
							type="number"
							value={updatedVehicle.mileage}
							onChange={(e) =>
								handleInputChange("mileage", e.target.value)
							}
							required
						/>
					</label>
					<label>
						Owner Name:
						<input
							type="text"
							value={updatedVehicle.owner.name}
							onChange={(e) =>
								handleInputChange("owner.name", e.target.value)
							}
							required
						/>
					</label>
					<label>
						Owner Email:
						<input
							type="email"
							value={updatedVehicle.owner.email}
							onChange={(e) =>
								handleInputChange("owner.email", e.target.value)
							}
							required
						/>
					</label>
					{/* Add input fields for other properties like 
						owner name, owner email, and image */}
					<button onClick={handleSaveClick}>Save</button>
					<button onClick={handleCancelClick}>Cancel</button>
				</div>
			) : (
				// Display details
				<div>
					<h3 style={{ fontWeight: "bold" }}>
						{vehicle.companyName}
					</h3>
					<p>
						<span style={{ fontWeight: "bold" }}>
							Distance Covered:
						</span>{" "}
						{vehicle.distanceCovered}
					</p>
					<p>
						<span style={{ fontWeight: "bold" }}>Mileage:
						</span>{" "}
						{vehicle.mileage}
					</p>

					{vehicle.owner && (
						<div>
							<p style={{ fontWeight: "bold" }}>Owner:</p>
							<ul style={{ listStyle: "none", padding: 0 }}>
								<li>{vehicle.owner.name}</li>
								<li>{vehicle.owner.email}</li>
							</ul>
						</div>
					)}

					{vehicle.image && (
						<div className="image-container">
							<img
								src={vehicle.image}
								alt={vehicle.companyName}
								className="vehicle-image"
							/>
						</div>
					)}
					<p>Service Dates:</p>
					<ul>
						{vehicle.serviceDates.map((item, i) => (
							<li key={i}>
								{moment(item).format("MMMM D, YYYY")}
							</li>
						))}
					</ul>

					<div className="button-container">
						<button
							onClick={() =>
								onContactOwner(
									vehicle.owner ? vehicle.owner.email : ""
								)
							}
						>
							Contact Owner
						</button>
						<button onClick={() => onDeleteVehicle(vehicle._id)}>
							Delete Vehicle
						</button>
						<button onClick={handleUpdateClick}>Update</button>
					</div>
				</div>
			)}
		</div>
	);
};

export default VehicleCard;