Technigo · SofieFerrari · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_OPENDB_KEY= 23ace2b0c27910f5cec13f5bdb014044
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,20 +1,20 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
+	root: true,
+	env: { browser: true, es2020: true },
+	extends: [
+		"eslint:recommended",
+		"plugin:react/recommended",
+		"plugin:react/jsx-runtime",
+		"plugin:react-hooks/recommended",
+	],
+	ignorePatterns: ["dist", ".eslintrc.cjs"],
+	parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+	settings: { react: { version: "18.2" } },
+	plugins: ["react-refresh"],
+	rules: {
+		"react-refresh/only-export-components": [
+			"warn",
+			{ allowConstantExport: true },
+		],
+	},
 }
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/movie.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Movie Site Project</title>
   </head>

diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+from = "/*"
+to = "/index.html"
+status = 200
diff --git a/package.json b/package.json
@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-lottie": "^1.2.4",
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/public/movie.svg b/public/movie.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,22 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom"
+import { useParams } from "react-router-dom"
+import { Movies } from "./components/FirstPage.jsx"
+import { Details } from "./components/SecondPage.jsx"
+import { Nav } from "./components/Nav"
+import { useEffect, useState } from "react"
+import { NotFound } from "./components/NotFound.jsx"
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
-};
+	return (
+		<BrowserRouter>
+			<main>
+				{/* <Nav /> */}
+				<Routes>
+					<Route path="/" element={<Movies />} />
+					<Route path="/details/:slug" element={<Details />} />
+					<Route path="/notfound/" element={<NotFound />} />
+				</Routes>
+			</main>
+		</BrowserRouter>
+	)
+}
diff --git a/src/components/BackImage.jsx b/src/components/BackImage.jsx
@@ -0,0 +1,19 @@
+import Lottie from "react-lottie"
+import animationData from "../lotties/backanimation.json"
+
+export const BackImage = () => {
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData,
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	}
+
+	return (
+		<div>
+			<Lottie options={defaultOptions} height={200} width={200} />
+		</div>
+	)
+}
diff --git a/src/components/DetailList.jsx b/src/components/DetailList.jsx
@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom"
+import "../styling/DetailList.css"
+import { BackImage } from "./BackImage"
+
+export const DetailList = ({ detailData }) => {
+	console.log("check data in DetailList", detailData)
+	return (
+		<>
+			{/* {detailData &&
+				detailData.results.map((detail) => ( */}
+			<div className="detail-wrapper">
+				<div
+					className="detail-background"
+					style={{
+						backgroundImage: `url(https://media.themoviedb.org/t/p/w780${detailData.backdrop_path})`,
+						backgroundRepeat: "no-repeat",
+						backgroundSize: "cover",
+						minWidth: "100VW",
+					}}>
+					<div className="details-card">
+						<Link to={"/"}>
+							<BackImage className="back-btn" />
+						</Link>
+						<img
+							className="poster-image"
+							src={`https://image.tmdb.org/t/p/w342${detailData.poster_path}`}
+							alt={`Movie poster for ${detailData.title}`}
+						/>
+						<div className="poster-text">
+							<h1>{detailData.title}</h1>
+							<h2>⭐ {detailData.vote_average.toFixed(1)}</h2>
+							<p>{detailData.overview}</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</>
+	)
+}
diff --git a/src/components/FirstPage.jsx b/src/components/FirstPage.jsx
@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react"
+import { PopularList } from "./PopularList.jsx"
+import { Loader } from "./Loader"
+
+export const Movies = () => {
+	const [movieData, setMovieData] = useState(null)
+	const [isLoading, setIsLoading] = useState(true)
+
+	const apiEnv = import.meta.env.VITE_OPENDB_KEY
+	const testUrl = `https://api.themoviedb.org/3/movie/popular?api_key=${apiEnv}&language=en-US&page=1`
+
+	useEffect(() => {
+		fetch(testUrl)
+			.then((result) => result.json())
+			.then((json) => {
+				setMovieData(json)
+				setIsLoading(false)
+			})
+			.catch((error) => {
+				console.error(error)
+			})
+	}, [testUrl])
+	console.log("moviedata firstpage", movieData)
+	return (
+		<>
+			{isLoading && <Loader />}
+			<PopularList movieData={movieData} />
+		</>
+	)
+}
diff --git a/src/components/Images.jsx b/src/components/Images.jsx
@@ -0,0 +1,3 @@
+export const Images = ({ url, altText }) => {
+	return <img className="images" src=""></img>
+}
diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
@@ -0,0 +1,27 @@
+import Lottie from "react-lottie"
+import animationData from "../lotties/animation.json"
+
+export const Loader = () => {
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData,
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	}
+
+	return (
+		<div>
+			<Lottie options={defaultOptions} height={300} width={300} />
+		</div>
+	)
+}
+
+//nedan är försök att få animationen att visas längre.
+
+// useEffect(() => {
+// 	export const DelayLottie = setTimeout(() => {
+// 		setLoading(true)
+// 	}, 3000)
+// })
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
@@ -0,0 +1,21 @@
+import React from "react"
+import { Link, NavLink } from "react-router-dom"
+import "../styling/Nav.css"
+
+export const Nav = () => {
+	return (
+		<>
+			<div className="navbar-title">
+				<h1>RomComs</h1>
+			</div>
+			<ul className="navbar">
+				<li>
+					<NavLink to="/">Movies</NavLink>
+				</li>
+				<li>
+					<NavLink to="/details">Details</NavLink>
+				</li>
+			</ul>
+		</>
+	)
+}
diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx
@@ -0,0 +1,3 @@
+export const NotFound = () => {
+	return <div>Page not found</div>
+}
diff --git a/src/components/PopularList.jsx b/src/components/PopularList.jsx
@@ -0,0 +1,43 @@
+import "../styling/PopularList.css"
+import { Link } from "react-router-dom"
+
+//functional component
+export const PopularList = ({ movieData }) => {
+	return (
+		<div className="movie-wrapper">
+			<div className="movie-list">
+				{movieData &&
+					movieData.results.map((movie) => (
+						<Link key={movie.id} to={`/details/${movie.id}`}>
+							<div className="movie-card" key={movie.id}>
+								<div className="hover-text">
+									<h1 className="title">{movie.title}</h1>
+									<h2 className="release-date">
+										Released {movie.release_date}
+									</h2>
+								</div>
+								<div className="poster">
+									<img
+										className="movie-image"
+										src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`}
+										alt={`Movie poster for ${movie.title}`}
+									/>
+								</div>
+							</div>
+						</Link>
+					))}
+			</div>
+		</div>
+	)
+}
+
+// 	return (
+// 		<>
+// 			{jsonMovies.map((movie) => (
+// 				<article className="movie-card" key={movie.id}>
+// 					<Link to={`/details/${movie.id}`}></Link>
+// 				</article>
+// 			))}
+// 		</>
+// 	)
+// }
diff --git a/src/components/SecondPage.jsx b/src/components/SecondPage.jsx
@@ -0,0 +1,44 @@
+import "../styling/SecondPage.css"
+import { useState, useEffect } from "react"
+import { Loader } from "./Loader"
+import { NotFound } from "./NotFound"
+import { Link, useParams } from "react-router-dom"
+import { DetailList } from "./DetailList"
+
+export const Details = () => {
+	const [detailData, setDetailData] = useState(null)
+	const [isLoading, setIsLoading] = useState(true)
+
+	const params = useParams()
+	const movieId = params.slug
+	const API_KEY = "23ace2b0c27910f5cec13f5bdb014044"
+
+	const listUrl = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${API_KEY}&language=en-US`
+
+	useEffect(() => {
+		fetch(listUrl)
+			.then((result) => result.json())
+			.then((json) => {
+				setDetailData(json)
+				setIsLoading(false)
+			})
+			.catch((error) => {
+				console.error(error)
+			})
+	}, [listUrl])
+
+	if (!detailData || detailData === undefined) {
+		return <Loader />
+	}
+
+	if (detailData.success === false) {
+		return <NotFound />
+	}
+	console.log("detailtdata secondpage", detailData)
+	return (
+		<>
+			{isLoading && <Loader />}
+			<DetailList detailData={detailData} />
+		</>
+	)
+}
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,14 @@
 :root {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	background-color: rgb(252, 213, 220);
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+		monospace;
 }