fix #22 add related videos section for video player

src/components/RelatedVideos.js

@@ -0,0 +1,50 @@
+import Grid from 'react-css-grid'
+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() {
+    this.props.getRandomTopicVideos(this.props.allTopics);
+  }
+
+  render() {
+    return (
+      <section>
+        <h2 className="section-subheading">Related Videos</h2>
+        <Grid
+          width={450}
+        >
+          {/* Shuffle button */}
+          <button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
+            <span className="english-text">Shuffle Videos - </span>
+            <span className="arabic-text"> ضربة حظ </span>
+            <i className="fa fa-random"></i>
+          </button>
+        </Grid>
+
+        <Grid className="random-topics"
+              width={220}
+              gap={12}>
+          {this.props.videos.map(video =>
+            <VideoItem id={video.id} key={video.id} title={video.title}/>
+          )}
+        </Grid>
+      </section>
+
+    )
+  }
+}
+
+RandomTopic.propTypes = {
+  topicName: PropTypes.string,
+  allTopics: PropTypes.array,
+  videos: PropTypes.array,
+  loading: PropTypes.bool,
+  topicCount: PropTypes.number,
+  getRandomTopicVideos: PropTypes.func
+};
+
+export default (RandomTopic);

src/components/VideoPlayer.js

@@ -1,27 +1,70 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {getVideo} from '../utils/video';
-import { Player } from 'video-react';
+import {Player} from 'video-react';
+import RelatedVideos from "./RelatedVideos";
+import {getAllTopics, getRandomTopicVideos} from "../actions/topics";
+import connect from "react-redux/es/connect/connect";
+
 class VideoPlayer extends React.Component {
+  componentDidMount() {
+    if (this.props.allTopics && this.props.allTopics.length > 0 && !this.props.randomTopic) {
+      this.props.getRandomTopicVideos(this.props.allTopics);
+    } else {
+      this.props.getAllTopics();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // This is slightly awkward - we need to check that we have all topics,
+    // But don't have a random topic yet (or at not already loading a random topic)
+    if ((this.props.allTopics || nextProps.allTopics) && !this.props.loadingRandomTopic && !nextProps.loadingRandomTopic && !this.props.randomTopic) {
+      this.props.getRandomTopicVideos(nextProps.allTopics);
+    }
+  }
+
   render() {
     return (
       <section>
-        <Player  src={getVideo(this.props.id)} controls>
+        <Player src={getVideo(this.props.id)} controls>
         </Player>
         <h2 className='video-player-title'>{this.props.title}</h2>
         <h3 className="video-player-date text-left">date {this.props.date} </h3>
         <p className="text-left">{this.props.description}</p>
+        <RelatedVideos
+          topicName={this.props.randomTopic || ''}
+          allTopics={this.props.allTopics || []}
+          topicCount={this.props.randomTopicCount}
+          videos={this.props.randomTopicVideos || []}
+          loading={this.props.loadingAllTopics || this.props.loadingRandomTopic}
+          getRandomTopicVideos={this.props.getRandomTopicVideos}
+        />
       </section>
 
     )
   }
 }
 
-VideoPlayer.propTypes = {
-  title: PropTypes.string,
-  date: PropTypes.string,
-  description: PropTypes.string
-};
+//
+// VideoPlayer.propTypes = {
+//   title: PropTypes.string,
+//   date: PropTypes.string,
+//   description: PropTypes.string
+// };
 
 
-export default VideoPlayer;
+const mapStateToProps = state => ({
+  allTopics: state.topics.allTopics,
+  loadingAllTopics: state.topics.loadingAllTopics,
+  randomTopic: state.topics.randomTopic,
+  randomTopicCount: state.topics.randomTopicCount,
+  loadingRandomTopic: state.topics.loadingRandomTopic,
+  randomTopicVideos: state.topics.randomTopicVideos
+});
+
+const mapDispatchToProps = dispatch => ({
+  getAllTopics: () => dispatch(getAllTopics()),
+  getRandomTopicVideos: allTopics => dispatch(getRandomTopicVideos(allTopics))
+});
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(VideoPlayer);

src/stylesheets/globals.scss

@@ -81,3 +81,4 @@ a {
   text-decoration: underline;
   color: $normal-link-color;
 }
+

src/stylesheets/random-item.scss

@@ -1,7 +1,8 @@
 @import "variables";
 @import "globals";
 
-.section-heading {
+.section-heading,
+.section-subheading {
   padding-top: 1em;
 }
 .section-title{