CeylinYasar-S7G1

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -2,65 +2,65 @@
 
 Konular:
 
-* React Router
-* Link ve NavLink kullanarak belirli routelara bağlantı vermek
-* Route Parametreleri Atama
-* Bileşenlere Proplar göndererek Router render etme
+- React Router
+- Link ve NavLink kullanarak belirli routelara bağlantı vermek
+- Route Parametreleri Atama
+- Bileşenlere Proplar göndererek Router render etme
 
 ## Talimatlar
 
 ### Görev 1: Proje Kurulumu
 
-* [ ] Repoyu **Forklayın** , ve forku klonlayın.
-* [ ] **Not** Çalıştıracağınız 2 server var o yüzden talimatları dikkatlice okuyun.
-* [ ] **Root klasöründe**: `npm install` yazarak bağımlılıkları indirin.
-* [ ] `npm start` ya da `node server.js` komutuyla çalıştırın. (Bu işlemi neden yaptığımız konusunda endişelenmeyin, bu konuyla ilgili ilerleyen adımlarda daha açıklayıcı bilgiler bulacaksın).
-* [ ] Başka bir terminal penceresinde `client` klasörüne girin ve `npm install` yazarak bağımlılıklarını indirin.
-* [ ] `client` klasöründeyken `npm start` yazarak client uygulamasını çalıştırın.
+- [x] Repoyu **Forklayın** , ve forku klonlayın.
+- [x] **Not** Çalıştıracağınız 2 server var o yüzden talimatları dikkatlice okuyun.
+- [x] **Root klasöründe**: `npm install` yazarak bağımlılıkları indirin.
+- [x] `npm start` ya da `node server.js` komutuyla çalıştırın. (Bu işlemi neden yaptığımız konusunda endişelenmeyin, bu konuyla ilgili ilerleyen adımlarda daha açıklayıcı bilgiler bulacaksın).
+- [x] Başka bir terminal penceresinde `client` klasörüne girin ve `npm install` yazarak bağımlılıklarını indirin.
+- [x] `client` klasöründeyken `npm start` yazarak client uygulamasını çalıştırın.
 
-* [ ] Öncelikle uygulamanız client üzerinden çalışmaya başlayınca şuradaki gibi bir tarayıcı penceresi göreceksiniz:  [bknz](./Assets/filmler-anasayfa.png) `localhost:3000` (eğer 3000 kullanılıyorsa port numarası farklı olabilir).
+- [x] Öncelikle uygulamanız client üzerinden çalışmaya başlayınca şuradaki gibi bir tarayıcı penceresi göreceksiniz: [bknz](./Assets/filmler-anasayfa.png) `localhost:3000` (eğer 3000 kullanılıyorsa port numarası farklı olabilir).
 
 ### Görev 2: MVP (MUÜ)
 
 #### Tasarım Dosyaları
 
 Uygulamanızı bitirdiğinizde 2 adet route'u olacaktır:
 
-* [ ] [route SS'/'](./Assets/ilk-route.png)
-* [ ] [route SS '/filmler/:id'](./Assets/ikinci-route.png)
+- [ ] [route SS'/'](./Assets/ilk-route.png)
+- [ ] [route SS '/filmler/:id'](./Assets/ikinci-route.png)
 
 #### Routeların uygulanması
 
-* [ ] Routerlarla app'i düzenleyin.
-* [ ] App dosyanıza 2 adet route ekleyin.
-  * [ ] birinci route'unuz `/` olacak ve `FilmListesi` bileşenini yükleyecek. Bu bileşene proplarla filmler apisinden alınan datayı aktarın.
-  * [ ] diğer route `/filmler/` parametresinden sonra `id` parametresini alacak  (örnek: `/filmler/2`, `/filmler/3` id dinamik olacak). Bu route `Film` bileşenini yükleyecek.
+- [x] Routerlarla app'i düzenleyin.
+- [x] App dosyanıza 2 adet route ekleyin.
+  - [x] birinci route'unuz `/` olacak ve `FilmListesi` bileşenini yükleyecek. Bu bileşene proplarla filmler apisinden alınan datayı aktarın.
+  - [ ] diğer route `/filmler/` parametresinden sonra `id` parametresini alacak (örnek: `/filmler/2`, `/filmler/3` id dinamik olacak). Bu route `Film` bileşenini yükleyecek.
 
 #### İşlevsellik Kazandırın
 
