TF-228 Checking network status in the app

assets/images/ic_not_connection.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 16V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16ZM10.7502 8.24998V7.7502C10.7502 7.19791 11.1979 6.7502 11.7502 6.7502H12.25C12.8023 6.7502 13.25 7.19791 13.25 7.7502V8.24998C13.25 8.80226 12.8023 9.24998 12.25 9.24998H11.7502C11.1979 9.24998 10.7502 8.80226 10.7502 8.24998Z" fill="#FF0000"/>
+</svg>

core/lib/presentation/resources/image_paths.dart

@@ -86,6 +86,7 @@ class ImagePaths {
   String get icClose => _getImagePath('ic_close.svg');
   String get icSendToastError => _getImagePath('ic_send_toast_error.svg');
   String get icEmpty => _getImagePath('ic_empty.svg');
+  String get icNotConnection => _getImagePath('ic_not_connection.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

lib/features/base/base_controller.dart

@@ -1,9 +1,11 @@
+import 'package:connectivity_plus/connectivity_plus.dart';
 import 'package:core/core.dart';
 import 'package:dartz/dartz.dart';
 import 'package:get/get.dart';
 
 abstract class BaseController extends GetxController {
   final viewState = Rx<Either<Failure, Success>>(Right(UIState.idle));
+  final connectivityResult = Rxn<ConnectivityResult>();
 
   void consumeState(Stream<Either<Failure, Success>> newStateStream) async {
     log('BaseController::consumeState():');
@@ -18,6 +20,14 @@ abstract class BaseController extends GetxController {
     viewState.value = newState;
   }
 
+  void setNetworkConnectivityState(ConnectivityResult newConnectivityResult) {
+    connectivityResult.value = newConnectivityResult;
+  }
+
+  bool isNetworkConnectionAvailable() {
+    return connectivityResult.value != ConnectivityResult.none;
+  }
+
   void getState(Future<Either<Failure, Success>> newStateStream) async {
     final state = await newStateStream;
     state.fold(

lib/features/base/mixin/network_connection_mixin.dart

@@ -0,0 +1,33 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+mixin NetworkConnectionMixin {
+
+  final _imagePaths = Get.find<ImagePaths>();
+
+  Widget buildNetworkConnectionWidget(BuildContext context) {
+    return Container(
+        decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(16)),
+        width: 320,
+        margin: EdgeInsets.only(bottom: 100),
+        child: Material(
+            elevation: 8,
+            shape:  RoundedRectangleBorder(
+              borderRadius: BorderRadius.all(Radius.circular(16.0)),
+            ),
+            child: ListTile(
+                leading: SvgPicture.asset(_imagePaths.icNotConnection),
+                title: Text(
+                    AppLocalizations.of(context).no_internet_connection,
+                    style: TextStyle(fontSize: 15, color: Colors.black)),
+              )
+        )
+    );
+  }
+}

lib/features/email/presentation/email_view.dart

@@ -8,6 +8,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
 import 'package:model/model.dart';
+import 'package:tmail_ui_user/features/base/mixin/network_connection_mixin.dart';
 import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_email_address_extension.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_controller.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/app_bar_mail_widget_builder.dart';
@@ -20,7 +21,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/user_setti
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:filesize/filesize.dart';
 
-class EmailView extends GetView with UserSettingPopupMenuMixin {
+class EmailView extends GetView with UserSettingPopupMenuMixin, NetworkConnectionMixin {
 
   final emailController = Get.find<EmailController>();
   final responsiveUtils = Get.find<ResponsiveUtils>();
@@ -37,28 +38,33 @@ class EmailView extends GetView with UserSettingPopupMenuMixin {
       },
       child: Scaffold(
         backgroundColor: responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
-        body: Container(
+        body: Stack(children: [
-          padding: EdgeInsets.zero,
+          Container(
-          margin: EdgeInsets.zero,
+            padding: EdgeInsets.zero,
-          decoration: responsiveUtils.isTabletLarge(context)
+            margin: EdgeInsets.zero,
-            ? BoxDecoration(border: Border(left: BorderSide(color: AppColor.colorLineLeftEmailView, width: 1.0)))
+            decoration: responsiveUtils.isTabletLarge(context)
-            : null,
+                ? BoxDecoration(border: Border(left: BorderSide(color: AppColor.colorLineLeftEmailView, width: 1.0)))
-          child: SafeArea(
+                : null,
-              right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
+            child: SafeArea(
-              left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
+                right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
-              child: Column(
+                left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
-                  mainAxisAlignment: MainAxisAlignment.center,
+                child: Column(
-                  children: [
+                    mainAxisAlignment: MainAxisAlignment.center,
-                    if (responsiveUtils.isDesktop(context))
+                    children: [
-                      Container(
+                      if (responsiveUtils.isDesktop(context))
-                        color: Colors.white,
+                        Container(
-                        padding: EdgeInsets.only(right: 10, top: 16, bottom: 10),
+                            color: Colors.white,
-                        child: _buildHeader(context)),
+                            padding: EdgeInsets.only(right: 10, top: 16, bottom: 10),
-                    Expanded(child: _buildBody(context)),
+                            child: _buildHeader(context)),
-                  ]
+                      Expanded(child: _buildBody(context)),
-              )
+                    ]
+                )
+            ),
           ),
-        )
+          Obx(() => !emailController.mailboxDashBoardController.isNetworkConnectionAvailable() && (responsiveUtils.isMobile(context) || responsiveUtils.isTablet(context))
+              ? Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))
+              : SizedBox.shrink()),
+        ])
       )
     );
   }

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart

@@ -1,3 +1,6 @@
+import 'dart:async';
+
+import 'package:connectivity_plus/connectivity_plus.dart';
 import 'package:core/core.dart';
 import 'package:dartz/dartz.dart';
 import 'package:flutter/foundation.dart';
@@ -47,6 +50,7 @@ class MailboxDashBoardController extends ReloadableController {
   final RemoveEmailDraftsInteractor _removeEmailDraftsInteractor = Get.find<RemoveEmailDraftsInteractor>();
   final DeleteCredentialInteractor _deleteCredentialInteractor = Get.find<DeleteCredentialInteractor>();
   final CachingManager _cachingManager = Get.find<CachingManager>();
+  final Connectivity _connectivity = Get.find<Connectivity>();
 
   final MoveToTrashInteractor _moveToTrashInteractor;
   final MoveToMailboxInteractor _moveToMailboxInteractor;
@@ -68,12 +72,19 @@ class MailboxDashBoardController extends ReloadableController {
   TextEditingController searchInputController = TextEditingController();
   FocusNode searchFocus = FocusNode();
   RouterArguments? routerArguments;
+  late StreamSubscription _connectivityStreamSubscription;
 
   MailboxDashBoardController(
     this._moveToTrashInteractor,
     this._moveToMailboxInteractor,
   );
 
+  @override
+  void onInit() {
+    super.onInit();
+    _registerNetworkConnectivityState();
+  }
+
   @override
   void onReady() {
     super.onReady();
@@ -144,7 +155,17 @@ class MailboxDashBoardController extends ReloadableController {
   }
 
   @override
-  void onError(error) {
+  void onError(error) {}
+
+  void _registerNetworkConnectivityState() async {
+    setNetworkConnectivityState(await _connectivity.checkConnectivity());
+    _connectivityStreamSubscription = _connectivity.onConnectivityChanged.listen((ConnectivityResult result) {
+      log('MailboxDashBoardController::_registerNetworkConnectivityState(): ConnectivityResult: ${result.name}');
+      setNetworkConnectivityState(result);
+      if (userProfile.value == null && result != ConnectivityResult.none) {
+        _getUserProfile();
+      }
+    });
   }
 
   void _getUserProfile() async {
@@ -354,6 +375,7 @@ class MailboxDashBoardController extends ReloadableController {
 
   @override
   void onClose() {
+    _connectivityStreamSubscription.cancel();
     searchInputController.dispose();
     searchFocus.dispose();
     super.onClose();

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart

@@ -1,6 +1,7 @@
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/mixin/network_connection_mixin.dart';
 import 'package:tmail_ui_user/features/composer/presentation/composer_view.dart'
     if (dart.library.html) 'package:tmail_ui_user/features/composer/presentation/composer_view_web.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_view.dart';
@@ -12,7 +13,7 @@ import 'package:tmail_ui_user/features/setting/presentation/model/reading_pane.d
 import 'package:tmail_ui_user/features/thread/presentation/thread_view.dart';
 import 'package:tmail_ui_user/main/routes/app_routes.dart';
 
-class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> {
+class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with NetworkConnectionMixin {
 
   final _responsiveUtils = Get.find<ResponsiveUtils>();
 
@@ -40,6 +41,9 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> {
         Obx(() => controller.dashBoardAction == DashBoardAction.compose
           ? ComposerView()
           : SizedBox.shrink()),
+        Obx(() => controller.isNetworkConnectionAvailable()
+          ? SizedBox.shrink()
+          : Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))),
       ]),
     );
   }

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-03-31T09:03:00.853808",
+  "@@last_modified": "2022-03-31T12:07:59.313834",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -911,5 +911,11 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "no_internet_connection": "No internet connection",
+  "@no_internet_connection": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/bindings/network/network_bindings.dart

@@ -1,5 +1,6 @@
 import 'dart:io';
 
+import 'package:connectivity_plus/connectivity_plus.dart';
 import 'package:core/core.dart';
 import 'package:dio/dio.dart';
 import 'package:flutter/foundation.dart';
@@ -17,6 +18,7 @@ class NetworkBindings extends Bindings {
   void dependencies() {
     _bindingDio();
     _bindingApi();
+    _bindingConnection();
   }
 
   void _bindingBaseOption() {
@@ -56,4 +58,8 @@ class NetworkBindings extends Bindings {
       Get.find<DownloadManager>()));
     Get.put(ComposerAPI(Get.find<DioClient>()));
   }
+
+  void _bindingConnection() {
+    Get.put(Connectivity());
+  }
 }

lib/main/localizations/app_localizations.dart

@@ -970,4 +970,11 @@ class AppLocalizations {
         name: 'moved_to_trash'
     );
   }
+
+  String get no_internet_connection {
+    return Intl.message(
+        'No internet connection',
+        name: 'no_internet_connection'
+    );
+  }
 }

pubspec.yaml

@@ -137,6 +137,8 @@ dependencies:
 
   rxdart: 0.27.3
 
+  connectivity_plus: 2.2.1
+
 dev_dependencies:
   flutter_test:
     sdk: flutter