EvaSjoholm/Project-movies

README.md

@@ -1,13 +1,14 @@
 # Project Movies
 
-Replace this readme with your own information about your project.
+How to build multi-page application using React Router. Pass information such as product ids, blog post titles in the URL and pick this up in React router (dynamic content). Practice using APIs in React combining useState and useEffect. 
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This project was ment for pair-programming but I did this solo due to time schedule conflicts. 
 
 ## 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?
+My main problem with this project was actually understanding API and how to change it to be able to interract and use the URL with React. I spent hours just trying to figure out the details of that,combining it with all the steps required for React Router and multi-pages that is asked for the app. 
+I needed a lot of help which former students was able to provide. I redid my code and saved a lot of tryouts in external platforms, but my knowledge is not due just yet in this level of React. I find it stimulating to work with but I need more given time to actually unerstand earlier works with props, map and useEffect. Adding API fetch and many componenets with Routes was way to difficult I felt doing solo. 
+I worked a lot with turtorials from Technigo, tried the Example project steps but found it very time consuming not sure if it's the best way. Then I booked session with technigo-coach and external help through friends, and former students work to be able to focus on understanding the steps and learning about React Routers wonders.
 
 ## 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://lighthearted-dolphin-81e027.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,26 @@
 import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { NotFound } from 'components/NotFound'
+import { MovieList } from 'components/MovieList'
+import { Header } from 'components/Header'
+import { Details } from 'components/Details'
+import { TVSeriesList } from 'components/TVseriesList'
+import { TVseriesDetails } from 'components/TVseriesDetails'
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <main>
+        <Header />
+        <Routes>
+          <Route path="/" element={<MovieList />} />
+          <Route path="/movies/:id" element={<Details />} />
+          <Route path="/tvseries" element={<TVSeriesList />} />
+          <Route path="/tvseries/:id" element={<TVseriesDetails />} />
+          <Route path="/404" element={<NotFound />} />
+          <Route path="*" element={<Navigate to="/404" />} />
+        </Routes>
+      </main>
+    </BrowserRouter>
   );
 }

code/src/components/Details.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { NotFound } from './NotFound';
+
+export const Details = () => {
+  const [movieDetails, setMovieDetails] = useState([])
+  const { id } = useParams()
+
+  const FetchDetails = () => {
+    fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=7f5b30559b3d85aec06d3d1a010f4a39&language=en-US`)
+      .then((response) => response.json())
+      .then((data) => setMovieDetails(data))
+      .catch((error) => {
+        console.log(error)
+        if (error) {
+          return (<NotFound />
+
+          )
+        }
+      })
+  }
+
+  useEffect(() => {
+    FetchDetails()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div
+      className="background"
+      style={{ backgroundImage: `url(http://image.tmdb.org/t/p/original${movieDetails.backdrop_path})` }}>
+      <Link to="/" className="back-button">
+        <img src="./back-button.png" alt="back button" />
+        <p>Home</p>
+      </Link>
+      <div className="movie-detail">
+        <img src={`http://image.tmdb.org/t/p/w342${movieDetails.poster_path}`} alt="movie" />
+        <div className="details">
+          <h1>{movieDetails.title}</h1>
+        </div>
+        <p>{movieDetails.overview}</p>
+      </div>
+    </div>
+  )
+}

code/src/components/Header.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+
+export const Header = () => {
+  return (
+    <header>
+
+      <img className="movienation" src="./red.png" alt="movie-icon" width="112" height="25" />
+
+      <ul className="navlink-container">
+        <li className="navlink">
+          <NavLink to="/TVseries"><span role="img" className="emoji" aria-label="popcorn">🍿</span></NavLink>
+        </li>
+      </ul>
+    </header>
+  )
+}

code/src/components/Movie.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+export const Movie = ({ title, releaseDate, movieID, poster }) => {
+  const [isHover, setIsHover] = useState(false)
+
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+
+  return (
+    <div
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}>
+
+      <Link to={`/movies/${movieID}`}>
+        <img src={`http://image.tmdb.org/t/p/w342${poster}`} alt="movie" />
+        <div className={isHover ? 'description' : 'hidden-description'}>
+          <h1>{title}</h1>
+          <p>Released {releaseDate}</p>
+        </div>
+      </Link>
+    </div>
+  )
+}

code/src/components/MovieList.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react'
+import { MOVIES_URL } from 'utils/Urls'
+import { Movie } from 'components/Movie'
+
+export const MovieList = () => {
+  const [list, setList] = useState([])
+
+  const FetchMovies = () => {
+    fetch(MOVIES_URL)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data.results)
+        setList(data.results)
+      })
+  }
+  useEffect(() => {
+    FetchMovies()
+  }, [])
+
+  return (
+    <main>
+      {list.map((movie) => (
+        <div
+          className="movie-card"
+          key={movie.id}>
+          <Movie
+            title={movie.title}
+            releaseDate={movie.release_date}
+            movieID={movie.id}
+            poster={movie.poster_path} />
+        </div>
+      ))}
+    </main>
+  )
+}

code/src/components/NotFound.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const NotFound = () => {
+  const navigate = useNavigate();
+  const returnToHomePage = () => {
+    navigate('/');
+  }
+
+  return (
+    <div className="not-found">
+      <img id="not-found" src="../not-found.png" alt="not-found" />
+      <p>Ooh noo.... Page not found </p>
+      <button type="button" onClick={returnToHomePage}>Return here</button>
+    </div>
+  );
+}

code/src/components/TVseries.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+export const TVSeries = ({ singleTvAirDate, singleTvID, originalName, poster }) => {
+  const [isHover, setIsHover] = useState(false)
+
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+
+  return (
+    <div
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}>
+
+      <Link to={`/TVseries/${singleTvID}`}>
+        <img src={`https://image.tmdb.org/t/p/w342${poster}`} alt="TVseries" />
+        <div className={isHover ? 'description' : 'hidden-description'}>
+          <h1>{originalName}</h1>
+          <p>First aired {singleTvAirDate.first_air_date}</p>
+        </div>
+      </Link>
+    </div>
+  )
+}

code/src/components/TVseriesDetails.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react'
+import { useParams, Link } from 'react-router-dom';
+import { NotFound } from './NotFound';
+
+export const TVseriesDetails = () => {
+  const [details, setDetails] = useState([])
+  const { id } = useParams()
+
+  const fetchTvDetails = () => {
+    fetch(`https://api.themoviedb.org/3/tv/${id}?api_key=7f5b30559b3d85aec06d3d1a010f4a39&language=en-US`)
+      .then((response) => response.json())
+      .then((data) => setDetails(data))
+      .catch((error) => {
+        console.log(error)
+        if (error) {
+          return (<NotFound />
+
+          )
+        }
+      })
+  }
+
+  useEffect(() => {
+    fetchTvDetails()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div
+      className="tv-background"
+      style={{ backgroundImage: `url(https://image.tmdb.org/t/p/w1280${details.backdrop_path})` }}>
+      <Link to="/" className="back-button">
+        <img src="./back-button.png" alt="back button" />
+        <p>Home</p>
+      </Link>
+      <div className="tv-detail">
+        <img src={`https://image.tmdb.org/t/p/w300${details.poster_path}`} alt="profile" />
+
+        <div className="tv-detail">
+          <h1>{details.title}</h1>
+        </div>
+        <p>{details.overview}</p>
+      </div>
+    </div>
+  )
+};