save mail when reload page

docs/adr/0009-on-before-unload-not-support-indexed-db.md

@@ -0,0 +1,23 @@
+# 8. Unable to save data to indexedDB in onBeforeUnload state of web
+
+Date: 2022-07-11
+
+## Status
+
+Accepted
+
+## Context
+
+- Unable to save data to indexedDB in onBeforeUnload state of web
+
+## Decision
+
+- Unable to save data to indexedDB in onBeforeUnload state of web
+
+## Consequences
+
+- Using local storage to save data in onBeforeUnload state of web
+
+## Reference
+
+- [Issue detail](http://vaughnroyko.com/offline-storage-indexeddb-and-the-onbeforeunloadunload-problem/)

lib/features/composer/presentation/composer_bindings.dart

@@ -29,6 +29,8 @@ import 'package:tmail_ui_user/features/email/data/network/email_api.dart';
 import 'package:tmail_ui_user/features/email/data/repository/email_repository_impl.dart';
 import 'package:tmail_ui_user/features/email/domain/repository/email_repository.dart';
 import 'package:tmail_ui_user/features/email/domain/usecases/get_email_content_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/remove_email_cache_on_web.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/save_email_cache_on_web.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/data/datasource/manage_account_datasource.dart';
 import 'package:tmail_ui_user/features/manage_account/data/datasource_impl/manage_account_datasource_impl.dart';
@@ -141,6 +143,8 @@ class ComposerBindings extends BaseBindings {
         Get.find<UpdateEmailDraftsInteractor>(),
         Get.find<GetAllIdentitiesInteractor>(),
         Get.find<UploadController>(),
+        Get.find<RemoveEmailCacheOnWebInteractor>(),
+        Get.find<SaveEmailCacheOnWebInteractor>(),
     ));
   }
 

lib/features/composer/presentation/composer_controller.dart

@@ -39,6 +39,8 @@ import 'package:tmail_ui_user/features/composer/presentation/model/screen_displa
 import 'package:tmail_ui_user/features/email/domain/state/get_email_content_state.dart';
 import 'package:tmail_ui_user/features/email/domain/usecases/get_email_content_interactor.dart';
 import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/remove_email_cache_on_web.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/save_email_cache_on_web.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/state/get_all_identities_state.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/usecases/get_all_identities_interactor.dart';
@@ -49,6 +51,7 @@ import 'package:tmail_ui_user/features/upload/presentation/controller/upload_con
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 import 'package:uuid/uuid.dart';
+import 'package:universal_html/html.dart' as html;
 
 class ComposerController extends BaseController {
 
@@ -82,6 +85,8 @@ class ComposerController extends BaseController {
   final UpdateEmailDraftsInteractor _updateEmailDraftsInteractor;
   final GetAllIdentitiesInteractor _getAllIdentitiesInteractor;
   final UploadController uploadController;
+  final RemoveEmailCacheOnWebInteractor _removeEmailCacheOnWebInteractor;
+  final SaveEmailCacheOnWebInteractor _saveEmailCacheOnWebInteractor;
 
   List<EmailAddress> listToEmailAddress = <EmailAddress>[];
   List<EmailAddress> listCcEmailAddress = <EmailAddress>[];
@@ -148,6 +153,8 @@ class ComposerController extends BaseController {
     this._updateEmailDraftsInteractor,
     this._getAllIdentitiesInteractor,
     this.uploadController,
+    this._removeEmailCacheOnWebInteractor,
+    this._saveEmailCacheOnWebInteractor,
   );
 
   @override
@@ -157,6 +164,8 @@ class ComposerController extends BaseController {
       WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
         await FkUserAgent.init();
       });
+    } else {
+      _listenBrowserTabRefresh();
     }
   }
 
@@ -236,6 +245,20 @@ class ComposerController extends BaseController {
     popBack();
   }
 
