added sort to downloads screen

gauravjot · Oct 30, 2024 · 32e7df0 · 32e7df0
1 parent c8048a5
commit 32e7df0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/app/(tabs)/downloaded.tsx b/app/(tabs)/downloaded.tsx
@@ -11,15 +11,19 @@ import * as WallpaperManager from "@/modules/wallpaper-manager";
 import {fadingPulseAnimation} from "@/lib/animations/fading_pulse";
 import {onChangeListener} from "../../modules/wallpaper-manager/index";
 import LoadingSpinner from "@/components/ui/LoadingSpinner";
+import Select from "@/components/ui/Select";
+import {useSettingsStore} from "@/store/settings";
 
 type WallpaperApplyState = {
   status: "idle" | "applying" | "applied" | "error";
   path: string;
 };
 
 export default function DownloadedWallpapersScreen() {
+  const store = useSettingsStore();
   const [applyState, setApplyState] = React.useState<WallpaperApplyState>({status: "idle", path: ""});
-  const posts = useDownloadedWallpapersStore().files;
+  const flatListRef = React.useRef<FlatList>(null);
+  let posts = useDownloadedWallpapersStore().files;
 
   // Listeners
   React.useEffect(() => {
@@ -43,19 +47,21 @@ export default function DownloadedWallpapersScreen() {
       <View className="h-screen bg-background">
         <View className="absolute top-0 z-10 w-full">
           <TopBar showLoader={false} title="Downloads">
-            <Button
-              variant="ghost"
-              className="border active:bg-white/20 rounded-xl bg-white/10 border-zinc-800"
-              size="md"
-              onPress={() => {}}>
-              <ButtonText>Sort</ButtonText>
-            </Button>
+            <Select
+              options={["Old to New", "New to Old"]}
+              defaultValue="Old to New"
+              onChange={(value: string) => {
+                store.setDownloadedScreenSort(value as any);
+                if (flatListRef.current) flatListRef.current.scrollToOffset({offset: 0});
+              }}
+            />
           </TopBar>
         </View>
         <FlatList
+          ref={flatListRef}
           numColumns={2}
           keyExtractor={item => item.path}
-          data={posts}
+          data={store.downloadedScreenSort === "Old to New" ? posts : posts.slice().reverse()}
           className="z-0 w-full px-3 pt-20"
           columnWrapperClassName="gap-4"
           contentContainerClassName="gap-4"

diff --git a/components/ui/Select.tsx b/components/ui/Select.tsx
@@ -49,7 +49,7 @@ export default function Select({
     <View className="relative">
       <Button
         variant="ghost"
-        className="border active:bg-white/20 rounded-xl bg-white/10 border-zinc-800"
+        className="pl-3 pr-2 border active:bg-white/20 rounded-xl bg-white/10 border-zinc-800"
         size="md"
         onPress={() => setIsOpen(v => !v)}>
         <ButtonText>{selected}</ButtonText>

diff --git a/store/settings.ts b/store/settings.ts
@@ -9,6 +9,8 @@ export interface SettingsStore {
   setDownloadDir: (dir: string | null) => void;
   homeSort: SortOptions;
   setHomeSort: (sort: SortOptions) => void;
+  downloadedScreenSort: "Old to New" | "New to Old";
+  setDownloadedScreenSort: (sort: "Old to New" | "New to Old") => void;
   searchHistory: string[];
   addSearchHistory: (query: string) => void;
   clearSearchHistory: () => void;
@@ -32,6 +34,7 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
     set({
       downloadDir: settings.downloadDir,
       homeSort: settings.homeSort || SortOptions.Hot,
+      downloadedScreenSort: settings.downloadedScreenSort || "Old to New",
       searchHistory: settings.searchHistory || [],
       isDailyWallpaperEnabled: settings.isDailyWallpaperEnabled || false,
       dailyWallpaperMode: settings.dailyWallpaperMode || "Online",
@@ -58,6 +61,14 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
     set(newSettings);
   },
 
+  downloadedScreenSort: "Old to New",
+  setDownloadedScreenSort: async (sort: string) => {
+    const currentSettings = await getSettings();
+    const newSettings = {...currentSettings, downloadedScreenSort: sort};
+    await AsyncStorage.setItem("settings", JSON.stringify(newSettings));
+    set(newSettings);
+  },
+
   searchHistory: [],
   addSearchHistory: async (query: string) => {
     const history = get().searchHistory.filter(q => q !== query);