import React from 'react'; import { observer } from 'mobx-react'; import styled from 'styled-components'; import { AppBar, Box, Button, Link, Toolbar, Typography } from '@material-ui/core'; import GitHubIcon from '@material-ui/icons/GitHub'; import logo from './logo.svg'; import { SearchResultsMap } from './components/SearchResultsMap'; import { SearchResults } from './components/SearchResults'; import { FilterSummaryBox } from './components/FilterSummaryBox'; import { SearchTextBox } from './components/SearchTextBox'; import { Facets } from './components/Facets'; import { DetailsDialog } from './components/DetailsDialog'; import { LoginIcon } from './components/LoginIcon'; import { AppState } from './states/AppState'; const SidebarWidth = '300px'; // Main app page @observer export default class App extends React.Component<{ state: AppState }> { render(): JSX.Element { const state = this.props.state; return (<> <AppBar position="static" color="default"> <Toolbar> {state.searchResultsState.isInInitialState ? (<> <img src={logo} width="30px" alt=""/> <Box width={15} /> <Typography variant="h4" color="inherit"> Cognitive Search Demo </Typography> </>) : (<> <Link href="/" color="inherit"> <img src={logo} width="30px" alt=""/> </Link> <Box width={15} /> <Link href="/" color="inherit"> <TitleTypography variant="h6" color="inherit"> Cognitive Search Demo </TitleTypography> </Link> <Box width={15} /> <ToolbarSearchBoxDiv> <SearchTextBox state={state.searchResultsState} inProgress={state.inProgress} /> </ToolbarSearchBoxDiv> </>)} <Typography style={{ flex: 1 }} /> <Box width={30} /> <LoginIcon state={state.loginState}/> </Toolbar> <FilterDiv> <FilterSummaryBox state={state.searchResultsState.facetsState} inProgress={state.inProgress} /> </FilterDiv> </AppBar> {state.searchResultsState.isInInitialState ? (<LandingDiv> <SearchTextBox state={state.searchResultsState} inProgress={state.inProgress} /> <BottomBar position="fixed" color="transparent" ><Toolbar variant="dense"> <Typography style={{ flex: 1 }} /> <Button startIcon={<GitHubIcon />} href="https://github.com/scale-tone/cognitive-search-static-web-apps-sample-ui#cognitive-search-static-web-apps-sample" target="_blank" > Fork me on GitHub </Button> </Toolbar></BottomBar> </LandingDiv>) : (<> <Sidebar> <Facets state={state.searchResultsState.facetsState} inProgress={state.inProgress} /> </Sidebar> <Main> {!!state.mapResultsState && ( <SearchResultsMap state={state.mapResultsState} azureMapSubscriptionKey={state.serverSideConfig.AzureMapSubscriptionKey} geoRegion={state.searchResultsState.facetsState.geoRegion} geoRegionSelected={(points) => state.searchResultsState.facetsState.geoRegion = points} /> )} <SearchResults state={state.searchResultsState} inProgress={state.inProgress} /> </Main> </>)} {!!state.detailsState && ( <DetailsDialog state={state.detailsState} hideMe={() => state.hideDetails()} azureMapSubscriptionKey={state.serverSideConfig.AzureMapSubscriptionKey}/> )} </>); } } const BottomBar: typeof AppBar = styled(AppBar)({ top: 'auto', bottom: 0 }) const Sidebar = styled.div({ width: SidebarWidth, float: 'left', }) const Main = styled.div({ marginLeft: SidebarWidth }) const LandingDiv = styled.div({ margin: 150 }) const ToolbarSearchBoxDiv = styled.div({ width: '100%' }) const TitleTypography: typeof Typography = styled(Typography)({ width: 220 }) const FilterDiv = styled.div({ paddingLeft: SidebarWidth })