fix state issues

apps/mobile/src/components/sidemenu/colorsection.js

@@ -13,7 +13,8 @@ import { PressableButton } from '../ui/pressable';
 import Heading from '../ui/typography/heading';
 import Paragraph from '../ui/typography/paragraph';
 
-export const ColorSection = () => {
+export const ColorSection = React.memo(
+  () => {
     const colorNotes = useMenuStore(state => state.colorNotes);
     const loading = useNoteStore(state => state.loading);
     const setColorNotes = useMenuStore(state => state.setColorNotes);
@@ -28,7 +29,9 @@ export const ColorSection = () => {
       let alias = db.colors.alias(item.id);
       return <ColorItem key={item.id} alias={alias} item={item} index={index} />;
     });
-};
+  },
+  () => true
+);
 
 const ColorItem = React.memo(
   ({ item, index, alias }) => {

apps/mobile/src/components/sidemenu/index.js

@@ -20,7 +20,8 @@ export const SideMenu = React.memo(
     const colors = useThemeStore(state => state.colors);
     const deviceMode = useSettingStore(state => state.deviceMode);
     const insets = useSafeAreaInsets();
-    const user = useUserStore(state => state.user);
+    const subscriptionType = useUserStore(state => state.user?.subscription?.type);
+    console.log(subscriptionType);
     const noTextMode = false;
 
     const BottomItemsList = [
@@ -98,9 +99,8 @@ export const SideMenu = React.memo(
               paddingHorizontal: 12
             }}
           >
-            {!user ||
-            user?.subscription?.type === SUBSCRIPTION_STATUS.TRIAL ||
-            user?.subscription?.type === SUBSCRIPTION_STATUS.BASIC ? (
+            {subscriptionType === SUBSCRIPTION_STATUS.TRIAL ||
+            subscriptionType === SUBSCRIPTION_STATUS.BASIC ? (
               <MenuItem testID={pro.name} key={pro.name} item={pro} index={0} ignore={true} />
             ) : null}
 

apps/mobile/src/components/sidemenu/pinnedsection.js

@@ -17,7 +17,8 @@ import SheetWrapper from '../ui/sheet';
 import Heading from '../ui/typography/heading';
 import Paragraph from '../ui/typography/paragraph';
 
-export const TagsSection = () => {
+export const TagsSection = React.memo(
+  () => {
     const menuPins = useMenuStore(state => state.menuPins);
     const loading = useNoteStore(state => state.loading);
     const setMenuPins = useMenuStore(state => state.setMenuPins);
@@ -66,9 +67,8 @@ export const TagsSection = () => {
       }
       Navigation.closeDrawer();
     };
-
     const renderItem = ({ item, index }) => {
-    let alias = item.type === 'tag' ? db.tags.alias(item.title) : item.title;
+      let alias = item ? (item.type === 'tag' ? db.tags.alias(item.title) : item.title) : null;
       return <PinItem item={item} index={index} alias={alias} onPress={onPress} />;
     };
 
@@ -98,13 +98,15 @@ export const TagsSection = () => {
         />
       </View>
     );
-};
+  },
+  () => true
+);
 
 export const PinItem = React.memo(
   ({ item, index, onPress, placeholder, alias }) => {
     const colors = useThemeStore(state => state.colors);
     const setMenuPins = useMenuStore(state => state.setMenuPins);
-    alias = item.type === 'tag' ? db.tags.alias(item.title) : item.title;
+    alias = !item ? '' : item.type === 'tag' ? db.tags.alias(item.title) : item.title;
     const [visible, setVisible] = useState(false);
     const [headerTextState, setHeaderTextState] = useState(null);
     const color = headerTextState?.id === item.id ? colors.accent : colors.pri;
@@ -238,6 +240,7 @@ export const PinItem = React.memo(
     );
   },
   (prev, next) => {
+    if (!next.item) return false;
     if (prev.alias !== next.alias) return false;
     if (prev.item?.dateModified !== next.item?.dateModified) return false;
     if (prev.item?.id !== next.item?.id) return false;

apps/mobile/src/utils/hooks/useActions.js

@@ -299,7 +299,6 @@ export const useActions = ({ close = () => {}, item }) => {
     try {
       if (isPinnedToMenu) {
         await db.settings.unpin(item.id);
-        return;
       } else {
         if (item.type === 'topic') {
           await db.settings.pin(item.type, {

apps/mobile/src/utils/hooks/useAppEvents.js

@@ -165,6 +165,7 @@ export const useAppEvents = () => {
   };
 
   const onSyncComplete = async () => {
+    console.log('sync complete');
     initialize();
     setLastSynced(await db.lastSynced());
     if (getNote()) {
@@ -219,6 +220,7 @@ export const useAppEvents = () => {
   };
 
   const onRequestPartialSync = async (full, force) => {
+    console.log('auto sync request', full, force);
     try {
       if (full || force) {
         Sync.run('global', force, full);