frontend/src/components/RandomTopic.js

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 {

  render() {
    return (
      <section>
        <h2 className="section-heading">from the Archive Topics - من مواضيع الارشيف</h2>

        <RandomItemTitle title={
        this.props.topicName + ' (' +this.props.topicCount + ')'}/>
          <Grid className="random-topics"
          width={220}
          gap={12}>
          {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>

    )
  }
}

RandomTopic.propTypes = {
  topicName: PropTypes.string,
  videos: PropTypes.array,
  loading: PropTypes.bool,
  topicCount: PropTypes.number
};

export default (RandomTopic);