Implemented search result page (#37)

mobile/lib/modules/search/views/search_page.dart

@@ -1,9 +1,11 @@
+import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
 import 'package:immich_mobile/modules/search/ui/search_bar.dart';
 import 'package:immich_mobile/modules/search/ui/search_suggestion_list.dart';
+import 'package:immich_mobile/routing/router.dart';
 
 // ignore: must_be_immutable
 class SearchPage extends HookConsumerWidget {
@@ -16,13 +18,22 @@ class SearchPage extends HookConsumerWidget {
     final isSearchEnabled = ref.watch(searchPageStateProvider).isSearchEnabled;
 
     useEffect(() {
-      print("search");
       searchFocusNode = FocusNode();
       return () => searchFocusNode.dispose();
     }, []);
 
+    _onSearchSubmitted(String searchTerm) async {
+      searchFocusNode.unfocus();
+      ref.watch(searchPageStateProvider.notifier).disableSearch();
+
+      AutoRouter.of(context).push(SearchResultRoute(searchTerm: searchTerm));
+    }
+
     return Scaffold(
-      appBar: SearchBar(searchFocusNode: searchFocusNode),
+      appBar: SearchBar(
+        searchFocusNode: searchFocusNode,
+        onSubmitted: _onSearchSubmitted,
+      ),
       body: GestureDetector(
         onTap: () {
           searchFocusNode.unfocus();
@@ -58,7 +69,7 @@ class SearchPage extends HookConsumerWidget {
                 ),
               ],
             ),
-            isSearchEnabled ? const SearchSuggestionList() : Container(),
+            isSearchEnabled ? SearchSuggestionList(onSubmitted: _onSearchSubmitted) : Container(),
           ],
         ),
       ),

mobile/lib/modules/search/views/search_result_page.dart

@@ -0,0 +1,197 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/ui/daily_title_text.dart';
+import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart';
+import 'package:immich_mobile/modules/home/ui/image_grid.dart';
+import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
+import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
+import 'package:immich_mobile/modules/search/providers/search_result_page_state.provider.dart';
+import 'package:immich_mobile/modules/search/ui/search_suggestion_list.dart';
+
+class SearchResultPage extends HookConsumerWidget {
+  SearchResultPage({Key? key, required this.searchTerm}) : super(key: key);
+
+  final String searchTerm;
+  late FocusNode searchFocusNode;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    ScrollController _scrollController = useScrollController();
+    final searchTermController = useTextEditingController(text: "");
+    final isNewSearch = useState(false);
+    final currentSearchTerm = useState(searchTerm);
+
+    List<Widget> _imageGridGroup = [];
+
+    useEffect(() {
+      searchFocusNode = FocusNode();
+
+      Future.delayed(Duration.zero, () => ref.read(searchResultPageStateProvider.notifier).search(searchTerm));
+      return () => searchFocusNode.dispose();
+    }, []);
+
+    _onSearchSubmitted(String newSearchTerm) {
+      debugPrint("Re-Search with $newSearchTerm");
+      searchFocusNode.unfocus();
+      isNewSearch.value = false;
+      currentSearchTerm.value = newSearchTerm;
+      ref.watch(searchResultPageStateProvider.notifier).search(newSearchTerm);
+    }
+
+    _buildTextField() {
+      return TextField(
+        controller: searchTermController,
+        focusNode: searchFocusNode,
+        autofocus: false,
+        onTap: () {
+          searchTermController.clear();
+          ref.watch(searchPageStateProvider.notifier).setSearchTerm("");
+          searchFocusNode.requestFocus();
+        },
+        textInputAction: TextInputAction.search,
+        onSubmitted: (searchTerm) {
+          if (searchTerm.isNotEmpty) {
+            searchTermController.clear();
+            _onSearchSubmitted(searchTerm);
+          } else {
+            isNewSearch.value = false;
+          }
+        },
+        onChanged: (value) {
+          ref.watch(searchPageStateProvider.notifier).setSearchTerm(value);
+        },
+        decoration: const InputDecoration(
+          hintText: 'New Search',
+          enabledBorder: UnderlineInputBorder(
+            borderSide: BorderSide(color: Colors.transparent),
+          ),
+          focusedBorder: UnderlineInputBorder(
+            borderSide: BorderSide(color: Colors.transparent),
+          ),
+        ),
+      );
+    }
+
+    _buildChip() {
+      return Chip(
+        label: Wrap(
+          spacing: 5,
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(top: 2.0),
+              child: Text(
+                currentSearchTerm.value,
+                style: TextStyle(color: Theme.of(context).primaryColor),
+                maxLines: 1,
+              ),
+            ),
+            Icon(
+              Icons.close_rounded,
+              color: Theme.of(context).primaryColor,
+              size: 20,
+            ),
+          ],
+        ),
+        backgroundColor: Theme.of(context).primaryColor.withAlpha(50),
+      );
+    }
+
+    _buildSearchResult() {
+      var searchResultPageState = ref.watch(searchResultPageStateProvider);
+      var assetGroupByDateTime = ref.watch(searchResultGroupByDateTimeProvider);
+
+      if (searchResultPageState.isError) {
+        return const Text("Error");
+      }
+
+      if (searchResultPageState.isLoading) {
+        return const CircularProgressIndicator.adaptive();
+      }
+
+      if (searchResultPageState.isSuccess) {
+        if (searchResultPageState.searchResult.isNotEmpty) {
+          int? lastMonth;
+
+          assetGroupByDateTime.forEach((dateGroup, immichAssetList) {
+            DateTime parseDateGroup = DateTime.parse(dateGroup);
+            int currentMonth = parseDateGroup.month;
+
+            if (lastMonth != null) {
+              if (currentMonth - lastMonth! != 0) {
+                _imageGridGroup.add(
+                  MonthlyTitleText(
+                    isoDate: dateGroup,
+                  ),
+                );
+              }
+            }
+
+            _imageGridGroup.add(
+              DailyTitleText(
+                isoDate: dateGroup,
+                assetGroup: immichAssetList,
+              ),
+            );
+
+            _imageGridGroup.add(
+              ImageGrid(assetGroup: immichAssetList),
+            );
+
+            lastMonth = currentMonth;
+          });
+
+          return DraggableScrollbar.semicircle(
+            backgroundColor: Theme.of(context).primaryColor,
+            controller: _scrollController,
+            heightScrollThumb: 48.0,
+            child: CustomScrollView(
+              controller: _scrollController,
+              slivers: [..._imageGridGroup],
+            ),
+          );
+        } else {
+          return const Text("No assets found");
+        }
+      }
+
+      return Container();
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        leading: IconButton(
+          splashRadius: 20,
+          onPressed: () {
+            if (isNewSearch.value) {
+              isNewSearch.value = false;
+            } else {
+              AutoRouter.of(context).pop(true);
+            }
+          },
+          icon: const Icon(Icons.arrow_back_ios_rounded),
+        ),
+        title: GestureDetector(
+            onTap: () {
+              isNewSearch.value = true;
+              searchFocusNode.requestFocus();
+            },
+            child: isNewSearch.value ? _buildTextField() : _buildChip()),
+        centerTitle: false,
+      ),
+      body: GestureDetector(
+        onTap: () {
+          searchFocusNode.unfocus();
+          ref.watch(searchPageStateProvider.notifier).disableSearch();
+        },
+        child: Stack(
+          children: [
+            _buildSearchResult(),
+            isNewSearch.value ? SearchSuggestionList(onSubmitted: _onSearchSubmitted) : Container(),
+          ],
+        ),
+      ),
+    );
+  }
+}