Search⌘ K
AI Features
Home
Courses
Beginning Node.js, Express & MongoDB Development

Creating the Login Component

Explore how to create a login component using React in this lesson. Learn to manage user input, update application state via callback functions, and redirect users after login. This foundational setup prepares you to implement full authentication later while enabling user-specific actions like editing and deleting reviews in the app.

We'll cover the following...

In this lesson, we’ll learn how to implement the login functionality for our application. It should be noted that we won’t be doing a full-featured authentication system in this lesson, but the lesson will serve as a template for us to fill in our own full-fledged authentication ...

import React, {useState, useEffect } 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';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Container from 'react-bootstrap/Container';
import Card from 'react-bootstrap/Card';

const MoviesList = props => { 
  
  const [movies, setMovies] = useState([])
  const [searchTitle, setSearchTitle] = useState("")
  const [searchRating, setSearchRating] = useState("")
  const [ratings, setRatings] = useState(["All Ratings"])




  useEffect(() =>{ 
    retrieveMovies()
    retrieveRatings()
  },[])




  const retrieveMovies = () =>{
    MovieDataService.getAll()
      .then(response =>{
        console.log(response.data)
        setMovies(response.data.movies) 
      })
      .catch( e =>{
        console.log(e)
      })
  }

  const retrieveRatings = () =>{
    MovieDataService.getRatings()
      .then(response =>{
        console.log(response.data)
 	  //start with 'All ratings' if user doesn't specify any ratings
        setRatings(["All Ratings"].concat(response.data)) 
      })
      .catch( e =>{
        console.log(e)
      })
  }  

  const onChangeSearchTitle = e => {
    const searchTitle = e.target.value
    setSearchTitle(searchTitle);
  }

  const onChangeSearchRating = e => {
    const searchRating = e.target.value
    setSearchRating(searchRating);
  }  

  const find =(query, by) =>{
    MovieDataService.find(query,by)
      .then(response =>{
        console.log(response.data)
        setMovies(response.data.movies)
      })
      .catch(e =>{
        console.log(e)
      })
  }

  const findByTitle = () => {
    find(searchTitle, "title")    
  }
  const findByRating = () => {
    if(searchRating === "All Ratings"){
      retrieveMovies()
    }
    else{
      find(searchRating, "rated")
    }
  }  

  return (
    <div className="App">   
      <Container>
        <Form>        
          <Row>
            <Col>
              <Form.Group>          
                <Form.Control 
                  type="text" 
                  placeholder="Search by title" 
                  value={searchTitle} 
                  onChange={onChangeSearchTitle} 
                />
              </Form.Group>        
              <Button 
                variant="primary" 
                type="button" 
                onClick={findByTitle}
              > 
                Search         
              </Button>
            </Col>
            <Col>
              <Form.Group>
                <Form.Control as="select" onChange={onChangeSearchRating} >
                  {ratings.map(rating =>{
                    return(
                      <option value={rating}>{rating}</option>
                    )
                  })}
                </Form.Control>       
              </Form.Group>    
              <Button 
                  variant="primary" 
                  type="button" 
                  onClick={findByRating}
              > 
                Search         
              </Button>  
            </Col>
          </Row>              
        </Form> 
        <Row>
            {movies.map((movie) =>{
              return(
                <Col>
                  <Card style={{ width: '18rem' }}>
                    <Card.Img src={movie.poster+"/100px180"} />
                    <Card.Body>
                      <Card.Title>{movie.title}</Card.Title>
                      <Card.Text>
                        Rating: {movie.rated}                        
                      </Card.Text>
                      <Card.Text>{movie.plot}</Card.Text>                                            
                      <Link to={"/movies/"+movie._id} >View Reviews</Link>
                    </Card.Body>
                  </Card>            
                </Col>                
              )
            })}
        </Row>          
      </Container>        
    </div>
  );

}

export default MoviesList;
Initial files we will build on
...