binhtran04

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../utils';

const PrivateRoute = ({component: Component, ...rest}) => {
    return (

        // Show the component only when the user is logged in
        // Otherwise, redirect the user to /signin page
        <Route {...rest} render={props => (

binhtran04

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLogin } from '../utils';

const PublicRoute = ({component: Component, restricted, ...rest}) => {
    return (
        // restricted = false meaning public route
        // restricted = true meaning restricted route
        <Route {...rest} render={props => (
            isLogin() && restricted ?

binhtran04

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Switch } from 'react-router-dom';
import Home from './components/Home';
import Dashboard from './components/Dashboard';
import SignIn from './components/SignIn';
import PrivateRoute from './components/PrivateRoute';
import PublicRoute from './components/PublicRoute';

class App extends Component {

binhtran04

import React, { useState } from "react";

import "./CostTable.css"

const _defaultCosts = [
  {
    name: "Rice",
    price: 40
  },
  {

binhtran04

import React, { useState } from "react";

import "./CostTable.css";

const _defaultCosts = [
  {
    name: "Rice",
    price: 40
  },
  {

binhtran04

/**
initialMovies = [
  {
    id: uuidv4(),
    title: 'The Godfather',
    year: 1972,
    watched: false,
  },
  {
    id: uuidv4(),

binhtran04

import React from 'react';
import { Movies } from './Movies';
import { MoviesProvider } from './MoviesContext';
import { NewMovie } from './NewMovie';
import './App.scss';

export const App = () => {
  return (
    <div className="App">
      <MoviesProvider>

binhtran04

import React from 'react';
import { Movie } from './Movie';
import { useMoviesContext } from './MoviesContext';

export const Movies = () => {
  const { movies } = useMoviesContext();

  return (
    <section className="Movies">
      <h2>My Movies</h2>

binhtran04

import React from 'react';
import { useMoviesContext } from './MoviesContext';

export const Movie = ({ movie }) => {
  const { markWatchedMovie } = useMoviesContext();

  const handleCheckboxChange = () => {
    markWatchedMovie(movie.id);
  };

binhtran04

const MoviesContext = React.createContext();
const MARK_WATCHED_MOVIE = 'MARK_WATCHED_MOVIE';

const moviesReducer = (state, action) => {
  switch (action.type) {
    case MARK_WATCHED_MOVIE: {
      const movies = state.movies.map(movie => {
        if (movie.id === action.payload.id) {
          return { ...movie, watched: !movie.watched };
        }