Creating the Login Component
Learn how to set up login functionality in React.
We'll cover the following...
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 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.valuesetName(name);}const onChangeId = e => {const id = e.target.valuesetId(id);}const login = () => {props.login({name: name, id: id})props.history.push('/')}return(<div><Form><Form.Group><Form.Label>Username</Form.Label><Form.Controltype="text"placeholder="Enter username"value={name}onChange={onChangeName}/></Form.Group><Form.Group><Form.Label>ID</Form.Label><Form.Controltype="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 ...