filter clear

script/demo_list.js

@@ -13,17 +13,29 @@ ready(() => {
     render(() => <FilterBar maps={maps} api={api} onChange={onFilter.bind(null, api, demoListBody)}/>, filterBar);
 });
 
+let lastFilter = {
+    mode: "",
+    map: "",
+    players: []
+};
+
+const filterEq = (a, b) => {
+    return (a.mode || "") === (b.mode || "")
+        && (a.map || "") === (b.map || "")
+        && a.players.length === b.players.length && b.players.every(player => a.players.includes(player))
+}
+
 const onFilter = async (api, demoListBody, filter) => {
-    if (!(filter.mode || filter.map || filter.players.length)) {
+    if (filterEq(lastFilter, filter)) {
         return;
     }
+    lastFilter = filter;
 
     let queryParams = new URLSearchParams({
         players: filter.players.map(player => player.id).join(','),
-        mode: filter.mode.toLowerCase(),
-        map: filter.map,
+        mode: (filter.mode || "").toLowerCase(),
+        map: filter.map || "",
     });
-    console.log(queryParams);
     const response = await fetch("/fragments/demo-list?" + queryParams);
     document.querySelector('.demolist tbody').innerHTML = await response.text();
 }

script/filterbar.tsx

@@ -16,6 +16,8 @@ export const FilterBar = ({maps, api, onChange}: FilterBarProps) => {
     const playerOptions = createAsyncOptions(search => api.searchPlayer(search));
     const playerFormat = player => player.name;
 
+    const [initialMode, setInitialMode] = createSignal("", {equals: false});
+    const [initialMap, setInitialMap] = createSignal("", {equals: false});
 
     const [filterSet, setFilterSet] = createSignal({
         mode: "",
@@ -28,18 +30,40 @@ export const FilterBar = ({maps, api, onChange}: FilterBarProps) => {
         <Select class="mode" onChange={mode => setFilterSet({
             ...filterSet(),
             mode
-        })} placeholder="All Types" {...modes} />
+        })} initialValue={initialMode()} placeholder="All Types" {...modes} />
+        <Reset reset={() => {
+            setInitialMode("");
+            onChange({
+                ...filterSet(),
+                mode: "",
+            });
+        }}/>
         <Select class="maps" onChange={map => setFilterSet({
             ...filterSet(),
             map
-        })}  placeholder="All Maps" {...mapOptions} />
+        })} initialValue={initialMap()} placeholder="All Maps" {...mapOptions} />
+        <Reset reset={() => {
+            setInitialMap("");
+            console.log({
+                ...filterSet(),
+                map: "",
+            });
+            onChange({
+                ...filterSet(),
+                map: "",
+            });
+        }}/>
         <Select class="players" onChange={players => setFilterSet({
             ...filterSet(),
             players
-        })}  multiple placeholder="All Players" format={playerFormat} {...playerOptions} />
+        })} multiple placeholder="All Players" format={playerFormat} {...playerOptions} />
     </div>;
 }
 
+export const Reset = ({reset}) => {
+    return <button onMouseDown={reset} class="reset">X</button>;
+}
+
 export interface FilterSet {
     mode: string,
     map: string,