Skip to content

Instantly share code, notes, and snippets.

Jan Goebel productioncoder

Block or report user

Report or block productioncoder

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@productioncoder
productioncoder / Comments.js
Last active Feb 5, 2019
Youtube in React: wiring up AddComment, CommentsHeader and Comment component
View Comments.js
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
productioncoder / App.js
Created Jan 29, 2019
Youtube in React: show side bar and header in app component
View App.js
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
productioncoder / Watch.js
Created Dec 18, 2018
Youtube in React: wiring Watch component up so it can dispatch actions
View Watch.js
/* ... */
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
productioncoder / HomeContent.js
Created Dec 17, 2018
Youtube in React: rendering video grids dynamically in HomeContent component
View HomeContent.js
/*....*/
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
productioncoder / HomeContent.js
Created Dec 17, 2018
Youtube in React: update mapStateToProps in HomeContent to pull the videos per category in
View HomeContent.js
/*...*/
import {getMostPopularVideos, getVideosByCategory} from '../../../store/reducers/videos';
/* ... */
function mapStateToProps(state) {
return {
videosByCategory: getVideosByCategory(state),
mostPopularVideos: getMostPopularVideos(state),
};
@productioncoder
productioncoder / HomeContent.js
Created Dec 17, 2018
Youtube in React: dynamically creating video grids in Home Content
View HomeContent.js
/*...*/
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
productioncoder / Home.js
Created Dec 17, 2018
Youtube in React: wiring Home component up with video categories
View Home.js
/*....*/
import {getVideoCategoryIds} from '../../store/reducers/videos';
/* ... */
function mapStateToProps(state) {
return {
youtubeLibraryLoaded: getYoutubeLibraryLoaded(state),
videoCategories: getVideoCategoryIds(state),
};
@productioncoder
productioncoder / index.js
Created Dec 16, 2018
Youtube in React: generic fetching function based on redux-saga
View index.js
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
productioncoder / Rating.js
Created Dec 15, 2018
Youtube in React: Rating component skeleton
View Rating.js
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
productioncoder / VideoInfoBox.scss
Created Dec 15, 2018
Youtube in React: kicking out hard-coded magic numbers
View VideoInfoBox.scss
@import '../../styles/shared.scss';
.video-info-box {
/* ... */
grid: auto auto / calc(#{$avatar-diameter} + #{$avatar-margin}) auto max-content;
/* ... */
}
You can’t perform that action at this time.