mbm-app-context

Example

also need to attach the index.css file.

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import {
  AppProvider,
  useAppState,
  useAppActions,
  ServerProvider,
  useServer,
  Header,
  Footer,
  initMatchMedia,
  HOST_URL,
} from 'mbm-app-context'

initMatchMedia()

const HeaderWrapper = () => {
  const { user } = useAppState()
  const { server, websocket } = useServer()
  const { logout } = useAppActions()
  return <Header
    server={server}
    websocket={{ server, websocket }}
    onLogout={() => {
      logout()
      window.location.replace(HOST_URL)
    }}
    // there should be authorization modal windows
    onAuth={() => console.log('onAuth')}
    onRegister={() => console.log('onRegister')}

    onSearch={(e) => {
      window.open(`${HOST_URL}/search?${e}`)
    }}
    user={user}
  />
}

const FooterWrapper = () => {
  const { server, websocket } = useServer()
  return <Footer
    server={server}
    websocket={websocket}
  />
}

const AppProviderWrapper = ({ children }) => {
  const { server } = useServer()
  return <AppProvider server={server}>
    {children}
  </AppProvider>
}

const AppWrapper = () => {
  const { user } = useAppState()
  const { authChecked, authorized } = user
  if (authChecked && !authorized) {
    window.location.replace(HOST_URL)
  }
  return <React.Fragment>
    <HeaderWrapper />
    <div style={{ height: '1000px', textAlign: 'center' }}>
      --------------------------THE CONTENT--------------------------
    </div>
    <FooterWrapper />
  </React.Fragment>
}

const App = () => (
  <ServerProvider
    server={HOST_URL}
    websocket={{
      protocol: 'wss',
      host: 'dp.mbm.ru',
      port: '8081',
    }}
  >
    <AppProviderWrapper>
      <AppWrapper />
    </AppProviderWrapper>
  </ServerProvider>
)

ReactDOM.render(<App />, document.getElementById('root'))