import React, { useContext } from 'react'; import {fade, makeStyles, useTheme} from '@material-ui/core/styles'; import {useHistory} from 'react-router-dom' import {AppBar as MaterialAppBar, Toolbar, Typography} from '@material-ui/core'; import {DonateLink} from './DonateLink'; import {SEARCH_INDEX_PATH} from '../../models/Earth'; import {SearchIndexComponent} from '../../models/SearchIndexComponent'; import {SearchInput} from './SearchInput'; import {SocialMediaButtons} from './SocialMediaButtons'; import {WorldContext} from '../../WorldContext'; import {fetchPrecisePoliticalLocation} from '../../GeoLocation' const RELIEF_COLOR = '#fff'; const useStyles = makeStyles(theme => ({ appBar: { color: RELIEF_COLOR, display: 'flex', }, nameAndSearch: { display: 'flex', alignItems: 'center', [theme.breakpoints.down('xs')]: { display: 'initial', }, }, appName: { overflow: 'visible', }, search: { marginLeft: theme.spacing(4), }, donations: { background: RELIEF_COLOR, borderRadius: '8px', display: 'block', marginLeft: '16px', padding: '6px 8px', textAlign: 'center', '&:hover': { color: theme.palette.primary.light, filter: `drop-shadow(0 0 2px ${fade(RELIEF_COLOR, 0.95)})`, textDecoration: 'none', transform: 'translateY(-1px)', }, }, expander: { flexGrow: 1, }, socialButtons: { fontSize: '1.5625em', lineHeight: '1em', whiteSpace: 'nowrap', '& > *': { marginLeft: '4px', verticalAlign: 'middle', } }, socialButton: { '&:hover': { filter: `drop-shadow(0 0 2px ${fade(RELIEF_COLOR, 0.95)})`, transform: 'translateY(-1px)', }, }, actions: { alignItems: 'center', display: 'flex', flexWrap: 'wrap', flexShrink: 2, justifyContent: 'flex-end', textAlign: 'end', }, })); export const AppBar = (props) => { const classes = useStyles(); const theme = useTheme(); return ( <MaterialAppBar position="relative"> <Toolbar className={classes.appBar}> <div className={classes.nameAndSearch}> <Typography noWrap className={classes.appName} variant="h6"> COVID-19.direct </Typography> <NavigatingSearchInput className={`${classes.search} ${classes.expander}`} /> </div> <div className={classes.expander} /> <div className={classes.actions}> <SocialMediaButtons backgroundColor="#fff" buttonClassName={classes.socialButton} className={classes.socialButtons} iconColor={theme.palette.primary.main} /> <DonateLink className={classes.donations} message="Buy us a coffee!" /> </div> </Toolbar> </MaterialAppBar> ); }; const NavigatingSearchInput = (props) => { const history = useHistory(); const world = useContext(WorldContext); const navigate = (path) => { history.push("/country" + path.string()); }; const locationLookup = async () => { const search = world.get(SEARCH_INDEX_PATH, SearchIndexComponent); const location = await fetchPrecisePoliticalLocation(); if (!search) { return; } let terms = []; if (location.county && location.stateName) { terms.push(location.county, location.stateName); } terms.push(location.country) const allMatches = search.search(terms.join(", ")); if (allMatches && allMatches.length > 0) { history.push("/country" + allMatches[0].path.string()) } } return ( <SearchInput onChoice={navigate} onGeolocate={locationLookup} {...props} /> ); };