From eb9143edf9ec8036c312c00d45973bdade8f4c6d Mon Sep 17 00:00:00 2001
From: Sander Vocke <sandervocke@gmail.com>
Date: Tue, 15 Sep 2020 18:52:38 +0200
Subject: [PATCH] Refactor towards tabs.

---
 client/src/App.tsx                            |  4 +-
 client/src/components/MainWindow.tsx          | 29 +++++++
 client/src/components/appbar/AppBar.tsx       | 14 ++++
 .../{Window.tsx => windows/QueryWindow.tsx}   | 77 ++++++++-----------
 4 files changed, 79 insertions(+), 45 deletions(-)
 create mode 100644 client/src/components/MainWindow.tsx
 create mode 100644 client/src/components/appbar/AppBar.tsx
 rename client/src/components/{Window.tsx => windows/QueryWindow.tsx} (60%)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 53a1c55..6f9ae76 100644
--- a/client/src/App.tsx
+++ b/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>
 
diff --git a/client/src/components/MainWindow.tsx b/client/src/components/MainWindow.tsx
new file mode 100644
index 0000000..fe2351e
--- /dev/null
+++ b/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>
+}
\ No newline at end of file
diff --git a/client/src/components/appbar/AppBar.tsx b/client/src/components/appbar/AppBar.tsx
new file mode 100644
index 0000000..1db35fe
--- /dev/null
+++ b/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>
+}
\ No newline at end of file
diff --git a/client/src/components/Window.tsx b/client/src/components/windows/QueryWindow.tsx
similarity index 60%
rename from client/src/components/Window.tsx
rename to client/src/components/windows/QueryWindow.tsx
index cc60e47..d2187c8 100644
--- a/client/src/components/Window.tsx
+++ b/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 { 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 { 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';
 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}>
-        <CssBaseline />
-        <AppBar 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>
-        </AppBar>
-        <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
-            <Box
-                m={1}
-                width="80%"
-            >
-                <QueryBuilder
-                    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>
+    return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
+        <Box
+            m={1}
+            width="80%"
+        >
+            <QueryBuilder
+                query={query}
+                onChangeQuery={setQuery}
+                requestFunctions={{
+                    getArtists: getArtists,
+                    getSongTitles: getSongTitles,
+                    getAlbums: getAlbums,
+                    getTags: getTags,
+                }}
+            />
         </Box>
-
-    </ThemeProvider>
+        <Box
+            m={1}
+            width="80%"
+        >
+            <SongTable
+                songs={showResults}
+                songGetters={songGetters}
+            />
+            {loading && <LinearProgress />}
+        </Box>
+    </Box>
 }
\ No newline at end of file