Listing Reviews in the Movie Component

Explore how to list movie reviews within a React component by mapping through review data and using React-Bootstrap for layout. Learn to conditionally render edit and delete options based on user authentication, and format review dates with the Moment.js library for better readability.

We'll cover the following...

Formatting the date
Testing the 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

Javascript (babel-node)

<Container>
<Row>
  ...
  <Col>
    <Card>
      ...
    </Card>
    <h2>Reviews</h2>
    <br></br>   
    // Code for listing reviews starts here        
    {movie.reviews.map((review, index)=>{
      return (
        <Media key={index}>
          <Media.Body>
          <h5>
             {review.name+" reviewed on "} {review.date}
          </h5>             
            <p>{review.review}</p>
            {props.user && props.user.id === review.user_id && 
              <Row>                          
                <Col><Link to={{
                  pathname:"/movies/"+props.match.params.id+"/review", 
                  state: {currentReview: review}
                  }}>Edit</Link>
                </Col>
                <Col><Button variant="link">Delete</Button></Col>
              </Row>
            }
          </Media.Body>
        </Media> 
      )
    })}                         
  </Col>          
</Row>
</Container>

1.Introduction and Setting up the Database

2.Setting up the Backend

3.Setting up the Frontend : Creating the Server

4.Setting up the Frontend: Creating the React Components

5.Deployment

Project

6.Conclusion

Listing Reviews in the Movie Component