Technigo · YlvaKarlsson · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023
diff --git a/FETCH_HEAD b/FETCH_HEAD
@@ -0,0 +1 @@
+Reading from stdin via: C:\Users\YLVAKA~1\AppData\Local\Temp\code-stdin-ZF4
diff --git a/README.md b/README.md
@@ -1,13 +1,16 @@
 # Project Movies
 
-Replace this readme with your own information about your project.
+This weeks project is a pair-programming-project in collaboration with Sandra Olsson and Ylva Karlsson from Team Elephants of Technigos Web Dev Boot Camp Spring 2023.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The project is to use themoviedb.org's API to fetch a list of movies, display them on a page, and then link to a movie detail page when you click on the movie cover image.
 
 ## 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 used the TMDB:s API to fetch information about the movies and build this application using React. On Monday 27th of March we started this week off with planning the project in a simple Trello-board, we've signed up for the TMDB and got access to our API-key for this project. 
+
+Our goal for the week was to pair-programme as much as we can and in the end of the week we will edit this readme with more information.
+If we had more time for this, we would add more pages and fetch more information from other endpoints in the API. And continue to improve the overall design.
 
 ## 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.
+Link to Netlify: https://w8-movies-team-skenfrukt-ylva-sandra.netlify.app/
diff --git a/YlvasTestingBranch b/YlvasTestingBranch
@@ -0,0 +1 @@
+Reading from stdin via: C:\Users\YLVAKA~1\AppData\Local\Temp\code-stdin-Cw7
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,20 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^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",
+    "moment": "^2.29.4",
     "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/images/back_arrow.svg b/code/public/images/back_arrow.svg
diff --git a/code/public/index.html b/code/public/index.html
@@ -4,19 +4,14 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>
-  </head>
+    <title>Movie Releases by Sandra & Ylva - W8 Technigo Boot Camp</title>
+    <meta name="description" content="A movie release project at week 8 in the Technigo Boot Camp 2023">
+      <link rel="icon" type="image/png" size="32x32" href="./movie-projector.png">
+    </head>
 
   <body>
+    <!-- HERE icons credits to https://icons8.com -->
+    <!--icon cred: <a target="_blank" href="https://icons8.com/icon/103463/movie-projector">Movie Projector</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>-->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
@@ -30,5 +25,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-
 </html>
diff --git a/code/public/movie-projector.png b/code/public/movie-projector.png
diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,32 @@
-import React from 'react';
+/* eslint-disable no-trailing-spaces */
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import MovieList from 'components/MovieList';
+// import NotFound from 'components/NotFound';
+// We never used this but we keep it for future usage if necessary
+import MovieDetails from 'components/MovieDetails';
+import { BASE_URL } from 'utils/urls';
 
 export const App = () => {
+  const [movieList, setMovieList] = useState([]);
+
+  useEffect(() => {
+    fetch(BASE_URL)
+      .then((data) => data.json())
+      .then((configuredData) => setMovieList(configuredData.results))
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MovieList movieList={movieList} />} />
+        <Route path="/details/:id" element={<MovieDetails />} />      
+        {/* <Route path="/404" element={<NotFound />} />
+        <Route path="*" element={<Navigate to="/404" />} /> I removed Navigate from the
+        import at the top since I commented this out */}
+      </Routes>
+    </BrowserRouter>
   );
-}
+}