Beginning Node.js, Express & MongoDB Development/

...

/

Adding and Editing Reviews

Adding and Editing Reviews

Learn how to implement the functionality that allows the addition and editing of reviews in a MERN stack application.

We'll cover the following...

In this lesson, we’ll learn how to implement the functionality of adding and editing reviews for our movie application.

import React from 'react'
import { Switch, Route, Link } from "react-router-dom"
import "bootstrap/dist/css/bootstrap.min.css"

import AddReview from "./components/add-review"
import MoviesList from "./components/movies-list"
import Movie from "./components/movie"
import Login from "./components/login" 

import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'



function App() {
  const [user, setUser] = React.useState(null)

  async function login(user = null){// default user to null
    setUser(user)
  }

  async function logout(){
    setUser(null)
  }

  return (
    <div className="App">
      <Navbar bg="light" expand="lg">
        <Navbar.Brand>Movie Reviews</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">            
            <Nav.Link>
              <Link to={"/movies"}>Movies</Link>
            </Nav.Link>            
            <Nav.Link>
              { user ? (
                <a onClick={logout}>Logout User</a>
              ) : (
                <Link to={"/login"}>Login</Link>
              )}              
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Switch>
        <Route exact path={["/", "/movies"]} component={MoviesList}>
        </Route>
        <Route path="/movies/:id/review" render={(props)=> 
          <AddReview {...props} user={user} />
        }>
        </Route>
        <Route path="/movies/:id/" render={(props)=> 
          <Movie {...props} user={user} />
        }>
        </Route>
        <Route path="/login" render={(props)=> 
          <Login {...props} login={login} />
        }>            
        </Route>          
      </Switch>           
      
      
    </div>
  );
}

export default App;
Initial files we will build on

When a logged-in user goes to a specific movie’s page and clicks “Add Review,” we’ll render the AddReview component for the user to submit a review, as shown below:

We’ll also use the AddReview component to edit a review. That is, when a user clicks the “Edit” link in an existing review, as shown in the image below:

When editing, we’ll render the AddReview component but with the header “Edit Review,” as shown below. The existing review text will be shown, and users can then edit and submit.

The AddReview component will allow us to both add and edit reviews.

Adding a review

In the add-review.js file, fill in the following code:

Press + to interact
import React, { useState } from 'react'
import MovieDataService from "../services/movies"
import { Link } from "react-router-dom"
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
const AddReview = props => {
  let editing = false
  let initialReviewState = ""
  const [review, setReview] = useState(initialReviewState)
  const [submitted, setSubmitted] = useState(false)
  const onChangeReview = e => {
    const review = e.target.value
    setReview(review);
  } 
 
  const saveReview = () => {
    var data = {
      review: review,
      name: props.user.name,
      user_id: props.user.id,
      movie_id: props.match.params.id // get movie id direct from url
    }
    MovieDataService.createReview(data)
      .then(response => {
      setSubmitted(true)
      })
      .catch(e =>{
        console.log(e);
      })    
  }
    
  return(
    <div>
      {submitted ? (
        <div>
          <h4>Review submitted successfully</h4>
          <Link to={"/movies/"+props.match.params.id}>
            Back to Movie
          </Link> 
        </div>
      ):(
        <Form>
          <Form.Group>
            <Form.Label>{editing ? "Edit" : "Create"} Review</Form.Label>
            <Form.Control 
              type="text" 
              required
              value={review} 
              onChange={onChangeReview}
            />
          </Form.Group> 
          <Button variant="primary" onClick={saveReview}>
            Submit
          </Button>
        </Form>    
      )}
    </div>
  )
}
export default AddReview;

Lines 8–11: We set the editing boolean ...