diff --git a/client/src/components/Window.tsx b/client/src/components/Window.tsx index 8e87931..cc60e47 100644 --- a/client/src/components/Window.tsx +++ b/client/src/components/Window.tsx @@ -1,16 +1,20 @@ import React, { useState, useEffect } from 'react'; -import { ThemeProvider, CssBaseline, createMuiTheme, AppBar, Box } from '@material-ui/core'; +import { ThemeProvider, CssBaseline, createMuiTheme, AppBar, Box, LinearProgress } from '@material-ui/core'; import { QueryElem, toApiQuery } from '../lib/query/Query'; import QueryBuilder from './querybuilder/QueryBuilder'; import * as serverApi from '../api'; import { SongTable } from './tables/ResultsTable'; import stringifyList from '../lib/stringifyList'; import { getArtists, getSongTitles, getAlbums, getTags } from '../lib/query/Getters'; +import { grey } from '@material-ui/core/colors'; var _ = require('lodash'); const darkTheme = createMuiTheme({ palette: { - type: 'dark' + type: 'dark', + primary: { + main: grey[100], + } }, }); @@ -34,7 +38,7 @@ export default function Window(props: any) { // Recursively resolve the name. const resolveTag = (tag: any) => { var r = [tag.name]; - if(tag.parent) { r.unshift(resolveTag(tag.parent)); } + if (tag.parent) { r.unshift(resolveTag(tag.parent)); } return r; } @@ -42,7 +46,7 @@ export default function Window(props: any) { } } - const doQuery = async (_query: QueryElem) => { + const doQuery = async (_query: QueryElem) => { var q: serverApi.QueryRequest = { query: toApiQuery(_query), offsetsLimits: { @@ -56,17 +60,17 @@ export default function Window(props: any) { ascending: true, }, }; - + const requestOpts = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(q), }; - + return (async () => { const response = await fetch((process.env.REACT_APP_BACKEND || "") + serverApi.QueryEndpoint, requestOpts) let json: any = await response.json(); - if(_.isEqual(query, _query)) { + if (_.isEqual(query, _query)) { setResultsFor({ for: _query, results: json.songs, @@ -114,6 +118,7 @@ export default function Window(props: any) { songs={showResults} songGetters={songGetters} /> + {loading && } diff --git a/client/src/lib/query/Query.tsx b/client/src/lib/query/Query.tsx index e1b4151..9109cfd 100644 --- a/client/src/lib/query/Query.tsx +++ b/client/src/lib/query/Query.tsx @@ -18,7 +18,7 @@ export interface TagQueryInfo { matchIds: number[], } export function isTagQueryInfo(e: any): e is TagQueryInfo { - return 'fullName' in e && 'matchIds' in e; + return (typeof e === 'object') && 'fullName' in e && 'matchIds' in e; } export type QueryLeafOperand = string | number | TagQueryInfo;