diff --git a/src/renderer/components/modal/modal-types/playlist/download-playlist-modal/download-playlist-modal-header.component.tsx b/src/renderer/components/modal/modal-types/playlist/download-playlist-modal/download-playlist-modal-header.component.tsx index 54211454..d8e1ee56 100644 --- a/src/renderer/components/modal/modal-types/playlist/download-playlist-modal/download-playlist-modal-header.component.tsx +++ b/src/renderer/components/modal/modal-types/playlist/download-playlist-modal/download-playlist-modal-header.component.tsx @@ -4,6 +4,7 @@ import { BsmDropdownButton } from "renderer/components/shared/bsm-dropdown-butto import { BsmSelect, BsmSelectOption } from "renderer/components/shared/bsm-select.component"; import { cn } from "renderer/helpers/css-class.helpers"; import { useConstant } from "renderer/hooks/use-constant.hook"; +import { useOnUpdate } from "renderer/hooks/use-on-update.hook"; import { PlaylistSearchParams, BsvSearchOrder } from "shared/models/maps/beat-saver.model"; type Props = { @@ -20,23 +21,34 @@ export function DownloadPlaylistModalHeader({ className, value, onSubmit }: Prop const [order, setOrder] = useState(value?.sortOrder || BsvSearchOrder.Latest); const sortOptions: BsmSelectOption[] = useConstant(() => { - return Object.values(BsvSearchOrder).map(sort => ({ text: `beat-saver.maps-sorts.${sort}`, value: sort })); + return Object.values(BsvSearchOrder).reduce((acc, value) => { + if(value === BsvSearchOrder.Rating){ return acc; } + acc.push({ text: `beat-saver.maps-sorts.${value}`, value: value }); + return acc; + }, []); }); - const submit = (e: React.FormEvent) => { - e.preventDefault(); + useOnUpdate(() => { + submit(); + }, [order]); + + const handleOrderChange = (value: BsvSearchOrder) => { + setOrder(() => value); + }; + + const submit = () => { if(!onSubmit){ return; } onSubmit({ q: query, sortOrder: order }); }; return ( -
+ {e.preventDefault(); submit();}}> Filter Panel setQuery(e.target.value)} /> - + ) } diff --git a/src/renderer/components/modal/modal-types/playlist/download-playlist-modal/download-playlist-modal.component.tsx b/src/renderer/components/modal/modal-types/playlist/download-playlist-modal/download-playlist-modal.component.tsx index 284cd323..6ff1bcd1 100644 --- a/src/renderer/components/modal/modal-types/playlist/download-playlist-modal/download-playlist-modal.component.tsx +++ b/src/renderer/components/modal/modal-types/playlist/download-playlist-modal/download-playlist-modal.component.tsx @@ -15,6 +15,8 @@ import { PlaylistItemComponentPropsMapper } from "shared/mappers/playlist/playli import { motion } from "framer-motion" import { PlaylistDownloaderService } from "renderer/services/playlist-downloader.service" +// TODO : Translate + export const DownloadPlaylistModal: ModalComponent, ownedMaps$: Observable}> = ( { resolver, options: { data: { version, ownedPlaylists$, ownedMaps$ }} } ) => { @@ -41,7 +43,8 @@ export const DownloadPlaylistModal: ModalComponent) => { - setSearchParams({ ...value, page: 0}); + setPlaylists(() => []); + setSearchParams(() => ({ ...value, page: 0})); }; const loadMorePlaylists = () => { @@ -51,16 +54,26 @@ export const DownloadPlaylistModal: ModalComponent -
    - {playlists.map(playlist => ( - lastValueFrom(playlistDownloader.downloadPlaylist({ downloadSource: playlist.downloadURL, ignoreSongsHashs: ownedMaps.map(map => map.hash), version }))} - /> - ))} - -
+ {(() => { + if(loading && playlists.length === 0){ + return
Loading...
+ } + else if(playlists.length === 0){ + return
No playlists found
+ } + return ( +
    + {playlists.map(playlist => ( + lastValueFrom(playlistDownloader.downloadPlaylist({ downloadSource: playlist.downloadURL, ignoreSongsHashs: ownedMaps.map(map => map.hash), version }))} + /> + ))} + +
+ ) + })()} ) }