Merge pull request #9232 from streetwriters/mobile/fix-shortcuts-update

Fix shortcuts do not update in side menu

apps/mobile/app/components/list/reorderable-list.tsx

@@ -131,7 +131,7 @@ function ReorderableList<T extends { id: string }>({
     ]
   );
 
-  function getOrderedItems() {
+  const getOrderedItems = React.useCallback(() => {
     if (!customizableSidebarFeature?.isAllowed) return data;
     const items: T[] = [];
     itemOrderState.forEach((id) => {
@@ -142,7 +142,7 @@ function ReorderableList<T extends { id: string }>({
 
     items.push(...data.filter((i) => !itemOrderState.includes(i.id)));
     return items;
-  }
+  }, [data, customizableSidebarFeature?.isAllowed]);
 
   return (
     <View style={styles.container}>

apps/mobile/app/components/side-menu/color-section.tsx

@@ -30,6 +30,7 @@ import ReorderableList from "../list/reorderable-list";
 import { Properties } from "../properties";
 import { useSideBarDraggingStore } from "./dragging-store";
 import { MenuItem } from "./menu-item";
+import { Default_Drag_Action } from "../../hooks/use-actions";
 
 export const ColorSection = React.memo(
   function ColorSection() {
@@ -59,7 +60,7 @@ export const ColorSection = React.memo(
 
     const onLongPress = React.useCallback((item: SideMenuItem) => {
       if (useSideBarDraggingStore.getState().dragging) return;
-      Properties.present(item.data as Color);
+      Properties.present(item.data as Color, false, [Default_Drag_Action]);
     }, []);
 
     const renderIcon = React.useCallback((item: SideMenuItem, size: number) => {

apps/mobile/app/components/side-menu/menu-item.tsx

@@ -37,7 +37,7 @@ import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 import { useSideBarDraggingStore } from "./dragging-store";
 
-function _MenuItem({
+export function MenuItem({
   item,
   index,
   testID,
@@ -179,12 +179,3 @@ function _MenuItem({
     </Pressable>
   );
 }
-
-export const MenuItem = React.memo(_MenuItem, (prev, next) => {
-  if (
-    prev.item.id !== next.item.id &&
-    prev.item.data?.dateModified !== next.item.data?.dateModified
-  )
-    return false;
-  return true;
-});

apps/mobile/app/components/side-menu/pinned-section.tsx

@@ -31,6 +31,9 @@ import ReorderableList from "../list/reorderable-list";
 import { MenuItem } from "./menu-item";
 import { useThemeColors } from "@notesnook/theme";
 import { DefaultAppStyles } from "../../utils/styles";
+import { useSideBarDraggingStore } from "./dragging-store";
+import { Properties } from "../properties";
+import { Default_Drag_Action } from "../../hooks/use-actions";
 
 export const PinnedSection = React.memo(
   function PinnedSection() {
@@ -57,6 +60,11 @@ export const PinnedSection = React.memo(
       });
     }, []);
 
+    const onLongPress = React.useCallback((item: SideMenuItem) => {
+      if (useSideBarDraggingStore.getState().dragging) return;
+      Properties.present(item.data as Notebook, false, [Default_Drag_Action]);
+    }, []);
+
     const menuItems = useMemo(
       () =>
         menuPins.map((item) => ({
@@ -65,7 +73,8 @@ export const PinnedSection = React.memo(
           icon: item.type === "notebook" ? "notebook-outline" : "pound",
           dataType: item.type,
           data: item,
-          onPress: onPress
+          onPress: onPress,
+          onLongPress: onLongPress
         })) as SideMenuItem[],
       [menuPins, onPress]
     );
@@ -98,6 +107,7 @@ export const PinnedSection = React.memo(
             flexGrow: 1,
             width: "100%"
           }}
+          disableDefaultDrag
           contentContainerStyle={{
             flexGrow: 1
           }}

apps/mobile/app/hooks/use-actions.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 /* eslint-disable no-inner-declarations */
-import { useAreFeaturesAvailable } from "@notesnook/common";
+import { isFeatureAvailable, useAreFeaturesAvailable } from "@notesnook/common";
 import {
   Color,
   createInternalLink,
@@ -67,7 +67,7 @@ import { useSelectionStore } from "../stores/use-selection-store";
 import { useSettingStore } from "../stores/use-setting-store";
 import { useTagStore } from "../stores/use-tag-store";
 import { useUserStore } from "../stores/use-user-store";
-import { eUpdateNoteInEditor } from "../utils/events";
+import { eCloseSheet, eUpdateNoteInEditor } from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { sleep } from "../utils/time";
@@ -136,6 +136,31 @@ export type Action = {
   locked?: boolean;
 };
 
+export const Default_Drag_Action: Action = {
+  id: "reorder",
+  title: strings.reorder(),
+  icon: "sort-ascending",
+  onPress: async () => {
+    const feature = await isFeatureAvailable("customizableSidebar");
+    if (feature && !feature.isAllowed) {
+      ToastManager.show({
+        message: feature.error,
+        type: "info",
+        context: "local",
+        actionText: strings.upgrade(),
+        func: () => {
+          PaywallSheet.present(feature);
+        }
+      });
+      return;
+    }
+    useSideBarDraggingStore.setState({
+      dragging: true
+    });
+    eSendEvent(eCloseSheet);
+  }
+};
+
 function isNotePinnedInNotifications(item: Item) {
   const pinned = Notifications.getPinnedNotes();
   if (!pinned || pinned.length === 0) {
@@ -442,31 +467,6 @@ export const useActions = ({
       icon: "square-edit-outline",
       onPress: renameColor
     });
-
-    actions.push({
-      id: "reorder",
-      title: strings.reorder(),
-      icon: "sort-ascending",
-      onPress: async () => {
-        if (features && !features.customizableSidebar.isAllowed) {
-          ToastManager.show({
-            message: features.customizableSidebar.error,
-            type: "info",
-            context: "local",
-            actionText: strings.upgrade(),
-            func: () => {
-              PaywallSheet.present(features.customizableSidebar);
-            }
-          });
-          return;
-        }
-        useSideBarDraggingStore.setState({
-          dragging: true
-        });
-        close();
-      },
-      locked: !features?.customizableSidebar.isAllowed
-    });
   }
 
   if (item.type === "reminder") {
@@ -952,7 +952,7 @@ export const useActions = ({
             copyNote: true,
             novault: true,
             locked: true,
-            item: item,
+            item: item as Note,
             title: strings.copyNote()
           });
         } else {