fix invalid time format due to invalid strings

rainbow-me · Jan 11, 2025 · 2a0839d · 2a0839d
1 parent d312658
commit 2a0839d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 18 deletions.
diff --git a/src/components/backup/ChooseBackupStep.tsx b/src/components/backup/ChooseBackupStep.tsx
@@ -11,7 +11,6 @@ import { sharedCoolModalTopOffset } from '@/navigation/config';
 import { ImgixImage } from '@/components/images';
 import MenuContainer from '@/screens/SettingsSheet/components/MenuContainer';
 import Menu from '@/screens/SettingsSheet/components/Menu';
-import { format } from 'date-fns';
 import MenuItem from '@/screens/SettingsSheet/components/MenuItem';
 import Routes from '@/navigation/routesNames';
 import { BackupFile, parseTimestampFromFilename } from '@/model/backup';
@@ -23,7 +22,7 @@ import Spinner from '@/components/Spinner';
 import ActivityIndicator from '@/components/ActivityIndicator';
 import { useTheme } from '@/theme';
 import { backupsStore, CloudBackupState, LoadingStates } from '@/state/backups/backups';
-import { titleForBackupState } from '@/screens/SettingsSheet/utils';
+import { dateFormatter, titleForBackupState } from '@/screens/SettingsSheet/utils';
 
 const Title = styled(RNText).attrs({
   align: 'left',
@@ -148,7 +147,7 @@ export function ChooseBackupStep() {
                 <Box>
                   <Menu
                     description={lang.t(lang.l.back_up.cloud.latest_backup, {
-                      date: format(new Date(mostRecentBackup.lastModified), "M/d/yy 'at' h:mm a"),
+                      date: dateFormatter(mostRecentBackup.lastModified),
                     })}
                   >
                     <MenuItem
@@ -169,9 +168,13 @@ export function ChooseBackupStep() {
                     {backups.files
                       .filter(backup => backup.name !== mostRecentBackup?.name)
                       .sort((a, b) => {
-                        const timestampA = new Date(parseTimestampFromFilename(a.name)).getTime();
-                        const timestampB = new Date(parseTimestampFromFilename(b.name)).getTime();
-                        return timestampB - timestampA;
+                        try {
+                          const timestampA = new Date(parseTimestampFromFilename(a.name)).getTime();
+                          const timestampB = new Date(parseTimestampFromFilename(b.name)).getTime();
+                          return timestampB - timestampA;
+                        } catch (error) {
+                          return 0;
+                        }
                       })
                       .map(backup => (
                         <MenuItem
@@ -183,8 +186,8 @@ export function ChooseBackupStep() {
                             <MenuItem.Title
                               isLink
                               text={lang.t(lang.l.back_up.cloud.older_backups_title, {
-                                date: format(parseTimestampFromFilename(backup.name), 'M/d/yy'),
-                                time: format(parseTimestampFromFilename(backup.name), 'p'),
+                                date: dateFormatter(parseTimestampFromFilename(backup.name), 'M/d/yy'),
+                                time: dateFormatter(parseTimestampFromFilename(backup.name), 'p'),
                               })}
                             />
                           }

diff --git a/src/screens/SettingsSheet/components/Backups/ViewCloudBackups.tsx b/src/screens/SettingsSheet/components/Backups/ViewCloudBackups.tsx
@@ -6,19 +6,22 @@ import Menu from '../Menu';
 import MenuContainer from '../MenuContainer';
 import MenuItem from '../MenuItem';
 import { BackupFile, parseTimestampFromFilename } from '@/model/backup';
-import { format } from 'date-fns';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';
 import walletBackupStepTypes from '@/helpers/walletBackupStepTypes';
 import { Page } from '@/components/layout';
 import Spinner from '@/components/Spinner';
 import ActivityIndicator from '@/components/ActivityIndicator';
-import { useTheme } from '@/theme';
+import { ThemeContextProps, useTheme } from '@/theme';
 import { CloudBackupState, LoadingStates, backupsStore } from '@/state/backups/backups';
-import { titleForBackupState } from '../../utils';
+import { titleForBackupState, dateFormatter } from '@/screens/SettingsSheet/utils';
 import { Box } from '@/design-system';
 
-const LoadingText = styled(RNText).attrs(({ theme: { colors } }: any) => ({
+type LoadingTextProps = {
+  theme: ThemeContextProps;
+};
+
+const LoadingText = styled(RNText).attrs(({ theme: { colors } }: LoadingTextProps) => ({
   color: colors.blueGreyDark,
   lineHeight: ios ? 'none' : 24,
   size: 'large',
@@ -64,7 +67,7 @@ const ViewCloudBackups = () => {
       <Box>
         <Menu
           description={i18n.t(i18n.l.back_up.cloud.latest_backup, {
-            date: format(new Date(mostRecentBackup.lastModified), "M/d/yy 'at' h:mm a"),
+            date: dateFormatter(mostRecentBackup.lastModified),
           })}
         >
           <MenuItem
@@ -87,9 +90,13 @@ const ViewCloudBackups = () => {
           {backups.files
             .filter(backup => backup.name !== mostRecentBackup?.name)
             .sort((a, b) => {
-              const timestampA = new Date(parseTimestampFromFilename(a.name)).getTime();
-              const timestampB = new Date(parseTimestampFromFilename(b.name)).getTime();
-              return timestampB - timestampA;
+              try {
+                const timestampA = new Date(parseTimestampFromFilename(a.name)).getTime();
+                const timestampB = new Date(parseTimestampFromFilename(b.name)).getTime();
+                return timestampB - timestampA;
+              } catch (error) {
+                return 0;
+              }
             })
             .map(backup => (
               <MenuItem
@@ -101,8 +108,8 @@ const ViewCloudBackups = () => {
                   <MenuItem.Title
                     isLink
                     text={i18n.t(i18n.l.back_up.cloud.older_backups_title, {
-                      date: format(parseTimestampFromFilename(backup.name), 'M/d/yy'),
-                      time: format(parseTimestampFromFilename(backup.name), 'p'),
+                      date: dateFormatter(parseTimestampFromFilename(backup.name), 'M/d/yy'),
+                      time: dateFormatter(parseTimestampFromFilename(backup.name), 'p'),
                     })}
                   />
                 }

diff --git a/src/screens/SettingsSheet/utils.ts b/src/screens/SettingsSheet/utils.ts
@@ -9,6 +9,7 @@ import { backupsStore, CloudBackupState } from '@/state/backups/backups';
 import { RainbowWallet } from '@/model/wallet';
 import { IS_ANDROID, IS_IOS } from '@/env';
 import { normalizeAndroidBackupFilename } from '@/handlers/cloudBackup';
+import { format } from 'date-fns';
 
 type WalletBackupStatus = {
   allBackedUp: boolean;
@@ -119,3 +120,11 @@ export const isWalletBackedUpForCurrentAccount = ({ backupType, backedUp, backup
   const backupFiles = backupsStore.getState().backups;
   return backupFiles.files.some(file => normalizeAndroidBackupFilename(file.name) === normalizeAndroidBackupFilename(backupFile));
 };
+
+export const dateFormatter = (date: string | number, formatString = "M/d/yy 'at' h:mm a") => {
+  try {
+    return format(new Date(date), formatString);
+  } catch (error) {
+    return 'Unknown Date';
+  }
+};