Improve app bar

src/client/components/main_layout/SearchField.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import SearchIcon from '@material-ui/icons/Search';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import FormControl from '@material-ui/core/FormControl';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const styles = theme => ({
+  textSearch: {
+    margin: theme.spacing.unit,
+  },
+});
+
+class SearchField extends React.Component {
+  state = {
+    value: '',
+  };
+
+  componentDidUpdate = prevProps => {
+    if (prevProps.search.query != this.props.search.query) {
+      this.setState({
+        value: this.props.search.query
+      });
+    }
+  }
+
+  handleChange = (event) => {
+    this.setState({ value: event.target.value });
+  };
+
+  handleMouseDown = (event) => {
+    event.preventDefault();
+  };
+
+  handleOnKeyDown = (event) => {
+    if (event.key === 'Enter' && this.hasDatasets() && this.hasValidQuery()) {
+      this.props.clearResults();
+      this.props.updateQuery(this.state.value);
+      this.props.fetchResults('text', this.state.value);
+    }
+  };
+
+  handleClick = () => {
+    if (this.hasDatasets() && this.hasValidQuery()) {
+      this.props.clearResults();
+      this.props.updateQuery(this.state.value);
+      this.props.fetchResults('text', this.state.value);
+    }
+  };
+
+  hasDatasets = () => {
+    let hasDs = false;
+    Object.values(this.props.datasets).forEach(value => {
+      if (value.selected) {
+        hasDs = true;
+      }
+    });
+    return hasDs;
+  }
+
+  hasValidQuery = () => {
+    return this.state.value.length > 2;
+  }
+
+  render() {
+    const { classes, strings } = this.props;
+    let searchButton = null;
+    if (this.props.search.textResultsFetching) {
+      searchButton = (
+        <IconButton
+          aria-label="Search places"
+        >
+          <CircularProgress size={24} />
+        </IconButton>
+      );
+    } else {
+      searchButton = (
+        <IconButton
+          aria-label="Search"
+          onClick={this.handleClick}
+          onMouseDown={this.handleMouseDown}
+        >
+          <SearchIcon />
+        </IconButton>
+      );
+    }
+
+    return (
+      <div className={classes.root}>
+        <FormControl className={classes.textSearch}>
+          <InputLabel htmlFor="adornment-search">{strings.searchPlaceNames}</InputLabel>
+          <Input
+            id="adornment-search"
+            type='text'
+            value={this.state.value}
+            onChange={this.handleChange}
+            onKeyDown={this.handleOnKeyDown}
+            endAdornment={
+              <InputAdornment position="end">
+                {searchButton}
+              </InputAdornment>
+            }
+          />
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+SearchField.propTypes = {
+  classes: PropTypes.object.isRequired,
+  search: PropTypes.object.isRequired,
+  fetchResults: PropTypes.func.isRequired,
+  clearResults: PropTypes.func.isRequired,
+  updateQuery: PropTypes.func.isRequired,
+  datasets: PropTypes.object.isRequired,
+  strings: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(SearchField);

src/client/components/main_layout/TopBar.js

@@ -5,16 +5,11 @@ import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
 import InputBase from '@material-ui/core/InputBase';
-import Badge from '@material-ui/core/Badge';
 import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
-//§import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
-import AccountCircle from '@material-ui/icons/AccountCircle';
-import MailIcon from '@material-ui/icons/Mail';
-import NotificationsIcon from '@material-ui/icons/Notifications';
 import MoreIcon from '@material-ui/icons/MoreVert';
 import Button from '@material-ui/core/Button';
 import { Link, NavLink } from 'react-router-dom';
@@ -119,23 +114,12 @@ class TopBar extends React.Component {
   };
 
   render() {
-    const { anchorEl, mobileMoreAnchorEl } = this.state;
+    const { mobileMoreAnchorEl } = this.state;
     const { classes } = this.props;
-    const isMenuOpen = Boolean(anchorEl);
     const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
 
-    const renderMenu = (
-      <Menu
-        anchorEl={anchorEl}
-        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-        open={isMenuOpen}
-        onClose={this.handleMenuClose}
-      >
-        <MenuItem onClick={this.handleMenuClose}>Profile</MenuItem>
-        <MenuItem onClick={this.handleMenuClose}>My account</MenuItem>
-      </Menu>
-    );
+    const perspectives = [ 'manuscripts', 'works', 'events', 'people',
+      'organizations', 'places' ];
 
     const renderMobileMenu = (
       <Menu
@@ -145,76 +129,18 @@ class TopBar extends React.Component {
         open={isMobileMenuOpen}
         onClose={this.handleMobileMenuClose}
       >
-        <MenuItem>
-          <IconButton color="inherit">
-            <Badge badgeContent={4} color="secondary">
-              <MailIcon />
-            </Badge>
-          </IconButton>
-          <p>Messages</p>
-        </MenuItem>
-        <MenuItem>
-          <IconButton color="inherit">
-            <Badge badgeContent={11} color="secondary">
-              <NotificationsIcon />
-            </Badge>
-          </IconButton>
-          <p>Notifications</p>
-        </MenuItem>
-        <MenuItem onClick={this.handleProfileMenuOpen}>
-          <IconButton color="inherit">
-            <AccountCircle />
-          </IconButton>
-          <p>Profile</p>
-        </MenuItem>
+        {perspectives.map(perspective =>
+          <MenuItem
+            key={perspective}
+            component={Link}
+            to={`/${perspective}`}
+          >
+            {perspective.toUpperCase()}
+          </MenuItem>
+        )}
       </Menu>
     );
 
-    const ManuscriptsLink = props => (
-      <NavLink
-        to="/manuscripts"
-        className={classes.appBarButton}
-        isActive={(match, location) => location.pathname.startsWith('/manuscripts')}
-        activeClassName={classes.appBarButtonActive}
-        {...props}
-      />);
-
-    const WorksLink = props => (
-      <NavLink
-        to="/works"
-        className={classes.appBarButton}
-        isActive={(match, location) => location.pathname.startsWith('/works')}
-        activeClassName={classes.appBarButtonActive}
-        {...props}
-      />);
-
-    const PeopleLink = props => (
-      <NavLink
-        to="/people"
-        className={classes.appBarButton}
-        isActive={(match, location) => location.pathname.startsWith('/people')}
-        activeClassName={classes.appBarButtonActive}
-        {...props}
-      />);
-
-    const OrganizationsLink = props => (
-      <NavLink
-        to="/organizations"
-        className={classes.appBarButton}
-        isActive={(match, location) => location.pathname.startsWith('/organizations')}
-        activeClassName={classes.appBarButtonActive}
-        {...props}
-      />);
-
-    const PlacesLink = props => (
-      <NavLink
-        to="/places"
-        className={classes.appBarButton}
-        isActive={(match, location) => location.pathname.startsWith('/places')}
-        activeClassName={classes.appBarButtonActive}
-        {...props}
-      />);
-
     return (
       <div className={classes.root}>
         <AppBar position="absolute">
@@ -243,32 +169,18 @@ class TopBar extends React.Component {
             </div>
             <div className={classes.grow} />
             <div className={classes.sectionDesktop}>
-              <Button
-                className={classes.appBarButton}
-                component={ManuscriptsLink}>
-                manuscripts
-              </Button>
-              <Button
-                className={classes.appBarButton}
-                component={WorksLink}>
-                works
-              </Button>
-              <Button disabled className={classes.appBarButton}>Events</Button>
-              <Button
-                className={classes.appBarButton}
-                component={PeopleLink}>
-                people
-              </Button>
-              <Button
-                className={classes.appBarButton}
-                component={OrganizationsLink}>
-                organizations
-              </Button>
-              <Button
-                className={classes.appBarButton}
-                component={PlacesLink}>
-                places
-              </Button>
+              {perspectives.map(perspective =>
+                <Button
+                  key={perspective}
+                  className={classes.appBarButton}
+                  component={NavLink}
+                  to={`/${perspective}`}
+                  isActive={(match, location) => location.pathname.startsWith(`/${perspective}`)}
+                  activeClassName={classes.appBarButtonActive}
+                >
+                  {perspective}
+                </Button>
+              )}
             </div>
             <div className={classes.sectionMobile}>
               <IconButton aria-haspopup="true" onClick={this.handleMobileMenuOpen} color="inherit">
@@ -277,7 +189,6 @@ class TopBar extends React.Component {
             </div>
           </Toolbar>
         </AppBar>
-        {renderMenu}
         {renderMobileMenu}
       </div>
     );
@@ -289,42 +200,3 @@ TopBar.propTypes = {
 };
 
 export default withStyles(styles)(TopBar);
-
-// <IconButton
-//   className={classes.menuButton}
-//   color="inherit"
-//   aria-label="Menu"
-//   onClick={this.handleClick}
-// >
-//   <MenuIcon />
-// </IconButton>
-//
-// <Menu
-//   id="simple-menu"
-//   anchorEl={anchorEl}
-//   open={Boolean(anchorEl)}
-//   onClose={this.handleClose}
-// >
-//   <div className={classes.menuContent}>
-//
-//
-//     <FormControl component="fieldset" className={classes.formControl}>
-//       <FormLabel component="legend">Map mode</FormLabel>
-//       <RadioGroup
-//         className={classes.formGroup}
-//         aria-label="Map mode"
-//         name="map"
-//         value={this.props.mapMode}
-//         onChange={this.handleChange}
-//       >
-//         <FormControlLabel value="cluster" control={<Radio />} label="Clustered markers" />
-//         <FormControlLabel value="noCluster" control={<Radio />} label="Markers" />
-//
-//       </RadioGroup>
-//     </FormControl>
-//
-//
-//
-//   </div>
-//
-// </Menu>