create the results page action,reducer

src/App.js

@@ -13,10 +13,10 @@ import Footer from "./components/Footer";
 import Search from "./components/Search";
 import Nav from "./components/Nav";
 import Video from "./containers/Video";
+import Results from "./containers/Results";
 
 class App extends Component {
   render() {
-    console.log('store', history, store);
     return (
       <Provider store={store}>
         <ConnectedRouter history={ history }>
@@ -26,7 +26,7 @@ class App extends Component {
             <Switch>
               <Route exact={true} path="/" component={Home}/>
               <Route path="/topics" component={TopicsListContainer}/>
-              {/*<Route path="/results/:categoryKey/:searchValue" component={Results}/>*/}
+              <Route path="/results/:categoryKey/:searchValue" component={Results}/>
               <Route path="/videos/:videoId" component={Video}/>
             </Switch>
             <Nav/>

src/actions/search.js

@@ -1,12 +1,43 @@
-import {LOADED_ALL_RESULTS,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";
-export function getAllResuts(categoryKey, searchValue){
+import {APIError} from "./errors";
+import {setItem} from "../utils/safe-storage";
+export function getSearchResults(categoryKey, searchValue) {
   // get the stuff from the api
-  // dispatch loaded 
+  // dispatch loaded
-  return dispatch => {
+
-    dispatch(loadingAllResults())
+  switch (categoryKey) {
+    case 'topic':
+      console.log('topic')
+      return dispatch => {
+        dispatch(loadingAllResults())
+        // this calls the API
+        fetchAllTopics()
+          .then(topics => {
+            dispatch(loadedTopics(topics));
+          }).catch(error => {
+          dispatch(APIError(error));
+        })
+      };
+    case 'date':
+      console.log('date')
+    case 'location':
+      console.log('location')
+    default:
+      console.log('none')
   }
+
 }
 function loadingAllResults() {
   
-}
+}
+
+function loadedTopics(topics) {
+  // cache
+  setItem('allTopics', JSON.stringify(topics));
+  setItem('topicsUpdatedAt', new Date());
+  return {
+    type: LOADED_ALL_TOPICS,
+    payload: topics
+  };
+};

src/containers/Results.js

@@ -1,26 +1,59 @@
 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 => ({
-  searchResults: (categoryKey, searchValue)  => dispatch(getSearchResults(categoryKey, searchValue)),
+  // the category key is either {topic, date, date}
+  // the search value could be something like 25th-jan.
+  getSearchResults: (categoryKey, searchValue) => dispatch(getSearchResults(categoryKey, searchValue)),
 });
 
-export default;
+// 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);

src/reducers/index.js

@@ -2,10 +2,12 @@ import { combineReducers } from 'redux';
 
 import TopicsReducer from './topics';
 import VideosReducer from './videos';
-import { connectRouter } from 'connected-react-router'
+import SearchReducer from './search';
 
+import { connectRouter } from 'connected-react-router'
 export default (history) => combineReducers({
   router: connectRouter(history),
   topics: TopicsReducer,
-  videos: VideosReducer
+  videos: VideosReducer,
+  searchResults: SearchReducer,
 });

src/reducers/search.js

@@ -0,0 +1,21 @@
+import { 
+  START_LOADING_ALL_RESULTS,
+  LOADED_ALL_RESULTS
+} from '../actions/action_types';
+
+export default function(state={}, action) {
+  switch (action.type) {
+
+    case START_LOADING_ALL_RESULTS:
+      return Object.assign({}, state, { loadingAllTopics: true });
+
+    case LOADED_ALL_RESULTS:
+      return Object.assign({}, state, {
+        loadingAllTopics: false,
+        currentItems: action.payload
+      });
+
+    default:
+      return state;
+  }
+};