From 2eda93c0c2bb839db9714092ed475046efa6072c Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <40239442+ammarahm-ed@users.noreply.github.com>
Date: Mon, 2 Oct 2023 17:06:28 +0500
Subject: [PATCH] mobile: fix add to notebook sheet hangs with many notebooks
(#3505)
Signed-off-by: Ammar Ahmed <40239442+ammarahm-ed@users.noreply.github.com>
---
.../components/sheets/add-to/filtered-list.js | 4 +-
.../app/components/sheets/add-to/index.js | 190 +++++++++---------
.../app/components/sheets/add-to/list-item.js | 1 +
apps/mobile/scripts/optimize-fonts.mjs | 2 +
4 files changed, 100 insertions(+), 97 deletions(-)
diff --git a/apps/mobile/app/components/sheets/add-to/filtered-list.js b/apps/mobile/app/components/sheets/add-to/filtered-list.js
index ca7936444..a4be1c1fd 100644
--- a/apps/mobile/app/components/sheets/add-to/filtered-list.js
+++ b/apps/mobile/app/components/sheets/add-to/filtered-list.js
@@ -18,7 +18,7 @@ along with this program. If not, see .
*/
import React, { useCallback, useEffect, useRef, useState } from "react";
-import { FlatList } from "react-native-actions-sheet";
+import { FlashList } from "react-native-actions-sheet";
import { db } from "../../../common/database";
import { ListHeaderInputItem } from "./list-header-item.js";
@@ -54,7 +54,7 @@ export const FilteredList = ({
}, [data, onChangeText]);
return (
- {
: "deselected";
if (itemState[notebook.id] === "selected") {
count++;
- contextValue.select(notebook);
- } else {
- contextValue.deselect(notebook);
}
for (let topic of notebook.topics) {
itemState[topic.id] = state
@@ -176,9 +173,6 @@ const MoveNoteSheet = ({ note, actionSheetRef }) => {
: "deselected";
if (itemState[topic.id] === "selected") {
count++;
- contextValue.select(topic);
- } else {
- contextValue.deselect(topic);
}
}
}
@@ -189,7 +183,7 @@ const MoveNoteSheet = ({ note, actionSheetRef }) => {
}
useItemSelectionStore.getState().setItemState(itemState);
},
- [contextValue, getSelectedNotesCountInItem, selectedItemsList]
+ [getSelectedNotesCountInItem, selectedItemsList]
);
const getItemsForItem = (item) => {
@@ -214,7 +208,7 @@ const MoveNoteSheet = ({ note, actionSheetRef }) => {
}
const updateItemState = useCallback(function (item, state) {
- const itemState = useItemSelectionStore.getState().itemState;
+ const itemState = { ...useItemSelectionStore.getState().itemState };
const mergeState = {
[item.id]: state
};
@@ -370,56 +364,93 @@ const MoveNoteSheet = ({ note, actionSheetRef }) => {
- 0 ? null : (
-
+ 0 ? null : (
+
+
+
+ You do not have any notebooks.
+
+
+ )
+ }
+ estimatedItemSize={50}
+ data={notebooks}
+ hasHeaderSearch={true}
+ renderItem={({ item, index }) => (
+ 0}
+ sheetRef={actionSheetRef}
+ infoText={
+ <>
+ {item.topics.length === 1
+ ? item.topics.length + " topic"
+ : item.topics.length + " topics"}
+
+ }
+ getListItems={getItemsForItem}
+ getSublistItemProps={(topic) => ({
+ hasNotes: getSelectedNotesCountInItem(topic) > 0,
+ style: {
+ marginBottom: 0,
+ height: 40
+ },
+ onPress: (item) => {
+ const itemState =
+ useItemSelectionStore.getState().itemState;
+ const currentState = itemState[item.id];
+ if (currentState !== "selected") {
+ resetItemState("deselected");
+ contextValue.select(item);
+ } else {
+ contextValue.deselect(item);
+ }
+ },
+ key: item.id,
+ type: "transparent"
+ })}
+ icon={(expanded) => ({
+ name: expanded ? "chevron-up" : "chevron-down",
+ color: expanded
+ ? colors.primary.accent
+ : colors.primary.paragraph
+ })}
+ onScrollEnd={() => {
+ actionSheetRef.current?.handleChildScrollEnd();
}}
- >
-
-
- You do not have any notebooks.
-
-
- )
- }
- data={notebooks}
- hasHeaderSearch={true}
- renderItem={({ item, index }) => (
- 0}
- sheetRef={actionSheetRef}
- infoText={
- <>
- {item.topics.length === 1
- ? item.topics.length + " topic"
- : item.topics.length + " topics"}
-
- }
- getListItems={getItemsForItem}
- getSublistItemProps={(topic) => ({
- hasNotes: getSelectedNotesCountInItem(topic) > 0,
- style: {
- marginBottom: 0,
- height: 40
- },
- onPress: (item) => {
+ hasSubList={true}
+ hasHeaderSearch={false}
+ type="grayBg"
+ sublistItemType="topic"
+ onAddItem={(title) => {
+ return onAddTopic(title, item);
+ }}
+ onAddSublistItem={(item) => {
+ openAddTopicDialog(item);
+ }}
+ onPress={(item) => {
const itemState =
useItemSelectionStore.getState().itemState;
const currentState = itemState[item.id];
@@ -429,47 +460,16 @@ const MoveNoteSheet = ({ note, actionSheetRef }) => {
} else {
contextValue.deselect(item);
}
- },
- key: item.id,
- type: "transparent"
- })}
- icon={(expanded) => ({
- name: expanded ? "chevron-up" : "chevron-down",
- color: expanded
- ? colors.primary.accent
- : colors.primary.paragraph
- })}
- onScrollEnd={() => {
- actionSheetRef.current?.handleChildScrollEnd();
- }}
- hasSubList={true}
- hasHeaderSearch={false}
- type="grayBg"
- sublistItemType="topic"
- onAddItem={(title) => {
- return onAddTopic(title, item);
- }}
- onAddSublistItem={(item) => {
- openAddTopicDialog(item);
- }}
- onPress={(item) => {
- const itemState = useItemSelectionStore.getState().itemState;
- const currentState = itemState[item.id];
- if (currentState !== "selected") {
- resetItemState("deselected");
- contextValue.select(item);
- } else {
- contextValue.deselect(item);
- }
- }}
- />
- )}
- itemType="notebook"
- onAddItem={async (title) => {
- return await onAddNotebook(title);
- }}
- ListFooterComponent={}
- />
+ }}
+ />
+ )}
+ itemType="notebook"
+ onAddItem={async (title) => {
+ return await onAddNotebook(title);
+ }}
+ ListFooterComponent={}
+ />
+
diff --git a/apps/mobile/app/components/sheets/add-to/list-item.js b/apps/mobile/app/components/sheets/add-to/list-item.js
index 2744ed112..157c71a05 100644
--- a/apps/mobile/app/components/sheets/add-to/list-item.js
+++ b/apps/mobile/app/components/sheets/add-to/list-item.js
@@ -273,6 +273,7 @@ export const ListItem = ({
alignSelf: "flex-end",
maxHeight: 250
}}
+ estimatedItemSize={40}
itemType={sublistItemType}
hasHeaderSearch={hasHeaderSearch}
renderItem={({ item, index }) => (
diff --git a/apps/mobile/scripts/optimize-fonts.mjs b/apps/mobile/scripts/optimize-fonts.mjs
index b2d81f45c..4f2c35404 100644
--- a/apps/mobile/scripts/optimize-fonts.mjs
+++ b/apps/mobile/scripts/optimize-fonts.mjs
@@ -66,6 +66,8 @@ const EXTRA_ICON_NAMES = [
"chevron-up",
"chevron-down",
"calendar",
+ "minus-circle-outline",
+ "close-circle-outline"
"qrcode",
"text",
"cloud"