858/frontend
1
0
Fork 0
Code Issues 11 Pull Requests Releases Wiki Activity

fix search results page for topics

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/actions/search.js
View File

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

2
src/components/TopicsList.js
View File

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

16
src/containers/Results.js
View File

@ -11,16 +11,18 @@ class Results extends React.Component {
// get params from url // get params from url
const categoryKey = this.props.match.params.categoryKey; const categoryKey = this.props.match.params.categoryKey;
const searchValue = this.props.match.params.searchValue; 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() { render() {
console.log('results', this.props.searchResults);
return ( return (
<Grid className="random-topics" <Grid className="random-topics"
width={220} width={220}
gap={12}> 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}/> <VideoItem id={video.id} key={video.id} title={video.title}/>
)} )}
</Grid> </Grid>
@ -29,10 +31,10 @@ class Results extends React.Component {
} }
const mapStateToProps = state => ({ const mapStateToProps = state => ({
searchResults: this.state.results.currentItems, searchResults: state.results.currentItems,
currentKey: this.state.results.currentKey, currentKey: state.results.currentKey,
currentValue: this.state.results.currentValue, currentValue: state.results.currentValue,
currentQuery: this.state.results.queryParams currentQuery: state.results.queryParams
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({

2
src/reducers/index.js
View File

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