feat: enable asynchronous loading of individual translations

Author: CoderUni

lib/app/view/app.dart

@@ -72,11 +72,7 @@ class AppView extends StatefulWidget {
 }
 
 class _AppViewState extends State<AppView> {
-  @override
-  void initState() {
-    context.read<SettingsBloc>().add(const SettingsFetch());
-    super.initState();
-  }
+  
 
   @override
   Widget build(BuildContext context) {

lib/bootstrap.dart

@@ -63,9 +63,12 @@ Future<void> bootstrap(
   }
 
   // Initialize settings bloc
+  final settingsRepository = SettingsRepository(storage: secureStorage);
   final settingsBloc = SettingsBloc(
-    settingsRepository: SettingsRepository(storage: secureStorage),
-  );
+    settingsRepository: settingsRepository,
+  )..add(
+      SettingsFetch(await settingsRepository.getAPIKey()),
+    );
 
   // Initialize HTTP repository
   GetIt.instance.registerLazySingleton<Http>(Http.new);

lib/presentation/home/bloc/home_bloc.dart

@@ -4,10 +4,10 @@ import 'package:bloc/bloc.dart';
 import 'package:bloc_concurrency/bloc_concurrency.dart';
 import 'package:equatable/equatable.dart';
 import 'package:flutter/material.dart';
-import 'package:meta/meta.dart';
 import 'package:qack/presentation/home/models/base_translation_details.dart';
 import 'package:qack/presentation/home/repositories/repositories.dart';
 import 'package:qack/presentation/settings/bloc/settings_bloc.dart';
+import 'package:qack/presentation/settings/models/models.dart';
 import 'package:rxdart/rxdart.dart';
 
 part 'home_event.dart';
@@ -17,7 +17,13 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
   HomeBloc({
     required this.homeRepository,
     required this.settingsBloc,
-  }) : super(const HomeInitial()) {
+  }) : super(
+          HomeState(
+            _fillEmptyTranslationDetails(
+              settingsBloc.state.translatorSettings!.enabledTranslators,
+            ),
+          ),
+        ) {
     on<HomeTextChanged>(
       _onHomeTextChanged,
       transformer: restartableDebounce(const Duration(milliseconds: 500)),
@@ -32,12 +38,12 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
     Emitter<HomeState> emit,
   ) async {
     try {
-      emit(const HomeTextTranslateLoading());
+      emit(state.loading());
 
       final sourceText = event.sourceText.trim();
 
       if (sourceText.isEmpty) {
-        emit(const HomeTextStateEmpty());
+        emit(state.empty());
         return;
       }
 
@@ -59,16 +65,16 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
           translationDetails[baseTranslationDetail.translatorName] =
               baseTranslationDetail;
 
-          return HomeTextTranslateSuccess(translationDetails);
+          return state.success(translationDetails);
         },
         onError: (e, stackTrace) {
           debugPrint('error: $e');
-          return HomeTextTranslateError(exception: Exception(e));
+          return state.error(Exception(e));
         },
       );
     } on Exception catch (e) {
       debugPrint(e.toString());
-      emit(HomeTextTranslateError(exception: e));
+      emit(state.error(e));
     }
   }
 }
@@ -77,3 +83,12 @@ EventTransformer<T> restartableDebounce<T>(Duration duration) {
   return (events, mapper) =>
       restartable<T>().call(events.debounceTime(duration), mapper);
 }
+
+Map<Translator, BaseTranslationDetails> _fillEmptyTranslationDetails(
+  List<Translator> enabledTranslators,
+) {
+  return {
+    for (final translator in enabledTranslators)
+      translator: const EmptyTranslationDetails(),
+  };
+}

lib/presentation/home/bloc/home_state.dart

@@ -1,35 +1,52 @@
 part of 'home_bloc.dart';
 