+  void _listenBrowserTabRefresh() {
+    html.window.onBeforeUnload.listen((event) async {
+      final userProfile = mailboxDashBoardController.userProfile.value;
+      _removeEmailCacheOnWebInteractor.execute();
+      if (userProfile != null) {
+        final draftEmail = await _generateEmail(
+          mailboxDashBoardController.mapDefaultMailboxId,
+          userProfile,
+        );
+        _saveEmailCacheOnWebInteractor.execute(draftEmail);
+      }
+    });
+  }
+  
   void _initEmail() {
     final arguments = kIsWeb ? mailboxDashBoardController.routerArguments : Get.arguments;
     if (arguments is ComposerArguments) {

lib/features/mailbox_dashboard/data/datasource/email_cache_datasource.dart

@@ -0,0 +1,10 @@
+import 'package:jmap_dart_client/jmap/mail/email/email.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/model/email_cache.dart';
+
+abstract class EmailCacheDataSource {
+  void saveEmailCacheOnWeb(Email email);
+
+  EmailCache? getEmailCacheOnWeb();
+
+  void removeEmailCacheOnWeb();
+}

lib/features/mailbox_dashboard/data/datasource_impl/email_cache_datasoure_impl.dart

@@ -0,0 +1,34 @@
+import 'dart:convert';
+import 'package:jmap_dart_client/jmap/mail/email/email.dart';
+import 'package:model/model.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/model/email_cache.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/datasource/email_cache_datasource.dart';
+import 'package:universal_html/html.dart' as html;
+
+class EmailCacheDataSourceImpl extends EmailCacheDataSource {
+
+  @override
+  EmailCache? getEmailCacheOnWeb() {
+    final result = html.window.localStorage.entries
+        .where((e) => e.key == EmailActionType.edit.name)
+        .toList();
+    if (result.isNotEmpty) {
+      final jsonHandle = json.decode(result.first.value) as Map<String, dynamic>;
+      final emailCache = EmailCache.fromJson(jsonHandle);
+      return emailCache;
+    } else {
+      return null;
+    }
+  }
+
+  @override
+  void removeEmailCacheOnWeb() {
+    html.window.localStorage.removeWhere((key, value) => key == EmailActionType.edit.name);
+  }
+
+  @override
+  void saveEmailCacheOnWeb(Email email) {
+    Map<String,String> entries = { EmailActionType.edit.name: json.encode(email.toJson()) };
+    html.window.localStorage.addAll(entries);
+  }
+}

lib/features/mailbox_dashboard/data/model/email_cache.dart

@@ -0,0 +1,84 @@
+import 'package:equatable/equatable.dart';
+import 'package:jmap_dart_client/http/converter/email/email_body_value_converter.dart';
+import 'package:jmap_dart_client/http/converter/email/email_mailbox_ids_converter.dart';
+import 'package:jmap_dart_client/jmap/core/id.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email_body_part.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email_body_value.dart';
+import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
+import 'package:model/email/email_content.dart';
+import 'package:model/extensions/media_type_extension.dart';
+
+class EmailCache with EquatableMixin {
+
+  final EmailId id;
+  final Map<MailboxId, bool>? mailboxIds;
+  final String? subject;
+  final Set<EmailAddress>? from;
+  final Set<EmailAddress>? to;
+  final Set<EmailAddress>? cc;
+  final Set<EmailAddress>? bcc;
+  final Set<EmailAddress>? replyTo;
+  final Set<EmailBodyPart>? textBody;
+  final Set<EmailBodyPart>? htmlBody;
+  final Map<PartId, EmailBodyValue>? bodyValues;
+
+  EmailCache(
+      this.id,
+      {
+        this.mailboxIds,
+        this.subject,
+        this.from,
+        this.to,
+        this.cc,
+        this.bcc,
+        this.replyTo,
+        this.textBody,
+        this.htmlBody,
+        this.bodyValues,
+      });
+
+  factory EmailCache.fromJson(Map<String, dynamic> json) {
+    return EmailCache(
+      EmailId(Id(json['id'])),
+      mailboxIds: (json['mailboxIds'] as Map<String, dynamic>?)?.map((key, value) => EmailMailboxIdsConverter().parseEntry(key, value)),
+      subject: json['subject'] as String?,
+      from: (json['from'] as List<dynamic>?)?.map((json) => EmailAddress.fromJson(json)).toSet(),
+      to: (json['to'] as List<dynamic>?)?.map((json) => EmailAddress.fromJson(json)).toSet(),
+      cc: (json['cc'] as List<dynamic>?)?.map((json) => EmailAddress.fromJson(json)).toSet(),
+      bcc: (json['bcc'] as List<dynamic>?)?.map((json) => EmailAddress.fromJson(json)).toSet(),
+      bodyValues: (json['bodyValues'] as Map<String, dynamic>?)?.map((key, value) => EmailBodyValueConverter().parseEntry(key, value)),
+      replyTo: (json['replyTo'] as List<dynamic>?)?.map((json) => EmailAddress.fromJson(json)).toSet(),
+      textBody: (json['textBody'] as List<dynamic>?)?.map((json) => EmailBodyPart.fromJson(json)).toSet(),
+      htmlBody: (json['htmlBody'] as List<dynamic>?)?.map((json) => EmailBodyPart.fromJson(json)).toSet(),
+
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+    id,
+    subject,
+    from,
+    to,
+    cc,
+    bcc,
+    replyTo,
+
+  ];
+
+  List<EmailContent> get emailContentList {
+    final newHtmlBody = htmlBody
+        ?.where((emailBody) => emailBody.partId != null && emailBody.type != null)
+        .toList() ?? <EmailBodyPart>[];
+
+    final mapHtmlBody = { for (var emailBody in newHtmlBody) emailBody.partId! : emailBody.type! };
+
+    final emailContents = bodyValues?.entries
+        .map((entries) => EmailContent(mapHtmlBody[entries.key].toEmailContentType(), entries.value.value))
+        .toList();
+
+    return emailContents ?? [];
+  }
+}

lib/features/mailbox_dashboard/data/repository/email_cache_repository_impl.dart

@@ -0,0 +1,26 @@
+import 'package:jmap_dart_client/jmap/mail/email/email.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/model/email_cache.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/datasource/email_cache_datasource.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/repository/email_cache_repository.dart';
+
+class EmailCacheRepositoryImpl extends EmailCacheRepository {
+
+  final EmailCacheDataSource emailCacheDataSource;
+
+  EmailCacheRepositoryImpl(this.emailCacheDataSource);
+
+  @override
+  EmailCache? getEmailCacheOnWeb() {
+    return emailCacheDataSource.getEmailCacheOnWeb();
+  }
+
+  @override
+  void removeEmailCacheOnWeb() {
+    return emailCacheDataSource.removeEmailCacheOnWeb();
+  }
+
+  @override
+  void saveEmailCacheOnWeb(Email email) {
+    return emailCacheDataSource.saveEmailCacheOnWeb(email);
+  }
+}

lib/features/mailbox_dashboard/domain/repository/email_cache_repository.dart

@@ -0,0 +1,10 @@
+import 'package:jmap_dart_client/jmap/mail/email/email.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/model/email_cache.dart';
+
+abstract class EmailCacheRepository {
+  void saveEmailCacheOnWeb(Email email);
+
+  EmailCache? getEmailCacheOnWeb();
+
+  void removeEmailCacheOnWeb();
+}

lib/features/mailbox_dashboard/domain/usecases/get_email_cache_on_web.dart

@@ -0,0 +1,12 @@
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/model/email_cache.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/repository/email_cache_repository.dart';
+
+class GetEmailCacheOnWebInteractor {
+  final EmailCacheRepository emailCacheRepository;
+
+  GetEmailCacheOnWebInteractor(this.emailCacheRepository);
+
+  EmailCache? execute() {
+    return emailCacheRepository.getEmailCacheOnWeb();
+  }
+}

lib/features/mailbox_dashboard/domain/usecases/remove_email_cache_on_web.dart

@@ -0,0 +1,11 @@
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/repository/email_cache_repository.dart';
+
+class RemoveEmailCacheOnWebInteractor {
+  final EmailCacheRepository emailCacheRepository;
+
+  RemoveEmailCacheOnWebInteractor(this.emailCacheRepository);
+
+  execute() {
+    return emailCacheRepository.removeEmailCacheOnWeb();
+  }
+}

lib/features/mailbox_dashboard/domain/usecases/save_email_cache_on_web.dart

@@ -0,0 +1,12 @@
+import 'package:jmap_dart_client/jmap/mail/email/email.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/repository/email_cache_repository.dart';
+
+class SaveEmailCacheOnWebInteractor {
+  final EmailCacheRepository emailCacheRepository;
+
+  SaveEmailCacheOnWebInteractor(this.emailCacheRepository);
+
+   execute(Email email) {
+    return emailCacheRepository.saveEmailCacheOnWeb(email);
+  }
+}

lib/features/mailbox_dashboard/presentation/bindings/mailbox_dashboard_bindings.dart

@@ -19,6 +19,11 @@ import 'package:tmail_ui_user/features/email/data/network/email_api.dart';
 import 'package:tmail_ui_user/features/email/data/repository/email_repository_impl.dart';
 import 'package:tmail_ui_user/features/email/domain/repository/email_repository.dart';
 import 'package:tmail_ui_user/features/email/domain/usecases/delete_email_permanently_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/datasource/email_cache_datasource.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/datasource_impl/email_cache_datasoure_impl.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/data/repository/email_cache_repository_impl.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/repository/email_cache_repository.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_email_cache_on_web.dart';
 import 'package:tmail_ui_user/features/email/domain/usecases/move_to_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_bindings.dart';
 import 'package:tmail_ui_user/features/login/data/datasource/account_datasource.dart';
@@ -58,7 +63,9 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_all
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_user_profile_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/mark_as_mailbox_read_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/quick_search_email_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/remove_email_cache_on_web.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/remove_email_drafts_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/save_email_cache_on_web.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/save_recent_search_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
@@ -97,6 +104,7 @@ class MailboxDashBoardBindings extends BaseBindings {
       Get.find<MoveToMailboxInteractor>(),
       Get.find<DeleteEmailPermanentlyInteractor>(),
       Get.find<MarkAsMailboxReadInteractor>(),
+      Get.find<GetEmailCacheOnWebInteractor>(),
     ));
     Get.put(AdvancedFilterController());
   }
@@ -111,6 +119,7 @@ class MailboxDashBoardBindings extends BaseBindings {
     Get.lazyPut<MailboxDataSource>(() => Get.find<MailboxDataSourceImpl>());
     Get.lazyPut<AccountDatasource>(() => Get.find<HiveAccountDatasourceImpl>());
     Get.lazyPut<AuthenticationOIDCDataSource>(() => Get.find<AuthenticationOIDCDataSourceImpl>());
+    Get.lazyPut<EmailCacheDataSource>(() => Get.find<EmailCacheDataSourceImpl>());
   }
 
   @override
@@ -133,6 +142,7 @@ class MailboxDashBoardBindings extends BaseBindings {
         Get.find<TokenOidcCacheManager>(),
         Get.find<OidcConfigurationCacheManager>()
     ));
