import { Button, Classes, H2, NonIdealState, Spinner } from "@blueprintjs/core"; import { IconNames } from "@blueprintjs/icons"; import { push } from "connected-react-router"; import React from "react"; import { connect } from "react-redux"; import { Dispatch } from "redux"; import styled from "styled-components"; import { updateSearch } from "../../redux/actions"; import { IAppState, ISearchResultInstance } from "../../redux/types"; import { SearchResult } from "../molecules"; const SearchContainer = styled.div` align-self: center; text-align: center; width: 100%; `; const SearchBarContainer = styled.div` width: 80%; margin: 0 auto; text-align: center; `; const SearchResults = styled.div` width: 100%; `; const StyledSpinner = styled(Spinner)` margin-top: 10px; `; interface ISearchScreenProps { error: boolean; isLoadingResults: boolean; query: string; hasMoreResults: boolean; results: ISearchResultInstance[]; handleSearch: (query: string) => void; navigateToInstance: (domain: string) => void; } interface ISearchScreenState { currentQuery: string; } class SearchScreen extends React.PureComponent { public constructor(props: ISearchScreenProps) { super(props); this.state = { currentQuery: "" }; } public componentDidMount() { if (this.props.query) { this.setState({ currentQuery: this.props.query }); } } public render() { const { error, hasMoreResults, results, isLoadingResults, query } = this.props; if (error) { return ; } else if (!isLoadingResults && query && results.length === 0) { return ( ); } return (

Find an instance

{this.renderSearchBar()} {results.map(result => ( ))} {isLoadingResults && } {!isLoadingResults && hasMoreResults && ( )}
); } private handleInputChange = (event: React.ChangeEvent) => { this.setState({ currentQuery: event.currentTarget.value }); }; private handleKeyPress = (event: React.KeyboardEvent) => { if (event.key === "Enter" && this.state.currentQuery !== this.props.query) { this.search(); } }; private search = () => { this.props.handleSearch(this.state.currentQuery); }; private selectInstanceFactory = (domain: string) => () => { this.props.navigateToInstance(domain); }; private renderSearchBar = () => ( ); } const mapStateToProps = (state: IAppState) => ({ error: state.search.error, hasMoreResults: !!state.search.next, isLoadingResults: state.search.isLoadingResults, query: state.search.query, results: state.search.results }); const mapDispatchToProps = (dispatch: Dispatch) => ({ handleSearch: (query: string) => dispatch(updateSearch(query) as any), navigateToInstance: (domain: string) => dispatch(push(`/instance/${domain}`)) }); export default connect( mapStateToProps, mapDispatchToProps )(SearchScreen);