From 74ae7ac103670669e209683ce6a9796bb417d7a4 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Fri, 1 Apr 2022 01:02:04 +0500
Subject: [PATCH] feat: show warning if topic notes not synced

---
 apps/mobile/src/components/list/card.js       |  4 +-
 apps/mobile/src/components/list/empty.js      |  2 +
 apps/mobile/src/components/list/index.js      |  4 +-
 .../components/listitems/headers/header.js    | 24 +++++++++++-
 apps/mobile/src/screens/notes/index.js        | 39 ++++++++++++++++---
 5 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/apps/mobile/src/components/list/card.js b/apps/mobile/src/components/list/card.js
index d995ab52e..b06d630ba 100644
--- a/apps/mobile/src/components/list/card.js
+++ b/apps/mobile/src/components/list/card.js
@@ -8,7 +8,7 @@ import { SIZE } from '../../utils/size';
 import { PressableButton } from '../ui/pressable';
 import Paragraph from '../ui/typography/paragraph';
 
-export const Card = ({ color }) => {
+export const Card = ({ color, warning }) => {
   const colors = useThemeStore(state => state.colors);
   color = color ? color : colors.accent;
 
@@ -16,7 +16,7 @@ export const Card = ({ color }) => {
   const messageBoardState = useMessageStore(state => state.message);
   const announcement = useMessageStore(state => state.announcement);
 
-  return !messageBoardState.visible || selectionMode || announcement ? null : (
+  return !messageBoardState.visible || selectionMode || announcement || warning ? null : (
     <PressableButton
       onPress={messageBoardState.onPress}
       type="gray"
diff --git a/apps/mobile/src/components/list/empty.js b/apps/mobile/src/components/list/empty.js
index 052a617dd..21e32e44e 100644
--- a/apps/mobile/src/components/list/empty.js
+++ b/apps/mobile/src/components/list/empty.js
@@ -11,6 +11,7 @@ import Seperator from '../ui/seperator';
 import { Tip } from '../tip';
 import Heading from '../ui/typography/heading';
 import Paragraph from '../ui/typography/paragraph';
+import { notesnook } from '../../../e2e/test.ids';
 
 export const Empty = React.memo(
   ({ loading = true, placeholderData, headerProps, type, screen }) => {
@@ -48,6 +49,7 @@ export const Empty = React.memo(
             />
             {placeholderData.button && (
               <Button
+                testID={notesnook.buttons.add}
                 type="grayAccent"
                 title={placeholderData.button}
                 iconPosition="right"
diff --git a/apps/mobile/src/components/list/index.js b/apps/mobile/src/components/list/index.js
index 7abbfb198..0ed2c11a1 100644
--- a/apps/mobile/src/components/list/index.js
+++ b/apps/mobile/src/components/list/index.js
@@ -58,7 +58,8 @@ const List = ({
     heading: 'Home'
   },
   screen,
-  ListHeader
+  ListHeader,
+  warning
 }) => {
   const colors = useThemeStore(state => state.colors);
   const scrollRef = useRef();
@@ -170,6 +171,7 @@ const List = ({
                 color={headerProps.color}
                 type={type}
                 screen={screen}
+                warning={warning}
               />
             )}
           </>
diff --git a/apps/mobile/src/components/listitems/headers/header.js b/apps/mobile/src/components/listitems/headers/header.js
index b79972304..9e87c0dd4 100644
--- a/apps/mobile/src/components/listitems/headers/header.js
+++ b/apps/mobile/src/components/listitems/headers/header.js
@@ -5,15 +5,35 @@ import { useMessageStore } from '../../../stores/stores';
 import { COLORS_NOTE } from '../../../utils/color-scheme';
 import { Announcement } from '../../announcements/announcement';
 import { Card } from '../../list/card';
+import Paragraph from '../../ui/typography/paragraph';
 
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { SIZE } from '../../../utils/size';
 export const Header = React.memo(
-  ({ type, messageCard = true, color, shouldShow = false, noAnnouncement }) => {
+  ({ type, messageCard = true, color, shouldShow = false, noAnnouncement, warning }) => {
     const colors = useThemeStore(state => state.colors);
     const announcements = useMessageStore(state => state.announcements);
 
     return (
       <>
-        {announcements.length !== 0 && !noAnnouncement ? (
+        {warning ? (
+          <View
+            style={{
+              padding: 12,
+              backgroundColor: colors.errorBg,
+              width: '95%',
+              alignSelf: 'center',
+              borderRadius: 5,
+              flexDirection: 'row',
+              alignItems: 'center'
+            }}
+          >
+            <Icon name="sync-alert" size={SIZE.md} color={colors.red} f />
+            <Paragraph style={{ marginLeft: 5 }} color={colors.red}>
+              {warning.title}
+            </Paragraph>
+          </View>
+        ) : announcements.length !== 0 && !noAnnouncement ? (
           <Announcement color={color || colors.accent} />
         ) : type === 'search' ? null : !shouldShow ? (
           <View
diff --git a/apps/mobile/src/screens/notes/index.js b/apps/mobile/src/screens/notes/index.js
index 1b5934e68..172291e1c 100644
--- a/apps/mobile/src/screens/notes/index.js
+++ b/apps/mobile/src/screens/notes/index.js
@@ -20,19 +20,28 @@ import { tabBarRef } from '../../utils/global-refs';
 import { getNote } from '../editor/Functions';
 
 const getNotes = (params, group = true) => {
-  if (!params) return [];
+  if (!params)
+    return {
+      notes: [],
+      synced: true
+    };
   let notes = [];
+  let isSynced = true;
   if (params.type !== 'topic' && params.get !== 'monographs') {
     notes = db.notes[params.get](params.id);
   } else if (params.get === 'monographs') {
     notes = db.monographs.all;
   } else {
     notes = db.notebooks.notebook(params.notebookId)?.topics.topic(params.id)?.all;
+    isSynced = db.notebooks.notebook(params.notebookId)?.topics.topic(params.id)?.synced();
   }
   if (!notes) {
     notes = [];
   }
-  return group ? groupArray(notes, db.settings?.getGroupOptions('notes')) : notes;
+  return {
+    notes: group ? groupArray(notes, db.settings?.getGroupOptions('notes')) : notes,
+    synced: isSynced
+  };
 };
 
 function getAlias(params) {
@@ -46,15 +55,26 @@ function getAlias(params) {
   return alias || '';
 }
 
+function getIsSynced(params) {
+  if (params.type === 'topic') {
+    let topic = db.notebooks.notebook(params.notebookId)?.topics.topic(params.id);
+    return !topic ? true : topic?.synced();
+  }
+  return true;
+}
+
 export const Notes = ({ route, navigation }) => {
   const colors = useThemeStore(state => state.colors);
   const params = useRef(route?.params);
-  const [notes, setNotes] = useState(getNotes(params.current) || []);
+  const [notes, setNotes] = useState(getNotes(params.current).notes || []);
   const loading = useNoteStore(state => state.loading);
   const alias = getAlias(params);
+  const [warning, setWarning] = useState(!getIsSynced(params.current));
 
   const onLoad = () => {
-    let _notes = getNotes(params.current);
+    let data = getNotes(params.current);
+    let _notes = data.notes;
+    setWarning(!data.synced);
     setNotes(_notes);
     if (!params.current) return;
     if (
@@ -88,7 +108,6 @@ export const Notes = ({ route, navigation }) => {
   const init = data => {
     if (data) params.current = data;
 
-    setActionAfterFirstSave();
     onLoad();
     Navigation.setHeaderState('NotesPage', params, {
       heading:
@@ -101,6 +120,7 @@ export const Notes = ({ route, navigation }) => {
   };
 
   const onFocus = () => {
+    setActionAfterFirstSave();
     InteractionManager.runAfterInteractions(() => {
       Navigation.routeNeedsUpdate('NotesPage', init);
     }, 150);
@@ -146,7 +166,7 @@ export const Notes = ({ route, navigation }) => {
           : alias.slice(0, 1).toUpperCase() + alias.slice(1),
 
       get: () => {
-        return getNotes(params.current, false);
+        return getNotes(params.current, false).notes;
       }
     });
   };
@@ -255,6 +275,13 @@ export const Notes = ({ route, navigation }) => {
         listData={notes || []}
         type="notes"
         screen="NotesPage"
+        warning={
+          warning
+            ? {
+                title: 'Some notes in this topic are not synced'
+              }
+            : null
+        }
         refreshCallback={_refreshCallback}
         headerProps={headerProps}
         loading={loading}