Add sort option in the header (Issue #110)

src/components/Filters.tsx

@@ -51,9 +51,15 @@ export function useFilterState(): useFilterStateReturn {
 export const FilterHeading = ({
   disclosure,
   indicator,
+  title = "Filters",
+  icon = <IoFilter />,
+  ...props
 }: {
   disclosure: UseDisclosureReturn;
   indicator?: number;
+  title?: string;
+  icon?: React.ReactElement;
+  [key: string]: any;
 }) => (
   <Flex
     p={5}
@@ -64,9 +70,10 @@ export const FilterHeading = ({
     alignItems={"center"}
     justifyContent={"space-between"}
     gap={2}
+    {...props}
   >
     <Heading as={"span"} size={"sm"}>
-      Filters
+      {title}
       <LightMode>
         {indicator ? (
           <Badge bgColor={"blue.500"} color={"white"} ml={3}>
@@ -75,7 +82,7 @@ export const FilterHeading = ({
         ) : null}
       </LightMode>
     </Heading>
-    {disclosure.isOpen ? <IoClose /> : <IoFilter />}
+    {disclosure.isOpen ? <IoClose /> : icon}
   </Flex>
 );
 

src/pages/Home.tsx

@@ -16,8 +16,9 @@ import {
   Switch,
   VStack,
   IconButton,
+  StepSeparator
 } from "@chakra-ui/react";
-import { IoDocumentAttach, IoPause, IoPlay } from "react-icons/io5";
+import { IoDocumentAttach, IoPause, IoPlay, IoSwapVertical } from "react-icons/io5";
 import { useMutation, useQuery } from "react-query";
 import { TorrClient } from "../utils/TorrClient";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -35,6 +36,19 @@ import { useFontSizeContext } from "../components/FontSizeProvider";
 
 import { List, WindowScroller } from "react-virtualized";
 
+type SortKey =
+  | "added_on"
+  | "name"
+  | "size"
+  | "progress"
+  | "dlspeed"
+  | "upspeed";
+type SortDirection = "asc" | "desc";
+interface SortConfig {
+  key: SortKey;
+  direction: SortDirection;
+}
+
 const Home = () => {
   const { mutate: resumeAll } = useMutation("resumeAll", TorrClient.resumeAll);
 
@@ -135,6 +149,7 @@ const Home = () => {
   const isLarge = useIsLargeScreen();
 
   const filterDisclosure = useDisclosure();
+  const sortDisclosure = useDisclosure();
   const [filterSearch, setFilterSearch] = useLocalStorage(
     "home-filter-search",
     ""
@@ -147,6 +162,10 @@ const Home = () => {
     "home-filter-status",
     "Show All"
   );
+  const [sortConfig, setSortConfig] = useLocalStorage<SortConfig>(
+    "home-sort-config",
+    { key: "added_on", direction: "desc" }
+  );
 
   const resetFilters = () => {
     setFilterStatus("Show All");
@@ -172,7 +191,26 @@ const Home = () => {
     }
 
     return Object.entries(torrentsTx)
-      ?.sort((a, b) => b[1]?.added_on - a[1]?.added_on)
+      ?.sort(([, a], [, b]) => {
+        if (!a || !b) return 0;
+        const aVal = a[sortConfig.key as keyof TorrTorrentInfo];
+        const bVal = b[sortConfig.key as keyof TorrTorrentInfo];
+
+        if (aVal === bVal) return 0;
+        if (aVal === undefined || aVal === null)
+          return sortConfig.direction === "asc" ? -1 : 1;
+        if (bVal === undefined || bVal === null)
+          return sortConfig.direction === "asc" ? 1 : -1;
+
+        let compare = 0;
+        if (typeof aVal === "string" && typeof bVal === "string") {
+          compare = aVal.localeCompare(bVal);
+        } else if (typeof aVal === "number" && typeof bVal === "number") {
+          compare = aVal - bVal;
+        }
+
+        return sortConfig.direction === "asc" ? compare : -compare;
+      })
       ?.filter(([hash]) => !removedTorrs.includes(hash))
       ?.filter(([hash, torr]) =>
         filterCategory !== "Show All" ? torr.category === filterCategory : true
@@ -181,7 +219,14 @@ const Home = () => {
         filterStatus !== "Show All" ? torr.state === filterStatus : true
       )
       ?.filter(([hash, torr]) => torr.name.includes(filterSearch));
-  }, [torrentsTx, removedTorrs, filterCategory, filterStatus, filterSearch]);
+  }, [
+    torrentsTx,
+    removedTorrs,
+    filterCategory,
+    filterStatus,
+    filterSearch,
+    sortConfig,
+  ]);
 
   const Categories = useMemo(() => {
     return Object.values(categories || {}).map((c) => ({
@@ -384,10 +429,32 @@ const Home = () => {
           </IosBottomSheet>
 
           <Box bgColor={bgColor} rounded={"lg"} mb={5} mt={isLarge ? 10 : 0}>
-            <FilterHeading
-              indicator={filterIndicator}
-              disclosure={filterDisclosure}
-            />
+            <Flex>
+              <FilterHeading
+                indicator={filterIndicator}
+                disclosure={filterDisclosure}
+                onClick={() => {
+                  if (sortDisclosure.isOpen) {
+                    sortDisclosure.onClose();
+                  }
+                  filterDisclosure.onToggle();
+                }}
+                roundedRight={0}
+              />
+              <div style={{ borderRightWidth: "1px", borderColor: "grayAlpha.800" }}></div>
+              <FilterHeading
+                disclosure={sortDisclosure}
+                title="Sort"
+                icon={<IoSwapVertical />}
+                onClick={() => {
+                  if (filterDisclosure.isOpen) {
+                    filterDisclosure.onClose();
+                  }
+                  sortDisclosure.onToggle();
+                }}
+                roundedLeft={0}
+              />
+            </Flex>
             {filterDisclosure.isOpen && (
               <Flex flexDirection={"column"} gap={5} px={5} pb={5}>
                 <FormControl>
@@ -425,6 +492,44 @@ const Home = () => {
                 </FormControl>
               </Flex>
             )}
+            {sortDisclosure.isOpen && (
+              <Flex flexDirection={"column"} gap={5} px={5} pb={5}>
+                <FormControl>
+                  <FormLabel>Sort by</FormLabel>
+                  <Select
+                    value={sortConfig.key}
+                    onChange={(e) =>
+                      setSortConfig({
+                        ...sortConfig,
+                        key: e.target.value as SortKey,
+                      })
+                    }
+                  >
+                    <option value="added_on">Date Added</option>
+                    <option value="name">Name</option>
+                    <option value="size">Size</option>
+                    <option value="progress">Progress</option>
+                    <option value="dlspeed">Download Speed</option>
+                    <option value="upspeed">Upload Speed</option>
+                  </Select>
+                </FormControl>
+                <FormControl>
+                  <FormLabel>Direction</FormLabel>
+                  <Select
+                    value={sortConfig.direction}
+                    onChange={(e) =>
+                      setSortConfig({
+                        ...sortConfig,
+                        direction: e.target.value as SortDirection,
+                      })
+                    }
+                  >
+                    <option value="desc">Descending</option>
+                    <option value="asc">Ascending</option>
+                  </Select>
+                </FormControl>
+              </Flex>
+            )}
           </Box>
 
           <Flex flexDirection={"column"} gap={5}>
@@ -501,4 +606,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;