[go: nahoru, domu]
Skip to content

Commit

Permalink
Adding a Watched Movie
Browse files Browse the repository at this point in the history
  • Loading branch information
@AmirrMahmoudi
AmirrMahmoudi committed Jan 4, 2024
1 parent bab9509 commit 3a588c4
Showing 1 changed file with 121 additions and 58 deletions.
179 changes: 121 additions & 58 deletions src/components/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
import { useEffect, useState } from "react";
import StarRating from "./StarRating";

const tempMovieData = [
{
imdbID: "tt1375666",
Title: "Inception",
Year: "2010",
Poster:
"https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
},
{
imdbID: "tt0133093",
Title: "The Matrix",
Year: "1999",
Poster:
"https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg",
},
{
imdbID: "tt6751668",
Title: "Parasite",
Year: "2019",
Poster:
"https://m.media-amazon.com/images/M/MV5BYWZjMjk3ZTItODQ2ZC00NTY5LWE0ZDYtZTI3MjcwN2Q5NTVkXkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_SX300.jpg",
},
];

const tempWatchedData = [
{
imdbID: "tt1375666",
Title: "Inception",
Year: "2010",
Poster:
"https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
runtime: 148,
imdbRating: 8.8,
userRating: 10,
},
{
imdbID: "tt0088763",
Title: "Back to the Future",
Year: "1985",
Poster:
"https://m.media-amazon.com/images/M/MV5BZmU0M2Y1OGUtZjIxNi00ZjBkLTg1MjgtOWIyNThiZWIwYjRiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg",
runtime: 116,
imdbRating: 8.5,
userRating: 9,
},
];
// const tempMovieData = [
// {
// imdbID: "tt1375666",
// Title: "Inception",
// Year: "2010",
// Poster:
// "https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
// },
// {
// imdbID: "tt0133093",
// Title: "The Matrix",
// Year: "1999",
// Poster:
// "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300.jpg",
// },
// {
// imdbID: "tt6751668",
// Title: "Parasite",
// Year: "2019",
// Poster:
// "https://m.media-amazon.com/images/M/MV5BYWZjMjk3ZTItODQ2ZC00NTY5LWE0ZDYtZTI3MjcwN2Q5NTVkXkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_SX300.jpg",
// },
// ];

// const tempWatchedData = [
// {
// imdbID: "tt1375666",
// Title: "Inception",
// Year: "2010",
// Poster:
// "https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
// runtime: 148,
// imdbRating: 8.8,
// userRating: 10,
// },
// {
// imdbID: "tt0088763",
// Title: "Back to the Future",
// Year: "1985",
// Poster:
// "https://m.media-amazon.com/images/M/MV5BZmU0M2Y1OGUtZjIxNi00ZjBkLTg1MjgtOWIyNThiZWIwYjRiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg",
// runtime: 116,
// imdbRating: 8.5,
// userRating: 9,
// },
// ];

