Simple project

Buka project react_learning yg kita buat di materi components

GitHub - rajifmahendra/React-js-component at materi_component_1GitHub

lalu buat folder baru di dalam components dengan nama Common, dan buat file baru di dalem folder Common dengan nama Like.jsx

Like.jsx

import React from "react";

// Input: liked: boolean
// Output: Onclick

const Like = props => {
    let classes = "fa fa-heart";
    if(!props.liked) classes += "-o";
    return (
        <i onClick={props.onClick} style={{ cursor: "pointer" }} className={classes} aria-hidden="true"></i>
    );

}


export default Like

movies.jsx

import React, {Component} from 'react';
import Like from './Common/Like';
import { getMovies } from '../services/fakeMovieService';

class Movies extends Component {
    state = {
        movies: getMovies()
    };

    handleDelete = movie => {
        const movies = this.state.movies.filter(m => m._id !== movie._id);
        this.setState({ movies })
        // console.log(movie)
    }

    handleLike = (movie) => {
        const movies = [...this.state.movies];
        const index = movies.indexOf(movie);
        movies[index] = { ...movies[index] };
        movies[index].liked = !movies[index].liked;
        this.setState({ movies });

        // console dan ambil tiap data per id
        // console.log("like bos", movie)
    }

    render() {
        const { lenght: count } = this.state.movies;
        if( count === 0)
            return <p>There are no movies in the database</p>;
    
        return (
            <>
            <p>Showing {count} movies in the database</p>
            <table className="table">
                <thead>
                    <tr>
                        <th scope="col">Title</th>
                        <th scope="col">Genre</th>
                        <th scope="col">Stock</th>
                        <th scope="col">Rate</th>
                        <th scope="col"></th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    { this.state.movies.map(movie => (
                        <tr key={movie._id}>
                            <td>{movie.title}</td>
                            <td>{movie.genre.name}</td>
                            <td>{movie.numberInStock}</td>
                            <td>{movie.dailyRentalRate}</td>
                            <td>
                                <Like liked={movie.liked} onClick={() => this.handleLike(movie)} />
                            </td>
                            <td><button onClick={() => this.handleDelete(movie)} className="btn btn-danger btn-sm">Delete</button></td>
                        </tr>
                    )) }
                    
                </tbody>
            </table>
            </>
          )
    }
}

export default Movies