Merge pull request #600 from silentrald/bugfix/remember-playlist-sort

[bugfix] remember option for map and playlist sorting

src/renderer/components/modal/modal-types/download-maps-modal.component.tsx

@@ -22,9 +22,11 @@ import { useConstant } from "renderer/hooks/use-constant.hook";
 import { getLocalTimeZone, parseAbsolute, toCalendarDateTime } from "@internationalized/date";
 import { VirtualScroll } from "renderer/components/shared/virtual-scroll/virtual-scroll.component";
 import { MapItemComponentPropsMapper } from "shared/mappers/map/map-item-component-props.mapper";
+import { ConfigurationService } from "renderer/services/configuration.service";
 
 export const DownloadMapsModal: ModalComponent<void, { version: BSVersion; ownedMaps: BsmLocalMap[] }> = ({ options: {data : { ownedMaps, version }} }) => {
     const beatSaver = useService(BeatSaverService);
+    const config = useService(ConfigurationService);
     const mapsDownloader = useService(MapsDownloaderService);
     const progressBar = useService(ProgressBarService);
     const os = useService(OsDiagnosticService);
@@ -37,12 +39,11 @@ export const DownloadMapsModal: ModalComponent<void, { version: BSVersion; owned
     const [query, setQuery] = useState("");
     const [maps, setMaps] = useState<BsvMapDetail[]>([]);
     const [downloadbleMaps, setDownloadbleMaps] = useState<DownloadableMap[]>([]);
-    const [sortOrder, setSortOrder] = useState<BsvSearchOrder>(BsvSearchOrder.Latest);
     const [ownedMapHashs, setOwnedMapHashs] = useState<string[]>(ownedMaps?.map(map => map.hash) ?? []);
     const [loading, setLoading] = useState(false);
     const isOnline = useObservable(() => os.isOnline$);
     const [searchParams, setSearchParams] = useState<SearchParams>({
-        sortOrder,
+        sortOrder: config.get("map-sort-order"),
         filter,
         page: 0,
         q: query,
@@ -170,21 +171,21 @@ export const DownloadMapsModal: ModalComponent<void, { version: BSVersion; owned
     }, []);
 
     const handleSortChange = (newSort: BsvSearchOrder) => {
-        setSortOrder(() => newSort);
+        config.set("map-sort-order", newSort);
         setMaps(() => []);
         setSearchParams(() => ({ ...searchParams, sortOrder: newSort }));
     };
 
     const handleSearch = () => {
-        const searchParams: SearchParams = {
-            sortOrder,
+        const searchParamsLocal: SearchParams = {
+            sortOrder: searchParams.sortOrder,
             filter,
             q: query.trim(),
             page: 0,
         };
 
         setMaps(() => []);
-        setSearchParams(() => searchParams);
+        setSearchParams(() => searchParamsLocal);
     };
 
     const handleLoadMore = () => {
@@ -219,7 +220,7 @@ export const DownloadMapsModal: ModalComponent<void, { version: BSVersion; owned
                         handleSearch();
                     }}
                 />
-                <BsmSelect className="bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-1 pb-0.5 text-center" options={sortOptions} onChange={sort => handleSortChange(sort)} />
+                <BsmSelect className="bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-1 pb-0.5 text-center" options={sortOptions} selected={searchParams.sortOrder} onChange={sort => handleSortChange(sort)} />
             </div>
 
             {(() => {

src/renderer/components/modal/modal-types/playlist/download-playlist-modal/download-playlist-modal.component.tsx

@@ -5,7 +5,7 @@ import { BSVersion } from "shared/bs-version.interface"
 import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface"
 import { LocalBPListsDetails } from "shared/models/playlists/local-playlist.models"
 import { DownloadPlaylistModalHeader } from "./download-playlist-modal-header.component"
-import { BsvPlaylist, BsvSearchOrder, PlaylistSearchParams } from "shared/models/maps/beat-saver.model"
+import { BsvPlaylist, PlaylistSearchParams } from "shared/models/maps/beat-saver.model"
 import { useCallback, useState } from "react"
 import { useOnUpdate } from "renderer/hooks/use-on-update.hook"
 import { useService } from "renderer/hooks/use-service.hook"
@@ -20,6 +20,7 @@ import BeatConflict from "../../../../../../../assets/images/apngs/beat-conflict
 import { cn } from "renderer/helpers/css-class.helpers"
 import { VirtualScroll } from "renderer/components/shared/virtual-scroll/virtual-scroll.component"
 import { useTranslation } from "renderer/hooks/use-translation.hook"
+import { ConfigurationService } from "renderer/services/configuration.service"
 
 export const DownloadPlaylistModal: ModalComponent<void, {version: BSVersion, ownedPlaylists$: Observable<LocalBPListsDetails[]>, ownedMaps$: Observable<BsmLocalMap[]>}> = (
     { options: { data: { version, ownedPlaylists$, ownedMaps$ }} }
@@ -27,8 +28,9 @@ export const DownloadPlaylistModal: ModalComponent<void, {version: BSVersion, ow
 
     const t = useTranslation();
 
-    const modal = useService(ModalService);
     const beatSaver = useService(BeatSaverService);
+    const config = useService(ConfigurationService);
+    const modal = useService(ModalService);
     const playlistDownloader = useService(PlaylistDownloaderService);
 
     const [playlists, setPlaylists] = useState<BsvPlaylist[]>(null);
@@ -41,7 +43,7 @@ export const DownloadPlaylistModal: ModalComponent<void, {version: BSVersion, ow
     const [error, setError] = useState(false);
     const [searchParams, setSearchParams] = useState<PlaylistSearchParams>({
         q: "",
-        sortOrder: BsvSearchOrder.Relevance,
+        sortOrder: config.get("playlist-sort-order"),
         page: 0,
     });
 
@@ -63,6 +65,7 @@ export const DownloadPlaylistModal: ModalComponent<void, {version: BSVersion, ow
 
     const handleNewSearch = (value: Omit<PlaylistSearchParams, "page">) => {
         setPlaylists(() => undefined);
+        config.set("playlist-sort-order", value.sortOrder);
         setSearchParams(() => ({ ...value, page: 0}));
     };
 

src/renderer/config/default-configuration.config.ts

@@ -1,4 +1,24 @@
-export const defaultConfiguration: { [key in DefaultConfigKey]: any } = {
+import { BsvSearchOrder } from "shared/models/maps/beat-saver.model";
+
+// NOTE: To refactor. Rename to LocalStorageConfigKeyValues since these are stored in the
+//   localStorage in the browser, and for readability
+export interface DefaultConfigKeyValues {
+    "first-color": string;
+    "second-color": string;
+    theme: ThemeConfig;
+    language: string;
+    supported_languages: string[];
+    default_mods: string[];
+    "default-shared-folders": string[];
+    "playlist-sort-order": BsvSearchOrder;
+    "map-sort-order": BsvSearchOrder;
+};
+
+export type DefaultConfigKey = keyof DefaultConfigKeyValues;
+
+export const defaultConfiguration: {
+    [key in DefaultConfigKey]: DefaultConfigKeyValues[key]
+} = {
     "first-color": "#3b82ff",
     "second-color": "#ff4444",
     theme: "os",
@@ -10,8 +30,8 @@ export const defaultConfiguration: { [key in DefaultConfigKey]: any } = {
         window.electron.path.join("Beat Saber_Data", "CustomWIPLevels"),
         "DLC"
     ],
+    "playlist-sort-order": BsvSearchOrder.Relevance,
+    "map-sort-order": BsvSearchOrder.Latest,
 };
 
-export type DefaultConfigKey = "first-color" | "second-color" | "theme" | "language" | "supported_languages" | "default_mods" | "default-shared-folders";
-
 export type ThemeConfig = "dark" | "light" | "os";

src/renderer/services/configuration.service.ts

@@ -30,7 +30,7 @@ export class ConfigurationService {
     public get<Type>(key: string | DefaultConfigKey): Type {
         const rawValue = (window.sessionStorage.getItem(key) ?? window.localStorage.getItem(key));
         const tryParse = tryit<Type>(() => JSON.parse(rawValue));
-        
+
         const res = (tryParse.error ? rawValue : tryParse.result) as Type;
 
         if(!res && Object.keys(defaultConfiguration).includes(key)){
@@ -40,7 +40,7 @@ export class ConfigurationService {
         return res;
     }
 
-    public set(key: string, value: unknown, persistant = true) {
+    public set(key: string | DefaultConfigKey, value: unknown, persistant = true) {
 
         if(value != null){
             this.getPropperStorage(persistant).setItem(key, JSON.stringify(value));
@@ -51,7 +51,7 @@ export class ConfigurationService {
         this.emitChange(key);
     }
 
-    public delete(key: string) {
+    public delete(key: string | DefaultConfigKey) {
         window.localStorage.removeItem(key);
         window.sessionStorage.removeItem(key);
         this.emitChange(key);