-
Notifications
You must be signed in to change notification settings - Fork 4
/
App.tsx
94 lines (84 loc) · 2.67 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { useState } from "react";
import "./App.css";
import { MovieList } from "./components/MovieList";
import { AddMovieModal } from "./components/AddMovieModal";
import ghibli from "./data/ghibli_movies.json";
import { Movie } from "./interfaces/movie";
import { Button } from "react-bootstrap";
const MOVIES = ghibli.map(
(movie): Movie => ({
...movie,
watched: { seen: false, liked: false, when: null }
})
);
function watchMovie(movie: Movie, seen: boolean, liked: boolean): Movie {
return {
...movie,
watched: {
...movie.watched,
seen: seen,
liked: liked,
when: new Date().toLocaleString()
}
};
}
function App(): JSX.Element {
const [movies, setMovies] = useState<Movie[]>(MOVIES);
const [showAddModal, setShowAddModal] = useState(false);
function setMovieWatched(id: string, seen: boolean, liked: boolean) {
setMovies(
movies.map(
(movie: Movie): Movie =>
id === movie.id ? watchMovie(movie, seen, liked) : movie
)
);
}
function editMovie(id: string, newMovie: Movie) {
setMovies(
movies.map(
(movie: Movie): Movie => (movie.id === id ? newMovie : movie)
)
);
}
function deleteMovie(id: string) {
setMovies(movies.filter((movie: Movie): boolean => movie.id !== id));
}
function addMovie(newMovie: Movie) {
const existing = movies.find(
(movie: Movie): boolean => movie.id === newMovie.id
);
if (existing === undefined) {
setMovies([...movies, newMovie]);
}
}
const handleCloseAddModal = () => setShowAddModal(false);
const handleShowAddModal = () => setShowAddModal(true);
return (
<div className="App">
<header className="App-header">Movie Records</header>
<div>
<MovieList
movies={movies}
editMovie={editMovie}
deleteMovie={deleteMovie}
setMovieWatched={setMovieWatched}
></MovieList>
</div>
<div>
<Button
variant="success"
className="m-4"
onClick={handleShowAddModal}
>
Add New Movie
</Button>
<AddMovieModal
show={showAddModal}
handleClose={handleCloseAddModal}
addMovie={addMovie}
></AddMovieModal>
</div>
</div>
);
}
export default App;