ExplorePage: replace filter bar with dropdown (#43)

Author: Feichtmeier

Diff for: lib/l10n/app_en.arb

@@ -24,6 +24,7 @@
   "serverAndCloud": "Server and Cloud",
   "social": "Social",
   "utilities": "Utilities",
+  "all": "All",
   "installDate": "Installation Date",
   "lastUpdated": "Last updated",
   "notInstalled": "Not installed",
@@ -51,5 +52,6 @@
   "sortBy": "Sort by",
   "media": "Media",
   "done": "Done",
-  "systemUpdates": "System updates"
+  "systemUpdates": "System updates",
+  "searchHint": "Search..."
 } 

Diff for: lib/store_app/common/app_tile.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 
-const dialogWidth = 400.0;
+const dialogWidth = 450.0;
 const kGridDelegate = SliverGridDelegateWithMaxCrossAxisExtent(
   mainAxisExtent: 110,
   mainAxisSpacing: 15,
   crossAxisSpacing: 15,
-  maxCrossAxisExtent: 600,
+  maxCrossAxisExtent: 550,
 );

Diff for: lib/store_app/common/constants.dart

@@ -5,6 +5,7 @@ import 'package:software/l10n/l10n.dart';
 import 'package:yaru_icons/yaru_icons.dart';
 
 enum SnapSection {
+  all,
   art_and_design,
   books_and_reference,
   development,
@@ -70,6 +71,8 @@ enum SnapSection {
         return l10n.social;
       case SnapSection.utilities:
         return l10n.utilities;
+      case SnapSection.all:
+        return l10n.all;
       default:
         return title;
     }
@@ -97,4 +100,5 @@ Map<SnapSection, IconData> snapSectionToIcon = {
   SnapSection.server_and_cloud: YaruIcons.weather_cloudy,
   SnapSection.social: YaruIcons.subtitles,
   SnapSection.utilities: YaruIcons.utilities,
+  SnapSection.all: YaruIcons.compass
 };

Diff for: lib/store_app/common/snap_section.dart

@@ -9,9 +9,7 @@ class ExploreModel extends SafeChangeNotifier {
 
   ExploreModel(
     this.client,
-  )   : _searchActive = false,
-        _searchQuery = '',
-        _exploreMode = true,
+  )   : _searchQuery = '',
         sectionNameToSnapsMap = {},
         _errorMessage = '';
 
@@ -27,25 +25,6 @@ class ExploreModel extends SafeChangeNotifier {
     notifyListeners();
   }
 
-  bool _searchActive;
-  bool get searchActive => _searchActive;
-  set searchActive(bool value) {
-    if (value == _searchActive) return;
-    _searchActive = value;
-    if (_searchActive == false) {
-      searchQuery = '';
-    }
-    notifyListeners();
-  }
-
-  bool _exploreMode;
-  bool get exploreMode => _exploreMode;
-  set exploreMode(bool value) {
-    if (value == _exploreMode) return;
-    _exploreMode = value;
-    notifyListeners();
-  }
-
   String _searchQuery;
   String get searchQuery => _searchQuery;
   set searchQuery(String value) {
@@ -55,59 +34,53 @@ class ExploreModel extends SafeChangeNotifier {
     notifyListeners();
   }
 
-  Map<SnapSection, bool> get filters => _filters;
-  final Map<SnapSection, bool> _filters = {
-    for (final snapSection in SnapSection.values)
-      snapSection: snapSection == SnapSection.featured ? true : false,
-  };
-
-  List<SnapSection> get sortedFilters =>
-      _filters.entries
-          .where((entry) => entry.value == true)
-          .map((e) => e.key)
-          .toList() +
-      _filters.entries
-          .where((entry) => entry.value == false)
-          .map((e) => e.key)
-          .toList();
-
-  void setFilter({required List<SnapSection> snapSections}) {
-    for (var snapSection in snapSections) {
-      _filters[snapSection] = !_filters[snapSection]!;
-      loadSection(snapSection.title);
-    }
+  SnapSection _selectedSection = SnapSection.all;
+  SnapSection get selectedSection => _selectedSection;
+  set selectedSection(SnapSection value) {
+    if (value == _selectedSection) return;
+    _selectedSection = value;
   }
 
   Future<List<Snap>> findSnapsByQuery() async {
     if (searchQuery.isEmpty) {
       return [];
     } else {
       try {
-        return await client.find(query: _searchQuery);
+        return await client.find(
+          query: _searchQuery,
+          section:
+              selectedSection == SnapSection.all ? null : selectedSection.title,
+        );
       } on SnapdException catch (e) {
         errorMessage = e.message.toString();
         return [];
       }
     }
   }
 
-  Future<List<Snap>> findSnapsBySection({String? section}) async {
+  Future<List<Snap>> findSnapsBySection({SnapSection? section}) async {
     if (section == null) return [];
     try {
-      return (await client.find(section: section));
+      return (await client.find(
+        section: section == SnapSection.all
+            ? SnapSection.featured.title
+            : section.title,
+      ));
     } on SnapdException catch (e) {
       errorMessage = e.toString();
       return [];
     }
   }
 
   Map<String, List<Snap>> sectionNameToSnapsMap;
-  Future<void> loadSection(String name) async {
+  Future<void> loadSection(SnapSection section) async {
     List<Snap> sectionList = [];
-    for (final snap in await findSnapsBySection(section: name)) {
+    for (final snap in await findSnapsBySection(
+      section: section,
+    )) {
       sectionList.add(snap);
     }
-    sectionNameToSnapsMap.putIfAbsent(name, () => sectionList);
+    sectionNameToSnapsMap.putIfAbsent(section.title, () => sectionList);
     notifyListeners();
   }
 }

Diff for: lib/store_app/explore/explore_model.dart

@@ -4,7 +4,7 @@ import 'package:snapd/snapd.dart';
 import 'package:software/l10n/l10n.dart';
 import 'package:software/store_app/common/snap_section.dart';
 import 'package:software/store_app/explore/explore_model.dart';
-import 'package:software/store_app/explore/filter_and_search_bar.dart';
+import 'package:software/store_app/explore/search_field.dart';
 import 'package:software/store_app/explore/search_page.dart';
 import 'package:software/store_app/explore/section_banner_grid.dart';
 import 'package:software/store_app/explore/snap_banner_carousel.dart';
@@ -25,36 +25,39 @@ class ExplorePage extends StatelessWidget {
 
   static Widget createTitle(BuildContext context) =>
       Text(context.l10n.explorePageTitle);
+
   @override
   Widget build(BuildContext context) {
     final model = context.watch<ExploreModel>();
-    if (model.errorMessage.isNotEmpty) return const _ErrorPage();
-    return Column(
-      children: [
-        const FilterAndSearchBar(),
-        if (model.filters[SnapSection.featured] == true && !model.searchActive)
-          const Padding(
-            padding: EdgeInsets.symmetric(horizontal: 20),
-            child: SnapBannerCarousel(
-              snapSection: SnapSection.featured,
-              height: 220,
-            ),
-          ),
-        if (model.sectionNameToSnapsMap.isNotEmpty && !model.searchActive)
-          Expanded(
-            child: YaruPage(
-              padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
-              children: [
-                for (int i = 0; i < model.filters.entries.length; i++)
-                  if (model.filters.entries.elementAt(i).value == true)
-                    SectionBannerGrid(
-                      snapSection: model.filters.entries.elementAt(i).key,
-                    ),
-              ],
-            ),
-          ),
-        if (model.searchActive) const Expanded(child: SearchPage())
-      ],
+    return Scaffold(
+      appBar: AppBar(
+        flexibleSpace: const SearchField(),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.only(top: 20),
+        child: Column(
+          children: [
+            if ((model.selectedSection == SnapSection.featured ||
+                    model.selectedSection == SnapSection.all) &&
+                model.searchQuery.isEmpty)
+              const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 20),
+                child: SnapBannerCarousel(
+                  snapSection: SnapSection.featured,
+                  height: 220,
+                ),
+              ),
+            if (model.searchQuery.isEmpty &&
+                model.sectionNameToSnapsMap.isNotEmpty)
+              Expanded(
+                child: SectionBannerGrid(snapSection: model.selectedSection),
+              ),
+            if (model.errorMessage.isNotEmpty) const _ErrorPage(),
+            if (model.searchQuery.isNotEmpty)
+              const Expanded(child: SearchPage())
+          ],
+        ),
+      ),
     );
   }
 }