feat: show last sync date in side menu

src/lib/snjs_helper_hooks.ts

@@ -8,7 +8,7 @@ import {
   SNNote,
   StorageEncryptionPolicies,
 } from '@standardnotes/snjs';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { LockStateType } from './application_state';
 import { Editor } from './editor';
 
@@ -64,17 +64,7 @@ export const useOutOfSync = () => {
   const [outOfSync, setOutOfSync] = React.useState<boolean>(false);
 
   React.useEffect(() => {
-    let isMounted = true;
-    const getOutOfSync = async () => {
-      const outOfSyncInitial = await application?.isOutOfSync();
-      if (isMounted) {
-        setOutOfSync(Boolean(outOfSyncInitial));
-      }
-    };
-    getOutOfSync();
-    return () => {
-      isMounted = false;
-    };
+    setOutOfSync(Boolean(application?.isOutOfSync()));
   }, [application]);
 
   React.useEffect(() => {
@@ -94,6 +84,24 @@ export const useOutOfSync = () => {
   return [outOfSync];
 };
 
+export const useLastSyncDate = (): Date | undefined => {
+  const application = useContext(ApplicationContext);
+  const [lastRefreshed, setLastRefreshed] = useState<Date | undefined>(
+    application?.getLastSyncDate()
+  );
+
+  useEffect(
+    () =>
+      application?.addEventObserver(() => {
+        setLastRefreshed(application?.getLastSyncDate());
+        return Promise.resolve();
+      }, ApplicationEvent.CompletedFullSync),
+    [application]
+  );
+
+  return lastRefreshed;
+};
+
 export const useIsLocked = () => {
   // Context
   const application = React.useContext(ApplicationContext);

src/screens/SideMenu/SideMenuHero.tsx

@@ -1,5 +1,10 @@
 import { Circle } from '@Components/Circle';
-import { useIsLocked, useOutOfSync, useSignedIn } from '@Lib/snjs_helper_hooks';
+import {
+  useIsLocked,
+  useLastSyncDate,
+  useOutOfSync,
+  useSignedIn,
+} from '@Lib/snjs_helper_hooks';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { ContentType } from '@standardnotes/snjs';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
@@ -30,6 +35,7 @@ export const SideMenuHero: React.FC<Props> = props => {
   const [signedIn] = useSignedIn();
   const [isLocked] = useIsLocked();
   const [isOutOfSync] = useOutOfSync();
+  const lastSyncDate = useLastSyncDate();
   const [itemsLength, setItemsLength] = useState(0);
 
   useEffect(() => {
@@ -72,9 +78,10 @@ export const SideMenuHero: React.FC<Props> = props => {
     <Cell>
       <Touchable testID={props.testID} onPress={props.onPress}>
         <Title>{textData.title}</Title>
-      </Touchable>
-      <Touchable onPress={props.onPress}>
         <SubTitle>{textData.text}</SubTitle>
+        {lastSyncDate && (
+          <SubTitle>Last refreshed {lastSyncDate.toLocaleString()}</SubTitle>
+        )}
       </Touchable>
       {isOutOfSync && (
         <OutOfSyncContainer onPress={props.onOutOfSyncPress}>