productioncoder

/* imports unchanged */
class Home extends React.Component {
  render() {
    /* ... */
  }

  componentDidMount() {
    if (this.props.youtubeLibraryLoaded) {
      this.fetchCategoriesAndMostPopularVideos();
    }

productioncoder

import React from 'react';
import Waypoint from 'react-waypoint';
import {Loader} from 'semantic-ui-react';
import './InfiniteScroll.scss';

export function InfiniteScroll(props) {
  return (
    <React.Fragment>
      {props.children}
      <Waypoint onEnter={props.bottomReachedCallback}>

productioncoder

/*...*/
import {getVideoDurationString} from '../../services/date/date-format';

export class VideoPreview extends React.Component {
  render() {
    /* ... */
    const duration = video.contentDetails ? video.contentDetails.duration : null;
    const videoDuration = getVideoDurationString(duration);
    const viewAndTimeString = VideoPreview.getFormattedViewAndTime(video);
    const horizontal = this.props.horizontal ? 'horizontal' : null;

productioncoder

/*...*/
import {getShortNumberString} from '../../services/number/number-format';

TimeAgo.locale(en);
const timeAgo = new TimeAgo('en-US');

export class VideoPreview extends React.Component {
  render() {
    {/* unchanged */}
  }

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 from 'react';
import './Watch.scss';
import {RelatedVideos} from '../../components/RelatedVideos/RelatedVideos';
import {Video} from '../../components/Video/Video';

export class Watch extends React.Component {
  render() {
    return (
      <div className='watch-grid'>
        <Video className='video' id='-7fuHEEmEjs' />

productioncoder

render() {
  return (
    <Menu borderless vertical stackable fixed='left' className='side-nav'>
      <SideBarItem highlight={true}  label='Home' icon='home'/>
      <SideBarItem label='Trending' icon='fire'/>
      <SideBarItem label='Followers' icon='spy'/>
      <SideBarItem label='History' icon='history'/>
      <SideBarItem label='Watch later' icon='clock'/>
      <SideBarItem label='Liked videos' icon='thumbs up'/>
      <SideBarItem label='Movies and Shows' icon='film'/>

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 '../../styles/shared.scss';
.ui.menu.top-menu {
  border: none;
  .logo {
    width: $sidebar-left-width;
  }
  /* ... */
}

productioncoder

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

export function SideBarItem(props) {
  // React will ignore custom boolean attributes, therefore we pass a string
  // we use this attribute in our SCSS for styling
  const highlight = props.highlight ? 'highlight-item' : null;
  return (
      <Menu.Item className={['sidebar-item', highlight].join(' ')}>