fix pinned item highlighting & navigation

apps/mobile/src/components/Menu/TagsSection.js

@@ -1,50 +1,76 @@
 import React, {useEffect, useState} from 'react';
 import {FlatList, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
+import {DDS} from '../../services/DeviceDetection';
 import {eSendEvent} from '../../services/EventManager';
 import NavigationService from '../../services/Navigation';
+import {getElevation} from '../../utils';
 import {db} from '../../utils/DB';
 import {refreshNotesPage} from '../../utils/Events';
+import {rootNavigatorRef} from '../../utils/Refs';
 import {ph, pv, SIZE} from '../../utils/SizeUtils';
-import {NotebookItem} from '../NotebookItem';
+import BaseDialog from '../Dialog/base-dialog';
+import DialogButtons from '../Dialog/dialog-buttons';
+import DialogHeader from '../Dialog/dialog-header';
 import {PressableButton} from '../PressableButton';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogHeader from '../Dialog/dialog-header';
-import DialogButtons from '../Dialog/dialog-buttons';
-import {getElevation} from '../../utils';
-import {DDS} from '../../services/DeviceDetection';
 
 export const TagsSection = () => {
   const [state, dispatch] = useTracked();
-  const {colors, menuPins} = state;
+  const {colors, menuPins, currentScreen} = state;
 
   useEffect(() => {
     dispatch({type: Actions.MENU_PINS});
   }, []);
 
   const onPress = (item) => {
-    let params = {
-      title: item.title,
-      tag: item,
-      type: 'tag',
-      menu: true,
-    };
-    dispatch({
-      type: Actions.HEADER_VERTICAL_MENU,
-      state: false,
-    });
+    let params;
+
     dispatch({
       type: Actions.HEADER_TEXT_STATE,
       state: {
         heading: item.title,
+        id: item.id,
       },
     });
-    NavigationService.navigate('NotesPage', params);
-    eSendEvent(refreshNotesPage, params);
+    if (item.type === 'notebook') {
+      params = {
+        notebook: item,
+        title: item.title,
+        root: true,
+        menu: true,
+      };
+      if (currentScreen === 'notebook') {
+        rootNavigatorRef.current?.setParams(params);
+      } else {
+        NavigationService.navigate('Notebook', {
+          notebook: item,
+          title: item.title,
+          root: true,
+        });
+      }
+    } else if (item.type === 'tag') {
+      params = params = {
+        title: item.title,
+        tag: item,
+        type: 'tag',
+        menu: true,
+      };
+
+      NavigationService.navigate('NotesPage', params);
+
+      eSendEvent(refreshNotesPage, params);
+    } else {
+      params = {...item, menu: true};
+
+      NavigationService.navigate('NotesPage', params);
+
+      eSendEvent(refreshNotesPage, params);
+    }
+
     NavigationService.closeDrawer();
   };
 
@@ -82,7 +108,7 @@ export const TagsSection = () => {
             style={{
               paddingHorizontal: 8,
               textAlignVertical: 'center',
-              height:35
+              height: 35,
             }}
             size={SIZE.sm}>
             Your Pins{'\n'}
@@ -104,7 +130,7 @@ export const TagsSection = () => {
 
 const PinItem = ({item, index, onPress}) => {
   const [state, dispatch] = useTracked();
-  const {colors, currentScreen} = state;
+  const {colors, headerTextState} = state;
   const [visible, setVisible] = useState(false);
 
   return (
@@ -135,11 +161,7 @@ const PinItem = ({item, index, onPress}) => {
         </BaseDialog>
       )}
       <PressableButton
-        color={
-          currentScreen === item.title.toLowerCase()
-            ? colors.shade
-            : 'transparent'
-        }
+        color={headerTextState.id === item.id ? colors.shade : 'transparent'}
         selectedColor={colors.accent}
         alpha={!colors.night ? -0.02 : 0.02}
         opacity={0.12}

apps/mobile/src/views/Home/index.js

@@ -5,12 +5,13 @@ import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
 import {eSendEvent} from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
 import {scrollRef} from '../../utils';
 import {eOnLoadNote, eScrollEvent} from '../../utils/Events';
-import {tabBarRef} from '../../utils/Refs';
+import {rootNavigatorRef, tabBarRef} from '../../utils/Refs';
 
-export const Home = ({navigation}) => {
+export const Home = ({route,navigation}) => {
   const [state, dispatch] = useTracked();
   const {notes, loading} = state;
 
@@ -56,10 +57,11 @@ export const Home = ({navigation}) => {
   }, []);
 
   useEffect(() => {
+    console.log('rerender')
     if (navigation.isFocused()) {
       updateSearch();
     }
-  }, [notes]);
+  }, [notes,route.params]);
 
   const updateSearch = () => {
     SearchService.update({
@@ -70,6 +72,7 @@ export const Home = ({navigation}) => {
   };
 
   const _onPressBottomButton = (event) => {
+  
     if (!DDS.isLargeTablet()) {
       tabBarRef.current?.goToPage(1);
     } else {

apps/mobile/src/views/Notebook/index.js

@@ -1,34 +1,30 @@
-import React, { useEffect, useState } from 'react';
-import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
-import { AddTopicEvent } from '../../components/DialogManager/recievers';
+import React, {useEffect, useState} from 'react';
+import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
+import {AddTopicEvent} from '../../components/DialogManager/recievers';
 import SimpleList from '../../components/SimpleList';
-import { useTracked } from '../../provider';
-import { Actions } from '../../provider/Actions';
+import {useTracked} from '../../provider';
+import {Actions} from '../../provider/Actions';
 import {
   eSendEvent,
   eSubscribeEvent,
-  eUnSubscribeEvent
+  eUnSubscribeEvent,
 } from '../../services/EventManager';
 import SearchService from '../../services/SearchService';
-import { db } from "../../utils/DB";
-import { eOnNewTopicAdded, eScrollEvent } from '../../utils/Events';
+import {db} from '../../utils/DB';
+import {eOnNewTopicAdded, eScrollEvent} from '../../utils/Events';
 
 export const Notebook = ({route, navigation}) => {
   const [, dispatch] = useTracked();
-  const [topics, setTopics] = useState([]);
+  const [topics, setTopics] = useState(route.params.notebook.topics);
   let params = route.params;
 
   const onLoad = () => {
-    let allTopics;
-    allTopics = db.notebooks.notebook(route.params.notebook.id).data.topics;
-    setTopics(allTopics);
+    setTopics(db.notebooks.notebook(route.params.notebook.id).data.topics);
   };
 
   useEffect(() => {
-    eSendEvent(eScrollEvent, 0);
-    params = route.params;
-    setTopics([...params.notebook.topics]);
-  }, []);
+    onFocus();
+  }, [route.params]);
 
   useEffect(() => {
     eSubscribeEvent(eOnNewTopicAdded, onLoad);
@@ -44,6 +40,7 @@ export const Notebook = ({route, navigation}) => {
       type: Actions.HEADER_TEXT_STATE,
       state: {
         heading: params.title,
+        id:params.notebook.id
       },
     });
 
@@ -51,7 +48,7 @@ export const Notebook = ({route, navigation}) => {
     dispatch({
       type: Actions.CONTAINER_BOTTOM_BUTTON,
       state: {
-        onPress:_onPressBottomButton
+        onPress: _onPressBottomButton,
       },
     });
 
@@ -59,20 +56,16 @@ export const Notebook = ({route, navigation}) => {
       type: Actions.CURRENT_SCREEN,
       screen: 'notebook',
     });
-  }
+  };
 
   useEffect(() => {
     navigation.addListener('focus', onFocus);
+
     return () => {
       eSendEvent(eScrollEvent, {name: params.title, type: 'back'});
       navigation.removeListener('focus', onFocus);
     };
-  },[]);
-
-
-
-
-
+  }, []);
   useEffect(() => {
     if (navigation.isFocused()) {
       updateSearch();
@@ -87,12 +80,9 @@ export const Notebook = ({route, navigation}) => {
     });
   };
 
-
-
   const _onPressBottomButton = () => {
     let n = route.params.notebook;
     AddTopicEvent(n);
-  
   };
 
   return (
@@ -108,7 +98,7 @@ export const Notebook = ({route, navigation}) => {
           heading: route.params.notebook.title,
           paragraph: 'You have not added any topics yet.',
           button: 'Add a Topic',
-          action:_onPressBottomButton
+          action: _onPressBottomButton,
         }}
       />
 
@@ -160,4 +150,4 @@ const RenderItem = ({item, index}) => {
     </SelectionWrapper>
   );
 };
- */
+ */

apps/mobile/src/views/Notes/index.js

@@ -62,11 +62,11 @@ export const Notes = ({route, navigation}) => {
     dispatch({
       type: Actions.CONTAINER_BOTTOM_BUTTON,
       state: {
-        onPress:_onPressBottomButton,
-        color:params.type == 'color' ? COLORS_NOTE[params.title] : null
+        onPress: _onPressBottomButton,
+        color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
       },
     });
-    
+
     updateSearch();
     dispatch({
       type: Actions.HEADER_TEXT_STATE,
@@ -75,6 +75,14 @@ export const Notes = ({route, navigation}) => {
           params.type === 'tag'
             ? '#' + params.title
             : params.title.slice(0, 1).toUpperCase() + params.title.slice(1),
+        id:
+          params.type === 'tag'
+            ? params.tag.id
+            : params.type === 'topic'
+            ? params.id
+            : params.type === 'color'
+            ? params.color.title
+            : null,
       },
     });
   };
@@ -114,7 +122,7 @@ export const Notes = ({route, navigation}) => {
       navigation.removeListener('focus', onFocus);
       navigation.removeListener('blur', onBlur);
     };
-  },[]);
+  }, []);
 
   useEffect(() => {
     if (navigation.isFocused()) {