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");