chad-music/web/src/App.js

import { BaseLink, useRoute } from 'react-router5'
import {useReducer} from 'react';
import './App.css';
import logo from './chad-logo-256.png';
import {storeToken, loadToken} from './Api';
import Login from './Login';
import Settings from './Settings';
import UserInfo from './UserInfo';
import Player from './Player';

function storeSettings(settings) {
  localStorage.setItem('settings', JSON.stringify(settings));
  return settings;
}
function loadSettings() {
  const settings = localStorage.getItem('settings');
  return (settings && JSON.parse(settings)) || {login:{}, theme:'light', layout:'two-col'};
}

function settingsReducer(state, action) {
  console.log(action);
  switch(action.type) {
  case 'LOGIN_SUCCESS':
    storeToken(action.payload);
    return {...state, login: {loading: false, error: null}};
  case 'LOGIN_INIT':    return {...state, login: {loading: true, error: null}};
  case 'LOGIN_FAIL':    return {...state, login: {loading: false, error: action.payload}};
  case 'LAYOUT_SET':    return storeSettings({...state, layout: action.payload});
  case 'THEME_SET':     return storeSettings({...state, theme: action.payload});
  default: throw new Error(`Bad action ${action}`);
  }
}

function App() {
  const { router } = useRoute()
  const [settings, dispatch] = useReducer(settingsReducer, loadSettings());
  if(!loadToken()) {
    return <Login state={settings} dispatch={dispatch} />
  }

  return (
    <div className="App" data-theme={settings.theme} data-layout={settings.layout}>
      <header className="App-header">
        <BaseLink router={router} routeName="browser" routeOptions={{ reload: true }}>
          <img src={logo} className="App-logo" alt="Chad music" />
        </BaseLink>
        <h1 className="App-title">Chad Music</h1>
        <Settings state={settings} dispatch={dispatch} />
        <UserInfo/>
      </header>

      <Player />
    </div>
  );
}

export default App;