Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | import * as React from 'react'; import { Query } from 'react-apollo'; import styled from 'styled-components'; import { IArticle } from '../../../../shared'; import { SHOW_ADS } from '../../../../shared/config'; import ListItem from '../../article/list/ListItem'; import ErrorMessage from '../../components/ErrorMessage'; import Helmet from '../../components/Helmet'; import Loader from '../../components/Loader'; import LoadMoreContainer from '../../components/LoadMoreContainer'; import Page from '../../components/Page'; import { SEARCH_ARTICLE_COUNT, SEARCH_ARTICLES } from '../../search/queries'; interface IProps { match: { params: { searchText: string; }; }; } const List = ({ dataSource }: any) => ( <div> {dataSource.searchArticles.map((article: IArticle) => ( <ListItem key={article._id} {...article} /> ))} </div> ); const Message = styled.div` text-align: center; font-size: 16px; `; const pluralizeArticle = (count: number) => { if (count === 1) { return 'článek'; } else if (count > 1 && count <= 4) { return 'články'; } else { return 'článků'; } }; const pluralizeFoundArticle = (count: number) => { if (count === 1) { return 'Nalezen'; } else if (count > 1 && count <= 4) { return 'Nalezeny'; } else { return 'Nalezeno'; } }; const Root = styled.div` display: flex; `; const Ad = styled.div` width: 300px; height: 600px; background: #aaa; margin: 0 12px; `; const ResultList = styled.div` width: 100%; `; const SearchResult = ({ match }: IProps) => ( <Page> <Root> <ResultList> <Query query={SEARCH_ARTICLE_COUNT} variables={{ searchText: match.params.searchText }} > {({ loading, error, data }) => { if (error) { return <ErrorMessage message={error.message} />; } if (loading) { return <Loader />; } return ( <React.Fragment> <Helmet title={`Vyhledávání: ${match.params.searchText}`} /> <Message> {pluralizeFoundArticle(data.searchArticleCount)}{' '} <strong>{data.searchArticleCount}</strong>{' '} {pluralizeArticle(data.searchArticleCount)} obsahující{' '} <strong>"{match.params.searchText}"</strong> </Message> <LoadMoreContainer size={data.searchArticleCount} listComponent={List} query={SEARCH_ARTICLES} queryVariables={{ searchText: match.params.searchText, }} /> </React.Fragment> ); }} </Query> </ResultList> {SHOW_ADS && <Ad>Reklama</Ad>} </Root> </Page> ); export default SearchResult; |