Successfully smuggle two Completer instances through built_redux

With some effort, I have successfully managed to smuggle a new class called SpecializedCompleterTuple through some actions such that the middleware can have some influence on a UI widget which originally constructed (and is listening to the futures inside of) the SpecializedCompleterTuple. My purposes for doing this are outlined in the documentation of SpecializedCompleterTuple.

I'm justifying how jank this system is because it's not far off from what Brian Egan recommended (brianegan/flutter_redux#6 (comment)). However, I do hope I find something cleaner than this for the future. This also relates to Workiva/built_redux#103 and flutter/flutter#11675.

Author: IncPlusPlus

lib/actions/actions.dart

@@ -3,6 +3,7 @@ library actions;
 import 'dart:async';
 
 import 'package:betterstatmobile/models/models.dart';
+import 'package:betterstatmobile/util/specialized_completer.dart';
 import 'package:built_redux/built_redux.dart';
 import 'package:built_value/built_value.dart';
 import 'package:built_value/serializer.dart';
@@ -12,7 +13,7 @@ part 'actions.g.dart';
 abstract class AppActions implements ReduxActions {
   ActionDispatcher<Schedule> addScheduleAction;
   ActionDispatcher<String> deleteScheduleAction;
-  ActionDispatcher<Completer<Null>> fetchSchedulesAction;
+  ActionDispatcher<SpecializedCompleterTuple> fetchSchedulesAction;
   ActionDispatcher<List<Schedule>> loadSchedulesSuccess;
   ActionDispatcher<Object> loadSchedulesFailure;
   ActionDispatcher<AppTab> updateTabAction;

lib/containers/schedules_tab.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:betterstatmobile/actions/actions.dart';
 import 'package:betterstatmobile/models/models.dart';
 import 'package:betterstatmobile/presentation/schedule_list.dart';
+import 'package:betterstatmobile/util/specialized_completer.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_built_redux/flutter_built_redux.dart';
 
@@ -14,9 +15,9 @@ class SchedulesTab
   Widget build(BuildContext context, List<Schedule> state, AppActions actions) {
     return ScheduleList(
       schedules: state,
-      onRefresh: (Completer<Null> completer) {
-        actions.fetchSchedulesAction(completer);
-        return completer.future;
+      onRefresh: (SpecializedCompleterTuple tuple) {
+        actions.fetchSchedulesAction(tuple);
+        return tuple.completer.future;
       },
       onRemove: (schedule) {
         actions.deleteScheduleAction(schedule.id);

lib/main.dart

@@ -9,6 +9,7 @@ import 'package:betterstatmobile/presentation/home_screen.dart';
 import 'package:betterstatmobile/reducers/reducers.dart';
 import 'package:betterstatmobile/util/keys.dart';
 import 'package:betterstatmobile/util/routes.dart';
+import 'package:betterstatmobile/util/specialized_completer.dart';
 import 'package:built_redux/built_redux.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_built_redux/flutter_built_redux.dart';
@@ -43,8 +44,6 @@ class BetterstatAppState extends State<BetterstatApp> {
   void initState() {
     store = widget.store;
 
-    store.actions.fetchSchedulesAction(Completer<Null>());
-
     super.initState();
   }
 

lib/middleware/store_schedules_middleware.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:betterstatmobile/repository/SchedulesRepository.dart';
+import 'package:betterstatmobile/util/specialized_completer.dart';
 import 'package:built_redux/built_redux.dart';
 import 'package:betterstatmobile/actions/actions.dart';
 import 'package:betterstatmobile/repository/WebRepository.dart';
@@ -12,7 +13,7 @@ Middleware<AppState, AppStateBuilder, AppActions>
 ]) {
   return (MiddlewareBuilder<AppState, AppStateBuilder, AppActions>()
         ..add(AppActionsNames.fetchSchedulesAction,
-            createFetchSchedules<Completer<Null>>(repository))
+            createFetchSchedules<SpecializedCompleterTuple>(repository))
         ..add(AppActionsNames.addScheduleAction,
             createSaveSchedule<Schedule>(repository))
 //        ..add(AppActionsNames.loadSchedulesSuccess,
@@ -59,11 +60,14 @@ MiddlewareHandler<AppState, AppStateBuilder, AppActions, T>
     createFetchSchedules<T>(SchedulesRepository repository) {
   return (MiddlewareApi<AppState, AppStateBuilder, AppActions> api,
       ActionHandler next, Action<T> action) {
+      var loadingCallback = action.payload as SpecializedCompleterTuple;
     repository.loadSchedules().then((schedules) {
-      var loadingCallback = action.payload as Completer<Null>;
-      loadingCallback.complete();
+      loadingCallback.statusCompleter.complete();
       return api.actions.loadSchedulesSuccess(schedules);
-    }).catchError(api.actions.loadSchedulesFailure);
+    }).catchError((Object error, [StackTrace stackTrace]){
+      loadingCallback.statusCompleter.completeError(error, stackTrace);
+      return api.actions.loadSchedulesFailure();
+    }).whenComplete(() => loadingCallback.completer.complete());
     next(action);
   };
 }

lib/presentation/schedule_list.dart

@@ -10,17 +10,18 @@ import 'package:betterstatmobile/localization.dart';
 import 'package:betterstatmobile/models/models.dart';
 import 'package:betterstatmobile/presentation/schedule_item.dart';
 import 'package:betterstatmobile/util/keys.dart';
+import 'package:betterstatmobile/util/specialized_completer.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
-    new GlobalKey<RefreshIndicatorState>();
+    GlobalKey<RefreshIndicatorState>();
 
 class ScheduleList extends StatelessWidget {
   final List<Schedule> schedules;
   final Function(Schedule) onRemove;
   final Function(Schedule) onUndoRemove;
-  Future<Null> Function(Completer<Null>) onRefresh;
+  final Future<void> Function(SpecializedCompleterTuple) onRefresh;
 
   ScheduleList({
     @required this.schedules,
@@ -31,10 +32,15 @@ class ScheduleList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    WidgetsBinding.instance.addPostFrameCallback((Duration duration) => afterBuild());
     return AppLoading(builder: (context, loading) {
       return RefreshIndicator(
         key: _refreshIndicatorKey,
-        onRefresh: () => onRefresh(Completer<Null>()),
+        onRefresh: () {
+          var tuple = SpecializedCompleterTuple();
+          tuple.statusCompleter..future.catchError((Object error, [StackTrace stackTrace]) => _showMyDialog(context, error, stackTrace));
+          return onRefresh(tuple);
+        },
         child: Container(
           child: ListView.builder(
             key: BetterstatKeys.scheduleList,
@@ -53,6 +59,43 @@ class ScheduleList extends StatelessWidget {
     });
   }
 
+  Future<void> _showMyDialog(BuildContext context, Object error, [StackTrace stackTrace]) async {
+  return showDialog<void>(
+    context: context,
+    barrierDismissible: false, // user must tap button!
+    builder: (BuildContext context) {
+      return AlertDialog(
+        title: Text('An error occurred'),
+        content: SingleChildScrollView(
+          child: ListBody(
+            children: <Widget>[
+              Text(error.toString()),
+              Text(stackTrace.toString()),
+            ],
+          ),
+        ),
+        actions: <Widget>[
+          FlatButton(
+            child: Text('Ok'),
+            onPressed: () {
+              Navigator.of(context).pop();
+            },
+          ),
+        ],
+      );
+    },
+  );
+}
+
+void afterBuild() {
+    if(schedules.isEmpty){
+      //When the list is first displayed, it won't be initialized with any results. I could call "store.actions.fetchSchedulesAction(SpecializedCompleterTuple());"
+  // in `main()` but then I wouldn't have a way to handle any potential errors that may result from that. Instead, I just check if the list is empty.
+      //It'll be empty in the case that the API call failed in some way.
+  _refreshIndicatorKey.currentState.show();
+    }
+}
+
   Future waitWhile(bool Function() test,
       [Duration pollInterval = Duration.zero]) {
     var completer = Completer();

lib/util/specialized_completer.dart

@@ -0,0 +1,37 @@
+import 'dart:async';
+
+/// A special two-tuple that contains two `Completer`s. I created this class
+/// because I wanted to be able to use a RefreshIndicator that lasted until
+/// the relevant refreshing action was complete. I was able to do this but with a catch,
+/// I had to smuggle a Completer<void> as a type parameter of the refreshing action
+/// and the middleware always had to call `completer.complete()` on it regardless of
+/// whether it was completed successfully. I considered simply calling an `actionSuccess` and
+/// `actionFailure` action from the middleware and then passing [completerStatus] as the payload for them.
+/// However, I think this might violate the purity of the reducers that receive those which is a design no-no.
+/// When I tried sending back any errors using `completer.completeError()`, Flutter always complained about
+/// unhandled exceptions despite the fact that I was catching the errors and processing them properly.
+/// I narrowed this down to the fact that the `Future` that was being passed to RefreshIndicator's
+/// `onRefresh` function. Because the future that was passed to RefreshIndicator was completed with an error,
+/// it counted as being unhandled. I'd like to avoid doing that so here I am. If there's a better way to do this,
+/// PLEASE LET ME KNOW. This solution is way too jank for my liking.
+///
+/// You can return the [completer]'s `Future` to a RefreshIndicator's `onRefresh`
+/// function and use [statusCompleter] for propagating an error back from
+/// your middleware. This means that you should have an action that contains
+/// a [SpecializedCompleterTuple] as mentioned in [brianegan/flutter_redux#6](https://github.com/brianegan/flutter_redux/issues/6#issuecomment-365720043).
+///
+/// Within your middleware that intercepts this action and performs the async work,
+/// you should call `completer.complete()` after the async task is complete to
+/// let the RefreshIndicator know it's time to hide the spinner. It MUST call
+/// `completer.complete()` regardless of whether the middleware failed in its task execution.
+/// Your middleware must also call EITHER `statusCompleter.complete()` OR `statusCompleter.completeError()`
+/// depending on whether or not you want to display an error in the UI.
+///
+/// By using this class, you can avoid sending futures that were completed with errors
+/// outside the scope of your code (i.e. into RefreshIndicator).
+class SpecializedCompleterTuple {
+  final Completer<void> completer = Completer();
+  final Completer<void> statusCompleter = Completer();
+
+  SpecializedCompleterTuple();
+}