const average = (arr) =>
arr.reduce((acc, cur, i, arr) => acc + cur / arr.length, 0);
Expand Down Expand Up @@ -84,13 +84,21 @@ export default function App() {
function handleCloseMovie() {
setSelectedId(null);
}

function handleAddWatched(movie) {
setWatched((watched) => [...watched, movie]);
}

function handleDeleteWatched(id) {
setWatched((watched) => watched.filter((movie) => movie.imdbID !== id));
}

useEffect(
function () {
async function fetchMovies() {
try {
setIsLoading(true);
setError("");
setError("");

const res = await fetch(
`http://www.omdbapi.com/?apikey=${KEY}&s=${query}`
Expand Down Expand Up @@ -141,11 +149,16 @@ export default function App() {
<MovieDetails
selectedId={selectedId}
onCloseMovie={handleCloseMovie}
onAddWatched={handleAddWatched}
watched={watched}
/>
) : (
<>
<WatchedSummary watched={watched} />
<WatchedMoviesList watched={watched} />
<WatchedMoviesList
watched={watched}
onDeleteWatched={handleDeleteWatched}
/>
</>
)}
</Box>
Expand Down Expand Up @@ -244,6 +257,7 @@ const WatchedBox = () => {
);
};
*/

const MovieList = ({ movies, onSelectMovie }) => {
return (
<ul className="list list-movies">
Expand All @@ -269,9 +283,16 @@ const Movie = ({ movie, onSelectMovie }) => {
);
};

function MovieDetails({ selectedId, onCloseMovie }) {
function MovieDetails({ selectedId, onCloseMovie, onAddWatched, watched }) {
const [movie, setMovie] = useState({});
const [isLoading, setIsLoading] = useState(false);
const [userRating, setUserRating] = useState("");

const isWatched = watched.map((movie) => movie.imdbID).includes(selectedId);
console.log(isWatched);
const watchedUserrating = watched.find(
(movie) => movie.imdbID === selectedId
)?.userRating;

const {
Title: title,
Expand All @@ -286,7 +307,21 @@ function MovieDetails({ selectedId, onCloseMovie }) {
Genre: genre,
} = movie;

console.log(title, year);
function handleAdd() {
const newWatchedMovie = {
imdbID: selectedId,
title,
year,
poster,
imdbRating: Number(imdbRating),
runtime: Number(runtime.split(" ").at(0)),
userRating,
};

onAddWatched(newWatchedMovie);
onCloseMovie();
}

useEffect(
function () {
async function getMovieDetails() {
Expand Down Expand Up @@ -332,7 +367,25 @@ function MovieDetails({ selectedId, onCloseMovie }) {

<section>
<div className="rating">
<StarRating maxRating={10} size={24} />
{!isWatched ? (
<>
<StarRating
maxRating={10}
size={24}
onSetRating={setUserRating}
/>
{userRating > 0 && (
<button className="btn-add" onClick={handleAdd}>
+ Add to list
</button>
)}
</>
) : (
<p>
You rated with movie {watchedUserrating}
<span>⭐</span>
</p>
)}
</div>
<p>
<em>{plot}</em>
Expand Down Expand Up @@ -363,11 +416,11 @@ const WatchedSummary = ({ watched }) => {
</p>
<p>
<span>⭐️</span>
<span>{avgImdbRating}</span>
<span>{avgImdbRating.toFixed(1)}</span>
</p>
<p>
<span>🌟</span>
<span>{avgUserRating}</span>
<span>{avgUserRating.toFixed(1)}</span>
</p>
<p>
<span>⏳</span>
Expand All @@ -378,21 +431,25 @@ const WatchedSummary = ({ watched }) => {
);
};

const WatchedMoviesList = ({ watched }) => {
const WatchedMoviesList = ({ watched, onDeleteWatched }) => {
return (
<ul className="list">
{watched.map((movie) => (
<WatchedMovie movie={movie} key={movie.imdbID} />
<WatchedMovie
movie={movie}
key={movie.imdbID}
onDeleteWatched={onDeleteWatched}
/>
))}
</ul>
);
};

const WatchedMovie = ({ movie }) => {
const WatchedMovie = ({ movie, onDeleteWatched }) => {
return (
<li>
<img src={movie.Poster} alt={`${movie.Title} poster`} />
<h3>{movie.Title}</h3>
<img src={movie.poster} alt={`${movie.title} poster`} />
<h3>{movie.title}</h3>
<div>
<p>
<span>⭐️</span>
Expand All @@ -406,6 +463,12 @@ const WatchedMovie = ({ movie }) => {
<span>⏳</span>
<span>{movie.runtime} min</span>
</p>
<button
className="btn-delete"
onClick={() => onDeleteWatched(movie.imdbID)}
>
X
</button>
</div>
</li>
);
Expand Down

0 comments on commit 3a588c4

Please sign in to comment.