From eac02b7fe9bfe2ba5a5247d1c8cf1b1b78b3e69b Mon Sep 17 00:00:00 2001
From: Stef Coenen <stef@thebrownfox.be>
Date: Thu, 4 Jan 2024 11:27:47 +0100
Subject: [PATCH] Added last sync time to the settings page; Updated sync
 interval;

---
 .../hooks/cameraRoll/useSyncFromCameraRoll.ts | 11 +++--
 packages/mobile/src/pages/settings-page.tsx   | 45 ++++++++++++++++---
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/packages/mobile/src/hooks/cameraRoll/useSyncFromCameraRoll.ts b/packages/mobile/src/hooks/cameraRoll/useSyncFromCameraRoll.ts
index 8ef2b930..4528474a 100644
--- a/packages/mobile/src/hooks/cameraRoll/useSyncFromCameraRoll.ts
+++ b/packages/mobile/src/hooks/cameraRoll/useSyncFromCameraRoll.ts
@@ -10,7 +10,7 @@ import useAuth from '../auth/useAuth';
 import { useKeyValueStorage } from '../auth/useEncryptedStorage';
 
 const ONE_MINUTE = 60000;
-const ONE_HOUR = ONE_MINUTE * 60;
+const FIVE_MINUTES = ONE_MINUTE * 5;
 
 const targetDrive = PhotoConfig.PhotoDrive;
 
@@ -60,7 +60,7 @@ const useSyncFromCameraRoll = () => {
         dotYouClient,
         targetDrive,
         undefined,
-        fileData.node.image,
+        fileData.node.image
       );
       await addDayToLibrary({ date: uploadResult.userDate });
     }
@@ -78,10 +78,10 @@ const useSyncFromCameraRoll = () => {
       // Only one to start/run per startup;
       if (isFetching.current || isFinished.current) return;
 
-      // Only sync when last sync was more than 1 hour ago
+      // Only sync when last sync was more than 5 minutes ago
       if (
         lastCameraRollSyncTimeAsInt &&
-        new Date().getTime() - lastCameraRollSyncTimeAsInt < ONE_HOUR
+        new Date().getTime() - lastCameraRollSyncTimeAsInt < FIVE_MINUTES
       )
         return;
 
@@ -95,8 +95,7 @@ const useSyncFromCameraRoll = () => {
       isFetching.current = false;
       isFinished.current = true;
 
-      if (!earliestSyncTime)
-        setEarliestSyncTime(lastCameraRollSyncTimeAsInt.toString());
+      if (!earliestSyncTime) setEarliestSyncTime(lastCameraRollSyncTimeAsInt.toString());
 
       setLastCameraRollSyncTime(new Date().getTime().toString());
     }, 5000);
diff --git a/packages/mobile/src/pages/settings-page.tsx b/packages/mobile/src/pages/settings-page.tsx
index acf6b99f..0a2d9e3b 100644
--- a/packages/mobile/src/pages/settings-page.tsx
+++ b/packages/mobile/src/pages/settings-page.tsx
@@ -26,6 +26,14 @@ import InAppBrowser from 'react-native-inappbrowser-reborn';
 
 type SettingsProps = NativeStackScreenProps<SettingsStackParamList, 'Profile'>;
 
+const dateFormat: Intl.DateTimeFormatOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+};
+
 const SettingsPage = (_props: SettingsProps) => {
   const { logout, getIdentity } = useAuth();
   const { cleanup } = useDbSync();
@@ -34,6 +42,7 @@ const SettingsPage = (_props: SettingsProps) => {
     setSyncFromCameraRoll,
     backupFromCameraRoll,
     setBackupFromCameraRoll,
+    lastCameraRollSyncTime,
   } = useKeyValueStorage();
 
   const doLogout = async () => {
@@ -88,13 +97,35 @@ const SettingsPage = (_props: SettingsProps) => {
             }}
           >
             <Sync size={'lg'} />
-            <Text
-              style={{
-                marginLeft: 16,
-              }}
-            >
-              Sync with your Camera roll
-            </Text>
+            <View style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              <Text
+                style={{
+                  marginLeft: 16,
+                }}
+              >
+                Sync with your Camera roll
+              </Text>
+              {syncFromCameraRoll ? (
+                <Text
+                  style={{
+                    marginLeft: 16,
+                    opacity: 0.5,
+                  }}
+                >
+                  {lastCameraRollSyncTime ? (
+                    <>
+                      Last sync:{' '}
+                      {new Date(parseInt(lastCameraRollSyncTime)).toLocaleString(
+                        undefined,
+                        dateFormat
+                      )}
+                    </>
+                  ) : (
+                    'Last sync: not synced yet'
+                  )}
+                </Text>
+              ) : null}
+            </View>
             <View style={{ marginLeft: 'auto' }}>
               <CheckBox
                 value={syncFromCameraRoll}