Skip to content

Commit

Permalink
Added CardDetails Page
Browse files Browse the repository at this point in the history
  • Loading branch information
ZOUHAIRFGRA committed Oct 27, 2023
1 parent 6f86c94 commit de15ffd
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 35 deletions.
39 changes: 39 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.17.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Expand Down
72 changes: 41 additions & 31 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import './App.css';
import React, { useState, useEffect } from "react";
import MovieCard from "./MovieCard";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; // Import BrowserRouter, Routes, and Route
import MovieCard from "./components/MovieCard";
import MovieDetails from "./components/MovieDetails"; // Import the MovieDetails component
import SearchIcon from "./search.svg";
// 45486baf
const API_URL = "https://www.omdbapi.com?apikey=45486baf";
import "./App.css";

const API_URL = "https://www.omdbapi.com?apikey=128dc7d1";

const App = () => {
const [searchTerm, setSearchTerm] = useState("");
const [movies, setMovies] = useState([]);

useEffect(() => {
searchMovies("Marvel");
searchMovies("Batman");
}, []);

const searchMovies = async (title) => {
Expand All @@ -20,35 +23,42 @@ const App = () => {
};

return (
<div className="app">
<h1>MovieLand</h1>

<div className="search">
<input
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search for movies"
/>
<img
src={SearchIcon}
alt="search"
onClick={() => searchMovies(searchTerm)}
/>
</div>
<Router>
<div className="app">
<h1>MovieLand</h1>

{movies?.length > 0 ? (
<div className="container">
{movies.map((movie) => (
<MovieCard movie={movie} />
))}
</div>
) : (
<div className="empty">
<h2>No movies found</h2>
<div className="search">
<input
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search for movies"
/>
<img
src={SearchIcon}
alt="search"
onClick={() => searchMovies(searchTerm)}
/>
</div>
)}
</div>

<Routes>
<Route path="/" element={<MovieList movies={movies} />} />
<Route path="/movie/:imdbID" element={<MovieDetails />} />
</Routes>
</div>
</Router>
);
};

const MovieList = ({ movies }) => (
<div className="container">
{movies?.length > 0 ? (
movies.map((movie) => <MovieCard movie={movie} />)
) : (
<div className="empty">
<h2>No movies found</h2>
</div>
)}
</div>
);

export default App;
7 changes: 3 additions & 4 deletions src/MovieCard.jsx → src/components/MovieCard.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react";

import { Link } from "react-router-dom";
const MovieCard = ({ movie: { imdbID, Year, Poster, Title, Type } }) => {
return (
<div className="movie" key={imdbID}>
<Link to={`/movie/${imdbID}`} className="movie">
<div>
<p>{Year}</p>
</div>
Expand All @@ -13,12 +13,11 @@ const MovieCard = ({ movie: { imdbID, Year, Poster, Title, Type } }) => {
alt={Title}
/>
</div>

<div>
<span>{Type}</span>
<h3>{Title}</h3>
</div>
</div>
</Link>
);
};

Expand Down
48 changes: 48 additions & 0 deletions src/components/MovieDetails.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

const MovieDetails = () => {
const { imdbID } = useParams();
const [movieDetails, setMovieDetails] = useState(null);

useEffect(() => {
const API_URL = `https://www.omdbapi.com?apikey=128dc7d1&i=${imdbID}`; // Use the IMDb ID to fetch movie details

const fetchMovieDetails = async () => {
try {
const response = await fetch(API_URL);
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
setMovieDetails(data);
} catch (error) {
console.error("Error fetching movie details:", error);
}
};

fetchMovieDetails();
}, [imdbID]);

return (
<div className="movie-details">
{movieDetails ? (
<div>
<h2>{movieDetails.Title}</h2>
<p>{movieDetails.Plot}</p>
<p>Director: {movieDetails.Director}</p>
<p>Actors: {movieDetails.Actors}</p>
<p>Genre: {movieDetails.Genre}</p>
<p>Runtime: {movieDetails.Runtime}</p>
<p>IMDb Rating: {movieDetails.imdbRating}</p>
</div>
) : (
<div className="empty">
<h2>Loading movie details...</h2>
</div>
)}
</div>
);
};

export default MovieDetails;

0 comments on commit de15ffd

Please sign in to comment.