59 lines
No EOL
1.9 KiB
JavaScript
59 lines
No EOL
1.9 KiB
JavaScript
import React from 'react';
|
|
import Grid from "react-css-grid";
|
|
import VideoItem from "../components/VideoItem";
|
|
import PropTypes from "prop-types";
|
|
import {getSearchResults} from "../actions/search";
|
|
import connect from "react-redux/es/connect/connect";
|
|
|
|
class Results extends React.Component {
|
|
|
|
componentDidMount() {
|
|
// get params from url
|
|
const categoryKey = this.props.match.params.categoryKey;
|
|
const searchValue = this.props.match.params.searchValue;
|
|
console.log(categoryKey)
|
|
console.log(searchValue)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Grid className="random-topics"
|
|
width={220}
|
|
gap={12}>
|
|
{this.props.searchResults.map(video =>
|
|
<VideoItem id={video.id} key={video.id} title={video.title}/>
|
|
)}
|
|
</Grid>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = state => ({
|
|
searchResults: this.state.results.currentItems,
|
|
currentKey: this.state.results.currentKey,
|
|
currentValue: this.state.results.currentValue,
|
|
currentQuery: this.state.results.queryParams
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
// the category key is either {topic, date, date}
|
|
// the search value could be something like 25th-jan.
|
|
getSearchResults: (categoryKey, searchValue) => dispatch(getSearchResults(categoryKey, searchValue)),
|
|
});
|
|
|
|
// each result page has :
|
|
// - currentKey: 858.ma/{key}/ where key could be like 'topic'
|
|
// - currentValue: 858.ma/topic/{value} where value could be like 'alaa abd al fatah'
|
|
// - currentQuery: 858.ma/{query} ?? not getting this! @TODO: clarify this please.
|
|
// - currentItems: the list of items/videos.
|
|
Results.propTypes = {
|
|
// the category key is either a {topic, location, date}.
|
|
currentKey: PropTypes.string,
|
|
currentValue: PropTypes.string,
|
|
currentItems: PropTypes.array,
|
|
loading: PropTypes.bool,
|
|
categoryItemCount: PropTypes.number,
|
|
getSearchResults: PropTypes.func
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Results); |