[BEAM-13064] [Playground] Implement search & filter logic

playground/frontend/lib/modules/examples/components/example_list/example_list.dart

@@ -18,34 +18,36 @@
 
 import 'package:flutter/material.dart';
 import 'package:playground/modules/examples/components/examples_components.dart';
+import 'package:playground/pages/playground/states/example_selector_state.dart';
+import 'package:provider/provider.dart';
 
 class ExampleList extends StatelessWidget {
-  final List items;
   final ScrollController controller;
 
   const ExampleList({
     Key? key,
-    required this.items,
     required this.controller,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
-      child: Container(
-        color: Theme.of(context).backgroundColor,
-        child: Scrollbar(
-          isAlwaysShown: true,
-          showTrackOnHover: true,
-          controller: controller,
-          child: ListView.builder(
-            itemCount: items.length,
-            itemBuilder: (context, index) => CategoryExpansionPanel(
-              categoryName: items[index].name,
-              examples: items[index].examples,
-            ),
+    return Consumer<ExampleSelectorState>(
+      builder: (context, state, child) => Expanded(
+        child: Container(
+          color: Theme.of(context).backgroundColor,
+          child: Scrollbar(
+            isAlwaysShown: true,
+            showTrackOnHover: true,
             controller: controller,
-            shrinkWrap: true,
+            child: ListView.builder(
+              itemCount: state.categories.length,
+              itemBuilder: (context, index) => CategoryExpansionPanel(
+                categoryName: state.categories[index].name,
+                examples: state.categories[index].examples,
+              ),
+              controller: controller,
+              shrinkWrap: true,
+            ),
           ),
         ),
       ),

playground/frontend/lib/modules/examples/components/filter/category_bubble.dart

@@ -19,48 +19,55 @@
 import 'package:flutter/material.dart';
 import 'package:playground/config/theme.dart';
 import 'package:playground/constants/sizes.dart';
-import 'package:playground/pages/playground/states/example_dropdown_state.dart';
+import 'package:playground/modules/examples/models/example_model.dart';
+import 'package:playground/pages/playground/states/example_selector_state.dart';
 import 'package:provider/provider.dart';
 
 class CategoryBubble extends StatelessWidget {
-  final String name;
+  final ExampleType type;
 
-  const CategoryBubble({Key? key, required this.name}) : super(key: key);
+  const CategoryBubble({Key? key, required this.type}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(right: kMdSpacing),
-      child: Consumer<ExampleDropdownState>(
-        builder: (context, state, child) => MouseRegion(
-          cursor: SystemMouseCursors.click,
-          child: GestureDetector(
-            onTap: () {
-              if (name != state.selectedCategory) {
-                state.setSelectedCategory(name);
-              }
-            },
-            child: Container(
-              height: kContainerHeight,
-              padding: const EdgeInsets.symmetric(horizontal: kXlSpacing),
-              decoration: BoxDecoration(
-                color: name == state.selectedCategory
-                    ? ThemeColors.of(context).primary
-                    : ThemeColors.of(context).lightGreyColor,
-                borderRadius: BorderRadius.circular(kXlBorderRadius),
-              ),
-              child: Center(
-                child: Text(
-                  name,
-                  style: TextStyle(
-                    color: name == state.selectedCategory
-                        ? ThemeColors.of(context).primaryBackgroundTextColor
-                        : ThemeColors.of(context).lightGreyBackgroundTextColor,
+    return MouseRegion(
+      cursor: SystemMouseCursors.click,
+      child: Padding(
+        padding: const EdgeInsets.only(right: kMdSpacing),
+        child: Consumer<ExampleSelectorState>(
+          builder: (context, state, child) {
+            final isSelected = type == state.selectedFilterType;
+
+            return GestureDetector(
+              onTap: () {
+                if (!isSelected) {
+                  state.setSelectedFilterType(type);
+                  state.sortCategories();
+                }
+              },
+              child: Container(
+                height: kContainerHeight,
+                padding: const EdgeInsets.symmetric(horizontal: kXlSpacing),
+                decoration: BoxDecoration(
+                  color: isSelected
+                      ? ThemeColors.of(context).primary
+                      : ThemeColors.of(context).lightGreyColor,
+                  borderRadius: BorderRadius.circular(kXlBorderRadius),
+                ),
+                child: Center(
+                  child: Text(
+                    type.name,
+                    style: TextStyle(
+                      color: isSelected
+                          ? ThemeColors.of(context).primaryBackgroundTextColor
+                          : ThemeColors.of(context)
+                              .lightGreyBackgroundTextColor,
+                    ),
                   ),
                 ),
               ),
-            ),
-          ),
+            );
+          },
         ),
       ),
     );

playground/frontend/lib/modules/examples/components/filter/type_filter.dart

@@ -19,6 +19,7 @@
 import 'package:flutter/material.dart';
 import 'package:playground/constants/sizes.dart';
 import 'package:playground/modules/examples/components/examples_components.dart';
+import 'package:playground/modules/examples/models/example_model.dart';
 
 class TypeFilter extends StatelessWidget {
   const TypeFilter({Key? key}) : super(key: key);
@@ -32,10 +33,10 @@ class TypeFilter extends StatelessWidget {
       ),
       child: Row(
         children: const <CategoryBubble>[
-          CategoryBubble(name: 'All'),
-          CategoryBubble(name: 'Examples'),
-          CategoryBubble(name: 'Katas'),
-          CategoryBubble(name: 'Unit tests'),
+          CategoryBubble(type: ExampleType.all),
+          CategoryBubble(type: ExampleType.example),
+          CategoryBubble(type: ExampleType.kata),
+          CategoryBubble(type: ExampleType.test),
         ],
       ),
     );

playground/frontend/lib/modules/examples/components/search_field/search_field.dart

@@ -19,6 +19,8 @@
 import 'package:flutter/material.dart';
 import 'package:playground/config/theme.dart';
 import 'package:playground/constants/sizes.dart';
+import 'package:playground/pages/playground/states/example_selector_state.dart';
+import 'package:provider/provider.dart';
 
 const double kContainerWidth = 376.0;
 const int kMinLines = 1;
@@ -37,45 +39,53 @@ class SearchField extends StatelessWidget {
       borderRadius: BorderRadius.circular(kMdBorderRadius),
     );
 
-    return Container(
-      margin: const EdgeInsets.only(
-        top: kLgSpacing,
-        right: kLgSpacing,
-        left: kLgSpacing,
-      ),
-      width: kContainerWidth,
-      height: kContainerHeight,
-      color: Theme.of(context).backgroundColor,
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(kMdBorderRadius),
-        child: TextFormField(
-          controller: controller,
-          decoration: InputDecoration(
-            suffixIcon: Padding(
-              padding: const EdgeInsetsDirectional.only(
-                start: kZeroSpacing,
-                end: kZeroSpacing,
-              ),
-              child: Icon(
-                Icons.search,
-                color: ThemeColors.of(context).lightGreyColor,
-                size: kIconSizeMd,
+    return Consumer<ExampleSelectorState>(
+      builder: (context, state, child) => Container(
+        margin: const EdgeInsets.only(
+          top: kLgSpacing,
+          right: kLgSpacing,
+          left: kLgSpacing,
+        ),
+        width: kContainerWidth,
+        height: kContainerHeight,
+        color: Theme.of(context).backgroundColor,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(kMdBorderRadius),
+          child: TextFormField(
+            controller: controller,
+            decoration: InputDecoration(
+              suffixIcon: Padding(
+                padding: const EdgeInsetsDirectional.only(
+                  start: kZeroSpacing,
+                  end: kZeroSpacing,
+                ),
+                child: Icon(
+                  Icons.search,
+                  color: ThemeColors.of(context).lightGreyColor,
+                  size: kIconSizeMd,
+                ),
               ),
+              focusedBorder: border,
+              enabledBorder: border,
+              filled: false,
+              isDense: true,
+              hintText: kHintText,
+              contentPadding: const EdgeInsets.only(left: kLgSpacing),
             ),
-            focusedBorder: border,
-            enabledBorder: border,
-            filled: false,
-            isDense: true,
-            hintText: kHintText,
-            contentPadding: const EdgeInsets.only(left: kLgSpacing),
+            cursorColor: ThemeColors.of(context).lightGreyColor,
+            cursorWidth: kCursorSize,
+            textAlignVertical: TextAlignVertical.center,
+            onFieldSubmitted: (String filterText) {
+              state.setFilterText(filterText);
+              state.sortCategories();
+            },
+            onChanged: (String filterText) {
+              state.setFilterText(filterText);
+              state.sortCategories();
+            },
+            maxLines: kMinLines,
+            minLines: kMaxLines,
           ),
-          cursorColor: ThemeColors.of(context).lightGreyColor,
-          cursorWidth: kCursorSize,
-          textAlignVertical: TextAlignVertical.center,
-          onFieldSubmitted: (String txt) {},
-          onChanged: (String txt) {},
-          maxLines: kMinLines,
-          minLines: kMaxLines,
         ),
       ),
     );