ödev tamamlandı.

.gitignore

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

README.md

@@ -10,38 +10,37 @@ Bu proje, bu modülde öğrenilen kavram ve teknikleri uygulamanıza ve bunları
 
 ## Giriş
 
-Bu projede kripto para izleme uygulamasını alacak ve 2 custom hook oluşturup, birlikte çalışmalarını sağlayacaksınız, aynı zamanda kullanıcılar gece modunu açıp (dark mode) uygulamayı kullanabilecekler, uygulama kapanıp açılsa bile gece modu daha önce aktif edildiyse uygulama gece modu açık şekilde başlayacak. 
+Bu projede kripto para izleme uygulamasını alacak ve 2 custom hook oluşturup, birlikte çalışmalarını sağlayacaksınız, aynı zamanda kullanıcılar gece modunu açıp (dark mode) uygulamayı kullanabilecekler, uygulama kapanıp açılsa bile gece modu daha önce aktif edildiyse uygulama gece modu açık şekilde başlayacak.
 
-***Görevlerinizi birer birer tamamladığınızdan ve ilerlemeden önce her bir görevi test ettiğinizden emin olun..***
+**_Görevlerinizi birer birer tamamladığınızdan ve ilerlemeden önce her bir görevi test ettiğinizden emin olun.._**
 
 ## Talimatlar
 
 ### Görev 1: Proje Kurulumu
 
-* [ ] Projeyi forklayın.
-* [ ] Klonlayın
-* [ ] Proje dizinine gidin
-* [ ] `npm install`
-* [ ] `npm start`
+- [x] Projeyi forklayın.
+- [x] Klonlayın
+- [x] Proje dizinine gidin
+- [x] `npm install`
+- [x] `npm start`
 
 ### Görev 2: Proje Gereksinimleri
 
 #### Bir geceModuAc hooku oluşturun
 
-* [ ] `hooks` adında bir klasör oluşturun
-* [ ] `geceModuAc.js` adında bir dosya oluşturun.
-* [ ] Sadece bir boolean(true/false) state değeri ile yüklenen bir hook oluşturun. Bu değer gece modunun açık olup olmadığını belirlemeye yarayacak.
-* [ ] Oluşturduğunuz state dilimini ve state'i düzenlemenize yarayan fonksiyonu döndürün.
-* [ ] App.js'deki geceModu state tanımlamasını oluşturduğunuz geceModuAc hooku ile değiştirin.
+- [x] `hooks` adında bir klasör oluşturun
+- [x] `geceModuAc.js` adında bir dosya oluşturun.
+- [x] Sadece bir boolean(true/false) state değeri ile yüklenen bir hook oluşturun. Bu değer gece modunun açık olup olmadığını belirlemeye yarayacak.
+- [ ] Oluşturduğunuz state dilimini ve state'i düzenlemenize yarayan fonksiyonu döndürün.
+- [ ] App.js'deki geceModu state tanımlamasını oluşturduğunuz geceModuAc hooku ile değiştirin.
 
 #### localStorageKullan hooku oluşturun
 
-* [ ] `localStorageKullan.js` adında bir dosya oluşturun.
-* [ ] Bir key value ve baslangicDegeri alan bir hook oluşturun.
+- [x] `localStorageKullan.js` adında bir dosya oluşturun.
+- [ ] Bir key value ve baslangicDegeri alan bir hook oluşturun.
 
 #### geceModuAc çevresinde localStorageKullan 'ı kullanın
 
-* [ ] geceModuAc hooku içine localStorageKullan'ı import edin.
-* [ ] localStorage'a kaydedilmiş değere göre UI'den switche tıklandığında gece modunu açıp kapatmayı ayarlayın.
-* [ ] App kapatılıp açıldığında gece modu daha önce aktif edildiyse uygulama gece modunda başlasın.
-
+- [x] geceModuAc hooku içine localStorageKullan'ı import edin.
+- [ ] localStorage'a kaydedilmiş değere göre UI'den switche tıklandığında gece modunu açıp kapatmayı ayarlayın.
+- [ ] App kapatılıp açıldığında gece modu daha önce aktif edildiyse uygulama gece modunda başlasın.

frontend/App.js

@@ -1,24 +1,24 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
-
+import { useGeceModu } from "./hooks/geceModuAc";
 import Charts from "./components/Charts";
 import Navbar from "./components/Navbar";
 
 const App = () => {
   const [coinData, setCoinData] = useState([]);
-  const [geceModu, setGeceModu] = useState(false);
+  const [geceModu, setGeceModu, handleChanges] = useGeceModu(false);
 
   useEffect(() => {
     axios
       .get(
         "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=true"
       )
-      .then(res => setCoinData(res.data))
-      .catch(err => console.log(err));
+      .then((res) => setCoinData(res.data))
+      .catch((err) => console.log(err));
   }, []);
   return (
     <div className={geceModu ? "dark-mode App" : "App"}>
-      <Navbar geceModu={geceModu} setGeceModu={setGeceModu} />
+      <Navbar geceModu={geceModu} handleChanges={handleChanges} />
       <Charts coinData={coinData} />
     </div>
   );

frontend/components/Navbar.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
 
 const Navbar = (props) => {
-  const toggleMode = e => {
+  const toggleMode = (e) => {
     e.preventDefault();
-    props.setGeceModu(!props.geceModu);
+    props.handleChanges(!props.geceModu);
   };
 
   return (
@@ -12,7 +12,7 @@ const Navbar = (props) => {
       <div className="dark-mode__toggle">
         <div
           onClick={toggleMode}
-          className={props.geceModu ? 'toggle toggled' : 'toggle'}
+          className={props.geceModu ? "toggle toggled" : "toggle"}
         />
       </div>
     </nav>

frontend/hooks/geceModuAc.js

@@ -0,0 +1,10 @@
+import React, { useState } from "react";
+import { useLocalStorage } from "./localStorageKullan";
+
+export const useGeceModu = (key, initialValue) => {
+  const [value, setValue] = useLocalStorage(key, initialValue);
+  const handleChanges = (updatedValue) => {
+    setValue(updatedValue);
+  };
+  return [value, setValue, handleChanges];
+};

frontend/hooks/localStorageKullan.js

@@ -0,0 +1,13 @@
+import React from "react";
+export const useLocalStorage = (key, initialValue) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    const item = window.localStorage.getItem(key); //sayfa açıp kapatıldığında önceden kalan key var mı diye bakıyoruz.
+    return item ? JSON.parse(item) : initialValue; // item var mı diye bakıyoruz yoksa ilk değeri alıyoruz(initial value). yani initial değerini key boşsa atayacak
+  });
+  //state yazma
+  const setValue = (value) => {
+    setStoredValue(value); //state yazıyoruz.
+    window.localStorage.setItem(key, JSON.stringify(value)); //state yazdığımızı localStorage atıyoruz
+  };
+  return [storedValue, setValue];
+};