Yu's movie-site project

README.md

@@ -1,13 +1,12 @@
 # Project Movies
 
-Replace this readme with your own information about your project.
+The assignment was to produce a movie site showing popular movies, using react and react- routers, as well as APIs fetches.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+The styling took me more time than expected.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://yourmoviesiteby-ym.netlify.app/

code/package.json

@@ -11,7 +11,8 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

code/src/App.js

@@ -1,9 +1,28 @@
+import { Header } from 'components/Header';
+import { MovieDetails } from 'components/MovieDetails';
+import { MovieList } from 'components/MovieList';
+import { Tvseries } from 'components/Tvseries'
+import { TvseriesDetails } from 'components/TvseriesDetails';
+import { Upcoming } from 'components/Upcoming'
+import { NotFound } from 'components/NotFound';
 import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { UpcomingDetails } from 'components/UpcomingDetails';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <Header />
+      <Routes>
+        <Route path="/" element={<MovieList movies={MovieList} />} />
+        <Route path="/moviedetails/:id" element={<MovieDetails />} />
+        <Route path="/tvseries" element={<Tvseries />} />
+        <Route path="/tvdetails/:id" element={<TvseriesDetails />} />
+        <Route path="/upcoming" element={<Upcoming />} />
+        <Route path="/upcomingdetails/:id" element={<UpcomingDetails />} />
+        <Route path="/404" element={<NotFound />} />
+        <Route path="*" element={<Navigate to="/404" />} />
+      </Routes>
+    </BrowserRouter>
   );
 }

code/src/components/Header.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+export const Header = () => {
+  return (
+    <header>
+      <div className="logo">
+        <img className="logoImg" src="/cinema_city.png" alt="" />
+      </div>
+      <ul className="navlinkWrapper">
+        <li className="link">
+          <NavLink to="/">Home</NavLink>
+        </li>
+        <li className="link">
+          <NavLink to="/tvseries">TV-serise</NavLink>
+        </li>
+        <li className="link">
+          <NavLink to="/upcoming">Upcoming</NavLink>
+        </li>
+      </ul>
+    </header>
+  )
+}

code/src/components/MovieDetails.js

@@ -0,0 +1,59 @@
+
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { MOVIE_DETAILS_URL } from 'utils/urls';
+
+export const MovieDetails = () => {
+  const [details, setDetails] = useState([])
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const { id } = useParams();
+
+  const onBackButtonClick = () => {
+    navigate(-1);
+  }
+
+  useEffect(() => {
+    fetch(MOVIE_DETAILS_URL(id))
+      .then((response) => response.json())
+      .then((data) => setDetails(data))
+      .catch((error) => alert(error, 'error'))
+      .finally(() => setLoading(false));
+  }, [id])
+
+  if (loading) {
+    return (
+      <div className="loading-container">
+        <h2>Loading..</h2>
+      </div>
+    );
+  }
+
+  return (
+    <div className="movie-detailsWrapper">
+
+      <img
+        className="movie-imge-backdrop"
+        src={`https://image.tmdb.org/t/p/w1280${details.backdrop_path}`}
+        alt="poster" />
+
+      <button className="backBtn" type="button" onClick={onBackButtonClick}> ⇐ Go back </button>
+
+      <div className="movie-detailsBox">
+        <div className="poster">
+          <img className="posterImg" src={`https://image.tmdb.org/t/p/w300${details.poster_path}`} alt="profile" />
+        </div>
+        <div className="title">
+          <h2>{details.title}</h2>
+          <div className="rating">
+            <span>{(Math.round(details.vote_average * 10) / 10)}⭐</span>
+          </div>
+          <div className="summary">
+            <p>{details.overview}</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  )
+}

code/src/components/MovieList.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { MOVIE_LIST_URL } from 'utils/urls';
+
+export const MovieList = () => {
+  const [movieList, setMovieList] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetch(MOVIE_LIST_URL)
+      .then((response) => response.json())
+      .then((data) => setMovieList(data.results))
+      .catch((error) => alert(error, 'error'))
+      .finally(() => setLoading(false));
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="loading-container">
+        <h2>Loading..</h2>
+      </div>
+    );
+  }
+
+  return (
+    <section className="movieListWrapper">
+      <h1 className="popular-movie">Popular right now</h1>
+      <div className="popular-movie-container">
+        {movieList.map((singleMovie) => {
+          return (
+            <div className="movie-wrapper">
+              <Link key={singleMovie.id} to={`/moviedetails/${singleMovie.id}`}>
+                <img className="posterImg" src={`https://image.tmdb.org/t/p/w300${singleMovie.poster_path}`} alt={singleMovie.title} />
+                <div className="hoverBox">
+                  <h1 className="hoverTitle">{singleMovie.original_title}</h1>
+                  <p className="hoverDate">Release date: {singleMovie.release_date}</p>
+                </div>
+              </Link>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}

code/src/components/NotFound.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const NotFound = () => {
+  const navigate = useNavigate()
+  const onBackButtonClick = () => {
+    navigate('/')
+  }
+  return (
+    <div>
+      <h2>Sorry,nothing here</h2>
+      <button type="button" onClick={onBackButtonClick}>go to HomePage</button>
+    </div>
+  )
+}

code/src/components/Tvseries.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { TV_SERIES_URL } from 'utils/urls';
+
+export const Tvseries = () => {
+  const [tvList, setTvList] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetch(TV_SERIES_URL)
+      .then((response) => response.json())
+      .then((data) => setTvList(data.results))
+      .catch((error) => alert(error, 'error'))
+      .finally(() => setLoading(false));
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="loading-container">
+        <h2>Loading..</h2>
+      </div>
+    );
+  }
+
+  return (
+    <section className="tvListWrapper">
+      <h1 className="popular-tv">Popular TV-Series</h1>
+      <div className="popular-tv-container">
+        {tvList.map((singleTv) => {
+          return (
+            <div className="tv-wrapper">
+              <Link key={singleTv.id} to={`/tvdetails/${singleTv.id}`}>
+                <img className="posterImg" src={`https://image.tmdb.org/t/p/w300${singleTv.poster_path}`} alt={singleTv.name} />
+                <div className="hoverBox">
+                  <h1 className="hoverTitle">{singleTv.original_name}</h1>
+                  <p className="hoverDate">Release date: {singleTv.first_air_date}</p>
+                </div>
+              </Link>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}