websocket upload notification - closed #24 (#25)

* Render when a new asset is uploaded from WebSocket notification
* Update Readme

mobile/lib/main.dart

@@ -2,9 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/providers/app_state.provider.dart';
 import 'package:immich_mobile/shared/providers/backup.provider.dart';
+import 'package:immich_mobile/shared/providers/websocket.provider.dart';
 import 'constants/hive_box.dart';
 import 'package:google_fonts/google_fonts.dart';
 
@@ -36,20 +38,23 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
     switch (state) {
       case AppLifecycleState.resumed:
         debugPrint("[APP STATE] resumed");
-        ref.read(appStateProvider.notifier).state = AppStateEnum.resumed;
-        ref.read(backupProvider.notifier).resumeBackup();
+        ref.watch(appStateProvider.notifier).state = AppStateEnum.resumed;
+        ref.watch(backupProvider.notifier).resumeBackup();
+        ref.watch(websocketProvider.notifier).connect();
+        ref.watch(assetProvider.notifier).getAllAsset();
         break;
       case AppLifecycleState.inactive:
         debugPrint("[APP STATE] inactive");
-        ref.read(appStateProvider.notifier).state = AppStateEnum.inactive;
+        ref.watch(appStateProvider.notifier).state = AppStateEnum.inactive;
+        ref.watch(websocketProvider.notifier).disconnect();
         break;
       case AppLifecycleState.paused:
         debugPrint("[APP STATE] paused");
-        ref.read(appStateProvider.notifier).state = AppStateEnum.paused;
+        ref.watch(appStateProvider.notifier).state = AppStateEnum.paused;
         break;
       case AppLifecycleState.detached:
         debugPrint("[APP STATE] detached");
-        ref.read(appStateProvider.notifier).state = AppStateEnum.detached;
+        ref.watch(appStateProvider.notifier).state = AppStateEnum.detached;
         break;
     }
   }

mobile/lib/modules/home/providers/asset.provider.dart

