Workintech · gorkemgokcek · Nov 28, 2023
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,36 +1,50 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { Switch, Route } from "react-router-dom";
+import KaydedilenlerListesi from "./Filmler/KaydedilenlerListesi";
+import FilmListesi from "./Filmler/FilmListesi";
+import FilmCard from "./Filmler/FilmCard";
 
-import KaydedilenlerListesi from './Filmler/KaydedilenlerListesi';
-
-export default function App () {
+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);
+          setMovieList(response.data);
           // Bu kısmı log statementlarıyla çalışın
           // ve burdan gelen response'u 'movieList' e aktarın
         })
-        .catch(error => {
-          console.error('Sunucu Hatası', error);
+        .catch((error) => {
+          console.error("Sunucu Hatası", error);
         });
-    }
+    };
     FilmleriAl();
   }, []);
 
-  const KaydedilenlerListesineEkle = id => {
+  const KaydedilenlerListesineEkle = (movie) => {
+    if (!saved.includes(movie)) {
+      setSaved([...saved, movie]);
+    }
+
     // Burası esnek. Aynı filmin birden fazla kez "saved" e eklenmesini engelleyin
   };
 
   return (
     <div>
-      <KaydedilenlerListesi list={[ /* Burası esnek */]} />
-
-      <div>Bu Div'i kendi Routelarınızla değiştirin</div>
+      <KaydedilenlerListesi list={saved} />
+      <Switch>
+        <Route exact path="/">
+          <FilmListesi movies={movieList} />
+        </Route>
+        <Route path="/filmler/:id">
+          <FilmCard kaydet={KaydedilenlerListesineEkle} />
+        </Route>
+      </Switch>
     </div>
   );
-}
+}
diff --git a/client/src/Filmler/Film.js b/client/src/Filmler/Film.js
@@ -1,28 +1,34 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { useParams } from "react-router-dom/cjs/react-router-dom.min";
+import KaydedilenlerListesi from "./KaydedilenlerListesi";
 
 export default function Film(props) {
   const [movie, setMovie] = useState();
+  const { kaydet } = props;
 
-  let id = 1;
+  let { id } = useParams();
   // URL'den alınan :id parametresini bu değişkene aktarın
 
   useEffect(() => {
     axios
       .get(`http://localhost:5001/api/filmler/${id}`) // Bu uç noktayı Postman'le çalışın
-      .then(response => {
-          // Bu kısmı log statementlarıyla çalışın
-          // ve burdan gelen response'u 'movie' e aktarın
+      .then((response) => {
+        setMovie(response.data);
+        // Bu kısmı log statementlarıyla çalışın
+        // ve burdan gelen response'u 'movie' e aktarın
       })
-      .catch(error => {
+      .catch((error) => {
         console.error(error);
       });
     // Bu effect her `id ` değiştiğinde çalışmalı
     // Bunu nasıl gerçekleştirebiliriz?
-  }, []);
+  }, [id]);
 
   // Yalnızca esnek görevlere geçtiğinizde burdaki yorum etiketini kaldırın
-  // const filmiKaydet = evt => { }
+  const filmiKaydet = (evt) => {
+    kaydet(movie);
+  };
 
   if (!movie) {
     return <div>Film bilgisi yükleniyor...</div>;
@@ -42,13 +48,15 @@ export default function Film(props) {
         </div>
         <h3>Actors</h3>
 
-        {stars.map(star => (
+        {stars.map((star) => (
           <div key={star} className="movie-star">
             {star}
           </div>
         ))}
       </div>
-      <button className="save-button">Kaydet</button>
+      <button onClick={filmiKaydet} className="save-button">
+        Kaydet
+      </button>
     </div>
   );
 }
diff --git a/client/src/Filmler/FilmCard.js b/client/src/Filmler/FilmCard.js
@@ -1,5 +1,73 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { useParams } from "react-router-dom/cjs/react-router-dom.min";
+import KaydedilenlerListesi from "./KaydedilenlerListesi";
 
-export default function FilmCard (props) {
-  return;
+export default function Film(props) {
+  const [movie, setMovie] = useState();
+  const { kaydet } = props;
+  const { film } = props;
+
+  let { id } = useParams();
+  // URL'den alınan :id parametresini bu değişkene aktarın
+
+  useEffect(() => {
+    if (film) {
+      setMovie(film);
+    }
+    if (id) {
+      axios
+        .get(`http://localhost:5001/api/filmler/${id}`) // Bu uç noktayı Postman'le çalışın
+        .then((response) => {
+          setMovie(response.data);
+          // Bu kısmı log statementlarıyla çalışın
+          // ve burdan gelen response'u 'movie' e aktarın
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      // Bu effect her `id ` değiştiğinde çalışmalı
+      // Bunu nasıl gerçekleştirebiliriz?
+    }
+  }, [id]);
+
+  // Yalnızca esnek görevlere geçtiğinizde burdaki yorum etiketini kaldırın
+  const filmiKaydet = (evt) => {
+    kaydet(movie);
+  };
+
+  if (!movie) {
+    return <div>Film bilgisi yükleniyor...</div>;
+  }
+
+  const { title, director, metascore, stars } = movie;
+
+  return (
+    <div className="save-wrapper">
+      <div className="movie-card">
+        <h2>{title}</h2>
+        <div className="movie-director">
+          Director: <em>{director}</em>
+        </div>
+        <div className="movie-metascore">
+          Metascore: <strong>{metascore}</strong>
+        </div>
+        {!film && (
+          <>
+            <h3>Actors</h3>
+            {stars.map((star) => (
+              <div key={star} className="movie-star">
+                {star}
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+      {!film && (
+        <button onClick={filmiKaydet} className="save-button">
+          Kaydet
+        </button>
+      )}
+    </div>
+  );
 }
diff --git a/client/src/Filmler/FilmListesi.js b/client/src/Filmler/FilmListesi.js
@@ -1,27 +1,15 @@
-import React from 'react';
+import React from "react";
+import FilmCard from "./FilmCard";
+import { Link } from "react-router-dom/cjs/react-router-dom.min";
 
 export default function FilmListesi(props) {
   return (
     <div className="movie-list">
-      {props.movies.map(movie => (
-        <FilmDetayları key={movie.id} movie={movie} />
+      {props.movies.map((movie) => (
+        <Link to={`/filmler/${movie.id}`}>
+          <FilmCard key={movie.id} film={movie} />{" "}
+        </Link>
       ))}
     </div>
   );
-  }
-
-function FilmDetayları(props) {
-  const { title, director, metascore } = props.movie;
-
-  return (
-    <div className="movie-card">
-      <h2>{title}</h2>
-      <div className="movie-director">
-        Director: <em>{director}</em>
-      </div>
-      <div className="movie-metascore">
-        Metascore: <strong>{metascore}</strong>
-      </div>
-    </div>
-  );
 }
diff --git a/client/src/Filmler/KaydedilenlerListesi.js b/client/src/Filmler/KaydedilenlerListesi.js
@@ -1,13 +1,20 @@
 import React from "react";
+import { Link, useHistory } from "react-router-dom/cjs/react-router-dom.min";
 
 export default function KaydedilenlerListesi(props) {
+  const history = useHistory();
+  const handleClick = () => {
+    history.push("/");
+  };
   return (
     <div className="saved-list">
       <h3>Kaydedilen Filmler:</h3>
       {props.list.map((movie) => (
         <span className="saved-movie">{movie.title}</span>
       ))}
-      <button className="home-button">Anasayfa</button>
+        <button onClick={handleClick} className="home-button">
+          Anasayfa
+        </button>
     </div>
   );
 }
diff --git a/client/src/index.js b/client/src/index.js
@@ -1,13 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 
+import "./index.css";
+import App from "./App";
 
 // Routeların çalışması için <App /> öğesini düzenlemeniz gerekir
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
+  <BrowserRouter>
     <App />
+  </BrowserRouter>
 );