Bu proje aynı Context API ve Hook konularını anlattığım eğitim serisi için oluşturulmuştur.
Proje kullanıcıya bir metin verilerek yazması istenmektedir. Yazma işleminin sonunda kullanıcının yazım hızı ve doğruluk bilgisi hesaplanmaktadır.
Temel bilesenler eklendi.
SpeedCheck bileseni gelistirildi. Gerekli alanlar olusuturuldu.
SpeedCheck bileseni alt bilesenlere ayrildi:
- Info
- Score
- ChallengeInput
ChallengeInput klavyeden gelen "ctrl+ f" komutunu yakalıyor.
Girilen Metnin kontrolü yapıldı(CheckEntry) ve Klavye dinleme metodları bileşen dom'dan çıktığında listenerdan silindi.
CheckEntry icerisinde duration hesaplama islemi yapildi.
Karakter siniri eklendi ve metin alani bosaltilince süre sifirlandi.
Skor tipleri olusturuldu ve bu tipleri kullanacak Skor kartlari bilesenleri olusuturuldu. Skor bilgisi bu kartlar araciligi ile gosterildi.
Theme ile ilgili verilerin tutulacagi ThemeContext olusuturuldu.
Uygulama icerisinde ThemeContext HoC yontemi ile kullanildi.
Navbar bileseni ThemeContext ile gelistirildi ve tema degistirme butonu eklendi.
Tema icin ek alanlar eklendi ve Info bileseninde uygulandi. CSS duzeltmeleri de eklendi.
Challenge Context'i eklenerek Info bileseninde kullanildi. Info bileseninde iki Context kullanimi orneklendirilmis oldu.
useState hook'u ile AddChallenge bileseni olusuturuldu.
useContext ile Context'e erisme ve kullanma islemleri gerceklestirildi. Yeni Metin ekleme ozelligi eklendi.
Metinlerin listelendigi bilesen olusturuldu. Birden fazla context kullanma islemi yine useContext ile yapildi.
useState kullanarak sinif tipi bir contexti fonksiyon tipinde bir bilesene cevrildi ve useEffect hook yapisi incelendi.
Kullanicinin test metnini secebilmesi icin SelectChallenge bileseni eklendi.
ChallengeInput bileseni hook metodlari kullanilarak fonksiyon tipine donusturuldu ve secili metin bilgisini dogrudan context uzerinden almasi saglandi.
ChallengeContext results bilgisi eklendi. Bu yeni alan kullanicilarin test sonuclarini kaydedecegi bir alan. Bu sonuclarin listelendigi icin bir ResultsList bileseni guncellendi.
Skor kartlarinin listelendiği bilesene mevcut skoru kaydetme butonu eklendi.
useReducer hook metodu kullanilarak context metodlari aksiyon-reducer araciligi ile gerceklestirilmeye baslandi. challangeReducer icerisine gerekli reducer metodlari eklendi.
Context bilgilerinin localStorage'e kaydedilip, localStorage'den okunmasi saglandi. Boylece uygulama verileri kaybolmayacak.
Temada hatali ve eksik kisimlar duzeltildi. Bazi kisimlarda ikon kullanildi ve projeye FontAwesome kutuphanesi eklendi.
Kullanicinin Kopyala-Yapistir ile sonuc girmesi engellendi.