Numel2020/Page.js

## Page.js
/**
 * Created by melvynphillips on 18/04/2017.
 */


import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withRouter, matchPath, Route, Link, Switch} from 'react-router-dom';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import ReactDOM from 'react-dom';

import {TweenMax} from "gsap";
import Head from 'react-helmet';


//////////////////////////////////


class Box extends Component {

    componentWillEnter (callback) {

        const el = ReactDOM.findDOMNode(this);
        TweenMax.fromTo(el, 0.3, {x: 100, opacity: 0}, {x: 0, opacity: 1, onComplete: callback});
    }

    componentWillLeave (callback) {
        const el = ReactDOM.findDOMNode(this);
        TweenMax.fromTo(el, 0.3, {x: 0, opacity: 1}, {x: -100, opacity: 0, onComplete: callback});
    }

    render () {
        return <div className="box"/>;
    }

}

class Circle extends Component {

    componentWillEnter (callback) {

        const el = ReactDOM.findDOMNode(this);
        TweenMax.fromTo(el, 0.3, {x: 100, opacity: 0}, {x: 0, opacity: 1, onComplete: callback});
    }

    componentWillLeave (callback) {
        const el = ReactDOM.findDOMNode(this);
        TweenMax.fromTo(el, 0.3, {x: 0, opacity: 1}, {x: -100, opacity: 0, onComplete: callback});
    }

    render () {
        return <div className="circles"/>;
    }

}


const routes = [
    {
        path: '/home',
        exact: true,
        component: Circle,
    },
    {
        path: '/hello',
        component: Box,
    },
    {
        path: '/foo',
        component: Circle,
    },
    {
        path: '/bar',
        component: Box,
    },
];


@withRouter
export default class Page extends Component {

    constructor(props){

        super(props);
        this.state = {
            matchedRoutes: []
        }

    }


    componentWillMount() {
        this.matchRoutes(this.props.location);
    }

    componentWillReceiveProps(nextProps) {
        this.matchRoutes(nextProps.location);
    }

    matchRoutes ({ pathname })  {
        const matchedRoutes = [];

        for (let i = 0; i < routes.length; i += 1) {
            const { component: RouteComponent, ...rest } = routes[i];

            const match = matchPath(pathname, { ...rest });

            if (match) {
                matchedRoutes.push(
                    <RouteComponent key={RouteComponent} {...match} />,
                );

                if (match.isExact || match.isStrict) {
                    break;
                }
            }
        }

        this.setState({ matchedRoutes });
    };


    render() {
        return (
            <main>
                <Head titleTemplate="React Router Transitions Demo - %s" />
                <ul>
                    {routes.map(route =>
                        <li key={route.path}>
                            <Link to={route.path}>{route.path}</Link>
                        </li>
                    )}
                </ul>
                <hr/>
                <div className="content">
                    <TransitionGroup>
                        {this.state.matchedRoutes}
                    </TransitionGroup>
                </div>
            </main>
        );
    }
}

Page.propTypes = {
    location: PropTypes.shape({pathname: PropTypes.string.isRequired
    })
};
	/**
	* Created by melvynphillips on 18/04/2017.
	*/



	import React, {Component} from 'react';
	import PropTypes from 'prop-types';
	import {withRouter, matchPath, Route, Link, Switch} from 'react-router-dom';
	import TransitionGroup from 'react-transition-group/TransitionGroup';
	import ReactDOM from 'react-dom';

	import {TweenMax} from "gsap";
	import Head from 'react-helmet';





	//////////////////////////////////



	class Box extends Component {

	componentWillEnter (callback) {

	const el = ReactDOM.findDOMNode(this);
	TweenMax.fromTo(el, 0.3, {x: 100, opacity: 0}, {x: 0, opacity: 1, onComplete: callback});
	}

	componentWillLeave (callback) {
	const el = ReactDOM.findDOMNode(this);
	TweenMax.fromTo(el, 0.3, {x: 0, opacity: 1}, {x: -100, opacity: 0, onComplete: callback});
	}

	render () {
	return <div className="box"/>;
	}

	}

	class Circle extends Component {

	componentWillEnter (callback) {

	const el = ReactDOM.findDOMNode(this);
	TweenMax.fromTo(el, 0.3, {x: 100, opacity: 0}, {x: 0, opacity: 1, onComplete: callback});
	}

	componentWillLeave (callback) {
	const el = ReactDOM.findDOMNode(this);
	TweenMax.fromTo(el, 0.3, {x: 0, opacity: 1}, {x: -100, opacity: 0, onComplete: callback});
	}

	render () {
	return <div className="circles"/>;
	}

	}



	const routes = [
	{
	path: '/home',
	exact: true,
	component: Circle,
	},
	{
	path: '/hello',
	component: Box,
	},
	{
	path: '/foo',
	component: Circle,
	},
	{
	path: '/bar',
	component: Box,
	},
	];


	@withRouter
	export default class Page extends Component {

	constructor(props){

	super(props);
	this.state = {
	matchedRoutes: []
	}

	}



	componentWillMount() {
	this.matchRoutes(this.props.location);
	}

	componentWillReceiveProps(nextProps) {
	this.matchRoutes(nextProps.location);
	}

	matchRoutes ({ pathname }) {
	const matchedRoutes = [];

	for (let i = 0; i < routes.length; i += 1) {
	const { component: RouteComponent, ...rest } = routes[i];

	const match = matchPath(pathname, { ...rest });

	if (match) {
	matchedRoutes.push(
	<RouteComponent key={RouteComponent} {...match} />,
	);

	if (match.isExact \|\| match.isStrict) {
	break;
	}
	}
	}

	this.setState({ matchedRoutes });
	};



	render() {
	return (
	<main>
	<Head titleTemplate="React Router Transitions Demo - %s" />
	<ul>
	{routes.map(route =>
	<li key={route.path}>
	<Link to={route.path}>{route.path}</Link>
	</li>
	)}
	</ul>
	<hr/>
	<div className="content">
	<TransitionGroup>
	{this.state.matchedRoutes}
	</TransitionGroup>
	</div>
	</main>
	);
	}
	}

	Page.propTypes = {
	location: PropTypes.shape({pathname: PropTypes.string.isRequired
	})
	};