From 02bdeeb8ce953775f9fd92e7fe0ac2ec76a95cb7 Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Tue, 20 Apr 2021 17:44:12 +0200
Subject: [PATCH] feat: show last sync date in side menu

---
 src/lib/snjs_helper_hooks.ts          | 32 +++++++++++++++++----------
 src/screens/SideMenu/SideMenuHero.tsx | 13 ++++++++---
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/lib/snjs_helper_hooks.ts b/src/lib/snjs_helper_hooks.ts
index 032c379e..6441856d 100644
--- a/src/lib/snjs_helper_hooks.ts
+++ b/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);
diff --git a/src/screens/SideMenu/SideMenuHero.tsx b/src/screens/SideMenu/SideMenuHero.tsx
index f6367707..a2aba7aa 100644
--- a/src/screens/SideMenu/SideMenuHero.tsx
+++ b/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}>