feat: add sorting for Artists screen (#125)

Author: phanan

lib/providers/artist_provider.dart

@@ -1,3 +1,4 @@
+import 'package:app/enums.dart';
 import 'package:app/mixins/stream_subscriber.dart';
 import 'package:app/models/models.dart';
 import 'package:app/providers/providers.dart';
@@ -8,6 +9,22 @@ class ArtistProvider with ChangeNotifier, StreamSubscriber {
   var artists = <Artist>[];
   final _vault = <dynamic, Artist>{};
   var _page = 1;
+  var _sortField = 'name';
+  var _sortOrder = SortOrder.asc;
+
+  String get sortField => _sortField;
+  SortOrder get sortOrder => _sortOrder;
+
+  set sortField(String field) {
+    if (field != _sortField) {
+      _sortOrder = SortOrder.asc;
+    }
+    _sortField = field;
+  }
+
+  set sortOrder(SortOrder order) {
+    _sortOrder = order;
+  }
 
   ArtistProvider() {
     subscribe(AuthProvider.userLoggedOutStream.listen((_) {
@@ -68,7 +85,9 @@ class ArtistProvider with ChangeNotifier, StreamSubscriber {
   }
 
   Future<void> paginate() async {
-    final res = await get('artists?page=$_page');
+    final res = await get(
+      'artists?page=$_page&sort=$_sortField&order=${_sortOrder.value}',
+    );
 
     final _artists = (res['data'] as List)
         .map<Artist>((artist) => Artist.fromJson(artist))

lib/ui/screens/artists.dart

@@ -5,6 +5,7 @@ import 'package:app/providers/providers.dart';
 import 'package:app/router.dart';
 import 'package:app/ui/placeholders/artists_screen_placeholder.dart';
 import 'package:app/ui/widgets/widgets.dart';
+import 'package:app/values/values.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -101,9 +102,31 @@ class _ArtistsScreenState extends State<ArtistsScreen> {
                   child: CustomScrollView(
                     controller: _scrollController,
                     slivers: [
-                      const CupertinoSliverNavigationBar(
+                      CupertinoSliverNavigationBar(
                         backgroundColor: AppColors.staticScreenHeaderBackground,
-                        largeTitle: LargeTitle(text: 'Artists'),
+                        largeTitle: const LargeTitle(text: 'Artists'),
+                        trailing: Transform.scale(
+                          scale: 0.8,
+                          alignment: Alignment.centerRight,
+                          child: SortButton(
+                            fields: const ['name', 'created_at'],
+                            currentField: _artistProvider.sortField,
+                            currentOrder: _artistProvider.sortOrder,
+                            onMenuItemSelected: (sortConfig) {
+                              setState(() {
+                                _artistProvider.sortField = sortConfig.field;
+                                _artistProvider.sortOrder = sortConfig.order;
+                              });
+
+                              _artistProvider.artists.clear();
+                              _artistProvider.refresh().then((_) {
+                                if (_scrollController.hasClients) {
+                                  _scrollController.jumpTo(0);
+                                }
+                              });
+                            },
+                          ),
+                        ),
                       ),
                       SliverList(
                         delegate: SliverChildBuilderDelegate((