Photo by Jan Meeus on Unsplash

REACT UI MECHANICS

React ile Admin Tool Geliştirelim — Uyarı ve Hatalar için Geri Bildirimler

React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.

Öncesinde Anlattıklarımız;

Admin Tool ilgili aşağıdaki önceki yazılarda Login, CRUD ve Pagination mekanizmalarına bakmıştık.

• React ile Admin Tool Geliştirelim-Login Ekranı
• React ile Admin Tool Geliştirelim-CRUD İşlemleri
• React ile Admin Tool Geliştirelim — Table Pagination Ekleyelim.

Table işlevlerini biraz daha geliştirerek bu Tabloda arama, sıralama ve çoklu satır seçerek aksiyon gerçekleştirme işlemlerine bakmıştık.

• React ile Admin Tool Geliştirelim — Table Search ve Sorting
• React ile Admin Tool Geliştirelim — Table Multi-Row Selection and Operation

SideMenu yapısını oluşturarak birden fazla iç sayfa yapısı arasında geçiş yapabileceğimiz altyapı oluşturmuştuk.

• React ile Admin Tool Geliştirelim — Navigasyon Menüsü

Product sayfasında kullanıcının yapmış olduğu güncelleme, silme ve yeni kayıt oluşturma işlemlerini, product/ürünün altında history listesi olarak gösterilmesini gerçekleştirdik.

• React ile Admin Tool Geliştirelim — Collapsible Table Geliştirimi

Dashboard ve Chart sayfası oluşturmanın karmaşıklığından biraz bahsettikten sonra Chart kütüphanelerinden birisini Grid Layout nasıl göstereceğimizi anlattık.

• React ile Admin Tool Geliştirelim — Dashboard Sayfası

Bu Yazıda Anlatacaklarımız;

Bu yazıda ekranda Kullanıcıyı bir takım uyarı, hata ve bilgilendirme mesajları ile Admin Aracını daha iyi ve efektif kullanabilmesini sağlayacağımız üzerinde duracağız.

Öncelikle bu geribildirim yapısına neden ihtiyaç var ?

• Kullanıcının yapmış olduğu işlemlerin sonucunda bilgilendirme, uyarı veya hata durumlarını kullanıcıya göstermek isteyebiliriz.
• Backend Sunucu ile iletişim problemleri olduğunda kullanıcıya bilgilendirme yapmak istenebilir.

Bu durumlarda kullanılacak yöntemlerden birisi Snackbar, bir diğeride Toast dediğimiz yöntemdir.

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons.

Toasts (Android only) are primarily used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen.

Bu 2 yöntem için yine benzer şekilde bir çok kütüphane bulunuyor.

• react-toastify
• Material UI SnackBar

Adım 1 Biz bu Admin Tool örneklerinde Material UI üzerinden ilerliyoruz. Önce Feedback sayfasını boş olarak oluşturalım.

Boş bir Feedback Sayfası

Adım 2 Daha sonra ekranımıza 4 farklı düğme ekliyoruz. Bu düğmeler aşağıdaki severity durumları için ekranda Toast/Snackbar gösterilmesini sağlayacaklar.

• Info
• Warning
• Error
• Success

Feedback Mesajlarımızı Ekleyecek Düğmeler

Adım 3. Bu düğmelere basıldığında ekranda ilgili geribildirim mesajlarının gösterileceği SnackBar yapılarını ekleyelim. Bunun için yukarıdaki oluşturduğumuz state bilgilerini CustomizedSnackbars bileşine props olarak geçeceğiz.

<CustomizedSnackbars severity={severity} open={isSnackBarOpen} handleOpen={this.handleOpen}/>

Artık düğmelere basınca ilgili Feedback mesajlarının çalıştığını görebilirsiniz.

Feedback Page Success, Info, Error, Warning Mesajları

GitHub Kod Örneği

• Admin Tool

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.