+    Get.lazyPut(() => EmailCacheDataSourceImpl());
   }
 
   @override
@@ -166,6 +176,9 @@ class MailboxDashBoardBindings extends BaseBindings {
         Get.find<GetCredentialInteractor>(),
         Get.find<GetStoredTokenOidcInteractor>(),
     ));
+    Get.lazyPut(() => GetEmailCacheOnWebInteractor(Get.find<EmailCacheRepository>()));
+    Get.lazyPut(() => SaveEmailCacheOnWebInteractor(Get.find<EmailCacheRepository>()));
+    Get.lazyPut(() => RemoveEmailCacheOnWebInteractor(Get.find<EmailCacheRepository>()));
   }
 
   @override
@@ -178,6 +191,7 @@ class MailboxDashBoardBindings extends BaseBindings {
     Get.lazyPut<MailboxRepository>(() => Get.find<MailboxRepositoryImpl>());
     Get.lazyPut<AccountRepository>(() => Get.find<AccountRepositoryImpl>());
     Get.lazyPut<AuthenticationOIDCRepository>(() => Get.find<AuthenticationOIDCRepositoryImpl>());
+    Get.lazyPut<EmailCacheRepository>(() => Get.find<EmailCacheRepositoryImpl>());
   }
 
   @override
@@ -204,5 +218,6 @@ class MailboxDashBoardBindings extends BaseBindings {
     ));
     Get.lazyPut(() => AccountRepositoryImpl(Get.find<AccountDatasource>()));
     Get.lazyPut(() => AuthenticationOIDCRepositoryImpl(Get.find<AuthenticationOIDCDataSource>()));
