feat: widget actions handle filter category

lib/src/screens/list_screen.dart

@@ -87,6 +87,9 @@ class _ListScreen extends State<ListScreen> {
                     return ListTile(
                       title: Text(category.elementAt(index).name),
                       onTap: () {
+                        bookProvider.filterBookByCategory(
+                            category!.elementAt(index).name);
+                        bookProvider.getBooks();
                         Navigator.pop(context);
                       },
                     );

lib/src/widgets/books/book_list.dart

@@ -95,40 +95,54 @@ class _TopAppBar extends State<TopAppBar> {
 
   @override
   Widget build(BuildContext context) {
-    return SliverAppBar(
-      title: Text(showWidget ? "" : title),
-      actions: [
-        Row(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            IconButton(
-              onPressed: () {
-                setState(() {
-                  showWidget = !showWidget;
-                });
-              },
-              icon: Icon(showWidget ? Icons.close : Icons.search),
-            ),
-            Offstage(
-              offstage: !showWidget,
-              child: const SearchForm(),
-            ),
-          ],
-        ),
-      ],
-      leading: !showWidget
-          ? IconButton(
-              onPressed: () {
-                Scaffold.of(context).openDrawer();
-              },
-              icon: const Icon(Icons.menu),
-            )
-          : null,
-      elevation: 10.0,
-      automaticallyImplyLeading: false,
-      expandedHeight: 50,
-      floating: true,
-      snap: true,
-    );
+    return Consumer<BookProvider>(builder: (context, bookProvider, child) {
+      final category = bookProvider.filterByCategory;
+      final appBarTitle = category != null ? "$category $title" : title;
+
+      return SliverAppBar(
+        title: Text(showWidget ? "" : appBarTitle),
+        actions: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              IconButton(
+                onPressed: () {
+                  setState(() {
+                    showWidget = !showWidget;
+                    if (!showWidget) {
+                      bookProvider.setSearchKeyword(null);
+                      bookProvider.getBooks();
+                    }
+                  });
+                },
+                icon: Icon(showWidget ? Icons.close : Icons.search),
+              ),
+              Offstage(
+                offstage: !showWidget,
+                child: const SearchForm(),
+              ),
+            ],
+          ),
+        ],
+        leading: !showWidget
+            ? IconButton(
+                onPressed: () {
+                  if (category != null) {
+                    bookProvider.filterBookByCategory(null);
+                    bookProvider.getBooks();
+                  } else {
+                    Scaffold.of(context).openDrawer();
+                  }
+                },
+                icon: Icon(category != null ? Icons.close : Icons.menu),
+              )
+            : null,
+        elevation: 10.0,
+        automaticallyImplyLeading: false,
+        expandedHeight: 50,
+        floating: true,
+        snap: true,
+      );
+    });
   }
 }

lib/src/widgets/forms/search_form.dart

@@ -24,9 +24,13 @@ class _SearchForm extends State<SearchForm> {
       width: queryData.size.width * 0.8,
       padding: const EdgeInsets.symmetric(vertical: 8.0),
       child: SearchBar(
+        hintText: "Enter keywords...",
         elevation: WidgetStateProperty.all(0),
-        onChanged: (value) =>
-            Provider.of<BookProvider>(context, listen: false).searchBook(value),
+        onChanged: (value) {
+          Provider.of<BookProvider>(context, listen: false)
+              .setSearchKeyword(value);
+          Provider.of<BookProvider>(context, listen: false).getBooks();
+        },
         leading: const Icon(Icons.search),
       ),
     );

lib/src/widgets/loans/loan_item.dart

@@ -14,6 +14,7 @@ class LoanItem extends StatelessWidget {
     final loanDate = formater.format(DateTime.parse(_loan.loanDate));
     final dueDate = formater.format(DateTime.parse(_loan.dueDate));
     final remainingDays = _loan.remainingDays;
+    final isOverdue = _loan.isOverdue;
     final bookTitle = _loan.book.title;
 
     return Container(
@@ -29,10 +30,12 @@ class LoanItem extends StatelessWidget {
                     const EdgeInsets.symmetric(vertical: 2.0, horizontal: 10.0),
                 margin: const EdgeInsets.only(bottom: 10.0),
                 decoration: BoxDecoration(
-                    borderRadius: BorderRadius.circular(20.0),
-                    color: Theme.of(context).primaryColor),
+                  borderRadius: BorderRadius.circular(20.0),
+                  color:
+                      !isOverdue ? Theme.of(context).primaryColor : Colors.red,
+                ),
                 child: Text(
-                  remainingDays,
+                  !isOverdue ? remainingDays : "Overdued",
                   style: const TextStyle(fontSize: 12.0, color: Colors.white),
                 ),
               ),