Merge pull request #62 from Zagrios/bugfix/filter-too-complex-to-apply/59

bugfix/filter too complex to apply/59

src/renderer/components/maps-mangement-components/filter-panel.component.tsx

@@ -1,6 +1,6 @@
 import { MapFilter, MapSpecificity, MapStyle, MapTag, MapType } from "shared/models/maps/beat-saver.model"
 import {motion} from "framer-motion"
-import { MutableRefObject} from "react"
+import { MutableRefObject, useEffect, useRef, useState} from "react"
 import { MAP_TYPES } from "renderer/partials/maps/map-tags/map-types"
 import { MAP_STYLES } from "renderer/partials/maps/map-tags/map-styles"
 import { BsmCheckbox } from "../shared/bsm-checkbox.component"
@@ -11,6 +11,7 @@ import { useTranslation } from "renderer/hooks/use-translation.hook"
 import { MAP_SPECIFICITIES } from "renderer/partials/maps/map-general/map-specificity"
 import { MAP_REQUIREMENTS } from "renderer/partials/maps/map-requirements/map-requirements"
 import { MAP_DIFFICULTIES_COLORS } from "renderer/partials/maps/map-difficulties/map-difficulties-colors"
+import { BsmButton } from "../shared/bsm-button.component"
 
 export type Props = {
     className?: string,
@@ -18,12 +19,16 @@ export type Props = {
     playlist?: boolean,
     filter: MapFilter
     onChange?: (filter: MapFilter) => void
+    onApply?: (filter: MapFilter) => void
 }
 
-export function FilterPanel({className, ref, playlist = false, filter, onChange}: Props) {
+export function FilterPanel({className, ref, playlist = false, filter, onChange, onApply}: Props) {
 
     const t = useTranslation();
 
+    const [haveChanged, setHaveChanged] = useState(false);
+    const firstRun = useRef(true);
+
     const MIN_NPS = 0;
     const MAX_NPS = 17;
 
@@ -36,6 +41,15 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange}
     const isTagActivated = (tag: MapTag): boolean => filter?.enabledTags?.has(tag) || filter?.excludedTags?.has(tag);
     const isTagExcluded = (tag: MapTag): boolean => filter?.excludedTags?.has(tag);
 
+    useEffect(() => {
+        if(firstRun.current){
+            firstRun.current = false;
+            return; 
+        }
+        setHaveChanged(() => true);
+    }, [filter])
+    
+
     const renderDurationLabel = (sec: number): JSX.Element => {
 
         const textValue = (() => {
@@ -172,10 +186,14 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange}
                             <span key={tag} onClick={() => handleTagClick(tag)} className={`text-[12.5px] text-black rounded-md px-1 font-bold cursor-pointer ${(!isTagActivated(tag)) && "opacity-40 hover:opacity-90"}`} style={{backgroundColor: isTagExcluded(tag) ? MAP_DIFFICULTIES_COLORS.Expert : MAP_DIFFICULTIES_COLORS.Easy}}>{translateMapStyle(tag)}</span>
                         ))}
                     </div>
-                    
-                    
                 </section>
             </div>
+            {onApply && (
+                <div className="inline float-right relative w-fit h-fit mt-2">
+                    <BsmButton className="inline float-right rounded-md font-bold px-1 py-0.5 text-sm" text="Appliquer" typeColor="primary" withBar={false} onClick={e => {e.preventDefault(); onApply(filter); setHaveChanged(() => false)}}/>
+                    {haveChanged && <div className="glow-on-hover !opacity-100"></div>}
+                </div>
+            )}
         </motion.div>
     ) : (
     <></>

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

@@ -157,7 +157,7 @@ export const DownloadMapsModal: ModalComponent<void, BSVersion> = ({data}) => {
         <form className="text-gray-800 dark:text-gray-200 flex flex-col max-w-[95vw] w-[970px] h-[85vh] gap-3" onSubmit={e => {e.preventDefault(); handleSearch()}}>
             <div className="flex h-9 gap-2 shrink-0">
                 <BsmDropdownButton className="shrink-0 h-full relative z-[1] flex justify-start" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1 !bg-light-main-color-1 dark:!bg-main-color-1" icon="filter" text="pages.version-viewer.maps.search-bar.filters-btn" withBar={false}>
-                    <FilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[450px] h-fit p-2 rounded-md shadow-md shadow-black" filter={filter} onChange={setFilter}/>
+                    <FilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[450px] h-fit p-2 rounded-md shadow-md shadow-black" filter={filter} onChange={setFilter} onApply={handleSearch}/>
                 </BsmDropdownButton>
                 <input className="h-full bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-2 grow pb-0.5" type="text" name="" id="" placeholder={t("pages.version-viewer.maps.search-bar.search-placeholder")} value={query} onChange={e => setQuery(e.target.value)}/>
                 <BsmButton className="shrink-0 rounded-full py-1 px-3 !bg-light-main-color-1 dark:!bg-main-color-1 flex justify-center items-center capitalize" icon="search" text="modals.download-maps.search-btn" withBar={false} onClick={e => {e.preventDefault(); handleSearch()}}/>

src/renderer/hooks/use-behavior-subject.hook.ts

@@ -0,0 +1,10 @@
+import { useState } from "react";
+import { BehaviorSubject } from "rxjs";
+import { useObservable } from "./use-observable.hook";
+
+export function useBehaviorSubject<T>(value: T): [T, BehaviorSubject<T>]{
+    const [subject] = useState(new BehaviorSubject(value));
+    const subjectValue = useObservable(subject);
+    
+    return [subjectValue, subject];
+}