Technigo · EmiliaGA · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023 · Mar 28, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,20 @@
 # Project Movies
 
-Replace this readme with your own information about your project.
+This pair-programming project was to make a react app with multiple pages using routes.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+✓  Pair-programming
+
+✓ How to build multi-page applications using React Router.
+
+✓ How to pass information such as product ids, or blog post titles in the URL and pick this up in React router to load dynamic content.
+
+✓ Practice using APIs in React - combining `useState` with `useEffect`
 
 ## 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?
+We layed out the foundation together planning what was to be done, then branched out making different components. Merging a couple of times then using pair programming getting the components mounted and working toghether. We managed to add a few stretch goals (back button, header and loader). If we had more time we would also add categorys to the header fetching them from the API.
 
 ## 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://master--musical-florentine-5987b8.netlify.app/
+
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -4,14 +4,18 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "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/assets/arrow-left-solid.svg b/code/public/assets/arrow-left-solid.svg
diff --git a/code/public/index.html b/code/public/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -14,6 +13,10 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Technigo React App</title>
+    <script
+      src="https://kit.fontawesome.com/3f7fe28938.js"
+      crossorigin="anonymous"
+    ></script>
   </head>
 
   <body>
@@ -30,5 +33,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-
 </html>
diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,41 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
+
+import { Loader } from 'components/Loader';
+import { Header } from 'components/Header'
+import { MovieList } from 'components/MovieList';
+import { Details } from 'components/Details'
+import { NotFound } from 'components/NotFound'
 
 export const App = () => {
+  const [movieList, setMovieList] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    fetch('https://api.themoviedb.org/3/movie/popular?api_key=c78445f7216324dcfc408149681f2fcd&language=en-US&page=1')
+      .then((data) => data.json())
+      .then((configuredData) => {
+        setMovieList(configuredData.results);
+      })
+      .catch((error) => console.error(error))
+      .finally(() => setLoading(false));
+  }, []);
+  if (loading) {
+    return (
+      <Loader />
+    )
+  }
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <Header />
+      <Routes>
+        <Route path="/" element={<MovieList movieList={movieList} />} />
+        <Route path="/404" element={<NotFound />} />
+        <Route path="/*" element={<Navigate to="/404" replace />} />
+        <Route path="/details/:movieId" element={<Details details={Details} />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
+
diff --git a/code/src/components/Details.css b/code/src/components/Details.css
@@ -0,0 +1,71 @@
+.details-page {
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-background-picture {
+  min-height: 100vh;
+  background-size: cover;
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.movie-data-cover {
+  height: 290px;
+  width: 195px;
+  border: 5px solid white;
+}
+
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  background-color: #1313139e;
+  padding: 50px;
+}
+
+.movie-data-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.movie-data-title {
+  color: white;
+  text-shadow: 1px 1px #4d4d4d;
+}
+
+.movie-data-rating {
+  display: inline-block;
+  background-color: white;
+  padding: 0 5px;
+  font-size: 20px;
+  text-shadow: none;
+  font-weight: 500;
+  color: black;
+}
+
+.movie-data-overview {
+  color: white;
+  max-width: 400px;
+}
+
+@media (min-width: 769px) {
+  .detail-container {
+    justify-content: flex-end;
+  }
+
+  .movie-data-section {
+    flex-direction: row;
+    bottom: 20px;
+    gap: 20px;
+    align-items: flex-end;
+  }
+
+  .movie-data-cover {
+    width: auto;
+    height: 400px;
+  }
+}