Technigo · LinaAdamsson · Mar 29, 2023 · Mar 29, 2023 · Mar 29, 2023 · Mar 30, 2023
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/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",

diff --git a/code/public/favicon_io/about.txt b/code/public/favicon_io/about.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Leckerli One
+- Font Author: Copyright (c) 2011 Gesine Todt (www.gesine-todt.de), with Reserved Font Names "Leckerli"
+- Font Source: http://fonts.gstatic.com/s/leckerlione/v16/V8mCoQH8VCsNttEnxnGQ-1itLZxcBtItFw.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
diff --git a/code/public/favicon_io/android-chrome-192x192.png b/code/public/favicon_io/android-chrome-192x192.png
diff --git a/code/public/favicon_io/android-chrome-512x512.png b/code/public/favicon_io/android-chrome-512x512.png
diff --git a/code/public/favicon_io/apple-touch-icon.png b/code/public/favicon_io/apple-touch-icon.png
diff --git a/code/public/favicon_io/favicon-16x16.png b/code/public/favicon_io/favicon-16x16.png
diff --git a/code/public/favicon_io/favicon-32x32.png b/code/public/favicon_io/favicon-32x32.png
diff --git a/code/public/favicon_io/favicon.ico b/code/public/favicon_io/favicon.ico
diff --git a/code/public/favicon_io/site.webmanifest b/code/public/favicon_io/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/code/public/index.html b/code/public/index.html
@@ -4,6 +4,9 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta property="og:title" content="Lina and Emilia movie site" >
+    <meta property="og:description" content="Top 20 popular movies right now">
+    <meta propert="og:image" content="🎬">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -13,7 +16,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <link rel="shortcut icon" href="./favicon_io/favicon.ico" type="image/x-icon">
+    <title>Lina and Emilia movie site</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,22 @@
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable */
 import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { MoviesList } from 'components/MoviesList';
+import { MoviesDetails } from 'components/MoviesDetails';
+import NotFound from 'components/NotFound';
+import Footer from 'components/Footer'
+
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MoviesList />} />
+        <Route path="/movies/:movieId" element={<MoviesDetails />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+      <Footer />
+    </BrowserRouter>
+    );
 }
diff --git a/code/src/components/Credits.js b/code/src/components/Credits.js
@@ -0,0 +1,26 @@
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable */
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { API_KEY } from '../data/Url';
+
+ const Credits = () => {
+    const [ credits, setCredits ] = useState([])
+    const { movieId } = useParams()
+
+    useEffect(() => {
+        fetch(`https://api.themoviedb.org/3/movie/${movieId}/credits?api_key=${API_KEY}&language=en-US`)
+        .then((res) => res.json())
+        .then((data) => setCredits(data.cast.slice(0, 5)))
+    }, [movieId])
+
+    return (
+      <div className="credits">
+            {credits.map((credit) => (
+          <p key={credit.name}>{credit.name}</p>
+            ))}
+          </div>
+  )
+}
+
+export default Credits;
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react';
+import '../css/Footer.css';
+
+const Footer = () => {
+    return (
+    <section className="footer-container">
+        <span className="text">Made by Emilia Saberski and Lina Adamsson Technigo 2023</span>
+    </section>
+    )
+}
+
+export default Footer;
diff --git a/code/src/components/MoviesDetails.js b/code/src/components/MoviesDetails.js
@@ -0,0 +1,50 @@
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable */
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { DETAILS_URL } from '../data/Url';
+import '../css/MoviesDetails.css';
+import Credits from './Credits';
+import '../css/Credits.css'
+
+export const MoviesDetails = () => {
+  const [movie, setMovie] = useState()
+  const navigate = useNavigate();
+  const { movieId } = useParams()
+
+  const onBackButtonClick = () => {
+    navigate(-1)
+  }
+
+  useEffect(() => {
+    fetch(DETAILS_URL(movieId))
+      .then((res) => res.json())
+      .then((json) => {
+        setMovie(json)
+      })
+  }, [movieId])
+  console.log(movie)
+
+  return (
+    <section className="movie-container">
+        {movie && (
+            <><img src={`https://image.tmdb.org/t/p/w1280${movie.backdrop_path}`} alt={movie.title} className="background" /><div className="summary">
+            <button className="back-button" type="button" onClick={(onBackButtonClick)}> Back </button>
+            <img src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} className="poster" />
+            <div className="details">
+              <h1>{movie.title}</h1>
+              <span className="tagline">{movie.tagline}
+              </span>
+              <span className="overview">{movie.overview}
+              </span>
+              <Credits />
+              <span className="rating">⭐️ {Math.round(movie.vote_average * 10) / 10}
+              </span>
+              <span className="length">{movie.runtime} min
+              </span>
+            </div>
+          </div></>
+        )}
+          </section>
+    )
+  }
diff --git a/code/src/components/MoviesList.js b/code/src/components/MoviesList.js
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { LIST_URL } from '../data/Url';
+import '../css/MoviesList.css'
+
+export const MoviesList = () => {
+  const [movies, setMovies] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    setLoading(true)
+    fetch(LIST_URL)
+      .then((res) => res.json())
+      .then((json) => {
+        setMovies(json.results)
+        setTimeout(() => setLoading(false), 200)
+      })
+  }, [])
+  console.log(movies)
+
+  if (loading) {
+    return <p className="loader">Loading</p>
+  }
+
+  return (
+    <section className="movies-container">
+      {movies.map((movie) => (
+        <Link key={movie.id} to={`/movies/${movie.id}`}>
+          <div className="movie-overlay">
+            <img src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`} alt={movie.title} className="movie-poster" />
+            <h1 className="movie-text">{movie.title}</h1>
+          </div>
+        </Link>
+      ))}
+    </section>
+  )
+}
diff --git a/code/src/components/NotFound.js b/code/src/components/NotFound.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import '../css/NotFound.css';
+
+const NotFound = () => {
+  const navigate = useNavigate();
+  const onHomeButtonClick = () => {
+    navigate('/')
+  }
+  return (
+    <div className="error-container">
+      <p className="error-message">We can&apos;t seem to find the page you&apos;re looking for. Please go back to main page and try again.
+      </p>
+      <button className="link-to-main" type="button" onClick={onHomeButtonClick}>Take me back</button>
+      <span className="film-emoji">🎬</span>
+    </div>
+  )
+}
+
+export default NotFound;
diff --git a/code/src/css/Credits.css b/code/src/css/Credits.css
@@ -0,0 +1,3 @@
+* {
+color: white;
+}