filterbar wip

script/api.ts

@@ -0,0 +1,38 @@
+export type SteamId = string;
+export interface SteamUser {
+    id: number;
+    steamid: SteamId;
+    name: string;
+}
+
+export class Api {
+    private base: string;
+
+    constructor(base: string) {
+        this.base = base;
+    }
+
+    getApiUrl(url) {
+        return this.base + url;
+    }
+
+    request(url, params = {}, json = true): Promise<string | any> {
+        let queryParams = new URLSearchParams(params);
+        return fetch(this.getApiUrl(url) + '?' + queryParams)
+            .then((response) => {
+                if (json) {
+                    return response.json()
+                } else {
+                    return response.text();
+                }
+            });
+    }
+
+    async searchPlayer(query: string): Promise<SteamUser[]> {
+        if (query.length < 2) {
+            return [];
+        }
+
+        return await this.request('users/search', {query}) as SteamUser[];
+    }
+}

script/demo_list.js

@@ -1,7 +1,13 @@
-import {render} from "solid-js/web/dist/web.js";
+import {render} from "solid-js/web";
 import {ready} from "./ready";
 import {FilterBar} from "./filterbar"
+import {Api} from "./api";
 
 ready(() => {
-    render(() => <FilterBar name="World" />, document.querySelector('.filter-bar'))
+    const filterBar = document.getElementById('filter-bar');
+    const maps = filterBar.dataset.maps.split(",");
+    const apiBase = filterBar.dataset.apiBase;
+    const api = new Api(apiBase);
+
+    render(() => <FilterBar maps={maps} api={api} />, filterBar)
 });

script/filterbar.js

@@ -1,3 +0,0 @@
-export const FilterBar = ({name}) => {
-    return <div>Hello {name}!</div>;
-}

script/filterbar.tsx

@@ -0,0 +1,19 @@
+import {Select, createOptions, createAsyncOptions} from "@thisbeyond/solid-select";
+import {Api} from "./api";
+
+export interface FilterBarProps {
+    maps: string[],
+    api: Api,
+}
+
+export const FilterBar = ({maps, api}: FilterBarProps) => {
+    const modes = createOptions(["4v4", "6v6", "Highlander"]);
+    const mapOptions = createOptions(maps);
+    const playerOptions = createAsyncOptions(search => api.searchPlayer(search));
+    const playerFormat = player => player.name;
+    return <div class="filter-bar">
+        <Select class="mode" placeholder="All Types" {...modes} />
+        <Select class="maps" placeholder="All Maps" {...mapOptions} />
+        <Select class="players" multiple placeholder="All Players" format={playerFormat} {...playerOptions} />
+    </div>;
+}