refactor combat message

mobile/lib/widgets/forms/login/login_form.dart

@@ -16,7 +16,6 @@ import 'package:immich_mobile/providers/asset.provider.dart';
 import 'package:immich_mobile/providers/authentication.provider.dart';
 import 'package:immich_mobile/providers/backup/backup.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
-import 'package:immich_mobile/utils/version_compatibility.dart';
 import 'package:immich_mobile/widgets/common/immich_logo.dart';
 import 'package:immich_mobile/widgets/common/immich_title_text.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
@@ -27,8 +26,8 @@ import 'package:immich_mobile/widgets/forms/login/login_button.dart';
 import 'package:immich_mobile/widgets/forms/login/o_auth_login_button.dart';
 import 'package:immich_mobile/widgets/forms/login/password_input.dart';
 import 'package:immich_mobile/widgets/forms/login/server_endpoint_input.dart';
+import 'package:immich_mobile/widgets/forms/login/version_compatibility_warning.dart';
 import 'package:openapi/api.dart';
-import 'package:package_info_plus/package_info_plus.dart';
 import 'package:permission_handler/permission_handler.dart';
 
 class LoginForm extends HookConsumerWidget {
@@ -54,31 +53,10 @@ class LoginForm extends HookConsumerWidget {
     final logoAnimationController = useAnimationController(
       duration: const Duration(seconds: 60),
     )..repeat();
-    final serverInfo = ref.watch(serverInfoProvider);
+
-    final warningMessage = useState<String?>(null);
     final loginFormKey = GlobalKey<FormState>();
     final ValueNotifier<String?> serverEndpoint = useState<String?>(null);
 
-    checkVersionMismatch() async {
-      try {
-        final packageInfo = await PackageInfo.fromPlatform();
-        final appVersion = packageInfo.version;
-        final appMajorVersion = int.parse(appVersion.split('.')[0]);
-        final appMinorVersion = int.parse(appVersion.split('.')[1]);
-        final serverMajorVersion = serverInfo.serverVersion.major;
-        final serverMinorVersion = serverInfo.serverVersion.minor;
-
-        warningMessage.value = getVersionCompatibilityMessage(
-          appMajorVersion,
-          appMinorVersion,
-          serverMajorVersion,
-          serverMinorVersion,
-        );
-      } catch (error) {
-        warningMessage.value = 'Error checking version compatibility';
-      }
-    }
-
     /// Fetch the server login credential and enables oAuth login if necessary
     /// Returns true if successful, false otherwise
     Future<bool> getServerLoginCredential() async {
@@ -340,40 +318,12 @@ class LoginForm extends HookConsumerWidget {
       );
     }
 
-    buildVersionCompatWarning() {
-      checkVersionMismatch();
-
-      if (warningMessage.value == null) {
-        return const SizedBox.shrink();
-      }
-
-      return Padding(
-        padding: const EdgeInsets.only(bottom: 8.0),
-        child: Container(
-          padding: const EdgeInsets.all(16),
-          decoration: BoxDecoration(
-            color:
-                context.isDarkTheme ? Colors.red.shade700 : Colors.red.shade100,
-            borderRadius: BorderRadius.circular(8),
-            border: Border.all(
-              color:
-                  context.isDarkTheme ? Colors.red.shade900 : Colors.red[200]!,
-            ),
-          ),
-          child: Text(
-            warningMessage.value!,
-            textAlign: TextAlign.center,
-          ),
-        ),
-      );
-    }
-
     buildLogin() {
       return AutofillGroup(
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            buildVersionCompatWarning(),
+            const VersionCompatibilityWarning(),
             Text(
               sanitizeUrl(serverEndpointController.text),
               style: context.textTheme.displaySmall,

mobile/lib/widgets/forms/login/version_compatibility_warning.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/utils/version_compatibility.dart';
+import 'package:package_info_plus/package_info_plus.dart';
+
+class VersionCompatibilityWarning extends HookConsumerWidget {
+  const VersionCompatibilityWarning({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final warningMessage = useState<String?>(null);
+    final serverInfo = ref.watch(serverInfoProvider);
+
+    checkVersionMismatch() async {
+      try {
+        final packageInfo = await PackageInfo.fromPlatform();
+        final appVersion = packageInfo.version;
+        final appMajorVersion = int.parse(appVersion.split('.')[0]);
+        final appMinorVersion = int.parse(appVersion.split('.')[1]);
+        final serverMajorVersion = serverInfo.serverVersion.major;
+        final serverMinorVersion = serverInfo.serverVersion.minor;
+
+        warningMessage.value = getVersionCompatibilityMessage(
+          appMajorVersion,
+          appMinorVersion,
+          serverMajorVersion,
+          serverMinorVersion,
+        );
+      } catch (error) {
+        warningMessage.value = 'Error checking version compatibility';
+      }
+    }
+
+    useEffect(
+      () {
+        checkVersionMismatch();
+        return () {};
+      },
+      [],
+    );
+
+    return warningMessage.value == null
+        ? const SizedBox.shrink()
+        : Padding(
+            padding: const EdgeInsets.only(bottom: 8.0),
+            child: Container(
+              padding: const EdgeInsets.all(16),
+              decoration: BoxDecoration(
+                color: context.isDarkTheme
+                    ? Colors.red.shade700
+                    : Colors.red.shade100,
+                borderRadius: BorderRadius.circular(8),
+                border: Border.all(
+                  color: context.isDarkTheme
+                      ? Colors.red.shade900
+                      : Colors.red[200]!,
+                ),
+              ),
+              child: Text(
+                warningMessage.value!,
+                textAlign: TextAlign.center,
+              ),
+            ),
+          );
+  }
+}