Correct way to make GET and POST requests-CodePudding

I want to be able to write a review and display all written reviews (which is none at the moment since the page isn't built yet). It's my first time doing a project like this and I can't get it to work.

App.js. I want const fetchReviews to GET and display all reviews that has been written and I want const postReview to simply post a new review to the page.

import React, {useState, useEffect} from "react";

import { NewReview } from "./NewReview.js";
import { AllReviews } from "./AllReviews";

const reviewsURL = "http://localhost:8080/reviews"

export const App = () => {
  const [existingReviews, setExistingReviews] = useState([])
  const [newReview, setNewReview] = useState('')

  const fetchReviews = () => {
    fetch(reviewsURL)
    .then(response => response.json())
    .then((json) => {
      setExistingReviews(reviews)
    }).catch(error => {
      console.log(error.message)
    })
  }

  useEffect(() => {
    fetchReviews();
  }, []);


  const postReview = (event) => {
    event.preventDefault();

    fetch(reviewsURL, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({message: newReview})
    })
    .then (response => response.json())
    .then (() => {
      fetchReviews();
      setNewReview('')
    }).catch(error => {
      console.log(error.message)
    })
  }
  return (
    <>

<NewReview
      newReview={newReview}
      setNewReview={setNewReview}
      handlesubmit={postReview}
      />

{<AllReviews 
        allReviews={existingReviews} 
        />}
    </>
  )
}

Index.js will act as my server, I'm using localhost. I will not use mongo/mongoose.

I have tried many different things now for the past two weeks, read a bunch of questions and answers on Stack, I've tried import(), require(), update json package but I am so stuck. Which makes me wonder if the import and usage of AllReviews and NewReviews is even close to being correct?

Please help, I have spent so many hours on this.

import express from 'express'

import { NewReview } from '../frontend/src/NewReview.js';
import { AllReviews } from '../frontend/src/AllReviews.js';

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

app.get("/", (request, response) => {
    response.json({ message: "Hello from server!" });
  });

// GET all reviews
app.get("/reviews", (request, response) => {
  response.status(201).json(AllReviews)
});

  //POST a new review
  app.post('/reviews', async (request, response) => {
    try {
      response.status(201).json(NewReview)
    } 
      catch (err) {
      response.status(400).json({ message: 'Sorry, could not save review to the database', errors: err.errors
      })
    }
  })



app.listen(PORT, () => {
  console.log(`Server listening on http://localhost:${PORT}`);
});

NewReview.js

import React from "react";

export const NewReview = ({newReview, setNewReview, handleSubmit}) => {
    return(
        <section className="newReviewContainer">
            <form onSubmit={handleSubmit}>
                <label>
                    <textarea
                    placeholder="Write your review here"
                    rows="3"
                    onChange={event => setNewReview(event.target.value)}
                    value={newReview}>
                    </textarea>
                </label>

                <button className="sendReview"
                type="submit">
                    <p>SEND REVIEW</p>
                </button>
            </form>
        </section>
    )
}

CodePudding user response：

WebbH commented that I don't need to import my frontend files into my server. So I deleted the part in my server where I tried to import it and that solved my problem.