import React from 'react'; import { CssBaseline, makeStyles } from '@material-ui/core'; import { useRecoilValue } from 'recoil'; import TopBar from './TopBar/TopBar'; import LoadingBar from './LoadingBar'; import { tabList } from './TopBar/AppTabs'; import { selectedTabState } from '../store'; import LoadingSuspense from './LoadingSuspense'; import { AppAlert } from './AppAlert'; import { useProtocol } from '../hooks'; import { ErrorBoundary } from './ErrorBoundary'; const useStyles = makeStyles({ wrapper: { display: 'flex', height: '100vh', flexDirection: 'column', overflow: 'hidden', }, }); const MainView = () => { const styles = useStyles(); const selectedTab = useRecoilValue(selectedTabState); useProtocol(); return ( <CssBaseline> <div className={styles.wrapper}> <TopBar /> <AppAlert /> <LoadingBar /> {tabList.map( (tab) => tabList[selectedTab].name === tab.name && ( <ErrorBoundary> <LoadingSuspense key={tab.name}> <tab.component /> </LoadingSuspense> </ErrorBoundary> ) )} </div> </CssBaseline> ); }; export default MainView;