autocomplete [nfc]: Factor out generic AutocompleteField

Most of the logic in `ComposeAutocomplete` is not specific to the
content input it self rather it is general logic that applies to
any autocomplete field.

Author: Khader-1

lib/widgets/autocomplete.dart

@@ -1,43 +1,45 @@
 import 'package:flutter/material.dart';
 
+import '../api/model/model.dart';
 import 'content.dart';
 import 'store.dart';
 import '../model/autocomplete.dart';
 import '../model/compose.dart';
 import '../model/narrow.dart';
 import 'compose_box.dart';
 
-class ComposeAutocomplete extends StatefulWidget {
-  const ComposeAutocomplete({
+abstract class AutocompleteField<QueryT extends AutocompleteQuery, ResultT extends AutocompleteResult, CandidateT> extends StatefulWidget {
+  const AutocompleteField({
     super.key,
-    required this.narrow,
     required this.controller,
     required this.focusNode,
     required this.fieldViewBuilder,
   });
 
-  /// The message list's narrow.
-  final Narrow narrow;
-
-  final ComposeContentController controller;
+  final TextEditingController controller;
   final FocusNode focusNode;
   final WidgetBuilder fieldViewBuilder;
 
+  AutocompleteIntent<QueryT>? autocompleteIntent();
+
+  Widget buildItem(BuildContext context, int index, ResultT option);
+
+  AutocompleteView<QueryT, ResultT, CandidateT> initViewModel(BuildContext context);
+
   @override
-  State<ComposeAutocomplete> createState() => _ComposeAutocompleteState();
+  State<AutocompleteField<QueryT, ResultT, CandidateT>> createState() => _AutocompleteFieldState<QueryT, ResultT, CandidateT>();
 }
 
-class _ComposeAutocompleteState extends State<ComposeAutocomplete> with PerAccountStoreAwareStateMixin<ComposeAutocomplete> {
-  MentionAutocompleteView? _viewModel; // TODO different autocomplete view types
+class _AutocompleteFieldState<QueryT extends AutocompleteQuery, ResultT extends AutocompleteResult, CandidateT> extends State<AutocompleteField<QueryT, ResultT, CandidateT>> with PerAccountStoreAwareStateMixin<AutocompleteField<QueryT, ResultT, CandidateT>> {
+  AutocompleteView<QueryT, ResultT, CandidateT>? _viewModel;
 
   void _initViewModel() {
-    final store = PerAccountStoreWidget.of(context);
-    _viewModel = MentionAutocompleteView.init(store: store, narrow: widget.narrow)
+    _viewModel = widget.initViewModel(context)
       ..addListener(_viewModelChanged);
   }
 
-  void _composeContentChanged() {
-    final newAutocompleteIntent = widget.controller.autocompleteIntent();
+  void _onChanged() {
+    final newAutocompleteIntent = widget.autocompleteIntent();
     if (newAutocompleteIntent != null) {
       if (_viewModel == null) {
         _initViewModel();
@@ -55,7 +57,7 @@ class _ComposeAutocompleteState extends State<ComposeAutocomplete> with PerAccou
   @override
   void initState() {
     super.initState();
-    widget.controller.addListener(_composeContentChanged);
+    widget.controller.addListener(_onChanged);
   }
 
   @override
@@ -69,88 +71,43 @@ class _ComposeAutocompleteState extends State<ComposeAutocomplete> with PerAccou
   }
 
   @override
-  void didUpdateWidget(covariant ComposeAutocomplete oldWidget) {
+  void didUpdateWidget(covariant AutocompleteField<QueryT, ResultT, CandidateT> oldWidget) {
     super.didUpdateWidget(oldWidget);
     if (widget.controller != oldWidget.controller) {
-      oldWidget.controller.removeListener(_composeContentChanged);
-      widget.controller.addListener(_composeContentChanged);
+      oldWidget.controller.removeListener(_onChanged);
+      widget.controller.addListener(_onChanged);
     }
   }
 
   @override
   void dispose() {
-    widget.controller.removeListener(_composeContentChanged);
+    widget.controller.removeListener(_onChanged);
     _viewModel?.dispose(); // removes our listener
     super.dispose();
   }
 
-  List<MentionAutocompleteResult> _resultsToDisplay = [];
+  List<ResultT> _resultsToDisplay = [];
 
   void _viewModelChanged() {
     setState(() {
       _resultsToDisplay = _viewModel!.results.toList();
     });
   }
 
-  void _onTapOption(MentionAutocompleteResult option) {
-    // Probably the same intent that brought up the option that was tapped.
-    // If not, it still shouldn't be off by more than the time it takes
-    // to compute the autocomplete results, which we do asynchronously.
-    final intent = widget.controller.autocompleteIntent();
-    if (intent == null) {
-      return; // Shrug.
-    }
-
-    final store = PerAccountStoreWidget.of(context);
-    final String replacementString;
-    switch (option) {
-      case UserMentionAutocompleteResult(:var userId):
-        // TODO(i18n) language-appropriate space character; check active keyboard?
-        //   (maybe handle centrally in `widget.controller`)
-        replacementString = '${mention(store.users[userId]!, silent: intent.query.silent, users: store.users)} ';
-    }
-
-    widget.controller.value = intent.textEditingValue.replaced(
-      TextRange(
-        start: intent.syntaxStart,
-        end: intent.textEditingValue.selection.end),
-      replacementString,
-    );
-  }
-
-  Widget _buildItem(BuildContext _, int index) {
-    final option = _resultsToDisplay[index];
-    Widget avatar;
-    String label;
-    switch (option) {
-      case UserMentionAutocompleteResult(:var userId):
-        avatar = Avatar(userId: userId, size: 32, borderRadius: 3);
-        label = PerAccountStoreWidget.of(context).users[userId]!.fullName;
-    }
-    return InkWell(
-      onTap: () {
-        _onTapOption(option);
-      },
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
-        child: Row(
-          children: [
-            avatar,
-            const SizedBox(width: 8),
-            Text(label),
-          ])));
+  Widget _buildItem(BuildContext context, int index) {
+    return widget.buildItem(context, index, _resultsToDisplay[index]);
   }
 
   @override
   Widget build(BuildContext context) {
-    return RawAutocomplete<MentionAutocompleteResult>(
+    return RawAutocomplete<ResultT>(
       textEditingController: widget.controller,
       focusNode: widget.focusNode,
       optionsBuilder: (_) => _resultsToDisplay,
       optionsViewOpenDirection: OptionsViewOpenDirection.up,
       // RawAutocomplete passes these when it calls optionsViewBuilder:
-      //   AutocompleteOnSelected<T> onSelected,
-      //   Iterable<T> options,
+      //   AutocompleteOnSelected<CandidateT> onSelected,
+      //   Iterable<CandidateT> options,
       //
       // We ignore them:
       // - `onSelected` would cause some behavior we don't want,
@@ -159,7 +116,7 @@ class _ComposeAutocompleteState extends State<ComposeAutocomplete> with PerAccou
       //   the work of creating the list of options. We're not; the
       //   `optionsBuilder` we pass is just a function that returns
       //   _resultsToDisplay, which is computed with lots of help from
-      //   MentionAutocompleteView.
+      //   AutocompleteView.
       optionsViewBuilder: (context, _, __) {
         return Align(
           alignment: Alignment.bottomLeft,
@@ -187,3 +144,76 @@ class _ComposeAutocompleteState extends State<ComposeAutocomplete> with PerAccou
     );
   }
 }
+
+class ComposeAutocomplete extends AutocompleteField<MentionAutocompleteQuery, MentionAutocompleteResult, User> {
+  const ComposeAutocomplete({
+    super.key,
+    required this.narrow,
+    required super.focusNode,
+    required super.fieldViewBuilder,
+    required ComposeContentController controller,
+  }) : super(controller: controller);
+
+  final Narrow narrow;
+
+  @override
+  ComposeContentController get controller => super.controller as ComposeContentController;
+
+  @override
+  AutocompleteIntent<MentionAutocompleteQuery>? autocompleteIntent() => controller.autocompleteIntent();
+
+  @override
+  AutocompleteView<MentionAutocompleteQuery, MentionAutocompleteResult, User> initViewModel(BuildContext context) {
+    final store = PerAccountStoreWidget.of(context);
+    return MentionAutocompleteView.init(store: store, narrow: narrow);
+  }
+
+  @override
+  Widget buildItem(BuildContext context, int index, MentionAutocompleteResult option) {
+    Widget avatar;
+    String label;
+    switch (option) {
+      case UserMentionAutocompleteResult(:var userId):
+        avatar = Avatar(userId: userId, size: 32, borderRadius: 3);
+        label = PerAccountStoreWidget.of(context).users[userId]!.fullName;
+      default:
+        avatar = const SizedBox();
+        label = '';
+    }
+    return InkWell(
+      onTap: () {
+        // Probably the same intent that brought up the option that was tapped.
+        // If not, it still shouldn't be off by more than the time it takes
+        // to compute the autocomplete results, which we do asynchronously.
+        final intent = autocompleteIntent();
+        if (intent == null) {
+          return; // Shrug.
+        }
+
+        final store = PerAccountStoreWidget.of(context);
+        final String replacementString;
+        switch (option) {
+          case UserMentionAutocompleteResult(:var userId):
+            // TODO(i18n) language-appropriate space character; check active keyboard?
+            //   (maybe handle centrally in `controller`)
+            replacementString = '${mention(store.users[userId]!, silent: intent.query.silent, users: store.users)} ';
+          default:
+            replacementString = '';
+        }
+
+        controller.value = intent.textEditingValue.replaced(
+          TextRange(
+            start: intent.syntaxStart,
+            end: intent.textEditingValue.selection.end),
+          replacementString,
+        );
+      },
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+        child: Row(
+          children: [
+            avatar,
+            const SizedBox(width: 8),
+            Text(label)])));
+  }
+}