Compass App: Activities screen, error handling and logs (#2371)

This PR introduces the Activities screen, handling of errors in view
models and commands, and logs using the dart `logging` package.

**Activities**

- The screen loads a list of activities, split in daytime and evening
activities, and the user can select them.
- Server adds the endpoint `/destination/<id>/activitity` which was
missing before.

Screencast provided:

[Screencast from 2024-07-29
16-29-02.webm](https://github.com/user-attachments/assets/a56024d8-0a9c-49e7-8fd0-c895da15badc)

**Error handling**

_UI Error handling:_

In the screencast you can see a `SnackBar` appearing, since the
"Confirm" button is not yet implemented.
The `saveActivities` Command returns an error `Result.error()`, then the
error state is exposed by the Command and consumed by the listener in
the `ActivityScreen`, which displays a `SnackBar` and consumes the
state.

Functionality is similar to the one found in [UI events - Consuming
events can trigger state
updates](https://developer.android.com/topic/architecture/ui-layer/events#consuming-trigger-updates)
from the Android architecture guide, as the command state is "consumed"
and cleared.

The Snackbar also includes an action to "try again". Tapping on it calls
to the failed Command `execute()` so users can run the action again.

For example, here the `saveActivities` command failed, so `error` is
`true`. Then we call to `clearResult()` to remove the failed status, and
show a `SnackBar`, with the `SnackBarAction` that runs `saveActivities`
again when tapped.

```dart
    if (widget.viewModel.saveActivities.error) {
      widget.viewModel.saveActivities.clearResult();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: const Text('Error while saving activities'),
          action: SnackBarAction(
            label: "Try again",
            onPressed: widget.viewModel.saveActivities.execute,
          ),
        ),
      );
    }
```

Since commands expose `running`, `error` and `completed`, it is easy to
implement loading and error indicator widgets:

[Screencast from 2024-07-29
16-55-42.webm](https://github.com/user-attachments/assets/fb5772d0-7b9d-4ded-8fa2-9ce347f4d555)

As side node, we can easily simulate that state by adding these lines in
any of the repository implementations:

```dart
    await Future.delayed(Durations.extralong1);
    return Result.error(Exception('ERROR!'));
```

_In-code error handling:_

The project introduces the `logging` package.

In the entry point `main_development.dart` the log level is configured.
Then in code, a `Logger` is creaded in each View Model with the name of
the class. Then the log calls are used depending on the `Result`
response, some finer traces are also added.


By default, they are printed to the IDE debug console, for example:

```
[SearchFormViewModel] Continents (7) loaded
[SearchFormViewModel] ItineraryConfig loaded
[SearchFormViewModel] Selected continent: Asia
[SearchFormViewModel] Selected date range: 2024-07-30 00:00:00.000 - 2024-08-08 00:00:00.000
[SearchFormViewModel] Set guests number: 1
[SearchFormViewModel] ItineraryConfig saved
```

**Other changes**

- The json files containing destinations and activities are moved into
the `app/assets/` folders, and the server is querying those files
instead of their own copy. This is done to avoid file duplication but we
can make a copy of those assets files for the server if we decide to.

**TODO Next**

- I will implement the "book a trip" screen which would complete the
main application flow, which should introduce a more complex
"component/use case" outside a view model.

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md
[CLA]: https://cla.developers.google.com/
[Discord]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md

Author: miquelbeltran

compass_app/app/lib/config/assets.dart

@@ -0,0 +1,4 @@
+class Assets {
+  static const activities = 'assets/activities.json';
+  static const destinations = 'assets/destinations.json';
+}

compass_app/app/lib/data/repositories/activity/activity_repository_local.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:compass_model/model.dart';
 import 'package:flutter/services.dart';
 
+import '../../../config/assets.dart';
 import '../../../utils/result.dart';
 import 'activity_repository.dart';
 
@@ -25,7 +26,7 @@ class ActivityRepositoryLocal implements ActivityRepository {
   }
 
   Future<String> _loadAsset() async {
-    return await rootBundle.loadString('assets/activities.json');
+    return await rootBundle.loadString(Assets.activities);
   }
 
   List<Activity> _parse(String localData) {

compass_app/app/lib/data/repositories/continent/continent_repository_local.dart

@@ -6,7 +6,7 @@ import 'continent_repository.dart';
 /// Local data source with all possible continents.
 class ContinentRepositoryLocal implements ContinentRepository {
   @override
-  Future<Result<List<Continent>>> getContinents() {
+  Future<Result<List<Continent>>> getContinents() async {
     return Future.value(
       Result.ok(
         [

compass_app/app/lib/data/repositories/destination/destination_repository_local.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:compass_model/model.dart';
 import 'package:flutter/services.dart' show rootBundle;
 
+import '../../../config/assets.dart';
 import '../../../utils/result.dart';
 import 'destination_repository.dart';
 
@@ -22,7 +23,7 @@ class DestinationRepositoryLocal implements DestinationRepository {
   }
 
   Future<String> _loadAsset() async {
-    return await rootBundle.loadString('assets/destinations.json');
+    return await rootBundle.loadString(Assets.destinations);
   }
 
   List<Destination> _parse(String localData) {

compass_app/app/lib/main.dart

@@ -1,3 +1,6 @@
+import 'package:flutter_localizations/flutter_localizations.dart';
+
+import 'ui/core/localization/applocalization.dart';
 import 'ui/core/themes/theme.dart';
 import 'routing/router.dart';
 import 'package:flutter/material.dart';
@@ -17,6 +20,11 @@ class MainApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp.router(
+      localizationsDelegates: [
+        GlobalWidgetsLocalizations.delegate,
+        GlobalMaterialLocalizations.delegate,
+        AppLocalizationDelegate(),
+      ],
       scrollBehavior: AppCustomScrollBehavior(),
       theme: AppTheme.lightTheme,
       darkTheme: AppTheme.darkTheme,

compass_app/app/lib/main_development.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:logging/logging.dart';
 import 'package:provider/provider.dart';
 
 import 'config/dependencies.dart';
@@ -8,6 +9,8 @@ import 'main.dart';
 /// Launch with `flutter run --target lib/main_development.dart`.
 /// Uses local data.
 void main() {
+  Logger.root.level = Level.ALL;
+
   runApp(
     MultiProvider(
       providers: providersLocal,

compass_app/app/lib/main_staging.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:logging/logging.dart';
 import 'package:provider/provider.dart';
 
 import 'config/dependencies.dart';
@@ -8,6 +9,8 @@ import 'main.dart';
 /// Launch with `flutter run --target lib/main_staging.dart`.
 /// Uses remote data from a server.
 void main() {
+  Logger.root.level = Level.ALL;
+
   runApp(
     MultiProvider(
       providers: providersRemote,

compass_app/app/lib/ui/activities/view_models/activities_viewmodel.dart

@@ -1,5 +1,6 @@
 import 'package:compass_model/model.dart';
 import 'package:flutter/foundation.dart';
+import 'package:logging/logging.dart';
 
 import '../../../data/repositories/activity/activity_repository.dart';
 import '../../../data/repositories/itinerary_config/itinerary_config_repository.dart';
@@ -13,70 +14,108 @@ class ActivitiesViewModel extends ChangeNotifier {
   })  : _activityRepository = activityRepository,
         _itineraryConfigRepository = itineraryConfigRepository {
     loadActivities = Command0(_loadActivities)..execute();
+    saveActivities = Command0(() async {
+      _log.shout(
+        'Save activities not implemented',
+        null,
+        StackTrace.current,
+      );
+      return Result.error(Exception('Not implemented'));
+    });
   }
 
+  final _log = Logger('ActivitiesViewModel');
   final ActivityRepository _activityRepository;
   final ItineraryConfigRepository _itineraryConfigRepository;
-  List<Activity> _activities = <Activity>[];
+  List<Activity> _daytimeActivities = <Activity>[];
+  List<Activity> _eveningActivities = <Activity>[];
   final Set<String> _selectedActivities = <String>{};
 
-  /// List of [Activity] per destination.
-  List<Activity> get activities => _activities;
+  /// List of daytime [Activity] per destination.
+  List<Activity> get daytimeActivities => _daytimeActivities;
+
+  /// List of evening [Activity] per destination.
+  List<Activity> get eveningActivities => _eveningActivities;
 
   /// Selected [Activity] by ref.
   Set<String> get selectedActivities => _selectedActivities;
 
   /// Load list of [Activity] for a [Destination] by ref.
   late final Command0 loadActivities;
 
-  Future<void> _loadActivities() async {
+  /// Save list [selectedActivities] into itinerary configuration.
+  late final Command0 saveActivities;
+
+  Future<Result<void>> _loadActivities() async {
     final result = await _itineraryConfigRepository.getItineraryConfig();
     if (result is Error) {
-      // TODO: Handle error
-      print(result.asError.error);
-      return;
+      _log.warning(
+        'Failed to load stored ItineraryConfig',
+        result.asError.error,
+      );
+      return result;
     }
 
     final destinationRef = result.asOk.value.destination;
     if (destinationRef == null) {
-      // TODO: Error here
-      return;
+      _log.severe('Destination missing in ItineraryConfig');
+      return Result.error(Exception('Destination not found'));
     }
 
     final resultActivities =
         await _activityRepository.getByDestination(destinationRef);
     switch (resultActivities) {
       case Ok():
         {
-          _activities = resultActivities.value;
-          print(_activities);
+          _daytimeActivities = resultActivities.value
+              .where((activity) => [
+                    TimeOfDay.any,
+                    TimeOfDay.morning,
+                    TimeOfDay.afternoon,
+                  ].contains(activity.timeOfDay))
+              .toList();
+
+          _eveningActivities = resultActivities.value
+              .where((activity) => [
+                    TimeOfDay.evening,
+                    TimeOfDay.night,
+                  ].contains(activity.timeOfDay))
+              .toList();
+
+          _log.fine('Activities (daytime: ${_daytimeActivities.length}, '
+              'evening: ${_eveningActivities.length}) loaded');
         }
       case Error():
         {
-          // TODO: Handle error
-          print(resultActivities.error);
+          _log.warning('Failed to load activities', resultActivities.error);
         }
     }
+
     notifyListeners();
+    return resultActivities;
   }
 
   /// Add [Activity] to selected list.
   void addActivity(String activityRef) {
     assert(
-      activities.any((activity) => activity.ref == activityRef),
+      (_daytimeActivities + _eveningActivities)
+          .any((activity) => activity.ref == activityRef),
       "Activity $activityRef not found",
     );
     _selectedActivities.add(activityRef);
+    _log.finest('Activity $activityRef added');
     notifyListeners();
   }
 
   /// Remove [Activity] from selected list.
   void removeActivity(String activityRef) {
     assert(
-      activities.any((activity) => activity.ref == activityRef),
+      (_daytimeActivities + _eveningActivities)
+          .any((activity) => activity.ref == activityRef),
       "Activity $activityRef not found",
     );
     _selectedActivities.remove(activityRef);
+    _log.finest('Activity $activityRef removed');
     notifyListeners();
   }
 }

compass_app/app/lib/ui/activities/widgets/activities_header.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../core/localization/applocalization.dart';
+import '../../core/themes/dimens.dart';
+import '../../core/ui/back_button.dart';
+import '../../core/ui/home_button.dart';
+
+class ActivitiesHeader extends StatelessWidget {
+  const ActivitiesHeader({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(
+        left: Dimens.of(context).paddingScreenHorizontal,
+        right: Dimens.of(context).paddingScreenHorizontal,
+        top: Dimens.of(context).paddingScreenVertical,
+        bottom: Dimens.paddingVertical,
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          CustomBackButton(
+            onTap: () {
+              // Navigate to ResultsScreen and edit search
+              context.go('/results');
+            },
+          ),
+          Text(
+            AppLocalization.of(context).activities,
+            style: Theme.of(context).textTheme.titleLarge,
+          ),
+          const HomeButton(),
+        ],
+      ),
+    );
+  }
+}

compass_app/app/lib/ui/activities/widgets/activities_list.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+
+import '../../core/themes/dimens.dart';
+import '../view_models/activities_viewmodel.dart';
+import 'activity_entry.dart';
+import 'activity_time_of_day.dart';
+
+class ActivitiesList extends StatelessWidget {
+  const ActivitiesList({
+    super.key,
+    required this.viewModel,
+    required this.activityTimeOfDay,
+  });
+
+  final ActivitiesViewModel viewModel;
+  final ActivityTimeOfDay activityTimeOfDay;
+
+  @override
+  Widget build(BuildContext context) {
+    final list = switch (activityTimeOfDay) {
+      ActivityTimeOfDay.daytime => viewModel.daytimeActivities,
+      ActivityTimeOfDay.evening => viewModel.eveningActivities,
+    };
+    return SliverPadding(
+      padding: EdgeInsets.only(
+        top: Dimens.paddingVertical,
+        left: Dimens.of(context).paddingScreenHorizontal,
+        right: Dimens.of(context).paddingScreenHorizontal,
+        bottom: Dimens.paddingVertical,
+      ),
+      sliver: SliverList(
+        delegate: SliverChildBuilderDelegate(
+          (context, index) {
+            final activity = list[index];
+            return Padding(
+              padding:
+                  EdgeInsets.only(bottom: index < list.length - 1 ? 20 : 0),
+              child: ActivityEntry(
+                key: ValueKey(activity.ref),
+                activity: activity,
+                selected: viewModel.selectedActivities.contains(activity.ref),
+                onChanged: (value) {
+                  if (value!) {
+                    viewModel.addActivity(activity.ref);
+                  } else {
+                    viewModel.removeActivity(activity.ref);
+                  }
+                },
+              ),
+            );
+          },
+          childCount: list.length,
+        ),
+      ),
+    );
+  }
+}