Finish desktop View and and details with similars films

alexdlli · Mar 24, 2022 · 0125cc8 · 0125cc8
1 parent 1fdc857
commit 0125cc8
Show file tree

Hide file tree

Showing 8 changed files with 226 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
+    "swiper": "^8.0.7",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

diff --git a/src/components/Similars/index.js b/src/components/Similars/index.js
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { Movie } from '../../pages/Home/styles';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+
+import { Container } from './styles';
+
+function Similarly() {
+  const { id } = useParams()
+  const [movies, setMovies] = useState([]);
+  const image_path = 'https://image.tmdb.org/t/p/w500/';
+
+  useEffect(() => {
+    fetch(`https://api.themoviedb.org/3/movie/${id}/similar?api_key=${process.env.REACT_APP_API_MOVIE_DB}&language=pt-BR&page=1`)
+      .then(response => response.json())
+      .then(data => setMovies(data.results))
+    console.log(movies)
+    console.log(id)
+  }, [id, movies])
+
+
+  return (
+    <Container>
+      <Swiper
+        spaceBetween={1}
+        slidesPerView={5}
+      >
+        {movies.map(movie => {
+          return (
+            <SwiperSlide key={movie.id}>
+              <Movie >
+                <Link to={`/details/${movie.id}`}>
+                  <img src={`${image_path}${movie.poster_path}`} alt={movie.title} />
+                </Link>
+                <span>{movie.title}</span>
+              </Movie>
+            </SwiperSlide>
+          )
+        })}
+      </Swiper>
+    </Container>
+  );
+}
+
+export default Similarly;
diff --git a/src/components/Similars/styles.js b/src/components/Similars/styles.js
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  padding: 6rem 1rem;
+`;
diff --git a/src/pages/Details/index.js b/src/pages/Details/index.js
@@ -1,21 +1,47 @@
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom'
-// import { Container } from './styles';
+import { Link, useParams } from 'react-router-dom'
+import Similarly from '../../components/Similars';
+import { Container } from './styles';
 
 function Details() {
-
-  const [movie, setMovie] = useState([]);
+  const [movie, setMovie] = useState({});
+  const image_path = 'https://image.tmdb.org/t/p/w500/'
   const { id } = useParams()
 
   useEffect(() => {
     fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=${process.env.REACT_APP_API_MOVIE_DB}&language=pt-BR&page=1`)
-      .then(respone => respone.json())
-      .then(data =>
-        setMovie(data))
-  }, [])
+      .then(response => response.json())
+      .then(data => {
+        const { title, overview, poster_path, release_date } = data
+
+        const movie = {
+          id,
+          title,
+          overview,
+          image: `${image_path}${poster_path}`,
+          releaseDate: release_date,
+        }
+
+        setMovie(movie)
+      })
+  }, [id])
 
   return (
-    <h1>{JSON.stringify(movie)}</h1>
+    <Container>
+      <div className="movie">
+        <img src={movie.image} alt={movie.overview} />
+        <div className="details">
+          <h1>{movie.title}</h1>
+          <span>Sinopse: {movie.overview}</span>
+          <span className='release_date'>Data de Lançamento: {movie.releaseDate}</span>
+          <Link to='/' >
+            <button>Go Home</button>
+          </Link>
+        </div>
+      </div>
+
+      <Similarly movieId={movie.id} />
+    </Container>
   );
 }
 

diff --git a/src/pages/Details/styles.js b/src/pages/Details/styles.js
@@ -1,5 +1,60 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  
+  padding: 4rem 0;
+
+  h1 {
+    margin: 3rem 0;
+  }
+
+  .movie {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  img {
+    width: 300px;
+    border-radius: 1rem;
+  }
+
+  .details { 
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 4rem;
+    max-width: 50%;
+}
+
+  button {
+    background: #6654da;
+    border: none;
+    cursor: pointer;
+    border-radius: 1rem;
+    color: white;
+    padding: 0.8rem 2rem;
+    margin-top: 1rem;
+    font-size: 100%;
+    transition: all 0.3s;
+  }
+
+  button:hover {
+    filter: brightness(0.8);
+  }
+
+  button:active {
+    filter: brightness(0.5);
+  }
+
+  span {
+    line-height: 130%;
+    margin-bottom: 1rem;
+    font-size: 110%;
+  }
+
+  .release_date {
+    opacity: 0.5;
+  }
 `;
+
+
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
@@ -1,17 +1,31 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom'
 
-import { Container, MovieList, Movie } from './styles';
+import { Container, MovieList, Movie, Pagination } from './styles';
 
 function Home() {
+  const [page, setPage] = useState(1)
+  const [movies, setMovies] = useState([]);
+  const image_path = 'https://image.tmdb.org/t/p/w500/'
+
   useEffect(() => {
-    fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.REACT_APP_API_MOVIE_DB}&language=pt-BR&page=1`)
-      .then(respone => respone.json())
+    fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.REACT_APP_API_MOVIE_DB}&language=pt-BR&page=${page}`)
+      .then(response => response.json())
       .then(data => setMovies(data.results))
-  }, [])
+  }, [page])
 
-  const [movies, setMovies] = useState([]);
-  const image_path = 'https://image.tmdb.org/t/p/w500/'
+  function handleChangeBackPage() {
+    if (page !== 1) {
+      setPage(page - 1)
+    } else {
+      return
+    }
+  }
+
+  function handleChangeNextPage() {
+    setPage(page + 1)
+    console.log(page)
+  }
 
   return (
     <Container>
@@ -29,7 +43,12 @@ function Home() {
           )
         })}
       </MovieList>
-    </Container>
+
+      <Pagination>
+        <button onClick={handleChangeBackPage}>Previews Page</button>
+        <button onClick={handleChangeNextPage}> Next Page</button>
+      </Pagination>
+    </Container >
   );
 }
 

diff --git a/src/pages/Home/styles.js b/src/pages/Home/styles.js
@@ -10,11 +10,11 @@ export const Container = styled.div`
 
 export const MovieList = styled.ul`
 
-list-style: none;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    column-gap: 3rem;
-    row-gap: 4rem;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  column-gap: 3rem;
+  row-gap: 4rem;
 `
 
 export const Movie = styled.li`
@@ -42,3 +42,33 @@ export const Movie = styled.li`
     text-align: center;
   }
 `
+
+
+export const Pagination = styled.div`
+  padding: 4rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+
+  button {
+  background: #6654da;
+  border: none;
+  cursor: pointer;
+  border-radius: 1rem;
+  color: white;
+  padding: 0.8rem 2rem;
+  margin-top: 1rem;
+  font-size: 100%;
+  transition: all 0.3s;
+}
+
+button:hover {
+  filter: brightness(0.8);
+}
+
+button:active {
+  filter: brightness(0.5);
+}
+`
+
diff --git a/yarn.lock b/yarn.lock
@@ -3594,6 +3594,13 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom7@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
+  integrity sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domelementtype@1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
@@ -7760,6 +7767,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+ssr-window@^4.0.0, ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -8011,6 +8023,14 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swiper@^8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.0.7.tgz#9eefe26c703e627a6dc7237c0109e172ce06e3f6"
+  integrity sha512-GHjDfxSZdupfU7LrSVOpaNaT7R1D2zxopPGBFz1UOXOtsYvVJLg0k6NvkTAD7qn0ASl5pTti82qoYwvYvIkg4g==
+  dependencies:
+    dom7 "^4.0.4"
+    ssr-window "^4.0.2"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"