@@ -10,14 +10,14 @@ import 'package:photo_manager/photo_manager.dart';
 class AssetNotifier extends StateNotifier<List<ImmichAsset>> {
   final AssetService _assetService = AssetService();
   final DeviceInfoService _deviceInfoService = DeviceInfoService();
+  final Ref ref;
 
-  AssetNotifier() : super([]);
+  AssetNotifier(this.ref) : super([]);
 
   getAllAsset() async {
     List<ImmichAsset>? allAssets = await _assetService.getAllAsset();
 
     if (allAssets != null) {
-      allAssets.sortByCompare<DateTime>((e) => DateTime.parse(e.createdAt), (a, b) => b.compareTo(a));
       state = allAssets;
     }
   }
@@ -26,6 +26,10 @@ class AssetNotifier extends StateNotifier<List<ImmichAsset>> {
     state = [];
   }
 
+  onNewAssetUploaded(ImmichAsset newAsset) {
+    state = [...state, newAsset];
+  }
+
   deleteAssets(Set<ImmichAsset> deleteAssets) async {
     var deviceInfo = await _deviceInfoService.getDeviceInfo();
     var deviceId = deviceInfo["deviceId"];
@@ -43,7 +47,6 @@ class AssetNotifier extends StateNotifier<List<ImmichAsset>> {
     }
 
     final List<String> result = await PhotoManager.editor.deleteWithIds(deleteIdList);
-    print(result);
 
     // Delete asset on server
     List<DeleteAssetResponse>? deleteAssetResult = await _assetService.deleteAssets(deleteAssets);
@@ -59,14 +62,13 @@ class AssetNotifier extends StateNotifier<List<ImmichAsset>> {
   }
 }
 
-final currentLocalPageProvider = StateProvider<int>((ref) => 0);
-
 final assetProvider = StateNotifierProvider<AssetNotifier, List<ImmichAsset>>((ref) {
-  return AssetNotifier();
+  return AssetNotifier(ref);
 });
 
 final assetGroupByDateTimeProvider = StateProvider((ref) {
-  var assetGroup = ref.watch(assetProvider);
+  var assets = ref.watch(assetProvider);
 
-  return assetGroup.groupListsBy((element) => DateFormat('y-MM-dd').format(DateTime.parse(element.createdAt)));
+  assets.sortByCompare<DateTime>((e) => DateTime.parse(e.createdAt), (a, b) => b.compareTo(a));
+  return assets.groupListsBy((element) => DateFormat('y-MM-dd').format(DateTime.parse(element.createdAt)));
 });

mobile/lib/modules/home/ui/profile_drawer.dart

@@ -5,6 +5,7 @@ import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
 import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/shared/providers/backup.provider.dart';
+import 'package:immich_mobile/shared/providers/websocket.provider.dart';
 
 class ProfileDrawer extends ConsumerWidget {
   const ProfileDrawer({Key? key}) : super(key: key);
@@ -60,6 +61,7 @@ class ProfileDrawer extends ConsumerWidget {
               if (res) {
                 ref.watch(backupProvider.notifier).cancelBackup();
                 ref.watch(assetProvider.notifier).clearAllAsset();
+                ref.watch(websocketProvider.notifier).disconnect();
                 AutoRouter.of(context).popUntilRoot();
               }
             },

mobile/lib/modules/home/views/home_page.dart

@@ -11,6 +11,7 @@ import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
 import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
 import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
 import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/shared/providers/websocket.provider.dart';
 import 'package:sliver_tools/sliver_tools.dart';
 
 class HomePage extends HookConsumerWidget {
@@ -25,12 +26,13 @@ class HomePage extends HookConsumerWidget {
     var homePageState = ref.watch(homePageStateProvider);
 
     useEffect(() {
+      ref.read(websocketProvider.notifier).connect();
       ref.read(assetProvider.notifier).getAllAsset();
       return null;
     }, []);
 
     onPopBackFromBackupPage() {
-      ref.read(assetProvider.notifier).getAllAsset();
+      // ref.read(assetProvider.notifier).getAllAsset();
     }
 
     Widget _buildBody() {

mobile/lib/shared/providers/websocket.provider.dart

@@ -0,0 +1,113 @@
+import 'dart:convert';
+
+import 'package:flutter/foundation.dart';
+import 'package:hive/hive.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:socket_io_client/socket_io_client.dart';
+
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+
+class WebscoketState {
+  final Socket? socket;
+  final bool isConnected;
+
+  WebscoketState({
+    this.socket,
+    required this.isConnected,
+  });
+
+  WebscoketState copyWith({
+    Socket? socket,
+    bool? isConnected,
+  }) {
+    return WebscoketState(
+      socket: socket ?? this.socket,
+      isConnected: isConnected ?? this.isConnected,
+    );
+  }
+
+  @override
+  String toString() => 'WebscoketState(socket: $socket, isConnected: $isConnected)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is WebscoketState && other.socket == socket && other.isConnected == isConnected;
+  }
+
+  @override
+  int get hashCode => socket.hashCode ^ isConnected.hashCode;
+}
+
+class WebsocketNotifier extends StateNotifier<WebscoketState> {
+  WebsocketNotifier(this.ref) : super(WebscoketState(socket: null, isConnected: false)) {
+    debugPrint("Init websocket instance");
+  }
+
+  final Ref ref;
+
+  connect() {
+    var authenticationState = ref.watch(authenticationProvider);
+
+    if (authenticationState.isAuthenticated) {
+      var accessToken = Hive.box(userInfoBox).get(accessTokenKey);
+      var endpoint = Hive.box(userInfoBox).get(serverEndpointKey);
+      try {
+        debugPrint("[WEBSOCKET] Attempting to connect to ws");
+        // Configure socket transports must be sepecified
+        Socket socket = io(
+          endpoint,
+          OptionBuilder()
+              .setTransports(['websocket'])
+              .enableReconnection()
+              .enableForceNew()
+              .enableForceNewConnection()
+              .enableAutoConnect()
+              .setExtraHeaders({"Authorization": "Bearer $accessToken"})
+              .build(),
+        );
+
+        socket.onConnect((_) {
+          debugPrint("[WEBSOCKET] Established Websocket Connection");
+          state = WebscoketState(isConnected: true, socket: socket);
+        });
+
+        socket.onDisconnect((_) {
+          debugPrint("[WEBSOCKET] Disconnect to Websocket Connection");
+          state = WebscoketState(isConnected: false, socket: null);
+        });
+
+        socket.on('error', (errorMessage) {
+          debugPrint("Webcoket Error - $errorMessage");
+          state = WebscoketState(isConnected: false, socket: null);
+        });
+
+        socket.on('on_upload_success', (data) {
+          var jsonString = jsonDecode(data.toString());
+          ImmichAsset newAsset = ImmichAsset.fromMap(jsonString);
+          ref.watch(assetProvider.notifier).onNewAssetUploaded(newAsset);
+        });
+      } catch (e) {
+        debugPrint("[WEBSOCKET] Catch Websocket Error - ${e.toString()}");
+      }
+    }
+  }
+
+  disconnect() {
+    debugPrint("[WEBSOCKET] Attempting to disconnect");
+    var socket = state.socket?.disconnect();
+    if (socket != null) {
+      if (socket.disconnected) {
+        state = WebscoketState(isConnected: false, socket: null);
+      }
+    }
+  }
+}
+
+final websocketProvider = StateNotifierProvider<WebsocketNotifier, WebscoketState>((ref) {
+  return WebsocketNotifier(ref);
+});