productioncoder

import React from 'react';
import {CommentsHeader} from "./CommentsHeader/CommentsHeader";
import {AddComment} from "./AddComment/AddComment";
import {Comment} from "./Comment/Comment";

export class Comments extends React.Component {
  render() {
    return (
      <div>
        <CommentsHeader amountComments={this.props.amountComments}/>

productioncoder

import React, {Component} from 'react';
import HeaderNav from './containers/HeaderNav/HeaderNav';
import {SideBar} from './containers/SideBar/SideBar';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <HeaderNav/>
        <SideBar/>

productioncoder

/* ... */
import {bindActionCreators} from 'redux';
import * as watchActions from '../../store/actions/watch';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import {getYoutubeLibraryLoaded} from '../../store/reducers/api';

function mapStateToProps(state) {
  return {
    youtubeLibraryLoaded: getYoutubeLibraryLoaded(state),

productioncoder

/*....*/
import {getVideoCategoryIds} from '../../store/reducers/videos';

class Home extends React.Component {
  render() {
    const trendingVideos = this.getTrendingVideos();
    const categoryGrids = this.getVideoGridsForCategories();

    return (
      <div className='home-content'>

productioncoder

/*...*/
import {getMostPopularVideos, getVideosByCategory} from '../../../store/reducers/videos';

/* ... */

function mapStateToProps(state) {
  return {
    videosByCategory: getVideosByCategory(state),
    mostPopularVideos: getMostPopularVideos(state),
  };

productioncoder

/*...*/
import {getMostPopularVideos, getVideosByCategory} from '../../../store/reducers/videos';

class HomeContent extends React.Component {
  /* ... */

  getVideoGridsForCategories() {
    const categoryTitles = Object.keys(this.props.videosByCategory || {});
    return categoryTitles.map((categoryTitle,index) => {
      const videos = this.props.videosByCategory[categoryTitle];

productioncoder

/*....*/
import {getVideoCategoryIds} from '../../store/reducers/videos';

/* ... */

function mapStateToProps(state) {
  return {
    youtubeLibraryLoaded: getYoutubeLibraryLoaded(state),
    videoCategories: getVideoCategoryIds(state),
  };

productioncoder

import {all, call, put} from 'redux-saga/effects';

/*
... rest unchange for now
*/

/*
* entity must have a success, request and failure method
* request is a function that returns a promise when called
* */

productioncoder

import React from 'react';
import './Rating.scss';
import {Icon, Progress} from "semantic-ui-react";

export function Rating() {
  let progress = null;
  if (props.likeCount && props.dislikeCount) {
    const percent = 100 * (props.likeCount / (props.likeCount + props.dislikeCount));
    progress = <Progress className='progress' percent={percent} size='tiny'/>;
  }

productioncoder

@import '../../styles/shared.scss';

.video-info-box {
  /* ... */
  grid: auto auto / calc(#{$avatar-diameter} + #{$avatar-margin}) auto max-content;
  /* ... */
}