+    Get.lazyPut(() => EmailCacheRepositoryImpl(Get.find<EmailCacheDataSource>()));
   }
 }

lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart

@@ -27,6 +27,7 @@ import 'package:tmail_ui_user/features/email/domain/model/move_to_mailbox_reques
 import 'package:tmail_ui_user/features/email/domain/state/delete_email_permanently_state.dart';
 import 'package:tmail_ui_user/features/email/domain/state/move_to_mailbox_state.dart';
 import 'package:tmail_ui_user/features/email/domain/usecases/delete_email_permanently_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_email_cache_on_web.dart';
 import 'package:tmail_ui_user/features/email/domain/usecases/move_to_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
 import 'package:tmail_ui_user/features/login/domain/usecases/delete_authority_oidc_interactor.dart';
@@ -65,6 +66,7 @@ class MailboxDashBoardController extends ReloadableController {
   final MoveToMailboxInteractor _moveToMailboxInteractor;
   final DeleteEmailPermanentlyInteractor _deleteEmailPermanentlyInteractor;
   final MarkAsMailboxReadInteractor _markAsMailboxReadInteractor;
+  final GetEmailCacheOnWebInteractor _getEmailCacheOnWebInteractor;
 
   final scaffoldKey = GlobalKey<ScaffoldState>();
   final selectedMailbox = Rxn<PresentationMailbox>();
@@ -98,6 +100,7 @@ class MailboxDashBoardController extends ReloadableController {
     this._moveToMailboxInteractor,
     this._deleteEmailPermanentlyInteractor,
     this._markAsMailboxReadInteractor,
+    this._getEmailCacheOnWebInteractor,
   ) : super(logoutOidcInteractor,
       deleteAuthorityOidcInteractor,
       getAuthenticatedAccountInteractor);
@@ -120,6 +123,25 @@ class MailboxDashBoardController extends ReloadableController {
     super.onReady();
   }
 
+  void _handleEmailCache() async {
+    final emailCache = _getEmailCacheOnWebInteractor.execute();
+    if (emailCache !=null) {
+      final ComposerArguments composerArguments = ComposerArguments(
+        emailActionType: EmailActionType.edit,
+        presentationEmail: PresentationEmail(
+          emailCache.id,
+          subject: emailCache.subject,
+          from: emailCache.from,
+          to: emailCache.to,
+          cc: emailCache.cc,
+          bcc: emailCache.bcc,
+        ),
+        emailContents: emailCache.emailContentList,
+      );
+      openComposerOverlay(composerArguments);
+    }
+  }
+
   @override
   void onData(Either<Failure, Success> newState) {
     super.onData(newState);
@@ -220,6 +242,9 @@ class MailboxDashBoardController extends ReloadableController {
 
   void _getUserProfile() async {
     userProfile.value = sessionCurrent != null ? UserProfile(sessionCurrent!.username.value) : null;
+    if (kIsWeb && userProfile.value != null) {
+      _handleEmailCache();
+    }
   }
 
   void _setSessionCurrent() {