OpenMediaCenter/src/App.tsx

import React from 'react';
import HomePage from './pages/HomePage/HomePage';
import RandomPage from './pages/RandomPage/RandomPage';
import GlobalInfos from './utils/GlobalInfos';

// include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css';
import style from './App.module.css';

import SettingsPage from './pages/SettingsPage/SettingsPage';
import CategoryPage from './pages/CategoryPage/CategoryPage';
import {APINode, apiTokenValid, callApiUnsafe, refreshAPIToken} from './utils/Api';
import {NoBackendConnectionPopup} from './elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup';

import {BrowserRouter as Router, NavLink, Route, Switch} from 'react-router-dom';
import Player from './pages/Player/Player';
import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage';
import ActorPage from './pages/ActorPage/ActorPage';
import {SettingsTypes} from './types/ApiTypes';
import AuthenticationPage from './pages/AuthenticationPage/AuthenticationPage';

interface state {
    password: boolean | null; // null if uninitialized - true if pwd needed false if not needed
    mediacentername: string;
    onapierror: boolean;
}

/**
 * The main App handles the main tabs and which content to show
 */
class App extends React.Component<{}, state> {
    constructor(props: {}) {
        super(props);

        let pwdneeded: boolean | null = null;

        if (apiTokenValid()) {
            pwdneeded = false;
        } else {
            refreshAPIToken((err) => {
                if (err === 'invalid_client') {
                    this.setState({password: true});
                } else if (err === '') {
                    this.setState({password: false});
                } else {
                    console.log('unimplemented token error: ' + err);
                }
            });
        }

        this.state = {
            mediacentername: 'OpenMediaCenter',
            onapierror: false,
            password: pwdneeded
        };

        GlobalInfos.onThemeChange(() => {
            this.forceUpdate();
        });
    }

    initialAPICall(): void {
        // this is the first api call so if it fails we know there is no connection to backend
        callApiUnsafe(
            APINode.Init,
            {action: 'loadInitialData'},
            (result: SettingsTypes.initialApiCallData) => {
                // set theme
                GlobalInfos.enableDarkTheme(result.DarkMode);

                GlobalInfos.setVideoPath(result.VideoPath);

                this.setState({
                    mediacentername: result.MediacenterName,
                    onapierror: false
                });
                // set tab title to received mediacenter name
                document.title = result.MediacenterName;
            },
            () => {
                this.setState({onapierror: true});
            }
        );
    }

    componentDidMount(): void {
        this.initialAPICall();
    }

    render(): JSX.Element {
        const themeStyle = GlobalInfos.getThemeStyle();
        // add the main theme to the page body
        document.body.className = themeStyle.backgroundcolor;

        if (this.state.password === true) {
            return (
                <AuthenticationPage
                    submit={(password): void => {
                        refreshAPIToken((error) => {
                            if (error !== '') {
                                console.log('wrong password!!!');
                            } else {
                                this.setState({password: false});
                            }
                        }, password);
                    }}
                />
            );
        } else if (this.state.password === false) {
            return (
                <Router>
                    <div className={style.app}>
                        <div
                            className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(
                                ' '
                            )}>
                            <div className={style.navbrand}>{this.state.mediacentername}</div>
                            <NavLink
                                className={[style.navitem, themeStyle.navitem].join(' ')}
                                to={'/'}
                                activeStyle={{opacity: '0.85'}}>
                                Home
                            </NavLink>
                            <NavLink
                                className={[style.navitem, themeStyle.navitem].join(' ')}
                                to={'/random'}
                                activeStyle={{opacity: '0.85'}}>
                                Random Video
                            </NavLink>

                            <NavLink
                                className={[style.navitem, themeStyle.navitem].join(' ')}
                                to={'/categories'}
                                activeStyle={{opacity: '0.85'}}>
                                Categories
                            </NavLink>
                            <NavLink
                                className={[style.navitem, themeStyle.navitem].join(' ')}
                                to={'/settings'}
                                activeStyle={{opacity: '0.85'}}>
                                Settings
                            </NavLink>
                        </div>
                        {this.routing()}
                    </div>
                    {this.state.onapierror ? this.ApiError() : null}
                </Router>
            );
        } else {
            return <>still loading...</>;
        }
    }

    routing(): JSX.Element {
        return (
            <Switch>
                <Route path='/random'>
                    <RandomPage />
                </Route>
                <Route path='/categories'>
                    <CategoryPage />
                </Route>
                <Route path='/settings'>
                    <SettingsPage />
                </Route>
                <Route exact path='/player/:id'>
                    <Player />
                </Route>
                <Route exact path='/actors'>
                    <ActorOverviewPage />
                </Route>
                <Route path='/actors/:id'>
                    <ActorPage />
                </Route>
                <Route path='/'>
                    <HomePage />
                </Route>
            </Switch>
        );
    }

    ApiError(): JSX.Element {
        // on api error show popup and retry and show again if failing..
        return <NoBackendConnectionPopup onHide={(): void => this.initialAPICall()} />;
    }
}

export default App;