fix: sort action button position and select status

RSSNext · Jan 21, 2025 · 1ec6c87 · 1ec6c87
1 parent 127ccae
commit 1ec6c87
Showing 1 changed file with 44 additions and 51 deletions.
diff --git a/apps/mobile/src/modules/subscription/header-actions.tsx b/apps/mobile/src/modules/subscription/header-actions.tsx
@@ -2,11 +2,7 @@ import { TouchableOpacity } from "react-native"
 import type { ContextMenuAction } from "react-native-context-menu-view"
 
 import { DropdownMenu } from "@/src/components/ui/dropdown/DropdownMenu"
-import { AZSortAscendingLettersCuteReIcon } from "@/src/icons/AZ_sort_ascending_letters_cute_re"
-import { AZSortDescendingLettersCuteReIcon } from "@/src/icons/AZ_sort_descending_letters_cute_re"
-import { Numbers90SortAscendingCuteReIcon } from "@/src/icons/numbers_90_sort_ascending_cute_re"
-import { Numbers90SortDescendingCuteReIcon } from "@/src/icons/numbers_90_sort_descending_cute_re"
-import { accentColor } from "@/src/theme/colors"
+import { ListExpansionCuteReIcon } from "@/src/icons/list_expansion_cute_re"
 
 import {
   setFeedListSortMethod,
@@ -15,65 +11,62 @@ import {
   useFeedListSortOrder,
 } from "./atoms"
 
-const map = {
-  alphabet: {
-    asc: AZSortAscendingLettersCuteReIcon,
-    desc: AZSortDescendingLettersCuteReIcon,
-  },
-  count: {
-    desc: Numbers90SortDescendingCuteReIcon,
-    asc: Numbers90SortAscendingCuteReIcon,
-  },
-}
-
 export const SortActionButton = () => {
   const sortMethod = useFeedListSortMethod()
   const sortOrder = useFeedListSortOrder()
 
-  const orderActions: ContextMenuAction[] = [
-    { title: "Ascending", selected: sortOrder === "asc" },
-    { title: "Descending", selected: sortOrder === "desc" },
+  const alphabetOrderActions: ContextMenuAction[] = [
+    { title: "Ascending", selected: sortMethod === "alphabet" && sortOrder === "asc" },
+    { title: "Descending", selected: sortMethod === "alphabet" && sortOrder === "desc" },
+  ]
+
+  const countOrderActions: ContextMenuAction[] = [
+    { title: "Ascending", selected: sortMethod === "count" && sortOrder === "asc" },
+    { title: "Descending", selected: sortMethod === "count" && sortOrder === "desc" },
   ]
 
   const actions: ContextMenuAction[] = [
-    { title: "Alphabet", actions: orderActions, selected: sortMethod === "alphabet" },
-    { title: "Unread Count", actions: orderActions, selected: sortMethod === "count" },
+    {
+      title: "Sort by Alphabet",
+      actions: alphabetOrderActions,
+      selected: sortMethod === "alphabet",
+    },
+    { title: "Sort by Unread Count", actions: countOrderActions, selected: sortMethod === "count" },
   ]
 
-  const Icon = map[sortMethod][sortOrder]
   return (
-    <DropdownMenu
-      options={actions}
-      currentValue={sortMethod}
-      handlePress={(e) => {
-        const [firstArgs, secondary] = e.nativeEvent.indexPath
+    <TouchableOpacity className="size-5 rounded-full">
+      <DropdownMenu
+        options={actions}
+        currentValue={sortMethod}
+        handlePress={(e) => {
+          const [firstArgs, secondary] = e.nativeEvent.indexPath
 
-        switch (firstArgs) {
-          case 0: {
-            setFeedListSortMethod("alphabet")
-            break
-          }
-          case 1: {
-            setFeedListSortMethod("count")
-            break
+          switch (firstArgs) {
+            case 0: {
+              setFeedListSortMethod("alphabet")
+              break
+            }
+            case 1: {
+              setFeedListSortMethod("count")
+              break
+            }
           }
-        }
 
-        switch (secondary) {
-          case 0: {
-            setFeedListSortOrder("asc")
-            break
-          }
-          case 1: {
-            setFeedListSortOrder("desc")
-            break
+          switch (secondary) {
+            case 0: {
+              setFeedListSortOrder("asc")
+              break
+            }
+            case 1: {
+              setFeedListSortOrder("desc")
+              break
+            }
           }
-        }
-      }}
-    >
-      <TouchableOpacity className="size-6 rounded-full">
-        <Icon color={accentColor} />
-      </TouchableOpacity>
-    </DropdownMenu>
+        }}
+      >
+        <ListExpansionCuteReIcon width={20} height={20} />
+      </DropdownMenu>
+    </TouchableOpacity>
   )
 }