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

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.json());

// Connect to MongoDB (replace 'your_database_url' with your actual MongoDB URL)
mongoose.connect('mongodb://your_database_url', { useNewUrlParser: true, useUnifiedTopology: true });

// Define Emergency schema
const emergencySchema = new mongoose.Schema({
emergencyNumbers: String,
location: String,
emergencyType: String,
});

const Emergency = mongoose.model('Emergency', emergencySchema);

// API routes
app.get('/emergencies', async (req, res) => {
try {
    const emergencies = await Emergency.find();
    res.json(emergencies);
} catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal Server Error' });
}
});

app.post('/emergencies', async (req, res) => {
const { emergencyNumbers, location, emergencyType } = req.body;

try {
    const newEmergency = new Emergency({ emergencyNumbers, location, emergencyType });
    await newEmergency.save();
    res.json(newEmergency);
} catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal Server Error' });
}
});

app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

// client/src/App.js
import React from 'react';
import ExampleComponent
    from './components/ExampleComponent';

function App() {
    return (
        <div className="App">
            <h1>
                MERN Disaster
                Management System
            </h1>
            <ExampleComponent />
        </div>
    );
}

export default App;

// client/src/components/ExampleComponent.js
import React, { useState, useEffect } from 'react';
// Import the CSS file
import './ExampleComponent.css';
const ExampleComponent = () => {
    // State to manage form inputs
    const [emergencyNumbers, setEmergencyNumbers] = useState('');
    const [location, setLocation] = useState('');
    const [emergencyType, setEmergencyType] = useState('');

    // State to store existing emergencies
    const [emergencies, setEmergencies] = useState([]);

    // Function to fetch existing emergencies
    const fetchEmergencies = async () => {
        try {
            const response =
                await
                    fetch('http://localhost:5000/emergencies');
            const data = await response.json();
            setEmergencies(data);
        } catch (error) {
            console.error('Error fetching emergencies:', error);
        }
    };

    // Fetch existing emergencies on component mount
    useEffect(() => {
        fetchEmergencies();
    }, []);

    // Function to handle form submission
    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            // Send data to the server
            const response =
                await
                    fetch('http://localhost:5000/emergencies', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body:
                            JSON.stringify(
                                {
                                    emergencyNumbers,
                                    location, emergencyType
                                }),
                    });

            const data =
                await response.json();
            console.log('Data submitted:', data);

            // Reset form inputs after submission
            setEmergencyNumbers('');
            setLocation('');
            setEmergencyType('');

            // Fetch updated emergencies after submission
            fetchEmergencies();
        } catch (error) {
            console.error('Error submitting data:', error);
        }
    };

    return (
        <div className="emergency-form">
            <h2>Report an Emergency</h2>
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="emergencyNumbers">
                        Emergency Numbers:
                    </label>
                    <input
                        type="text"
                        id="emergencyNumbers"
                        placeholder="Enter emergency numbers"
                        value={emergencyNumbers}
                        onChange={
                            (e) =>
                                setEmergencyNumbers(e.target.value)
                        }
                        required
                    />
                </div>

                <div className="form-group">
                    <label htmlFor="location">
                        Location:
                    </label>
                    <input
                        type="text"
                        id="location"
                        placeholder="Enter location"
                        value={location}
                        onChange={
                            (e) =>
                                setLocation(e.target.value)
                        }
                        required
                    />
                </div>

                <div className="form-group">
                    <label htmlFor="emergencyType">
                        Type of Emergency:
                    </label>
                    <input
                        type="text"
                        id="emergencyType"
                        placeholder="Enter type of emergency"
                        value={emergencyType}
                        onChange={
                            (e) =>
                                setEmergencyType(e.target.value)
                        }
                        required
                    />
                </div>

                <button type="submit">
                    Submit
                </button>
            </form>

            {/* Display existing emergencies */}
            <div className="existing-emergencies">
                <h2>Existing Emergencies</h2>
                <ul>
                    {emergencies.map((emergency, index) => (
                        <li key={index}>
                            <strong>
                                Emergency Numbers:
                            </strong>
                            {emergency.emergencyNumbers},{' '}
                            <strong>
                                Location:
                            </strong>
                            {emergency.location},{' '}
                            <strong>
                                Emergency Type:
                            </strong>
                            {emergency.emergencyType}
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
};

export default ExampleComponent;