-@immutable
-sealed class HomeState extends Equatable {
-  const HomeState([this.translationDetails = const {}]);
-  final TranslationDetails translationDetails;
-
-  @override
-  List<Object?> get props => [translationDetails];
+enum HomeStatus {
+  initial,
+  loading,
+  empty,
+  success,
+  error,
 }
 
-final class HomeInitial extends HomeState {
-  const HomeInitial();
-}
-
-final class HomeTextTranslateLoading extends HomeState {
-  const HomeTextTranslateLoading();
-}
-
-final class HomeTextStateEmpty extends HomeState {
-  const HomeTextStateEmpty();
-}
-
-final class HomeTextTranslateSuccess extends HomeState {
-  const HomeTextTranslateSuccess(super.translationDetails);
-}
+@immutable
+final class HomeState extends Equatable {
+  const HomeState(TranslationDetails details)
+      : this._(translationDetails: details);
+
+  const HomeState._({
+    required this.translationDetails,
+    this.status = HomeStatus.initial,
+    this.exception,
+  });
+  final TranslationDetails translationDetails;
 
-final class HomeTextTranslateError extends HomeState {
-  const HomeTextTranslateError({required this.exception});
-  // TODO: Add which translator got the error
-  final Exception exception;
+  final HomeStatus status;
+  final Exception? exception;
+
+  HomeState loading() => HomeState._(
+        translationDetails: translationDetails,
+        status: HomeStatus.loading,
+      );
+
+  HomeState empty() => HomeState._(
+        translationDetails: translationDetails,
+        status: HomeStatus.empty,
+      );
+
+  HomeState success(TranslationDetails details) => HomeState._(
+        translationDetails: details,
+        status: HomeStatus.success,
+      );
+
+  /// This error is a general error in [HomeRepository]'s translateText method.
+  /// It is not a translation error.
+  /// See [BaseTranslationError] for translation errors.
+  HomeState error(Exception e) => HomeState._(
+        translationDetails: translationDetails,
+        status: HomeStatus.error,
+        exception: e,
+      );
 
   @override
-  List<Object?> get props => [exception];
+  List<Object?> get props => [translationDetails, status, exception];
 }

lib/presentation/home/components/translation_card.dart

@@ -2,21 +2,39 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:gap/gap.dart';
 import 'package:qack/layout/layout_handler.dart';
+import 'package:qack/presentation/home/bloc/home_bloc.dart';
 import 'package:qack/presentation/home/models/base_translation_details.dart';
+import 'package:qack/presentation/home/repositories/repositories.dart';
+import 'package:qack/presentation/settings/models/models.dart';
 import 'package:qack/theme/themes/light_theme.dart';
 import 'package:url_launcher/url_launcher.dart';
 import 'package:vector_graphics/vector_graphics.dart';
 
 class TranslationCard extends StatelessWidget {
-  const TranslationCard({required this.translationDetails, super.key});
-  final BaseTranslationDetails translationDetails;
+  const TranslationCard({
+    required this.status,
+    required this.translationMapEntry,
+    required this.exception,
+    super.key,
+  });
+  final HomeStatus status;
+  final MapEntry<Translator, BaseTranslationDetails> translationMapEntry;
+
+  /// This error is a general error in [HomeRepository]'s translateText method.
+  /// It is not a translation error.
+  /// See [BaseTranslationError] or [BaseTranslationDetails] .empty methods for
+  /// translation errors.
+  final Exception? exception;
 
   @override
   Widget build(BuildContext context) {
     const theme = LightTheme();
     return LayoutHandler(
       mobile: TranslationCardView(
-        translationDetails: translationDetails,
+        status: status,
+        translator: translationMapEntry.key,
+        translationDetails: translationMapEntry.value,
+        exception: exception,
         cardMargin: const EdgeInsets.only(bottom: 16),
         cardPadding:
             const EdgeInsets.only(top: 12, left: 12, right: 12, bottom: 4),
@@ -32,7 +50,10 @@ class TranslationCard extends StatelessWidget {
             ),
       ),
       tablet: TranslationCardView(
-        translationDetails: translationDetails,
+        status: status,
+        translator: translationMapEntry.key,
+        translationDetails: translationMapEntry.value,
+        exception: exception,
         cardMargin: const EdgeInsets.only(bottom: 16),
         cardPadding:
             const EdgeInsets.only(top: 12, left: 12, right: 12, bottom: 4),
@@ -53,6 +74,8 @@ class TranslationCard extends StatelessWidget {
 
 class TranslationCardView extends StatelessWidget {
   const TranslationCardView({
+    required this.status,
+    required this.translator,
     required this.translationDetails,
     required this.cardMargin,
     required this.cardPadding,
@@ -61,8 +84,13 @@ class TranslationCardView extends StatelessWidget {
     required this.translationPadding,
     required this.titleStyle,
     required this.translatedTextStyle,
+    required this.exception,
     super.key,
   });
+  final HomeStatus status;
+  final Exception? exception;
+
+  final Translator translator;
   final BaseTranslationDetails translationDetails;
 
   final EdgeInsets cardMargin;
@@ -79,6 +107,40 @@ class TranslationCardView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     const theme = LightTheme();
+    var translationStyle = translatedTextStyle;
+    late final String translationText;
+
+    switch (status) {
+      case HomeStatus.initial:
+      case HomeStatus.empty:
+        translationText = 'Empty translation.';
+      case HomeStatus.loading:
+        translationText = 'Loading...';
+      case HomeStatus.success:
+        // Check if the translation is empty
+        if (translationDetails is EmptyTranslationDetails) {
+          translationText = 'Loading...';
+          break;
+        }
+
+        if (translationDetails.status == TranslationStatus.loading) {
+          translationText = 'Loading...';
+        } else if (translationDetails.status == TranslationStatus.success) {
+          translationText = translationDetails.translatedText!.outputText;
+        } else if (translationDetails.status == TranslationStatus.error ||
+            translationDetails.exception != null) {
+          translationText =
+              'Translation error: ${translationDetails.exception}';
+        } else {
+          translationText = 'Unknown error';
+        }
+      case HomeStatus.error:
+        translationStyle = translatedTextStyle.copyWith(
+          color: theme.errorColor,
+        );
+        translationText = 'Error: $exception';
+    }
+
     return Padding(
       padding: cardMargin,
       child: DecoratedBox(
@@ -99,13 +161,13 @@ class TranslationCardView extends StatelessWidget {
                     width: 28,
                     child: SvgPicture(
                       AssetBytesLoader(
-                        translationDetails.svgPath,
+                        translator.svgPath,
                       ),
                     ),
                   ),
                   Gap(titleGap),
                   Text(
-                    translationDetails.translatorName,
+                    translator.name,
                     style: titleStyle,
                   ),
                   const Spacer(),
@@ -115,22 +177,25 @@ class TranslationCardView extends StatelessWidget {
                 padding: translationMargin,
                 child: InkWell(
                   onTap: () {
-                    launchUrl(
-                      Uri(
-                        scheme: 'plecoapi',
-                        host: 'x-callback-url',
-                        path: 's',
-                        queryParameters: {
-                          'q': translationDetails.translatedText.outputText,
-                        },
-                      ),
-                    );
+                    if (status == HomeStatus.success &&
+                        translationDetails.translatedText != null) {
+                      launchUrl(
+                        Uri(
+                          scheme: 'plecoapi',
+                          host: 'x-callback-url',
+                          path: 's',
+                          queryParameters: {
+                            'q': translationText,
+                          },
+                        ),
+                      );
+                    }
                   },
                   child: Padding(
                     padding: translationPadding,
                     child: Text(
-                      translationDetails.translatedText.outputText,
-                      style: translatedTextStyle,
+                      translationText,
+                      style: translationStyle,
                     ),
                   ),
                 ),

lib/presentation/home/models/baidu_translation.dart

@@ -16,10 +16,36 @@ final class BaiduTranslation extends BaseTranslationDetails {
     required this.baiduSrcLanguage,
     required this.baidutargetLanguage,
     required this.baiduTranslatedText,
+    TranslationStatus status = TranslationStatus.success,
+    Exception? exception,
   }) : super(
           srcLanguage: baiduSrcLanguage,
           targetLanguage: baidutargetLanguage,
           translatedText: baiduTranslatedText,
+          status: status,
+          exception: exception,
+        );
+
+  const BaiduTranslation.loading()
+      : this(
+          baiduSrcLanguage: 'loading',
+          baidutargetLanguage: 'loading',
+          baiduTranslatedText: const TranslatedText(
+            inputText: 'Loading',
+            outputText: 'Loading',
+          ),
+          status: TranslationStatus.loading,
+        );
+
+  const BaiduTranslation.error(Exception e)
+      : this(
+          baiduSrcLanguage: 'err',
+          baidutargetLanguage: 'err',
+          baiduTranslatedText: const TranslatedText(
+            inputText: 'Error',
+            outputText: 'Error',
+          ),
+          exception: e,
         );
 
   factory BaiduTranslation.fromJson(Map<String, dynamic> json) =>