fix search results page for topics

This commit is contained in:
Sanjay Bhangar 2018-12-20 18:11:53 +05:30
parent 14d9c925f2
commit 8c66fb0251
4 changed files with 23 additions and 21 deletions

View File

@ -1,7 +1,8 @@
import {LOADED_ALL_RESULTS, LOADED_ALL_TOPICS, START_LOADING_ALL_RESULTS} from "./action_types";
import {fetchAllTopics} from "../utils/api";
import {fetchVideosByTopic} from "../utils/api";
import {APIError} from "./errors";
import {setItem} from "../utils/safe-storage";
export function getSearchResults(categoryKey, searchValue) {
// get the stuff from the api
// dispatch loaded
@ -12,9 +13,9 @@ export function getSearchResults(categoryKey, searchValue) {
return dispatch => {
dispatch(loadingAllResults())
// this calls the API
fetchAllTopics()
.then(topics => {
dispatch(loadedTopics(topics));
fetchVideosByTopic(searchValue)
.then(videos => {
dispatch(loadedResults(videos));
}).catch(error => {
dispatch(APIError(error));
})
@ -29,15 +30,14 @@ export function getSearchResults(categoryKey, searchValue) {
}
function loadingAllResults() {
return {
type: START_LOADING_ALL_RESULTS
}
}
function loadedTopics(topics) {
// cache
setItem('allTopics', JSON.stringify(topics));
setItem('topicsUpdatedAt', new Date());
function loadedResults(videos) {
return {
type: LOADED_ALL_RESULTS,
payload: topics
payload: videos
};
};

View File

@ -40,7 +40,7 @@ class TopicsList extends React.Component {
{this.state.filteredTopics.map(topic => {
return (
<section className="topic-item" key={topic.name}>
<Link to={"/topic/" + topic.name}>
<Link to={"/results/topic/" + topic.name}>
<h3>{topic.name} ({topic.items} videos)</h3>
</Link>
</section>

View File

@ -11,16 +11,18 @@ class Results extends React.Component {
// get params from url
const categoryKey = this.props.match.params.categoryKey;
const searchValue = this.props.match.params.searchValue;
console.log(categoryKey)
console.log(searchValue)
//FIXME: first check if current key / value / results is already in state
this.props.getSearchResults(categoryKey, searchValue);
}
render() {
console.log('results', this.props.searchResults);
return (
<Grid className="random-topics"
width={220}
gap={12}>
{this.props.searchResults.map(video =>
{this.props.searchResults && this.props.searchResults.map(video =>
<VideoItem id={video.id} key={video.id} title={video.title}/>
)}
</Grid>
@ -29,10 +31,10 @@ class Results extends React.Component {
}
const mapStateToProps = state => ({
searchResults: this.state.results.currentItems,
currentKey: this.state.results.currentKey,
currentValue: this.state.results.currentValue,
currentQuery: this.state.results.queryParams
searchResults: state.results.currentItems,
currentKey: state.results.currentKey,
currentValue: state.results.currentValue,
currentQuery: state.results.queryParams
});
const mapDispatchToProps = dispatch => ({

View File

@ -9,5 +9,5 @@ export default (history) => combineReducers({
router: connectRouter(history),
topics: TopicsReducer,
videos: VideosReducer,
searchResults: SearchReducer,
results: SearchReducer,
});