Skip to content

Instantly share code, notes, and snippets.

View dbismut's full-sized avatar
🏠
Working from home

David Bismut dbismut

🏠
Working from home
View GitHub Profile
@dbismut
dbismut / index.js
Last active April 9, 2018 07:49
Part 1 - Combining reducers
import { combineReducers } from 'redux';
import { router5Reducer } from 'redux-router5';
export default combineReducers({
router: router5Reducer
});
@dbismut
dbismut / index.js
Last active April 9, 2018 07:50
Part 1 - Wrapping the App in store and router providers
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { RouterProvider } from 'react-router5';
import configureStore from './_redux/store';
import createRouter from './_router/router';
import dataMiddleware from './_router/dataMiddleware';
import routes from './_router/routes';
@dbismut
dbismut / List.js
Last active April 9, 2018 07:50
Part 1 - The List component
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { routeNodeSelector } from 'redux-router5';
import Preview from './Preview';
import './List.css';
class List extends PureComponent {
render() {
@dbismut
dbismut / App.js
Last active April 9, 2018 07:51
Part 1 - The App component - Implementing TransitionGroup
import React, { PureComponent } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actions, routeNodeSelector } from 'redux-router5';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import List from './List';
import Post from './Post';
@dbismut
dbismut / Preview.js
Last active April 9, 2018 07:51
Part 1 - The Preview component
import React, { PureComponent } from 'react';
export default class Preview extends PureComponent {
render() {
const { id, image, title, onClick } = this.props;
return (
<div
data-id={id}
className="preview cover"
@dbismut
dbismut / Post.js
Last active April 9, 2018 07:51
Part 1 - The Post component with CSSTransition
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { routeNodeSelector } from 'redux-router5';
import CSSTransition from 'react-transition-group/CSSTransition';
import './Post.css';
class Post extends PureComponent {
render() {
const {
@dbismut
dbismut / App.scss
Last active April 9, 2018 07:51
Part 1 - Basic styling of our app
.App {
position: relative;
}
.full-width {
max-width: 480px;
width: 100vw;
}
.cover {
@dbismut
dbismut / Post.js
Last active April 9, 2018 07:52
Part 2 - Setting up addEndListener in CSSTransition
/* ... */
import { chain, composite, delay, spring, styler, tween } from 'popmotion';
import { cubicBezier } from 'popmotion/easing';
import scroll from 'stylefire/scroll';
/* ... */
class Post extends PureComponent {
from = {};
@dbismut
dbismut / Post.js
Last active April 9, 2018 07:54
Part 2 - calculating the style of the preview node
getPreviewStyleAndPosition = () => {
const { top, width, height } = this.preview.getBoundingClientRect();
return {
top,
width,
height,
borderRadius: 16
};
};
@dbismut
dbismut / Post.js
Last active April 9, 2018 07:57
Part 2 - Calculating destination style for entering transition
onEnter = () => {
/* same code */
this.from = this.getPreviewStyleAndPosition();
this.to = {
top: 0,
height: window.innerHeight,
width: document.body.offsetWidth,
borderRadius: 0
};