From ed1fffca88c2eb74800bedb87126176dd894237b Mon Sep 17 00:00:00 2001
From: Ahmed-Ayman <ahmedayman055g@gmail.com>
Date: Thu, 13 Dec 2018 18:19:33 +0200
Subject: [PATCH] fix #14 create the all topics page with the filter.

---
 src/App.js                            |  4 +-
 src/actions/topics.js                 |  6 ++-
 src/components/RandomTopic.js         | 21 ++++------
 src/components/TopicsList.js          | 57 +++++++++++++++++++++++++++
 src/containers/TopicsList.js          | 24 -----------
 src/containers/TopicsListContainer.js | 46 +++++++++++++++++++++
 src/stylesheets/globals.scss          |  2 +-
 src/stylesheets/items-list.scss       | 24 +++++++++++
 src/stylesheets/search.scss           |  8 ++++
 src/stylesheets/style.scss            |  1 +
 src/utils/api.js                      |  5 ++-
 11 files changed, 155 insertions(+), 43 deletions(-)
 create mode 100644 src/components/TopicsList.js
 delete mode 100644 src/containers/TopicsList.js
 create mode 100644 src/containers/TopicsListContainer.js
 create mode 100644 src/stylesheets/items-list.scss

diff --git a/src/App.js b/src/App.js
index 35acff7..9f5ab8f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,7 +5,7 @@ import './App.css';
 import 'font-awesome/css/font-awesome.min.css';
 import { Route, Switch } from 'react-router-dom';
 import Home from './containers/Home';
-import TopicsList from './containers/TopicsList';
+import TopicsListContainer from './containers/TopicsListContainer';
 import store from './store/configureStore';
 import history from './history';
 import Header from "./components/Header";
