Frontend not link properly to Backend

JavaScript
#1

I cannot get the webpage to display the information as intended. The backend retrieves the data from MongoDB properly, but it is not being retrieved/displayed entirely by the frontend.

Here’s my repo:

I’m using axios

I have an idea of where the error is but I am not sure.

MERN tutorial Chapter: Create React Frontend
#2

This is how it’s supposed to look:

image
image1073×567 100 KB

This is hot it looks:

image
image1197×667 16.1 KB

#3

The code you have in services\restaurant.js isn’t the one used with the starting backend code, it is the one used with the MongoDB Realm code.

This is the starting code in services\restaurant.js before the switch to Realm.

import http from '../http-common';

class RestaurantDataService {
  getAll(page = 0) {
    return http.get(`?page=${page}`);
  }

  get(id) {
    return http.get(`/id/${id}`);
  }

  find(query, by = 'name', page = 0) {
    return http.get(`?${by}=${query}&page=${page}`);
  }

  createReview(data) {
    return http.post('/review', data);
  }

  updateReview(data) {
    return http.put('/review', data);
  }

  deleteReview(id, userId) {
    return http.delete(`/review?id=${id}`, { data: { user_id: userId } });
  }

  getCuisines(id) {
    return http.get(`/cuisines`);
  }
}

export default new RestaurantDataService();

Starting endpoints
https://youtu.be/mrHNSanmqQ4?t=5287

Start of Realm function and endpoints creation
https://youtu.be/mrHNSanmqQ4?t=7654

#4

Thanks for making me aware of that. I was probably too tired to pay attention to the details. Nothing like a good nap.

#6

I cannot get the links to display reviews when I click on View reviews button.
It’s just showing a blank page

#7

Please try to keep this in one thread per project.

Also, there is absolutely no context in your post for people that do not know about your other threads. I have merged your threads.

Did you add a review? You have to create the reviews. Initially, you can just use Postman (or Insomnia or whatever) until the form code is set up.

https://youtu.be/mrHNSanmqQ4?t=3156

You obviously have to click the correct restaurant that you added the review to as well. Anyway, it works for me.

#8

I have created two reviews and I do use Insomnia. When I click on View reviews
The page is blank.

image
image913×394 52.4 KB

image
image913×394 40 KB

#9

Did you check the DB? Do you see the reviews collection?

#10

I forgot I updated some code.

You going to have issues with the version of react-router-dom you installed and the code used in the tutorial.

For example props.match.params.id in frontend\src\components\restaurants.js.

You can use the useParams hook from react-router-dom version 6.

const { id } = useParams();

Now you can replace all references to props.match.params.id with just id.

If you really want to use V6 then you should look at the upgrading from v5 docs.

#11

Thanks. I think I am using version 6?
The below snippet is from package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.1",
    "bootstrap": "^5.1.3",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
#12

@lasjorg

After using
const { id } = useParams();

I am getting this error message:

ERROR in src/components/restaurants.js
  Line 15:16:  'useParams' is not defined  no-undef

Search for the keywords to learn more about each error.

webpack 5.71.0 compiled with 1 error and 1 warning in 58 ms
#13

Yes, that is the “problem”. The tutorial was written using V5.

Did you import useParams? Are you calling it as a function?

useParams()

import { Link, useParams } from 'react-router-dom';

const Restaurants = (props) => {
  const  { id } = useParams();
  ...rest of component code
}
#14

What can I do about these warnings when I inspect the webpage? Should I be worried about as a (trying to become) developer?

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `RestaurantsList`. See https://reactjs.org/link/warning-keys for more information.
option
RestaurantsList@http://localhost:3000/static/js/bundle.js:426:88
Routes@http://localhost:3000/static/js/bundle.js:42791:7
div
div
Router@http://localhost:3000/static/js/bundle.js:42728:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:41534:7
App@http://localhost:3000/static/js/bundle.js:45:72

I’ve found this website with a potential solution: Potential solution

#15

Yes, you should always give mapped items unique keys.

#16

Thanks. I’ll look into that after finishing the tut.

#17

The Layout of my webpage is very different to that of the tutorial. The fields are very close to each other. On the log-in page the button and the two fields are very close. Is there any particular reason for this? What can I do about it?

#18

I wouldn’t know but you have Bootstrap so you can just use the spacing classes as needed.

#19

I’ve tried the Bootstrap spacing classes, and they work, kinda. Well I was doing the wrong way at first, like this
class="mb-3" className="my-1 form-group"

When I did it like this, the elements would go back to their original position whenever the page was refreshed.

I messed around a bit and the correct way seemed to be like this:
<div className="form-group my-1">

and for the buttons:

<button onClick={login} className="btn btn-success my-1">

Once again, thanks for the tips @lasjorg

#20

@lasjorg

I cannot connect to MongoDB database. I get this error which I’ve never experienced before:

image
image822×157 23.7 KB

Any idea?

#21

Make sure you have whitelisted your current IP, if you have a dynamic IP it might be easier to just whitelist all 0.0.0.0/0

Might also want to make sure the cluster hasn’t been paused.