-* [ ] Bir kullanıcı `FilmListesi` içindeki film cardına tıkladığında seçilen filmin detaylarını görebilmeli {`/movies/{tıklanılan film idsi}`.
-* [ ] URL'den seçilen film idsini almak için `Film.js` dosyasının 7. satırını düzenlenemeniz gerekir.
-* [ ] `KaydedilenlerListesi` bileşindeki `AnaSayfa` butonuna işlevsellik kazındırın, Anasayfaya geri dönmeli.
-* [ ] Artık fil listesinde ileri geri ilerleyebiliyor olmalısın ve bir filmin detaylarını görebilmelisin.
+- [ ] Bir kullanıcı `FilmListesi` içindeki film cardına tıkladığında seçilen filmin detaylarını görebilmeli {`/movies/{tıklanılan film idsi}`.
+- [ ] URL'den seçilen film idsini almak için `Film.js` dosyasının 7. satırını düzenlenemeniz gerekir.
+- [ ] `KaydedilenlerListesi` bileşindeki `AnaSayfa` butonuna işlevsellik kazındırın, Anasayfaya geri dönmeli.
+- [ ] Artık fil listesinde ileri geri ilerleyebiliyor olmalısın ve bir filmin detaylarını görebilmelisin.
 
 ### Görev 3: Esnek görevler
 
 Eğer Görev 1 ve 2'yi tamamladıktan sonra bu göreve geçebilirsin.
 
 #### Kodumuzu DRY olacak şekilde düzenleyin
 
-* [ ] `Film`, `FilmDetayları` ve `FilmListesi` bileşenleri içindeki JSX'lerin oldukça benzer olduğunu farketmişsindir. `Film` bileşeninde "detaylı" görünümünde bulunan ana farklılık starların listesidir.
-* [ ] `FilmCard.js` içinde bir Film Card'ı döndüren bir bileşen oluşturun. `Film` ve `FilmDetayları` bileşenlerini kaldırıp, yeni oluşturduğunuz `FilmCard` bileşeniyle uygulamayı yeniden geliştirin.
-* [ ] Film Card, bir filmi star listesi olsun ya da olmasın görüntülemeye yetecek kadar esnek olmalıdır.
+- [ ] `Film`, `FilmDetayları` ve `FilmListesi` bileşenleri içindeki JSX'lerin oldukça benzer olduğunu farketmişsindir. `Film` bileşeninde "detaylı" görünümünde bulunan ana farklılık starların listesidir.
+- [ ] `FilmCard.js` içinde bir Film Card'ı döndüren bir bileşen oluşturun. `Film` ve `FilmDetayları` bileşenlerini kaldırıp, yeni oluşturduğunuz `FilmCard` bileşeniyle uygulamayı yeniden geliştirin.
+- [ ] Film Card, bir filmi star listesi olsun ya da olmasın görüntülemeye yetecek kadar esnek olmalıdır.
 
 #### `Film Kaydet` işlevini ekleyin
 
-* [ ] Halihazırda kullanmadığımız bir `Kaydedilenler Listesi` bileşenimizin olduğunu fark etmişsindir. Bu adımda bir film kaydetmek için bir işlevsellik ekleyeceksin. `Film` bileşenine `KaydedilenlerListesineEkle` fonksiyonunu gönderin. Daha sonra `Kaydet` butonuna bir click handler ekleyin. `Film.js` içindeki 24-27 satır arasındaki kodun başındaki yorum etiketini kaldırman gerekmektedir.
+- [ ] Halihazırda kullanmadığımız bir `Kaydedilenler Listesi` bileşenimizin olduğunu fark etmişsindir. Bu adımda bir film kaydetmek için bir işlevsellik ekleyeceksin. `Film` bileşenine `KaydedilenlerListesineEkle` fonksiyonunu gönderin. Daha sonra `Kaydet` butonuna bir click handler ekleyin. `Film.js` içindeki 24-27 satır arasındaki kodun başındaki yorum etiketini kaldırman gerekmektedir.
 
 #### Kaydedilen Film listesini `Link` e çevirin
 
-* [ ] Kaydedilen filmler, filmin kendisine linklenmelidir. `filmiKaydet` fonksiyonunun ne işe yaradığını düşünün.
+- [ ] Kaydedilen filmler, filmin kendisine linklenmelidir. `filmiKaydet` fonksiyonunun ne işe yaradığını düşünün.
 
 #### Kaydedilen Film `Link` lerini `NavLink`e dönüştürün
 
-* [ ] Navlink
+- [ ] Navlink

client/src/App.js

@@ -1,36 +1,49 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { Route } from "react-router-dom";
+import FilmListesi from "./Filmler/FilmListesi";
+import Film from "./Filmler/Film";
+import KaydedilenlerListesi from "./Filmler/KaydedilenlerListesi";
 
-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) => {
+          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 => {
-    // Burası esnek. Aynı filmin birden fazla kez "saved" e eklenmesini engelleyin
+  const KaydedilenlerListesineEkle = (movie) => {
+    const savedArr = saved;
+    savedArr.find((a) => a.id === movie.id) !== null && savedArr.push(movie);
+    setSaved([...savedArr]);
   };
 
   return (
     <div>
-      <KaydedilenlerListesi list={[ /* Burası esnek */]} />
+      <KaydedilenlerListesi list={saved} />
 
-      <div>Bu Div'i kendi Routelarınızla değiştirin</div>
+      <Route exact path="/">
+        <FilmListesi movies={movieList} />
+      </Route>
+      <Route path="/filmler/:id">
+        <Film
+          KaydedilenlerListesineEkle={KaydedilenlerListesineEkle}
+          saved={saved}
+        />
+      </Route>
     </div>
   );
 }

client/src/Filmler/Film.js

@@ -1,20 +1,23 @@
-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";
 
 export default function Film(props) {
+  const { KaydedilenlerListesineEkle } = props;
   const [movie, setMovie] = useState();
 
-  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ı
@@ -42,13 +45,18 @@ export default function Film(props) {
         </div>
         <h3>Actors</h3>
 
-        {stars.map(star => (
+        {stars.map((star) => (
           <div key={star} className="movie-star">
             {star}
           </div>
         ))}
       </div>
-      <div className="save-button">Kaydet</div>
+      <div
+        onClick={() => KaydedilenlerListesineEkle(movie)}
+        className="save-button"
+      >
+        Kaydet
+      </div>
     </div>
   );
 }

client/src/Filmler/FilmListesi.js

@@ -1,27 +1,30 @@
-import React from 'react';
+import React from "react";
+import { Link } from "react-router-dom";
 
 export default function FilmListesi(props) {
   return (
     <div className="movie-list">
-      {props.movies.map(movie => (
+      {props.movies.map((movie) => (
         <FilmDetayları key={movie.id} movie={movie} />
       ))}
     </div>
   );
-  }
+}
 
 function FilmDetayları(props) {
-  const { title, director, metascore } = props.movie;
+  const { title, director, metascore, id } = 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>
+      <Link to={`/filmler/${id}`}>
+        <h2>{title}</h2>
+        <div className="movie-director">
+          Director: <em>{director}</em>
+        </div>
+        <div className="movie-metascore">
+          Metascore: <strong>{metascore}</strong>
+        </div>
+      </Link>
     </div>
   );
 }

client/src/Filmler/KaydedilenlerListesi.js

@@ -1,13 +1,20 @@
-import React from 'react';
+import React from "react";
+import { useHistory } from "react-router-dom";
 
 export default function KaydedilenlerListesi(props) {
+  const history = useHistory();
+  function handleClick() {
+    history.push("/");
+  }
   return (
     <div className="saved-list">
       <h3>Kaydedilen Filmler:</h3>
-      {props.list.map(movie => (
+      {props.list.map((movie) => (
         <span className="saved-movie">{movie.title}</span>
       ))}
-      <div className="home-button">Anasayfa</div>
+      <div className="home-button" onClick={handleClick}>
+        Anasayfa
+      </div>
     </div>
   );
 }

client/src/index.js

@@ -1,9 +1,14 @@
-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 as Router } 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(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById("root")
+);