@@ -25,7 +25,7 @@ class App extends Component {
             <Search/>
             <Switch>
               <Route exact={true} path="/" component={Home}/>
-              <Route path="/topics" component={TopicsList}/>
+              <Route path="/topics" component={TopicsListContainer}/>
               <Route path="/videos/:videoId" component={Video}/>
             </Switch>
             <Nav/>
diff --git a/src/actions/topics.js b/src/actions/topics.js
index 8ef07e9..7712115 100644
--- a/src/actions/topics.js
+++ b/src/actions/topics.js
@@ -13,6 +13,7 @@ import {
 export function getAllTopics() {
   return dispatch => {
     dispatch(startLoadingAllTopics());
+    // this calls the API
     fetchAllTopics()
       .then(topics => {
         dispatch(loadedTopics(topics));
@@ -29,6 +30,7 @@ function startLoadingAllTopics() {
 };
 
 function loadedTopics(topics) {
+  // cache
   setItem('allTopics', JSON.stringify(topics));
   setItem('topicsUpdatedAt', new Date());
   return {
@@ -36,7 +38,9 @@ function loadedTopics(topics) {
     payload: topics
   };
 };
-
+// actions :
+// - async actions
+// - simple: return action type and payload.
 export function getRandomTopicVideos(allTopics, numVideos=4) {
   return dispatch => {
     const randomTopic = getRandomTopic(allTopics);
diff --git a/src/components/RandomTopic.js b/src/components/RandomTopic.js
index 2db07ca..34bcdd8 100644
--- a/src/components/RandomTopic.js
+++ b/src/components/RandomTopic.js
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import VideoItem from "./VideoItem";
 import RandomItemTitle from "./SectionHeading";
-
+import {Link} from 'react-router-dom';
 class RandomTopic extends React.Component {
 
   shuffleTopic() {
@@ -22,13 +22,14 @@ class RandomTopic extends React.Component {
           width={450}
         >
           {/* View all topics button*/}
-          <button className="view-all-topics" onClick="">
-            <span className="english-text">All Topics - </span>
-            <span className="arabic-text"> جميع المواضيع </span>
-
-          </button>
+          <Link to="/topics">
+            <button className="view-all-topics">
+              <span className="english-text">All Topics - </span>
+              <span className="arabic-text"> جميع المواضيع </span>
+            </button>
+          </Link>
           {/* Shuffle button */}
-          <button className="shuffle-button" onClick={ this.shuffleTopic.bind(this) }>
+          <button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
             <span className="english-text">Shuffle Topics - </span>
             <span className="arabic-text"> موضوع عشوائي </span>
             <i className="fa fa-random"></i>
@@ -41,12 +42,6 @@ class RandomTopic extends React.Component {
           {this.props.videos.map(video =>
             <VideoItem id={video.id} key={video.id} title={video.title}/>
           )}
-          {/*<Link to="/topics">*/}
-          {/*<span className="view-all-parents">See All Topics</span>*/}
-          {/*</Link>*/}
-          {/*<Link to="/topics">*/}
-          {/*<span className="view-all-items">  See All videos of {this.props.topicName} ({this.props.topicCount})</span>*/}
-          {/*</Link>*/}
         </Grid>
       </section>
 
diff --git a/src/components/TopicsList.js b/src/components/TopicsList.js
new file mode 100644
index 0000000..2733fd9
--- /dev/null
+++ b/src/components/TopicsList.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+class TopicsList extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      currentFilter: "",
+      filteredTopics: [],
+    }
+  }
+
+  componentDidMount() {
+    this.setState({
+      filteredTopics: this.props.allTopics
+    })
+  }
+
+  filterTopics(event) {
+    // find the topics that contain that string
+    // return filtered topics.
+    // this.
+    const input = event.target.value.toLowerCase();
+    this.setState({
+      filteredTopics: this.props.allTopics.filter(topic => topic.name.toLowerCase().indexOf(input) !== -1)
+    })
+  }
+
+  render() {
+    return (
+      <main className="topics-list">
+        <section className="filter-box">
+          <label className="label" htmlFor="search-topics">
+            <i className="fa fa-filter">&nbsp;</i>
+            Filter Topics : &nbsp;
+            <input type="text" id="search-topics" ref="filter-element" onChange={event => this.filterTopics(event)}/>
+          </label>
+        </section>
+
+        {this.state.filteredTopics.map(topic => {
+            return (
+
+              <section className="topic-item" key={topic.name}>
+                <Link to={"/topic/" + topic.name}>
+                  <h3>{topic.name} ({topic.items} videos)</h3>
+                </Link>
+              </section>
+            )
+          }
+        )}
+      </main>
+    )
+  }
+}
+
+
+export default TopicsList;
\ No newline at end of file
diff --git a/src/containers/TopicsList.js b/src/containers/TopicsList.js
deleted file mode 100644
index c3052c8..0000000
--- a/src/containers/TopicsList.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import VideoItem from "../components/VideoItem";
-import Grid from "react-css-grid";
-import SectionHeading from "../components/SectionHeading";
-
-class TopicsList extends React.Component {
-  render() {
-    return (
-      <section>
-        <SectionHeading title="Random Topic"/>
-        <Grid
-          width={450}
-          gap={24}>
-          <VideoItem/>
-          <VideoItem/>
-          <VideoItem/>
-          <VideoItem/>
-        </Grid>
-      </section>
-    );
-  }
-}
-
-export default TopicsList;
\ No newline at end of file
diff --git a/src/containers/TopicsListContainer.js b/src/containers/TopicsListContainer.js
new file mode 100644
index 0000000..f832825
--- /dev/null
+++ b/src/containers/TopicsListContainer.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import SectionHeading from "../components/SectionHeading";
+import TopicsList from "../components/TopicsList";
+import {getAllTopics} from "../actions/topics";
+import  {connect} from 'react-redux'
+class TopicsListContainer extends React.Component {
+  componentDidMount(){
+    // if the data isn't there call the action.
+    if (!this.props.allTopics){
+      this.props.getAllTopics();
+    }
+  }
+  render() {
+    return (
+      <section>
+        <SectionHeading title="All Topics"/>
+        {/* TODO: get the topics objects*/}
+        <TopicsList allTopics={this.props.allTopics}/>
+      </section>
+    );
+  }
+}
+
+// function ->
+// - recieves the global state.
+// - maps the global state to the local props of the component.
+// - maps the global actions to the local props of the component.
+/**
+ *
+ * @param state
+ * @returns object
+ */
+const mapStateToProps = state => ({
+  allTopics: state.topics.allTopics,
+  loadingAllTopics: state.topics.loadingAllTopics,
+});
+/**
+ *
+ * @param dispatch: Redux's action dispatcher.
+ * @returns {{}}
+ */
+const mapDispatchToProps = dispatch => ({
+  getAllTopics: () => dispatch(getAllTopics()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TopicsListContainer);
\ No newline at end of file
diff --git a/src/stylesheets/globals.scss b/src/stylesheets/globals.scss
index 0225a83..13c0f17 100644
--- a/src/stylesheets/globals.scss
+++ b/src/stylesheets/globals.scss
@@ -80,4 +80,4 @@ a {
 .normal-link{
   text-decoration: underline;
   color: $normal-link-color;
-}
\ No newline at end of file
+}
diff --git a/src/stylesheets/items-list.scss b/src/stylesheets/items-list.scss
new file mode 100644
index 0000000..5dae8a3
--- /dev/null
+++ b/src/stylesheets/items-list.scss
@@ -0,0 +1,24 @@
+@import "variables";
+@import "globals";
+
+#search-topics {
+  padding: 1em;
+  border: .5px solid gray;
+}
+
+.label {
+  font-size: 1.5em;
+}
+
+.topic-item {
+  h3 {
+    text-align: left;
+    padding: 1em;
+    font-size: 30px;
+  }
+  border-left: 2px solid black;
+  border-bottom: 6px solid black;
+  max-width: 1000px;
+  margin-bottom: 2em;
+}
+
diff --git a/src/stylesheets/search.scss b/src/stylesheets/search.scss
index cf8039a..c25802c 100644
--- a/src/stylesheets/search.scss
+++ b/src/stylesheets/search.scss
@@ -37,4 +37,12 @@
     .search-box::placeholder {
         font-size: .75em;
     }
+}
+
+// filter
+.filter-box{
+    background: $light-gray-color;
+    padding: 1em;
+    margin-bottom: 2em;
+    text-align: left;
 }
\ No newline at end of file
diff --git a/src/stylesheets/style.scss b/src/stylesheets/style.scss
index 4deedde..3d440d4 100644
--- a/src/stylesheets/style.scss
+++ b/src/stylesheets/style.scss
@@ -7,4 +7,5 @@
 @import "video-item";
 @import "video-player";
 @import "footer";
+@import "items-list";
 @import "~video-react/styles/scss/video-react";
\ No newline at end of file
diff --git a/src/utils/api.js b/src/utils/api.js
index 14f2b21..c1c8ec2 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -30,7 +30,7 @@ export function callApi(action, data) {
     method: 'POST',
     body: formData
   })
-  .then(response => response.json())
+  .then(response => response.json()) // convert the response to json (instead of response object).
   .then(data => {
     if (data.status.code === 200) {
       return data.data;
@@ -50,6 +50,7 @@ export function callApi(action, data) {
   @returns {Promise<Array>} array of topic objects like: {'name': '<topicName>', 'items': <no_of_items>}
 */
 export function fetchAllTopics(startRange=0, endRange=1000) {
+  // the object that we need to send to the api
   const data = {
     "query": {
       "conditions": [],
@@ -209,7 +210,7 @@ export function fetchRandomPlace() {
       "operator": "-"
     }]
   };
-  return callApi('findPlaces', data).then(data => data.items[0]);  
+  return callApi('findPlaces', data).then(data => data.items[0]);
 }
 
 export function fetchVideosByPlace(placeId, startRange=0, endRange=100, sortKey='random') {