Refactor messages hook to extract messages to a separate file

To make it easier to parse the logic.

4 files changed, 67 insertions, 51 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/constants.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/constants.ts
new file mode 100644
index 0000000000..2e6b598186
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/constants.ts
@@ -0,0 +1,44 @@
+import { sprintf } from 'sprintf-js';
+
+import { messages } from '../../../../../../../../shared/gettext';
+
+export const translations = {
+  downloadComplete:
+    // TRANSLATORS: Status text displayed below a progress bar when the download of an update is complete
+    messages.pgettext('app-upgrade-view', 'Download complete!'),
+  downloadFailed:
+    // TRANSLATORS: Status text displayed below a progress bar when the download of an update fails
+    messages.pgettext('app-upgrade-view', 'Download failed'),
+  downloadFewSecondsRemaining:
+    // TRANSLATORS: Status text displayed below a progress bar when the update is being downloaded
+    // TRANSLATORS: with the estimated time of completion is within a few seconds.
+    messages.pgettext('app-upgrade-view', 'A few seconds remaining...'),
+  downloadPaused:
+    // TRANSLATORS: Status text displayed below a progress bar when the download of an update has been paused
+    messages.pgettext('app-upgrade-view', 'Download paused'),
+  downloadStarting:
+    // TRANSLATORS: Status text displayed below a progress bar when the download of an update is starting
+    messages.pgettext('app-upgrade-view', 'Starting download...'),
+  getDownloadMinutesRemaining: (minutes: number) =>
+    sprintf(
+      // TRANSLATORS: Status text displayed below a progress bar when the update is being downloaded
+      // TRANSLATORS: with the estimated time of completion represented in minutes.
+      // TRANSLATORS: Available placeholders:
+      // TRANSLATORS: %(minutes)s - Will be replaced with remaining minutes until download is complete
+      messages.pgettext('app-upgrade-view', 'About %(minutes)s minutes remaining...'),
+      {
+        minutes,
+      },
+    ),
+  getDownloadSecondsRemaining: (seconds: number) =>
+    sprintf(
+      // TRANSLATORS: Status text displayed below a progress bar when the update is being downloaded
+      // TRANSLATORS: with the estimated time of completion represented in seconds.
+      // TRANSLATORS: Available placeholders:
+      // TRANSLATORS: %(second)s - Will be replaced with remaining seconds until download is complete
+      messages.pgettext('app-upgrade-view', 'About %(seconds)s seconds remaining...'),
+      {
+        seconds,
+      },
+    ),
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/hooks/useGetMessageError.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/hooks/useGetMessageError.ts
index bad72af8c1..bd1b06b4c9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/hooks/useGetMessageError.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/hooks/useGetMessageError.ts
@@ -1,25 +1,20 @@
-import { messages } from '../../../../../../../../../shared/gettext';
 import { useAppUpgradeError } from '../../../../../../../../redux/hooks';
+import { translations } from '../constants';
 
 export const useGetMessageError = () => {
   const { error } = useAppUpgradeError();
 
   const getMessageError = () => {
-    if (
-      error === 'INSTALLER_FAILED' ||
-      error === 'START_INSTALLER_FAILED' ||
-      error === 'VERIFICATION_FAILED'
-    ) {
-      // TRANSLATORS: Status text displayed below a progress bar when the download of an update is complete
-      return messages.pgettext('app-upgrade-view', 'Download complete!');
+    switch (error) {
+      case 'DOWNLOAD_FAILED':
+        return translations.downloadFailed;
+      case 'INSTALLER_FAILED':
+      case 'START_INSTALLER_FAILED':
+      case 'VERIFICATION_FAILED':
+        return translations.downloadComplete;
+      default:
+        return null;
     }
-
-    if (error === 'DOWNLOAD_FAILED') {
-      // TRANSLATORS: Status text displayed below a progress bar when the download of an update fails
-      return messages.pgettext('app-upgrade-view', 'Download failed');
-    }
-
-    return null;
   };
 
   return getMessageError;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/hooks/useGetMessageTimeLeft.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/hooks/useGetMessageTimeLeft.ts
index 7de6524d5e..e826105522 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/hooks/useGetMessageTimeLeft.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/hooks/useGetMessageTimeLeft.ts
@@ -1,8 +1,6 @@
-import { sprintf } from 'sprintf-js';
-
-import { messages } from '../../../../../../../../../shared/gettext';
 import { isNumber } from '../../../../../../../../../shared/utils';
 import { useAppUpgradeEvent } from '../../../../../../../../redux/hooks';
+import { translations } from '../constants';
 
 export const useGetMessageTimeLeft = () => {
   const { event } = useAppUpgradeEvent();
@@ -16,36 +14,14 @@ export const useGetMessageTimeLeft = () => {
         if (timeLeft > 90) {
           const minutes = Math.round(timeLeft / 60);
 
-          return sprintf(
-            // TRANSLATORS: Status text displayed below a progress bar when the update is being downloaded
-            // TRANSLATORS: Available placeholders:
-            // TRANSLATORS: %(minutes)s - Will be replaced with remaining minutes until download is complete
-            messages.pgettext('app-upgrade-view', 'About %(minutes)s minutes remaining...'),
-            {
-              minutes,
-            },
-          );
+          return translations.getDownloadMinutesRemaining(minutes);
         }
 
         if (timeLeft > 3) {
-          return sprintf(
-            // TRANSLATORS: Status text displayed below a progress bar when the update is being downloaded
-            // TRANSLATORS: Available placeholders:
-            // TRANSLATORS: %(second)s - Will be replaced with remaining seconds until download is complete
-            messages.pgettext('app-upgrade-view', 'About %(seconds)s seconds remaining...'),
-            {
-              seconds: timeLeft,
-            },
-          );
+          return translations.getDownloadSecondsRemaining(timeLeft);
         }
 
-        return sprintf(
-          // TRANSLATORS: Status text displayed below a progress bar when the update is being downloaded
-          messages.pgettext('app-upgrade-view', 'A few seconds remaining...'),
-          {
-            seconds: timeLeft,
-          },
-        );
+        return translations.downloadFewSecondsRemaining;
       }
     }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/useMessage.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/useMessage.ts
index 9ca01750da..74d884f4de 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/useMessage.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/download-progress/hooks/useMessage/useMessage.ts
@@ -1,4 +1,3 @@
-import { messages } from '../../../../../../../../shared/gettext';
 import {
   useAppUpgradeEventType,
   useHasAppUpgradeError,
@@ -6,6 +5,7 @@ import {
 } from '../../../../../../../hooks';
 import { convertEventTypeToStep } from '../../../../../../../redux/app-upgrade/helpers';
 import { useConnectionIsBlocked } from '../../../../../../../redux/hooks';
+import { translations } from './constants';
 import { useGetMessageError, useGetMessageTimeLeft } from './hooks';
 
 export const useMessage = () => {
@@ -22,19 +22,21 @@ export const useMessage = () => {
     step === 'launch' ||
     step === 'verify'
   ) {
-    // TRANSLATORS: Status text displayed below a progress bar when the download of an update is complete
-    return messages.pgettext('app-upgrade-view', 'Download complete!');
+    return translations.downloadComplete;
   }
 
-  if (step === 'pause' || isBlocked) {
-    // TRANSLATORS: Status text displayed below a progress bar when the download of an update has been paused
-    return messages.pgettext('app-upgrade-view', 'Download paused');
+  if (isBlocked) {
+    return translations.downloadPaused;
   }
 
   if (hasAppUpgradeError) {
     return getMessageError();
   }
 
+  if (step === 'pause') {
+    return translations.downloadPaused;
+  }
+
   if (step === 'download') {
     if (appUpgradeEventType === 'APP_UPGRADE_STATUS_DOWNLOAD_PROGRESS') {
       const messageTimeLeft = getMessageTimeLeft();
@@ -42,8 +44,7 @@ export const useMessage = () => {
       return messageTimeLeft;
     }
 
-    // TRANSLATORS: Status text displayed below a progress bar when the download of an update is starting
-    return messages.pgettext('app-upgrade-view', 'Starting download...');
+    return translations.downloadStarting;
   }
 
   return null;