Components/SearchResults/SearchResults.jsx

import React from "react";
import PropTypes from "prop-types";
import nextId from "react-id-generator";
import Paper from "@material-ui/core/Paper";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import MapMarkerIcon from "@material-ui/icons/LocationOn";

/**
 * The component that displays the station search results
 * @category RoutingMenu
 */
function SearchResults(props) {
  const { currentSearchResults, processClickedResultHandler } = props;
  if (currentSearchResults.length === 0) {
    return null;
  }
  return (
    <Paper square elevation={3}>
      <List component="nav" aria-label="search results">
        {currentSearchResults.map((searchResult, index) => {
          if (index !== 0) {
            return (
              <ListItem
                onClick={() => {
                  processClickedResultHandler(searchResult);
                }}
                button
                key={nextId()}
              >
                <ListItemIcon>
                  <MapMarkerIcon />
                </ListItemIcon>
                <ListItemText
                  primary={searchResult.properties.name}
                  secondary={`${searchResult.properties.code} - ${searchResult.properties.country_code}`}
                />
              </ListItem>
            );
          }
          // First item
          return (
            <ListItem
              onClick={() => processClickedResultHandler(searchResult)}
              button
              selected
              key={`searchResult-${searchResult.properties.name}`}
            >
              <ListItemIcon>
                <MapMarkerIcon />
              </ListItemIcon>
              <ListItemText
                primary={searchResult.properties.name}
                secondary={`${searchResult.properties.code} - ${searchResult.properties.country_code}`}
              />
            </ListItem>
          );
        })}
      </List>
    </Paper>
  );
}

SearchResults.propTypes = {
  currentSearchResults: PropTypes.arrayOf(PropTypes.object),
  processClickedResultHandler: PropTypes.func.isRequired
};

SearchResults.defaultProps = {
  currentSearchResults: []
};

export default SearchResults;