Better tab labels. Tab icons.

client/src/components/MainWindow.tsx

@@ -18,7 +18,6 @@ const darkTheme = createMuiTheme({
 });
 
 export interface MainWindowState {
-    tabLabels: string[],
     tabStates: any[],
     tabReducers: Reducer<any, any>[],
     tabTypes: WindowType[],
@@ -41,7 +40,6 @@ export function MainWindowReducer(state: MainWindowState, action: any) {
             return {
                 ...state,
                 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),
                 tabTypes: state.tabTypes.filter((i: any, idx: number) => idx != action.idx),
                 activeTab: state.activeTab >= (newSize - 1) ? (newSize - 1) : state.activeTab,
@@ -51,7 +49,6 @@ export function MainWindowReducer(state: MainWindowState, action: any) {
             return {
                 ...state,
                 tabStates: [...state.tabStates, action.tabState],
-                tabLabels: [...state.tabLabels, action.tabLabel],
                 tabReducers: [...state.tabReducers, action.tabReducer],
                 tabTypes: [...state.tabTypes, action.tabType],
             }
@@ -71,15 +68,10 @@ export function MainWindowReducer(state: MainWindowState, action: any) {
 
 export default function MainWindow(props: any) {
     const [state, dispatch] = useReducer(MainWindowReducer, {
-        tabLabels: ["Query"],
         tabStates: [
-            {
+            newWindowState[WindowType.Query]()
-                editingQuery: false,
-                query: null,
-                resultsForQuery: null,
-            },
         ],
-        tabReducers: [QueryWindowReducer],
+        tabReducers: [newWindowReducer[WindowType.Query]],
         tabTypes: [WindowType.Query],
         activeTab: 0
     })
@@ -92,7 +84,6 @@ export default function MainWindow(props: any) {
                 idx: i
             });
         }
-        console.log("state", state);
 
         switch (state.tabTypes[i]) {
             case WindowType.Query:
@@ -112,10 +103,12 @@ export default function MainWindow(props: any) {
         }
     });
 
+    console.log("State:", state)
+
     return <ThemeProvider theme={darkTheme}>
         <CssBaseline />
         <AppBar
-            tabLabels={state.tabLabels}
+            tabLabels={state.tabStates.map((s: any) => s.tabLabel)}
             selectedTab={state.activeTab}
             setSelectedTab={(t: number) => dispatch({ type: MainWindowStateActions.SetActiveTab, value: t })}
             onCloseTab={(t: number) => dispatch({ type: MainWindowStateActions.CloseTab, idx: t })}
@@ -123,7 +116,6 @@ export default function MainWindow(props: any) {
                 dispatch({
                     type: MainWindowStateActions.AddTab,
                     tabState: newWindowState[w.windowType](),
-                    tabLabel: w.title,
                     tabReducer: newWindowReducer[w.windowType],
                     tabType: w.windowType,
                 })

client/src/components/appbar/AddTabMenu.tsx

@@ -3,7 +3,6 @@ import { WindowType } from '../windows/Windows';
 import { Menu, MenuItem } from '@material-ui/core';
 
 export interface NewTabProps {
-    title: string,
     windowType: WindowType,
 }
 
@@ -21,17 +20,13 @@ export default function AddTabMenu(props: IProps) {
         onClose={props.onClose}
     >
         <MenuItem disabled={true}>New Tab</MenuItem>
-        {([
+        <MenuItem
-            WindowType.Query,
-            WindowType.Artist
-        ]).map((v: WindowType) => <MenuItem
             onClick={() => {
                 props.onClose();
                 props.onCreateTab({
-                    title: v,
+                    windowType: WindowType.Query,
-                    windowType: v,
                 })
             }}
-        >{v}</MenuItem>)}
+        >{WindowType.Query}</MenuItem>
     </Menu>
 }

client/src/components/tables/ResultsTable.tsx

@@ -3,6 +3,7 @@ import { TableContainer, Table, TableHead, TableRow, TableCell, Paper, makeStyle
 import stringifyList from '../../lib/stringifyList';
 import { MainWindowStateActions } from '../MainWindow';
 import { newWindowReducer, WindowType } from '../windows/Windows';
+import PersonIcon from '@material-ui/icons/Person';
 
 export interface SongGetters {
     getTitle: (song: any) => string,
@@ -41,8 +42,10 @@ export function SongTable(props: IProps) {
                     {props.songs.map((song: any) => {
                         const title = props.songGetters.getTitle(song);
                         // TODO / FIXME: display artists and albums separately!
-                        const artist = stringifyList(props.songGetters.getArtistNames(song));
+                        const artistNames = props.songGetters.getArtistNames(song);
+                        const artist = stringifyList(artistNames);
                         const mainArtistId = props.songGetters.getArtistIds(song)[0];
+                        const mainArtistName = artistNames[0];
                         const album = stringifyList(props.songGetters.getAlbumNames(song));
                         const tags = props.songGetters.getTagNames(song).map((tag: string[]) => {
                             return <Box ml={0.5} mr={0.5}>
@@ -57,6 +60,7 @@ export function SongTable(props: IProps) {
                             props.mainDispatch({
                                 type: MainWindowStateActions.AddTab,
                                 tabState: {
+                                    tabLabel: <><PersonIcon/>{mainArtistName}</>,
                                     artistId: mainArtistId,
                                     metadata: null,
                                 },

client/src/components/windows/ArtistWindow.tsx

@@ -2,12 +2,13 @@ import React, { useEffect } from 'react';
 import { Box, Typography } from '@material-ui/core';
 import PersonIcon from '@material-ui/icons/Person';
 import * as serverApi from '../../api';
+import { WindowState } from './Windows';
 
 export interface ArtistMetadata {
     name: string,
 }
 
-export interface ArtistWindowState {
+export interface ArtistWindowState extends WindowState {
     artistId: number,
     metadata: ArtistMetadata | null,
 }

client/src/components/windows/QueryWindow.tsx

@@ -7,6 +7,7 @@ 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 { WindowState } from './Windows';
 var _ = require('lodash');
 
 const darkTheme = createMuiTheme({
@@ -23,7 +24,7 @@ export interface ResultsForQuery {
     results: any[],
 };
 
-export interface QueryWindowState {
+export interface QueryWindowState extends WindowState {
     editingQuery: boolean,
     query: QueryElem | null,
     resultsForQuery: ResultsForQuery | null,

client/src/components/windows/Windows.tsx

@@ -1,12 +1,17 @@
+import React from 'react';
 import { QueryWindowReducer, QueryWindowState } from "./QueryWindow";
 import { ArtistWindowReducer, ArtistWindowState } from "./ArtistWindow";
+import SearchIcon from '@material-ui/icons/Search';
+import PersonIcon from '@material-ui/icons/Person';
 
 export enum WindowType {
     Query = "Query",
     Artist = "Artist",
 }
 
-export type WindowState = QueryWindowState | ArtistWindowState;
+export interface WindowState {
+    tabLabel: string,
+}
 
 export const newWindowReducer = {
     [WindowType.Query]: QueryWindowReducer,
@@ -16,6 +21,7 @@ export const newWindowReducer = {
 export const newWindowState = {
     [WindowType.Query]: () => {
         return {
+            tabLabel: <><SearchIcon/>Query</>,
             editingQuery: false,
             query: null,
             resultsForQuery: null,
@@ -23,6 +29,7 @@ export const newWindowState = {
     },
     [WindowType.Artist]: () => {
         return {
+            tabLabel: <><PersonIcon/>Artist</>,
             artistId: 1,
             metadata: null,
         }