Refactor towards tabs.

client/src/App.tsx

@@ -8,7 +8,7 @@ import {
   Switch,
   Route
 } from "react-router-dom";
-import Window from './components/Window';
+import MainWindow from './components/MainWindow';
 
 function App() {
   return (
@@ -16,7 +16,7 @@ function App() {
       <DndProvider backend={HTML5Backend}>
         <Switch>
           <Route path="/">
-            <Window/>
+            <MainWindow/>
           </Route>
         </Switch>
 

client/src/components/MainWindow.tsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+import { ThemeProvider, CssBaseline, createMuiTheme, 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';
+import AppBar from './appbar/AppBar';
+import QueryWindow from './windows/QueryWindow';
+var _ = require('lodash');
+
+const darkTheme = createMuiTheme({
+    palette: {
+        type: 'dark',
+        primary: {
+            main: grey[100],
+        }
+    },
+});
+
+export default function MainWindow(props: any) {
+    return <ThemeProvider theme={darkTheme}>
+        <CssBaseline />
+        <AppBar />
+        <QueryWindow />
+    </ThemeProvider>
+}

client/src/components/appbar/AppBar.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AppBar as MuiAppBar, Box } from '@material-ui/core';
+
+export interface IProps {
+
+}
+
+export default function AppBar(props: IProps) {
+    return <MuiAppBar position="static" style={{ background: 'grey' }}>
+        <Box m={0.5} display="flex" alignItems="center">
+            <img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img>
+        </Box>
+    </MuiAppBar>
+}

client/src/components/windows/QueryWindow.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { ThemeProvider, CssBaseline, createMuiTheme, AppBar, Box, LinearProgress } from '@material-ui/core';
+import { createMuiTheme, Box, LinearProgress } from '@material-ui/core';
-import { QueryElem, toApiQuery } from '../lib/query/Query';
+import { QueryElem, toApiQuery } from '../../lib/query/Query';
-import QueryBuilder from './querybuilder/QueryBuilder';
+import QueryBuilder from '../querybuilder/QueryBuilder';
-import * as serverApi from '../api';
+import * as serverApi from '../../api';
-import { SongTable } from './tables/ResultsTable';
+import { SongTable } from '../tables/ResultsTable';
-import stringifyList from '../lib/stringifyList';
+import stringifyList from '../../lib/stringifyList';
-import { getArtists, getSongTitles, getAlbums, getTags } from '../lib/query/Getters';
+import { getArtists, getSongTitles, getAlbums, getTags } from '../../lib/query/Getters';
 import { grey } from '@material-ui/core/colors';
 var _ = require('lodash');
 
@@ -18,7 +18,7 @@ const darkTheme = createMuiTheme({
     },
 });
 
-export default function Window(props: any) {
+export default function QueryWindow(props: any) {
     interface ResultsFor {
         for: QueryElem,
         results: any[],
@@ -87,40 +87,31 @@ export default function Window(props: any) {
         }
     }, [query]);
 
-    return <ThemeProvider theme={darkTheme}>
+    return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
-        <CssBaseline />
+        <Box
-        <AppBar position="static" style={{ background: 'grey' }}>
+            m={1}
-            <Box m={0.5} display="flex" alignItems="center">
+            width="80%"
-                <img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img>
+        >
-            </Box>
+            <QueryBuilder
-        </AppBar>
+                query={query}
-        <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
+                onChangeQuery={setQuery}
-            <Box
+                requestFunctions={{
-                m={1}
+                    getArtists: getArtists,
-                width="80%"
+                    getSongTitles: getSongTitles,
-            >
+                    getAlbums: getAlbums,
-                <QueryBuilder
+                    getTags: getTags,
-                    query={query}
+                }}
-                    onChangeQuery={setQuery}
+            />
-                    requestFunctions={{
-                        getArtists: getArtists,
-                        getSongTitles: getSongTitles,
-                        getAlbums: getAlbums,
-                        getTags: getTags,
-                    }}
-                />
-            </Box>
-            <Box
-                m={1}
-                width="80%"
-            >
-                <SongTable
-                    songs={showResults}
-                    songGetters={songGetters}
-                />
-                {loading && <LinearProgress />}
-            </Box>
         </Box>
-
+        <Box
-    </ThemeProvider>
+            m={1}
+            width="80%"
+        >
+            <SongTable
+                songs={showResults}
+                songGetters={songGetters}
+            />
+            {loading && <LinearProgress />}
+        </Box>
+    </Box>
 }