Hello I have to create a form to send data from a company to a database, my project is a react project and I use mongodb and express for the backend rating. My problem is that I can receive the company name, the phone number, the description and the company’s website but I can’t receive the schedules and rates. In my console when sending the form I send all the data including schedules and rates but impossible to receive them in my database. Thank you for your help!
App.jsx
import React, { useEffect, useState } from "react";
import axios from "axios";
import CompanyList from "./components/CompanyList";
import CompanyForm from "./components/CompanyForm";
import Horaire from "./components/Horaire";
import Home from "./components/Home";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Test from "./components/Test";
import Test2 from "./components/Test2";
function App() {
const [entreprise, setEntreprise] = useState([]);
const [nouvelleEntreprise, setNouvelleEntreprise] = useState({
NomEntreprise: "",
Description: "",
Tel: "",
Email: "",
Tarif: "",
SiteWeb: "",
Horaire: Array.from({ length: 7 }, () => ({
day: "",
open: "",
close: "",
status: "open",
})),
});
const chargerEntreprises = () => {
axios
.get("http://localhost:3001/entreprises")
.then((entreprise) => {
// console.log("Entreprises chargées avec succès:", entreprise.data);
setEntreprise(entreprise.data);
})
.catch((err) =>
console.log("Erreur lors du chargement des entreprises :", err)
);
};
useEffect(() => {
axios
.get("http://localhost:3001/entreprises")
.then((entreprise) => {
// console.log(
// "Entreprises chargées avec succès lors du montage :",
// entreprise.data
// );
setEntreprise(entreprise.data);
})
.catch((err) =>
console.log(
"Erreur lors du chargement des entreprises lors du montage :",
err
)
);
chargerEntreprises();
}, []);
const ajouterEntreprise = async (e, data) => {
e.preventDefault();
console.log("Données envoyées depuis le formulaire :", data);
// Format des horaires pour l'envoi au backend
const formattedHours = data.Horaire.map(({ day, open, close, status }) => ({
day,
open,
close,
status,
}));
// Créez un nouvel objet avec les horaires correctement formatés
const newData = {
...data,
Horaire: formattedHours,
};
try {
const response = await axios.post(
"http://localhost:3001/entreprises",
newData
);
console.log("Response from POST request:", response.data);
// Réinitialiser le formulaire ou effectuer d'autres actions nécessaires
setNouvelleEntreprise({
NomEntreprise: "",
Description: "",
Tel: "",
Email: "",
Tarif: "",
SiteWeb: "",
Horaire: Array.from({ length: 7 }, () => ({
day: "",
open: "",
close: "",
status: "open",
})),
});
// Mettez à jour les entreprises après l'ajout
chargerEntreprises();
} catch (error) {
console.log("Erreur lors de la requĂŞte POST :", error.response.data);
}
};
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<Home />} />
<Route path="/horaire" element={<Horaire />} />
<Route
path="/companyList"
element={<CompanyList entreprises={entreprise} />}
/>
<Route
path="/companyForm"
element={
<CompanyForm
ajouterEntreprise={(e, data) => ajouterEntreprise(e, data)}
nouvelleEntreprise={nouvelleEntreprise}
setNouvelleEntreprise={setNouvelleEntreprise}
/>
}
/>
</Routes>
</BrowserRouter>
<Test />
{/* <Test2 /> */}
</div>
);
}
export default App;
//CompanyForm.jsx
import React, { useState } from "react";
import NavBar from "./NavBar";
import Horaire from "./Horaire";
function CompanyForm({
ajouterEntreprise,
nouvelleEntreprise,
setNouvelleEntreprise,
}) {
const [horaireSelected, setHoraireSelected] = useState(false);
const handleAjouterEntreprise = (e) => {
e.preventDefault();
// Vérifiez si les champs obligatoires sont renseignés
if (
nouvelleEntreprise.Tel &&
nouvelleEntreprise.Description &&
nouvelleEntreprise.SiteWeb &&
nouvelleEntreprise.Email &&
nouvelleEntreprise.NomEntreprise &&
nouvelleEntreprise.Tarif &&
nouvelleEntreprise.Horaire
) {
// Format des horaires pour l'envoi au backend
const formattedHours = nouvelleEntreprise.Horaire.map(
({ day, open, close, status }) => ({
day,
open,
close,
status,
})
);
console.log("Formatted Hours in CompanyForm:", formattedHours);
// Créez un nouvel objet avec les horaires correctement formatés
const newData = {
...nouvelleEntreprise,
Horaire: formattedHours,
};
if (nouvelleEntreprise.Tarif) {
newData.Tarif = nouvelleEntreprise.Tarif;
}
console.log("Nouvelles données à envoyer :", newData);
// Appelez la fonction ajouterEntreprise avec les données du formulaire
ajouterEntreprise(e, newData);
} else {
// GĂ©rez le cas oĂą les champs obligatoires ne sont pas remplis
console.error("Veuillez remplir tous les champs obligatoires");
}
};
return (
<>
<NavBar />
<form onSubmit={handleAjouterEntreprise}>
<div className="min-h-screen p-6 bg-gray-100 flex items-center justify-center company">
<div className="container max-w-screen-lg mx-auto">
<div>
<div className="bg-white rounded shadow-lg p-4 px-4 md:p-8 mb-6">
<div className="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-3">
<div className="text-gray-600">
<p className="font-medium text-lg">
Ajouter une entreprise{" "}
</p>
<p>Merci</p>
</div>
<div className="lg:col-span-2">
<div className="grid gap-4 gap-y-2 text-sm grid-cols-1 md:grid-cols-5">
<div className="md:col-span-5">
<label>Nom de l'entreprise</label>
<input
type="text"
name="full_name"
id="full_name"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
value={nouvelleEntreprise.NomEntreprise || ""}
onChange={(e) =>
setNouvelleEntreprise({
...nouvelleEntreprise,
NomEntreprise: e.target.value,
})
}
/>
</div>
<div className="md:col-span-5">
<label>Description</label>
<textarea
id="description"
name="description"
className="h-40 border mt-1 rounded px-4 w-full bg-gray-50 resize-none"
value={nouvelleEntreprise.Description || ""}
onChange={(e) =>
setNouvelleEntreprise({
...nouvelleEntreprise,
Description: e.target.value,
})
}
></textarea>
</div>
<div className="md:col-span-3">
<label>Email</label>
<input
type="email"
name="email"
id="email"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
value={nouvelleEntreprise.Email || ""}
onChange={(e) =>
setNouvelleEntreprise({
...nouvelleEntreprise,
Email: e.target.value,
})
}
placeholder="[email protected]"
/>
</div>
<div className="md:col-span-2">
<label>Téléphone</label>
<input
type="tel"
name="telephone"
id="telephone"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
pattern="[0-9]{10}"
value={nouvelleEntreprise.Tel || ""}
onChange={(e) =>
setNouvelleEntreprise({
...nouvelleEntreprise,
Tel: e.target.value,
})
}
/>
</div>
<div className="md:col-span-2">
<label>Site web</label>
<input
type="text"
name="siteweb"
id="siteweb"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
value={nouvelleEntreprise.SiteWeb || ""}
placeholder="https://www.example.com"
onChange={(e) =>
setNouvelleEntreprise({
...nouvelleEntreprise,
SiteWeb: e.target.value,
})
}
/>
</div>
<div className="md:col-span-2">
<label>Tarifs</label>
<input
type="text"
name="Tarif"
id="Tarif"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
value={nouvelleEntreprise.Tarif || ""}
onChange={(e) =>
setNouvelleEntreprise({
...nouvelleEntreprise,
Tarif: e.target.value,
})
}
/>
</div>
<div className="md:col-span-2">
<label>Horaire d'ouverture</label>
<div>
<Horaire
setHoraireSelected={setHoraireSelected}
updateBusinessHours={(hours) =>
setNouvelleEntreprise({
...nouvelleEntreprise,
Horaire: hours,
})
}
/>
</div>
</div>
<div className="md:col-span-5 text-right">
<div className="inline-flex items-end">
<button
// className={`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ${
// horaireSelected
// ? "cursor-pointer"
// : "cursor-not-allowed"
// }`}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={handleAjouterEntreprise}
>
Ajouter Entreprise
</button>
</div>
</div>
{/* <div className="md:col-span-5">
<p className="font-medium text-lg">Horaires</p>
Vous pouvez remplacer 'daysOfWeek' par les jours de la semaine réels si nécessaire
{daysOfWeek.map((day) => (
{[
"Lundi",
"Mardi",
"Mercredi",
"Jeudi",
"Vendredi",
"Samedi",
"Dimanche",
].map((day) => (
<div key={day}>
<label>{day}</label>
<div className="grid grid-cols-3 gap-4">
<input
type="text"
placeholder="Heure d'ouverture"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
value={
nouvelleEntreprise.Horaire.find(
(h) => h.day === day
)?.open || ""
}
onChange={(e) =>
setNouvelleEntreprise((prev) => ({
...prev,
Horaire: prev.Horaire.map((h) =>
h.day === day
? { ...h, open: e.target.value }
: h
),
}))
}
/>
<input
type="text"
placeholder="Heure de fermeture"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
value={
nouvelleEntreprise.Horaire.find(
(h) => h.day === day
)?.close || ""
}
onChange={(e) =>
setNouvelleEntreprise((prev) => ({
...prev,
Horaire: prev.Horaire.map((h) =>
h.day === day
? { ...h, close: e.target.value }
: h
),
}))
}
/>
<input
type="text"
placeholder="Statut"
className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
value={
nouvelleEntreprise.Horaire.find(
(h) => h.day === day
)?.status || ""
}
onChange={(e) =>
setNouvelleEntreprise((prev) => ({
...prev,
Horaire: prev.Horaire.map((h) =>
h.day === day
? { ...h, status: e.target.value }
: h
),
}))
}
/>
</div>
</div>
))}
</div> */}
<div className="md:col-span-5 text-right">
<div className="inline-flex items-end">
{/* <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Ajouter Entreprise{" "}
</button> */}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</>
);
}
export default CompanyForm;
//Horaire.jsx
import React, { useState } from "react";
import Modal from "react-modal";
const Horaire = ({ setHoraireSelected, updateBusinessHours }) => {
const [businessHours, setBusinessHours] = useState({
Lundi: { status: "open", open: "", close: "" },
Mardi: { status: "open", open: "", close: "" },
Mercredi: { status: "open", open: "", close: "" },
Jeudi: { status: "open", open: "", close: "" },
Vendredi: { status: "open", open: "", close: "" },
Samedi: { status: "open", open: "", close: "" },
Dimanche: { status: "open", open: "", close: "" },
});
const [modalIsOpen, setModalIsOpen] = useState(false);
const [selected, setSelected] = useState(false);
const handleChange = (day, field, value) => {
setBusinessHours((prevBusinessHours) => ({
...prevBusinessHours,
[day]: {
...prevBusinessHours[day],
[field]: value,
},
}));
};
const handleSave = (e) => {
e.preventDefault();
// Format des horaires pour la mise Ă jour dans CompanyForm
const formattedHours = Object.entries(businessHours).map(
([day, hours]) => ({
day,
open: hours.open || "",
close: hours.close || "",
status: hours.status,
})
);
console.log("Formatted Hours:", formattedHours);
// Appelez la fonction updateBusinessHours avec les horaires formatés
updateBusinessHours(formattedHours);
closeModal();
};
const openModal = () => {
setModalIsOpen(true);
};
const closeModal = () => {
setModalIsOpen(false);
};
const handleSelection = (selectedHours) => {
// Mettez à jour l'état local ou effectuez d'autres actions si nécessaire
updateBusinessHours(selectedHours);
// Mettez à jour l'état pour indiquer que des horaires ont été sélectionnés
setHoraireSelected(true);
};
return (
<>
<button
type="button"
onClick={openModal}
className={`h-10 border mt-1 rounded px-4 w-full ${
selected ? "bg-green-100" : "bg-gray-50"
}`}
>
{selected
? "Horaires sélectionnés"
: "Ajouter des horaires d'ouvertures"}
</button>
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
contentLabel="Business Hours Form"
>
<div className="max-w-2xl mx-auto mt-8 p-4 border border-gray-300 rounded">
<div className="grid grid-cols-3 gap-4">
{Object.entries(businessHours).map(([day, hours]) => (
<div key={day} className="mb-4">
<label
htmlFor={`${day}-status`}
className="block font-semibold mb-2 capitalize"
>
{day}:
</label>
<select
id={`${day}-status`}
value={hours.status}
onChange={(e) => handleChange(day, "status", e.target.value)}
className="border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500"
>
<option value="open">Ouvert</option>
<option value="closed">Fermé</option>
</select>
{hours.status === "open" && (
<div className="flex flex-col space-y-2 mt-2">
<div className="flex space-x-2">
<label htmlFor={`${day}-open`} className="self-center">
Ouverture:
</label>
<input
type="time"
id={`${day}-open`}
value={hours.open}
onChange={(e) =>
handleChange(day, "open", e.target.value)
}
className="border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500"
/>
</div>
<div className="flex space-x-2">
<label htmlFor={`${day}-close`} className="self-center">
Fermeture:
</label>
<input
type="time"
id={`${day}-close`}
value={hours.close}
onChange={(e) =>
handleChange(day, "close", e.target.value)
}
className="border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500"
/>
</div>
</div>
)}
</div>
))}
</div>
<button
type="submit"
onClick={handleSave}
className="bg-blue-500 text-white py-2 px-4 rounded mt-4 hover:bg-blue-700 focus:outline-none focus:ring focus:border-blue-300"
>
Enregistrer
</button>
</div>
</Modal>
</>
);
};
export default Horaire;
//Schéma Entreprise
const mongoose = require("mongoose");
const validator = require("validator");
const entrepriseSchema = mongoose.Schema({
NomEntreprise: {
type: String,
required: true,
},
// Logo: {
// type: Buffer,
// },
Tel: {
type: String,
required: true,
},
Email: {
type: String,
required: true,
validate(v) {
if (!validator.isEmail(v)) throw new Error("Email non valide");
},
},
Tarif: {
type: String,
required: true,
},
// Photo: {
// type: Buffer,
// },
Description: {
type: String,
required: true,
},
Horaire: [
{
day: {
type: String,
// required: true,
},
open: {
type: String,
// required: true,
},
close: {
type: String,
// required: true,
},
// startTime: {
// type: String,
// required: true,
// },
// endTime: {
// type: String,
// required: true,
// },
status: {
type: String,
// required: true,
},
},
],
SiteWeb: {
type: String,
required: true,
},
});
const entrepriseModel = mongoose.model("Entreprise", entrepriseSchema);
entrepriseModel.pre("save", function (next) {
const validationErrors = this.validateSync(); // Utilise validateSync pour obtenir les erreurs de validation synchrones
if (validationErrors) {
console.error("Erreurs de validation :", validationErrors.errors);
next(new Error("Erreur de validation"));
} else {
next();
}
});
module.exports = entrepriseModel;
//Express Database
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const entrepriseModel = require("./models/Entreprise.cjs");
const app = express();
app.use(express.json());
app.use(cors());
mongoose.connect("mongodb://localhost:27017/Beez2Be", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
app.get("/entreprises", async (req, res) => {
console.log("Requête get reçue pour /entreprises");
try {
const entreprises = await entrepriseModel.find();
console.log("Entreprises récupérées avec succès:", entreprises);
res.json(entreprises);
} catch (err) {
console.error("Erreur lors de la récupération des entreprises :", err);
res.status(400).json("Error: " + err);
}
});
app.post("/entreprises", async (req, res) => {
console.log("Requête post reçue pour /entreprises");
console.log("Données reçues :", req.body);
const nouvelleEntreprise = new entrepriseModel(req.body);
try {
const savedEntreprise = await nouvelleEntreprise.save();
console.log("Entreprise ajoutée avec succès :", savedEntreprise);
// Envoyer la réponse avec les détails de l'entreprise ajoutée
res.json(savedEntreprise);
} catch (err) {
console.error("Erreur lors de l'ajout de l'entreprise :", err);
console.log("Erreurs de validation :", err.errors);
res.status(400).json("Error: " + err);
}
});
const PORT = 3001;
app.listen(PORT, () => {
console.log(`Server started on port ${PORT}`);
});
Here is an example of what I send and what I receive in the database
This is the result when I send my form
{NomEntreprise: 'Test', Description: 'TestTestTestTestTest', Tel: '0909090909', Email: '[email protected]', Tarif: 'Test', …}
Description
:
"TestTestTestTestTest"
Email
:
"[email protected]"
Horaire
:
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
NomEntreprise
:
"Test"
SiteWeb
:
"Test.com"
Tarif
:
"Test"
Tel
:
"0909090909"
[[Prototype]]
:
Object
And here's what I have in my database :
{
"_id": {
"$oid": "65e1a0fe40b7b4775ce93910"
},
"NomEntreprise": "Test",
"Tel": "0909090909",
"Description": "TestTestTestTestTest",
"SiteWeb": "Test.com",
"__v": 0
}
I just started react that’s why I’m struggling with a simple thing at first glance. I want to thank you for your help!
