Please help me out with this as I can’t find the answer anywhere.
My MongoDB Database name is myWebsiteDB:
- myWebsiteDB has 2 collections:
dinnersandemails. - I have connected
dinnerscollection to use in my website as a CRUD app – works fine. - Now I want to save data from Email Subscription section’s input field to the
emailscollection on my website. - These 2 collections are for saving 2 different data intentions, so I don’t want to join them.
I tried setting up the emails collection Schema and connecting it to my React App exactly like the way I connected the dinners collection before, here are the challenges that I’m facing:
-
When I click the Submit Email button, it doesn’t work and the errors returned from the server’s terminal seem like it’s the validation for the
dinnerscollection, not theemailscollection that I
m trying to write in. See screenshot -
Am I using validator and writing the new Emails schema right? Do I need to specify the {collection: collection name} like below?
Here are my code:
Emails Model (Emails.js):
const mongoose = require('mongoose')
const validator = require('validator')
const EmailSchema = new mongoose.Schema({
email: {
type: String,
trim: true,
lowercase: true,
unique: true,
validate: {
validator: validator.isEmail,
message: 'Please input a valid email address',
isAsync: false
}
}
}, {collection: "emails"})
const Emails = mongoose.model('Emails', EmailSchema)
module.exports = Emails
Dinner Model (Dinner.js):
const mongoose = require('mongoose')
const DinnerSchema = new mongoose.Schema({
foodName: {
type: String,
required: true,
},
isVegetarian: {
type: Boolean,
required: true,
},
priceRange: {
type: String,
required: true,
}
}, {collection: "dinners"})
const Dinner = mongoose.model("Dinner", DinnerSchema)
module.exports = Dinner
Server side index.js:
const express = require("express") // Set up an express server
const mongoose = require("mongoose") // Import Mongoose library
const cors = require('cors') // Import CORS to communicate with frontend
const app = express() // Initializing our express server
const DinnerModel = require('./models/Dinner')
const EmailModel = require('./models/Emails')
app.use(express.json()) // Setting up Middleware
app.use(cors())
// Connect to MongoDB
mongoose.connect(
'mongodb+srv://myusername:[email protected]/myWebsiteDB?retryWrites=true&w=majority',
{
useNewUrlParser: true,
}
)
// Create:
app.post("/insert", async (req, res) => {
const foodName = req.body.foodName
const isVegetarian = req.body.isVegetarian
const priceRange = req.body.priceRange
const email = req.body.email
// Dinner Ideas App:
const dinner = new DinnerModel(
{
foodName: foodName,
isVegetarian: isVegetarian,
priceRange: priceRange,
}
)
// Email:
const emailData = new EmailModel(
{
email: email
}
)
try {
await dinner.save()
await emailData.save()
res.send("data inserted")
} catch(err) {
console.log(err)
}
})
// Read:
app.get("/read", async (req, res) => {
DinnerModel.find({}, (err, result) => {
if (err) {
res.send(err)
}
res.send(result)
})
})
// Update:
app.put("/update", async (req, res) => {
const newFoodName = req.body.newFoodName
const id = req.body.id
try {
await DinnerModel.findById(id, (err, updatedFood) => {
updatedFood.foodName = newFoodName
updatedFood.save()
res.send("update")
}).clone()
} catch(err) {
console.log("The error is: " + err)
}
})
app.delete("/delete/:id", async (req, res) => {
const id = req.params.id
await DinnerModel.findByIdAndRemove(id).exec()
res.send("deleted")
})
// Creating a port:
app.listen(3001, () => {
console.log("Server is up on: http://localhost:3001")
})
React code with CRUD using the dinners collection:
import React, { useState, useEffect } from "react"
import './DinnerIdeas.css'
import Axios from "axios"
import FoodListComponent from "../FoodListComponent";
import FormComponent from "../FormComponent";
function DinnerIdeas() {
const [foodName, setFoodName] = useState('')
const [isVegetarian, setVegetarian] = useState(false)
const [priceRange, setPriceRange] = useState('$')
const [newFoodName, setNewFoodName] = useState('')
const [foodList, setFoodList] = useState([])
// Read:
useEffect(() => {
let unmounted = false
Axios.get("http://localhost:3001/read")
.then((response) => {
if (!unmounted) {
setFoodList(response.data)
}
})
.catch(error => {
console.log(`Hey, the error is ${error}`)
return
})
return () => {
unmounted = true
}
}, [foodList])
// Create:
const addToList = () => {
Axios.post(
"http://localhost:3001/insert",
{
foodName: foodName,
isVegetarian: isVegetarian,
priceRange: priceRange,
}
)
}
// Update:
const updateFood = (id) => {
if (newFoodName) {
Axios.put("http://localhost:3001/update", {
id: id,
newFoodName: newFoodName,
})
.catch(error => console.log(`Hey, the error is ${error}`))
}
}
// Delete:
const deleteFood = (id) => {
Axios.delete(`http://localhost:3001/delete/${id}`)
}
return (
<section className="dinner-ideas">
<FormComponent
setFoodName={setFoodName}
setVegetarian={setVegetarian}
setPriceRange={setPriceRange}
addToList={addToList}
/>
<FoodListComponent
foodList={foodList}
setNewFoodName={setNewFoodName}
updateFood={updateFood}
deleteFood={deleteFood}
newFoodName={newFoodName}
/>
</section>
);
}
export default DinnerIdeas;
React Footer Component that let users put in their emails to subscribe, this will write to the emails collection:
import React, { useState } from "react"
import Axios from "axios"
export default function FooterComponent() {
const [email, setEmail] = useState('')
const subscribeEmail = () => {
Axios.post(
"http://localhost:3001/insert",
{
email: email
}
)
}
return (
<footer>
<div>Created by higherstates © 2021</div>
<div>
<h3>Interested in further deals?</h3>
<input
type='email'
placeholder="Give us your email"
onChange={(event) => {setEmail(event.target.value)}}
/>
<button
type="submit"
onClick={subscribeEmail}
>
Submit Email
</button>
</div>
</footer>
)
}
Please guide me on how to fix this, thank you! 🙂
