OpenMediaCenter/src/App.js

import React from 'react';
import HomePage from './pages/HomePage/HomePage';
import RandomPage from './pages/RandomPage/RandomPage';
import GlobalInfos from './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';

/**
 * The main App handles the main tabs and which content to show
 */
class App extends React.Component {
    newElement = null;

    constructor(props, context) {
        super(props, context);
        this.state = {
            page: 'default',
            generalSettingsLoaded: false,
            passwordsupport: null,
            mediacentername: 'OpenMediaCenter'
        };

        // bind this to the method for being able to call methods such as this.setstate
        this.changeRootElement = this.changeRootElement.bind(this);
        this.returnToLastElement = this.returnToLastElement.bind(this);
    }

    componentDidMount() {
        const updateRequest = new FormData();
        updateRequest.append('action', 'loadInitialData');

        fetch('/api/settings.php', {method: 'POST', body: updateRequest})
            .then((response) => response.json()
                .then((result) => {
                    // set theme
                    GlobalInfos.enableDarkTheme(result.DarkMode);

                    this.setState({
                        generalSettingsLoaded: true,
                        passwordsupport: result.passwordEnabled,
                        mediacentername: result.mediacenter_name
                    });
                    // set tab title to received mediacenter name
                    document.title = result.mediacenter_name;
                }));
    }

    /**
     * create a viewbinding to call APP functions from child elements
     * @returns a set of callback functions
     */
    constructViewBinding() {
        return {
            changeRootElement: this.changeRootElement,
            returnToLastElement: this.returnToLastElement
        };
    }

    /**
     * load the selected component into the main view
     * @returns {JSX.Element} body element of selected page
     */
    MainBody() {
        let page;
        if (this.state.page === 'default') {
            page = <HomePage viewbinding={this.constructViewBinding()}/>;
            this.mypage = page;
        } else if (this.state.page === 'random') {
            page = <RandomPage viewbinding={this.constructViewBinding()}/>;
            this.mypage = page;
        } else if (this.state.page === 'settings') {
            page = <SettingsPage/>;
            this.mypage = page;
        } else if (this.state.page === 'categories') {
            page = <CategoryPage viewbinding={this.constructViewBinding()}/>;
            this.mypage = page;
        } else if (this.state.page === 'video') {
            // show videoelement if neccessary
            page = this.newElement;

            console.log(page);
        } else if (this.state.page === 'lastpage') {
            // return back to last page
            page = this.mypage;
        } else {
            page = <div>unimplemented yet!</div>;
        }
        return (page);
    }

    render() {
        const themeStyle = GlobalInfos.getThemeStyle();
        // add the main theme to the page body
        document.body.className = themeStyle.backgroundcolor;
        return (
            <div className={style.app}>
                <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
                    <div className={style.navbrand}>{this.state.mediacentername}</div>

                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'default' ? style.navitemselected : {}].join(' ')}
                         onClick={() => this.setState({page: 'default'})}>Home
                    </div>
                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'random' ? style.navitemselected : {}].join(' ')}
                         onClick={() => this.setState({page: 'random'})}>Random Video
                    </div>
                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'categories' ? style.navitemselected : {}].join(' ')}
                         onClick={() => this.setState({page: 'categories'})}>Categories
                    </div>
                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'settings' ? style.navitemselected : {}].join(' ')}
                         onClick={() => this.setState({page: 'settings'})}>Settings
                    </div>
                </div>
                {this.state.generalSettingsLoaded ? this.MainBody() : 'loading'}
            </div>
        );
    }

    /**
     * render a new root element into the main body
     */
    changeRootElement(element) {
        this.newElement = element;

        this.setState({
            page: 'video'
        });
    }

    /**
     * return from page to the previous page before a change
     */
    returnToLastElement() {
        this.setState({
            page: 'lastpage'
        });
    }
}

export default App;