From 55a3c218ff9ed9946c2d8319bf4dcefe8306dccd Mon Sep 17 00:00:00 2001 From: Ceylin Yasar Date: Mon, 9 Jan 2023 22:31:02 +0300 Subject: [PATCH] CeylinYasar-S7G1 --- .gitignore | 1 + README.md | 54 +++++++++++----------- client/src/App.js | 41 ++++++++++------ client/src/Filmler/Film.js | 26 +++++++---- client/src/Filmler/FilmListesi.js | 25 +++++----- client/src/Filmler/KaydedilenlerListesi.js | 13 ++++-- client/src/index.js | 17 ++++--- 7 files changed, 107 insertions(+), 70 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..b512c09d4 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/README.md b/README.md index 18af3500d..0bf86217b 100644 --- a/README.md +++ b/README.md @@ -2,23 +2,23 @@ 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Ü) @@ -26,22 +26,22 @@ Konular: 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 @@ -49,18 +49,18 @@ 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 diff --git a/client/src/App.js b/client/src/App.js index 16257b22f..aef631b81 100644 --- a/client/src/App.js +++ b/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 (
- + -
Bu Div'i kendi Routelarınızla değiştirin
+ + + + + +
); } diff --git a/client/src/Filmler/Film.js b/client/src/Filmler/Film.js index eefebaaa2..0b682bda0 100644 --- a/client/src/Filmler/Film.js +++ b/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) {

Actors

- {stars.map(star => ( + {stars.map((star) => (
{star}
))} -
Kaydet
+
KaydedilenlerListesineEkle(movie)} + className="save-button" + > + Kaydet +
); } diff --git a/client/src/Filmler/FilmListesi.js b/client/src/Filmler/FilmListesi.js index cad454c25..001e12513 100644 --- a/client/src/Filmler/FilmListesi.js +++ b/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 (
- {props.movies.map(movie => ( + {props.movies.map((movie) => ( ))}
); - } +} function FilmDetayları(props) { - const { title, director, metascore } = props.movie; + const { title, director, metascore, id } = props.movie; return (
-

{title}

-
- Director: {director} -
-
- Metascore: {metascore} -
+ +

{title}

+
+ Director: {director} +
+
+ Metascore: {metascore} +
+
); } diff --git a/client/src/Filmler/KaydedilenlerListesi.js b/client/src/Filmler/KaydedilenlerListesi.js index 8c95fbac9..8ac2a344f 100644 --- a/client/src/Filmler/KaydedilenlerListesi.js +++ b/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 (

Kaydedilen Filmler:

- {props.list.map(movie => ( + {props.list.map((movie) => ( {movie.title} ))} -
Anasayfa
+
+ Anasayfa +
); } diff --git a/client/src/index.js b/client/src/index.js index 9feb14be9..511df9d54 100644 --- a/client/src/index.js +++ b/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 öğesini düzenlemeniz gerekir -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( + + + , + document.getElementById("root") +);