Skip to content

Instantly share code, notes, and snippets.

@productioncoder
productioncoder / index.js
Created Nov 19, 2019
Session-based authentication in express.js
View index.js
const express = require('express');
const session = require('express-session');
const redis = require('redis');
const connectRedis = require('connect-redis');
const app = express();
// if you run behind a proxy (e.g. nginx)
// app.set('trust proxy', 1);
@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'/>;
}
You can’t perform that action at this time.