MuDBase/client/src/components/MainWindow.tsx

import React, { useReducer, useState, Reducer } from 'react';
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 ArtistWindow from './windows/ArtistWindow';
var _ = require('lodash');

const darkTheme = createMuiTheme({
    palette: {
        type: 'dark',
        primary: {
            main: grey[100],
        }
    },
});

export interface MainWindowState {
    tabLabels: string[],
    tabStates: any[],
    tabReducers: Reducer<any, any>[],
    tabTypes: WindowType[],
    activeTab: number,
}

export enum MainWindowStateActions {
    SetActiveTab = "setActiveTab",
    DispatchToTab = "dispatchToTab",
    CloseTab = "closeTab",
    AddTab = "addTab",
}

export function MainWindowReducer(state: MainWindowState, action: any) {
    switch (action.type) {
        case MainWindowStateActions.SetActiveTab:
            return { ...state, activeTab: action.value }
        case MainWindowStateActions.CloseTab:
            const newSize = state.tabStates.length - 1;
            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,
            }
        case MainWindowStateActions.AddTab:
            return {
                ...state,
                tabStates: [...state.tabStates, action.tabState],
                tabLabels: [...state.tabLabels, action.tabLabel],
                tabReducers: [...state.tabReducers, action.tabReducer],
                tabTypes: [...state.tabTypes, action.tabType],
            }
        case MainWindowStateActions.DispatchToTab:
            return {
                ...state,
                tabStates: state.tabStates.map((item: any, i: number) => {
                    return i === action.idx ?
                        state.tabReducers[i](item, action.tabAction) :
                        item;
                })
            }
        default:
            throw new Error("Unimplemented QueryWindow state update.")
    }
}

export default function MainWindow(props: any) {
    const [state, dispatch] = useReducer(MainWindowReducer, {
        tabLabels: ["Query"],
        tabStates: [
            {
                editingQuery: false,
                query: null,
                resultsForQuery: null,
            },
        ],
        tabReducers: [QueryWindowReducer],
        tabTypes: [WindowType.Query],
        activeTab: 0
    })

    const windows = state.tabStates.map((tabState: any, i: number) => {
        const tabDispatch = (action: any) => {
            dispatch({
                type: MainWindowStateActions.DispatchToTab,
                tabAction: action,
                idx: i
            });
        }
        console.log("state", state);

        switch (state.tabTypes[i]) {
            case WindowType.Query:
                return <QueryWindow
                    state={tabState}
                    dispatch={tabDispatch}
                />
            case WindowType.Artist:
                return <ArtistWindow
                    state={tabState}
                    dispatch={tabDispatch}
                />
            default:
                throw new Error("Unimplemented window type");
        }
    });

    return <ThemeProvider theme={darkTheme}>
        <CssBaseline />
        <AppBar
            tabLabels={state.tabLabels}
            selectedTab={state.activeTab}
            setSelectedTab={(t: number) => dispatch({ type: MainWindowStateActions.SetActiveTab, value: t })}
            onCloseTab={(t: number) => dispatch({ type: MainWindowStateActions.CloseTab, idx: t })}
            onAddTab={(w: NewTabProps) => {
                dispatch({
                    type: MainWindowStateActions.AddTab,
                    tabState: newWindowState[w.windowType](),
                    tabLabel: w.title,
                    tabReducer: newWindowReducer[w.windowType],
                    tabType: w.windowType,
                })
            }}
        />
        {windows[state.activeTab]}
    </ThemeProvider>
}