...

/

Creating the Login Component

Creating the Login Component

Learn how to set up login functionality in React.

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 implementation.

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

Setting up the Login component

Fill in the login.js file with the following code:

Press + to interact
import React, {useState} from 'react'
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
const Login = props => {
const [name, setName] = useState("")
const [id, setId] = useState("")
const onChangeName = e => {
const name = e.target.value
setName(name);
}
const onChangeId = e => {
const id = e.target.value
setId(id);
}
const login = () => {
props.login({name: name, id: id})
props.history.push('/')
}
return(
<div>
<Form>
<Form.Group>
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="Enter username"
value={name}
onChange={onChangeName}
/>
</Form.Group>
<Form.Group>
<Form.Label>ID</Form.Label>
<Form.Control
type="text"
placeholder="Enter id"
value={id}
onChange={onChangeId}
/>
</Form.Group>
<Button variant="primary" onClick={login}>
Submit
</Button>
</Form>
</div>
)
}
export default Login;

Lines 7–8: We ...