How do I link two items from a mongo database? - reactjs

Question

I'm building a simple MERN stack app, where users submit reviews about cafes.
I'd like functionality whereby a user can click on the name of a cafe, resulting in a redirect to a view with all the reviews about that particular cafe - any suggestions of how I can accomplish this?
Mongo Atlas database structure
Database
|
+--cafes (collection)
+-- _id:5ffb7a6bf32d1b27ac8474d9
cafeName:"Customs Coffee
photoURL:"https://*******
+--reviews (collection)
+--_id:5ffb95b75624dd13d825ea5e
userName:"Josh"
stars:"4"
title:"Second review of customs coffee"
photo:"photoURL.com"
blurb: "this is the blurb for the second review of customs"
cafe:"Customs Coffee"
createdAt:2021-01-11T00:03:03.842+00:00
Components rendering list of cafes
CafeList.jsx
import React, {useState, useEffect} from 'react'
import axios from 'axios'
import Cafe from './Cafe'
const CafeList = () => {
const [cafes, setCafe] = useState([])
useEffect(() => {
axios.get('/api/all-cafes')
.then(cafe => {
setCafe(cafe.data)
})
.catch(err => {
console.log(err)
})
},[])
return(
<div className = 'cafe-container-container'>
<h2>Cafes</h2>
<Cafe cafes = {cafes}/>
</div>
)
}
export default CafeList
Cafe.jsx
import React from 'react'
import {Link} from 'react-router-dom'
const Cafe = (props) => {
const {cafes} = props
return(
<div>
{
cafes.map(cafe =>{
const {cafeName,photoURL} = cafe
return (
<Link to = '/cafe-reviews/' style={{ textDecoration: 'none' }} >
<div className = 'cafe-container'>
<h2>{cafeName}</h2>
<img src = {photoURL}></img>
</div>
</Link>
)
})
}
</div>
)
}
export default Cafe
..and here's the empty component where I eventually want to render reviews specific to a particular cafe:
import react from 'react'
const CafeReviews = () => {
return(
<div>
This is the cafe review list
</div>
)
}
export default CafeReviews
As it stands, when you click on any cafe, it redirects to the CafeReviews component - but as I mentioned, I'd like to instead render the reviews specific to the cafe being clicked. The common element between the two collections is the cafe name (cafeName and ```cafe``, respectively), so I'm thinking I'm going to have to do some sort of join using this property.
Lastly, here's the express routes I've written:
server.js
app.get('/api/all-reviews', (req,res) => {
Review.find()
.then((result) => {
res.send(result)
})
.catch(err => {
console.log(err)
})
})
app.get('/api/all-cafes', (req,res) => {
Cafe.find()
.then((result) => {
res.send(result)
})
.catch(err => {
console.log(err)
})
})
app.post('/api/add-review',(req,res) => {
const review = new Review(req.body)
review.save()
.then(() => {
console.log('review successfully posted')
res.status(200)
})
.catch(err => {
console.log(err)
})
})

Answer 1

I, personally, would add a Cafe reference to your Review collection instead of just having common field such as cafe name. If you are using mongoose to define your mongo schema, this would be an example of your cafe reference field in your Reviews collection
_id: mongoose.Schema.Types.ObjectId,
userName: {Type: String, required: true},
cafeReference: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Cafe',
required: true,
},
... etc (your other collection fields)
Then, create an API endpoint on your back-end that gets cafe reviews by cafe Id. And then when rendering CafeReviews component you will be sending GET request with that cafe Id in your request payload. Then, finally, Mongo "find" method takes in parameters by which it can look for requested documents. Linking docs - https://docs.mongodb.com/manual/reference/method/db.collection.find/
In your case, example would be as follows:
Review.find({cafeReference: cafeId})
Also mongoose has great method to combine fields from 2 collections (sql join equivalent), called "populate" - https://mongoosejs.com/docs/populate.html.
Also fire off your "get reviews by cafe id" request inside the componentDidMount react lifecycle method. Here is how to implement it in hooks - https://reactjs.org/docs/hooks-effect.html
Hope this will help,