Gorev Tamamlandı

client/src/App.js

@@ -1,36 +1,56 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, { useState, useEffect } from "react";
+import axios from "axios";
 
-import KaydedilenlerListesi from './Filmler/KaydedilenlerListesi';
+import { Switch, Route } from "react-router-dom";
 
-export default function App () {
+import KaydedilenlerListesi from "./Filmler/KaydedilenlerListesi";
+import FilmListesi from "./Filmler/FilmListesi";
+import Film from "./Filmler/Film";
+
+export default function App() {
   const [saved, setSaved] = useState([]); // Stretch: the ids of "saved" movies
   const [movieList, setMovieList] = useState([]);
 
   useEffect(() => {
     const FilmleriAl = () => {
       axios
-        .get('http://localhost:5001/api/filmler') // Burayı Postman'le çalışın
-        .then(response => {
+        .get("http://localhost:5001/api/filmler") // Burayı Postman'le çalışın
+        .then((response) => {
+          console.log(response.data);
           // Bu kısmı log statementlarıyla çalışın
           // ve burdan gelen response'u 'movieList' e aktarın
+          setMovieList(response.data);
         })
-        .catch(error => {
-          console.error('Sunucu Hatası', error);
+        .catch((error) => {
+          console.error("Sunucu Hatası", error);
         });
-    }
+    };
     FilmleriAl();
   }, []);
 
-  const KaydedilenlerListesineEkle = id => {
+  const KaydedilenlerListesineEkle = (id) => {
     // Burası esnek. Aynı filmin birden fazla kez "saved" e eklenmesini engelleyin
+    let isSaved = saved.find((f) => f.id == id); // true or false
+    if (!isSaved) {
+      let savedMovie = movieList.find((m) => m.id == id);
+      let newSaved = [...saved, savedMovie];
+      setSaved(newSaved);
+    }
   };
 
   return (
     <div>
-      <KaydedilenlerListesi list={[ /* Burası esnek */]} />
+      <KaydedilenlerListesi list={saved} />
 
-      <div>Bu Div'i kendi Routelarınızla değiştirin</div>
+      <Switch>
+        <Route path="/movies/:id">
+          <Film save={KaydedilenlerListesineEkle} />
+        </Route>
+        <Route path="/">
+          <FilmListesi movies={movieList} />
+        </Route>
+      </Switch>
+      <div></div>
     </div>
   );
-}
+};

client/src/index.js

@@ -1,9 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import './index.css';
-import App from './App';
-
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+import "./index.css";
+import App from "./App";
 
 // Routeların çalışması için <App /> öğesini düzenlemeniz gerekir
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById("root")
+);