fix search results page for topics

src/actions/search.js

@@ -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
   };
 };

src/components/TopicsList.js

@@ -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>

src/containers/Results.js

@@ -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 => ({

src/reducers/index.js

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