jonathan/combine.fm
jonathan/combine.fm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Upgrade React and React Router

Browse source
This commit is contained in:
Jonathan Cremin 2016-01-09 15:10:28 +00:00
parent ef8e8ca59e
commit c96b4b624b
12 changed files with 218 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

25
views/app.js
View file

@ -1,5 +1,7 @@
import React from 'react';
import Router, { Route, DefaultRoute, NotFoundRoute, RouteHandler } from 'react-router';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import ga, { Initializer as GAInitiailizer } from 'react-google-analytics';
import Home from './home';
import Share from './share';
@ -13,11 +15,8 @@ const App = React.createClass({
<html>
<Head {...this.props} />
<body className='home'>
<RouteHandler {...this.props} />
{this.props.children}
<GAInitiailizer />
<script src='/jspm_packages/system.src.js'></script>
<script src='/config.js'></script>
<script dangerouslySetInnerHTML={{__html: 'System.import(\'views/app\');'}}></script>
</body>
</html>
);
@ -25,22 +24,16 @@ const App = React.createClass({
});
const routes = (
<Route name='home' handler={App} path='/'>
<DefaultRoute handler={Home} />
<Route name='share' path=':service/:type/:id' handler={Share}/>
<NotFoundRoute handler={NotFound}/>
<Route path='/' component={App}>
<IndexRoute component={Home} />
<Route path=':service/:type/:id' component={Share}/>
<Route path='*' component={NotFound}/>
</Route>
);
if (typeof window !== 'undefined') {
console.info('Time since page started rendering: ' + (Date.now() - timerStart) + 'ms'); // eslint-disable-line no-undef
Router.run(routes, Router.HistoryLocation, function (Handler) {
if (typeof window.recents !== 'undefined') {
React.render(<Handler recents={window.recents} />, document);
} else if (typeof shares !== 'undefined') {
React.render(<Handler shares={window.shares} />, document);
}
});
ReactDOM.render(<Router history={createBrowserHistory()}>{routes}</Router>, document);
ga('create', 'UA-66209-8', 'auto');
ga('send', 'pageview');
}

5
views/head.js
View file

@ -4,13 +4,10 @@ import { State } from 'react-router';
export default React.createClass({
mixins: [ State ],
contextTypes: {
router: React.PropTypes.func.isRequired
},
render: function() {
const image = this.props.shares ? this.props.shares[0].artwork.large : 'https://match.audio/images/logo-512.png';
const title = this.props.shares ? this.props.shares[0].name + ' by ' + this.props.shares[0].artist.name : 'Match Audio';
const shareUrl = 'https://match.audio/' + this.getParams().service + '/' + this.getParams().type + '/' + this.getParams().id;
const shareUrl = 'https://match.audio/' + this.props.params.service + '/' + this.props.params.type + '/' + this.props.params.id;
return (
<head>
<script dangerouslySetInnerHTML={{__html: 'var timerStart = Date.now();'}}></script>

14
views/home.js
View file

@ -1,11 +1,10 @@
import React from 'react';
import request from 'superagent';
import { Navigation, State, Link } from 'react-router';
import { History, State, Link } from 'react-router';
import Faq from './faq';
import Foot from './foot';
const Recent = React.createClass({
render: function() {
return (<div className='row'>
<div className='col-md-6 col-md-offset-3'>
@ -29,7 +28,7 @@ const RecentItem = React.createClass({
}
return (
<div className='col-sm-4 col-xs-6'>
<Link to='share' params={this.props.item}>
<Link to={`/${this.props.item.service}/${this.props.item.type}/${this.props.item.id}`}>
<div className={this.props.item.service === 'youtube' ? 'artwork-youtube artwork' : 'artwork'} style={{backgroundImage: 'url(' + this.props.item.artwork.small + ')'}}></div>
</Link>
</div>
@ -40,7 +39,7 @@ const RecentItem = React.createClass({
const SearchForm = React.createClass({
mixins: [ Navigation, State ],
mixins: [ History, State ],
getInitialState: function () {
return {
@ -54,7 +53,7 @@ const SearchForm = React.createClass({
this.setState({
submitting: true
});
const url = this.refs.url.getDOMNode().value.trim();
const url = this.refs.url.value.trim();
if (!url) {
this.setState({
submitting: false
@ -68,7 +67,8 @@ const SearchForm = React.createClass({
if (res.body.error) {
this.setState({error: res.body.error.message});
}
this.transitionTo('share', res.body);
const item = res.body;
this.history.pushState(null, `/${item.service}/${item.type}/${item.id}`);
});
},
@ -127,7 +127,7 @@ export default React.createClass({
<div>
<div className='page-wrap'>
<header>
<h1><Link to='home'>match<span className='audio-lighten'>.audio</span></Link></h1>
<h1><Link to='/'>match<span className='audio-lighten'>.audio</span></Link></h1>
</header>
<div className='container'>
<div className='row share-form'>

4
views/notfound.js
View file

@ -12,7 +12,7 @@ export default React.createClass({
<div className='row'>
<div className='col-md-12'>
<div className='error-logo'>
<Link to='home'><img src='/images/logo-full-300.png' width='50' /></Link>
<Link to='/'><img src='/images/logo-full-300.png' width='50' /></Link>
</div>
</div>
</div>
@ -20,7 +20,7 @@ export default React.createClass({
<div className='col-md-12'>
<h2>404</h2>
<h1>Sorry, it looks like the page you asked for is gone.</h1>
<Link to='home'>Take Me Home</Link> or <a href='https://www.youtube.com/watch?v=gnnIrTLlLyA' target='_blank'>Take Me to the Wubs</a>
<Link to='/'>Take Me Home</Link> or <a href='https://www.youtube.com/watch?v=gnnIrTLlLyA' target='_blank'>Take Me to the Wubs</a>
</div>
</div>
</div>

10
views/share.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import request from 'superagent';
import { State, Link } from 'react-router';
import { Link } from 'react-router';
import Foot from './foot';
const MusicItem = React.createClass({
@ -62,10 +62,8 @@ const MusicItem = React.createClass({
export default React.createClass({
mixins: [ State ],
getInitialState: function () {
if (this.props.shares && this.props.shares[0].id === this.getParams().id) {
if (this.props.shares && this.props.shares[0].id === this.props.params.id) {
return {
name: this.props.shares[0].name,
artist: this.props.shares[0].artist.name,
@ -97,7 +95,7 @@ export default React.createClass({
});
const getShares = () => {
request.get(this.getPathname() + '.json').end((err, res) => {
request.get(this.props.location.pathname + '.json').end((err, res) => {
const shares = res.body.shares;
complete = true;
shares.forEach(function(share) {
@ -162,7 +160,7 @@ export default React.createClass({
<div className='container'>
<div className='row'>
<div className='col-md-12'>
<h1><Link to='home'>match<span className='audio-lighten'>.audio</span></Link></h1>
<h1><Link to='/'>match<span className='audio-lighten'>.audio</span></Link></h1>
</div>
</div>
</div>