Laid groundwork for having different types of tabs and windows.

client/src/components/MainWindow.tsx

@@ -1,8 +1,11 @@
 import React, { useReducer, useState, Reducer } from 'react';
-import { ThemeProvider, CssBaseline, createMuiTheme } from '@material-ui/core';
+import { ThemeProvider, CssBaseline, createMuiTheme, withWidth } from '@material-ui/core';
 import { grey } from '@material-ui/core/colors';
 import AppBar from './appbar/AppBar';
 import QueryWindow, { QueryWindowReducer, QueryWindowState } from './windows/QueryWindow';
+import { NewTabProps } from './appbar/AddTabMenu';
+import { newWindowState, newWindowReducer, WindowState, WindowType } from './windows/Windows';
+import EditArtistWindow from './windows/EditArtistWindow';
 var _ = require('lodash');
 
 const darkTheme = createMuiTheme({
@@ -18,6 +21,7 @@ export interface MainWindowState {
     tabLabels: string[],
     tabStates: any[],
     tabReducers: Reducer<any, any>[],
+    tabTypes: WindowType[],
     activeTab: number,
 }
 
@@ -39,7 +43,8 @@ export function MainWindowReducer(state: MainWindowState, action: any) {
                 tabStates: state.tabStates.filter((i: any, idx: number) => idx != action.idx),
                 tabLabels: state.tabLabels.filter((i: any, idx: number) => idx != action.idx),
                 tabReducers: state.tabReducers.filter((i: any, idx: number) => idx != action.idx),
-                activeTab: state.activeTab >= (newSize-1) ? (newSize-1) : state.activeTab,
+                tabTypes: state.tabTypes.filter((i: any, idx: number) => idx != action.idx),
+                activeTab: state.activeTab >= (newSize - 1) ? (newSize - 1) : state.activeTab,
             }
         case MainWindowStateActions.AddTab:
             return {
@@ -47,6 +52,7 @@ export function MainWindowReducer(state: MainWindowState, action: any) {
                 tabStates: [...state.tabStates, action.tabState],
                 tabLabels: [...state.tabLabels, action.tabLabel],
                 tabReducers: [...state.tabReducers, action.tabReducer],
+                tabTypes: [...state.tabTypes, action.tabType],
             }
         case MainWindowStateActions.DispatchToTab:
             return {
@@ -72,21 +78,35 @@ export default function MainWindow(props: any) {
                 resultsForQuery: null,
             },
         ],
-        tabReducers: [QueryWindowReducer, QueryWindowReducer],
+        tabReducers: [QueryWindowReducer],
+        tabTypes: [WindowType.Query],
         activeTab: 0
     })
 
-    const queryWindows = state.tabStates.map((state: QueryWindowState, i: number) => {
+    const windows = state.tabStates.map((tabState: any, i: number) => {
-        return <QueryWindow
+        const tabDispatch = (action: any) => {
-            state={state}
+            dispatch({
-            dispatch={(action: any) => {
+                type: MainWindowStateActions.DispatchToTab,
-                dispatch({
+                tabAction: action,
-                    type: MainWindowStateActions.DispatchToTab,
+                idx: i
-                    tabAction: action,
+            });
-                    idx: i
+        }
-                });
+        console.log("state", state);
-            }}
+
-        />
+        switch (state.tabTypes[i]) {
+            case WindowType.Query:
+                return <QueryWindow
+                    state={tabState}
+                    dispatch={tabDispatch}
+                />
+            case WindowType.EditArtist:
+                return <EditArtistWindow
+                    state={tabState}
+                    dispatch={tabDispatch}
+                />
+            default:
+                throw new Error("Unimplemented window type");
+        }
     });
 
     return <ThemeProvider theme={darkTheme}>
@@ -96,19 +116,16 @@ export default function MainWindow(props: any) {
             selectedTab={state.activeTab}
             setSelectedTab={(t: number) => dispatch({ type: MainWindowStateActions.SetActiveTab, value: t })}
             onCloseTab={(t: number) => dispatch({ type: MainWindowStateActions.CloseTab, idx: t })}
-            onAddTab={() => {
+            onAddTab={(w: NewTabProps) => {
                 dispatch({
                     type: MainWindowStateActions.AddTab,
-                    tabState: {
+                    tabState: newWindowState[w.windowType](),
-                        editingQuery: false,
+                    tabLabel: w.title,
-                        query: null,
+                    tabReducer: newWindowReducer[w.windowType],
-                        resultsForQuery: null,
+                    tabType: w.windowType,
-                    },
-                    tabLabel: "Query",
-                    tabReducer: QueryWindowReducer,
                 })
             }}
         />
-        {queryWindows[state.activeTab]}
+        {windows[state.activeTab]}
     </ThemeProvider>
 }

client/src/components/appbar/AddTabMenu.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { WindowType } from '../windows/Windows';
+import { Menu, MenuItem } from '@material-ui/core';
+
+export interface NewTabProps {
+    title: string,
+    windowType: WindowType,
+}
+
+export interface IProps {
+    anchorEl: null | HTMLElement,
+    onClose: () => void,
+    onCreateTab: (q: NewTabProps) => void,
+}
+
+export default function AddTabMenu(props: IProps) {
+    return <Menu
+        anchorEl={props.anchorEl}
+        keepMounted
+        open={Boolean(props.anchorEl)}
+        onClose={props.onClose}
+    >
+        <MenuItem disabled={true}>New Tab</MenuItem>
+        {([
+            WindowType.Query,
+            WindowType.EditArtist
+        ]).map((v: WindowType) => <MenuItem
+            onClick={() => {
+                props.onClose();
+                props.onCreateTab({
+                    title: v,
+                    windowType: v,
+                })
+            }}
+        >{v}</MenuItem>)}
+    </Menu>
+}

client/src/components/appbar/AppBar.tsx

@@ -2,13 +2,14 @@ import React, { useState } from 'react';
 import { AppBar as MuiAppBar, Box, Tab as MuiTab, Tabs, IconButton } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import AddIcon from '@material-ui/icons/Add';
+import AddTabMenu, { NewTabProps } from './AddTabMenu';
 
 export interface IProps {
     tabLabels: string[],
     selectedTab: number,
     setSelectedTab: (n: number) => void,
     onCloseTab: (idx: number) => void,
-    onAddTab: () => void,
+    onAddTab: (w: NewTabProps) => void,
 }
 
 export interface TabProps {
@@ -45,19 +46,38 @@ export function Tab(props: any) {
 }
 
 export default function AppBar(props: IProps) {
-    return <MuiAppBar position="static" style={{ background: 'grey' }}>
+    const [addMenuAnchorEl, setAddMenuAnchorEl] = React.useState<null | HTMLElement>(null);
-        <Box display="flex" alignItems="center">
+
-            <Box m={0.5} display="flex" alignItems="center">
+    const onOpenAddMenu = (event: any) => {
-                <img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img>
+        setAddMenuAnchorEl(event.currentTarget);
+    };
+    const onCloseAddMenu = () => {
+        setAddMenuAnchorEl(null);
+    };
+    const onAddTab = (w: NewTabProps) => {
+        props.onAddTab(w);
+    };
+
+    return <>
+        <MuiAppBar position="static" style={{ background: 'grey' }}>
+            <Box display="flex" alignItems="center">
+                <Box m={0.5} display="flex" alignItems="center">
+                    <img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img>
+                </Box>
+                <Tabs value={props.selectedTab} onChange={(e: any, v: number) => props.setSelectedTab(v)}>
+                    {props.tabLabels.map((l: string, idx: number) => <Tab
+                        label={l}
+                        value={idx}
+                        onClose={() => props.onCloseTab(idx)}
+                    />)}
+                </Tabs>
+                <IconButton color="inherit" onClick={onOpenAddMenu}><AddIcon /></IconButton>
             </Box>
-            <Tabs value={props.selectedTab} onChange={(e: any, v: number) => props.setSelectedTab(v)}>
+        </MuiAppBar>
-                {props.tabLabels.map((l: string, idx: number) => <Tab
+        <AddTabMenu
-                    label={l}
+        anchorEl={addMenuAnchorEl}
-                    value={idx}
+        onClose={onCloseAddMenu}
-                    onClose={() => props.onCloseTab(idx)}
+        onCreateTab={onAddTab}
-                />)}
+        />
-            </Tabs>
+    </>
-            <IconButton color="inherit" onClick={props.onAddTab}><AddIcon/></IconButton>
-        </Box>
-    </MuiAppBar>
 }

client/src/components/querybuilder/QBAddElemMenu.tsx

@@ -3,7 +3,7 @@ import { Menu, MenuItem } from '@material-ui/core';
 import NestedMenuItem from "material-ui-nested-menu-item";
 import { QueryElem, QueryLeafBy, QueryLeafOp, TagQueryInfo } from '../../lib/query/Query';
 import QBSelectWithRequest from './QBSelectWithRequest';
-import { Requests, TagItem } from './QueryBuilder';
+import { Requests } from './QueryBuilder';
 
 export interface MenuProps {
     anchorEl: null | HTMLElement,

client/src/components/windows/EditArtistWindow.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+
+export interface EditArtistWindowState {
+
+}
+
+export enum EditArtistWindowStateActions {
+}
+
+export function EditArtistWindowReducer(state: EditArtistWindowState, action: any) {
+    return state;
+}
+
+export interface IProps {
+    state: EditArtistWindowState,
+    dispatch: (action: any) => void
+}
+
+export default function EditArtistWindow(props: IProps) {
+    return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
+        <Box
+            m={1}
+            width="80%"
+        >
+            Hello!
+        </Box>
+    </Box>
+}

client/src/components/windows/QueryWindow.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { createMuiTheme, Box, LinearProgress } from '@material-ui/core';
 import { QueryElem, toApiQuery } from '../../lib/query/Query';
 import QueryBuilder from '../querybuilder/QueryBuilder';

client/src/components/windows/Windows.tsx

@@ -0,0 +1,27 @@
+import { QueryWindowReducer, QueryWindowState } from "./QueryWindow";
+import { EditArtistWindowReducer, EditArtistWindowState } from "./EditArtistWindow";
+
+export enum WindowType {
+    Query = "Query",
+    EditArtist = "EditArtist",
+}
+
+export type WindowState = QueryWindowState | EditArtistWindowState;
+
+export const newWindowReducer = {
+    [WindowType.Query]: QueryWindowReducer,
+    [WindowType.EditArtist]: EditArtistWindowReducer,
+}
+
+export const newWindowState = {
+    [WindowType.Query]: () => {
+        return {
+            editingQuery: false,
+            query: null,
+            resultsForQuery: null,
+        };
+    },
+    [WindowType.EditArtist]: () => {
+
+    }
+}