From 0cf76e1f11ecbe37aa242721ac89acf2abbc2bf5 Mon Sep 17 00:00:00 2001 From: Ammar Ahmed <40239442+ammarahm-ed@users.noreply.github.com> Date: Thu, 21 Sep 2023 13:30:10 +0500 Subject: [PATCH] mobile: fix sorting notes in topics (#3348) * mobile: fix sorting notes in topics * mobile: fix list is not updated --- .../list-items/headers/section-header.js | 37 +++----------- apps/mobile/app/components/list/index.js | 27 +++++----- apps/mobile/app/hooks/use-group-options.ts | 49 +++++++++++++++++++ apps/mobile/app/screens/home/index.tsx | 2 +- apps/mobile/e2e/tests/notebook.e2e.js | 2 +- apps/mobile/e2e/tests/sort.e2e.js | 21 +++++++- 6 files changed, 95 insertions(+), 43 deletions(-) create mode 100644 apps/mobile/app/hooks/use-group-options.ts diff --git a/apps/mobile/app/components/list-items/headers/section-header.js b/apps/mobile/app/components/list-items/headers/section-header.js index ccf087a9a..c026e3651 100644 --- a/apps/mobile/app/components/list-items/headers/section-header.js +++ b/apps/mobile/app/components/list-items/headers/section-header.js @@ -17,35 +17,25 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import React, { useEffect, useRef, useState } from "react"; -import { TouchableOpacity, useWindowDimensions, View } from "react-native"; import { useThemeColors } from "@notesnook/theme"; -import { useSettingStore } from "../../../stores/use-setting-store"; -import { - eSendEvent, - eSubscribeEvent, - eUnSubscribeEvent, - presentSheet -} from "../../../services/event-manager"; +import React, { useRef } from "react"; +import { TouchableOpacity, View, useWindowDimensions } from "react-native"; +import { eSendEvent, presentSheet } from "../../../services/event-manager"; import SettingsService from "../../../services/settings"; -import { GROUP } from "../../../utils/constants"; +import { useSettingStore } from "../../../stores/use-setting-store"; import { ColorValues } from "../../../utils/colors"; -import { db } from "../../../common/database"; +import { GROUP } from "../../../utils/constants"; import { eOpenJumpToDialog } from "../../../utils/events"; import { SIZE } from "../../../utils/size"; -import { IconButton } from "../../ui/icon-button"; -import { Button } from "../../ui/button"; import Sort from "../../sheets/sort"; +import { Button } from "../../ui/button"; +import { IconButton } from "../../ui/icon-button"; import Heading from "../../ui/typography/heading"; -import { useCallback } from "react"; export const SectionHeader = React.memo( - function SectionHeader({ item, index, type, color, screen }) { + function SectionHeader({ item, index, type, color, screen, groupOptions }) { const { colors } = useThemeColors(); const { fontScale } = useWindowDimensions(); - const [groupOptions, setGroupOptions] = useState( - db.settings?.getGroupOptions(type) - ); let groupBy = Object.keys(GROUP).find( (key) => GROUP[key] === groupOptions.groupBy ); @@ -65,17 +55,6 @@ export const SectionHeader = React.memo( ? "Default" : groupBy.slice(0, 1).toUpperCase() + groupBy.slice(1, groupBy.length); - const onUpdate = useCallback(() => { - setGroupOptions({ ...db.settings?.getGroupOptions(type) }); - }, [type]); - - useEffect(() => { - eSubscribeEvent("groupOptionsUpdate", onUpdate); - return () => { - eUnSubscribeEvent("groupOptionsUpdate", onUpdate); - }; - }, [onUpdate]); - return ( ), - [headerProps?.color, headerProps?.heading, screen, type, isSheet, dateBy] + [ + headerProps?.color, + headerProps?.heading, + screen, + isSheet, + dateBy, + groupType, + groupOptions + ] ); const _onRefresh = async () => { @@ -230,7 +235,7 @@ const List = ({ ) : null} diff --git a/apps/mobile/app/hooks/use-group-options.ts b/apps/mobile/app/hooks/use-group-options.ts new file mode 100644 index 000000000..7c87d1220 --- /dev/null +++ b/apps/mobile/app/hooks/use-group-options.ts @@ -0,0 +1,49 @@ +/* +This file is part of the Notesnook project (https://notesnook.com/) + +Copyright (C) 2023 Streetwriters (Private) Limited + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . +*/ +import { useEffect, useState } from "react"; +import { db } from "../common/database"; +import { eSubscribeEvent, eUnSubscribeEvent } from "../services/event-manager"; +import Navigation from "../services/navigation"; + +export function useGroupOptions(type: any) { + const [groupOptions, setGroupOptions] = useState( + db.settings?.getGroupOptions(type) + ); + + useEffect(() => { + const onUpdate = () => { + const options = db.settings?.getGroupOptions(type) as any; + if ( + groupOptions?.groupBy !== options.groupBy || + groupOptions?.sortBy !== options.sortBy || + groupOptions?.sortDirection !== groupOptions?.sortDirection + ) { + setGroupOptions({ ...options }); + Navigation.queueRoutesForUpdate(); + } + }; + + eSubscribeEvent("groupOptionsUpdate", onUpdate); + return () => { + eUnSubscribeEvent("groupOptionsUpdate", onUpdate); + }; + }, [type, groupOptions]); + + return groupOptions; +} diff --git a/apps/mobile/app/screens/home/index.tsx b/apps/mobile/app/screens/home/index.tsx index 095b71f94..d3a813979 100755 --- a/apps/mobile/app/screens/home/index.tsx +++ b/apps/mobile/app/screens/home/index.tsx @@ -71,7 +71,7 @@ export const Home = ({ navigation, route }: NavigationProps<"Notes">) => { . */ import { notesnook } from "../test.ids"; +import { createNotebook } from "./notebook.e2e"; import { tapById, visibleByText, @@ -25,7 +26,8 @@ import { prepare, tapByText, notVisibleByText, - sleep + sleep, + navigate } from "./utils"; async function sortBy(sorting, elementText = "Default") { @@ -104,6 +106,23 @@ describe("Sort & filter", () => { await visibleByText("Month"); }); + it("Sort notes in topic", async () => { + await prepare(); + await navigate("Notebooks"); + await sleep(500); + await createNotebook("Notebook 1", true, true); + await sleep(500); + await device.pressBack(); + await sleep(500); + await tapByText("Topic"); + await createNote("A", "A letter"); + await sleep(500); + await createNote("B", "B letter"); + await sortBy("Abc"); + await sleep(300); + await visibleByText("N"); + }); + it("Compact mode", async () => { await prepare(); await createNote("Note 1", "Note 1");