Finally finished giant ES6 refactor
This commit is contained in:
parent
c6d48cc424
commit
03e2666958
39 changed files with 553 additions and 635 deletions
10
views/app.js
10
views/app.js
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react';
|
||||
import Router, {Route, DefaultRoute, NotFoundRoute, RouteHandler} from 'react-router';
|
||||
import ga, {Initializer as GAInitiailizer} from 'react-google-analytics';
|
||||
import Router, { Route, DefaultRoute, NotFoundRoute, RouteHandler } from 'react-router';
|
||||
import ga, { Initializer as GAInitiailizer } from 'react-google-analytics';
|
||||
import Home from './home';
|
||||
import Share from './share';
|
||||
import Head from './head';
|
||||
import ErrorView from './error';
|
||||
|
||||
let App = React.createClass({
|
||||
const App = React.createClass({
|
||||
render: function () {
|
||||
return (
|
||||
<html>
|
||||
|
|
@ -24,7 +24,7 @@ let App = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
let routes = (
|
||||
const routes = (
|
||||
<Route name='home' handler={App} path='/'>
|
||||
<DefaultRoute handler={Home} />
|
||||
<Route name='share' path=':service/:type/:id' handler={Share}/>
|
||||
|
|
@ -45,4 +45,4 @@ if (typeof window !== 'undefined') {
|
|||
ga('send', 'pageview');
|
||||
}
|
||||
|
||||
export {routes};
|
||||
export { routes };
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import {State} from 'react-router';
|
||||
import { State } from 'react-router';
|
||||
|
||||
export default React.createClass({
|
||||
|
||||
|
|
@ -8,9 +8,9 @@ export default React.createClass({
|
|||
router: React.PropTypes.func.isRequired
|
||||
},
|
||||
render: function() {
|
||||
var image = this.props.shares ? this.props.shares[0].artwork.large : 'https://match.audio/images/logo-512.png';
|
||||
var title = this.props.shares ? this.props.shares[0].name + ' by ' + this.props.shares[0].artist.name : 'Match Audio';
|
||||
var shareUrl = 'https://match.audio/' + this.getParams().service + '/' + this.getParams().type + '/' + this.getParams().id;
|
||||
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;
|
||||
return (
|
||||
<head>
|
||||
<script dangerouslySetInnerHTML={{__html: 'var timerStart = Date.now();'}}></script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import request from 'superagent';
|
||||
import {Navigation, State, Link} from 'react-router';
|
||||
import { Navigation, State, Link } from 'react-router';
|
||||
import Faq from './faq';
|
||||
import Foot from './foot';
|
||||
|
||||
var Recent = React.createClass({
|
||||
const Recent = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return (<div className='row'>
|
||||
|
|
@ -21,7 +21,7 @@ var Recent = React.createClass({
|
|||
|
||||
});
|
||||
|
||||
var RecentItem = React.createClass({
|
||||
const RecentItem = React.createClass({
|
||||
|
||||
render: function() {
|
||||
if (!this.props.item.artwork) {
|
||||
|
|
@ -38,7 +38,7 @@ var RecentItem = React.createClass({
|
|||
|
||||
});
|
||||
|
||||
var SearchForm = React.createClass({
|
||||
const SearchForm = React.createClass({
|
||||
|
||||
mixins: [ Navigation, State ],
|
||||
|
||||
|
|
@ -50,26 +50,25 @@ var SearchForm = React.createClass({
|
|||
},
|
||||
|
||||
handleSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
this.setState({
|
||||
submitting: true
|
||||
});
|
||||
var that = this;
|
||||
e.preventDefault();
|
||||
var url = this.refs.url.getDOMNode().value.trim();
|
||||
const url = this.refs.url.getDOMNode().value.trim();
|
||||
if (!url) {
|
||||
that.setState({
|
||||
this.setState({
|
||||
submitting: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
request.post('/search').send({url: url}).end(function(req, res) {
|
||||
that.setState({
|
||||
request.post('/search').send({url: url}).end((req, res) => {
|
||||
this.setState({
|
||||
submitting: false
|
||||
});
|
||||
if (res.body.error) {
|
||||
that.setState({error: res.body.error.message});
|
||||
this.setState({error: res.body.error.message});
|
||||
}
|
||||
that.transitionTo('share', res.body);
|
||||
this.transitionTo('share', res.body);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -102,7 +101,7 @@ export default React.createClass({
|
|||
getInitialState: function () {
|
||||
// Use this only on first page load, refresh whenever we navigate back.
|
||||
if (this.props.recents) {
|
||||
var recents = this.props.recents;
|
||||
const recents = this.props.recents;
|
||||
delete this.props.recents;
|
||||
return {
|
||||
recents: recents
|
||||
|
|
@ -115,11 +114,11 @@ export default React.createClass({
|
|||
|
||||
componentDidMount: function () {
|
||||
if (!this.props.recents) {
|
||||
request.get('/recent').set('Accept', 'application/json').end(function(err, res) {
|
||||
request.get('/recent').set('Accept', 'application/json').end((err, res) => {
|
||||
this.setState({
|
||||
recents: res.body.recents
|
||||
});
|
||||
}.bind(this));
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react';
|
||||
import request from 'superagent';
|
||||
import {State, Link} from 'react-router';
|
||||
import { State, Link } from 'react-router';
|
||||
import Foot from './foot';
|
||||
|
||||
var MusicItem = React.createClass({
|
||||
const MusicItem = React.createClass({
|
||||
|
||||
render: function() {
|
||||
if (!this.props.item.matched_at) {
|
||||
|
|
@ -88,7 +88,7 @@ export default React.createClass({
|
|||
},
|
||||
|
||||
componentDidMount: function () {
|
||||
var complete = this.state.shares.length > 0;
|
||||
let complete = this.state.shares.length > 0;
|
||||
|
||||
this.state.shares.forEach(function(share) {
|
||||
if (typeof share.matched_at === 'undefined') {
|
||||
|
|
@ -96,9 +96,9 @@ export default React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
var getShares = function() {
|
||||
request.get(this.getPathname() + '.json').end(function(err, res) {
|
||||
var shares = res.body.shares;
|
||||
const getShares = () => {
|
||||
request.get(this.getPathname() + '.json').end((err, res) => {
|
||||
const shares = res.body.shares;
|
||||
complete = true;
|
||||
shares.forEach(function(share) {
|
||||
if (typeof share.matched_at === 'undefined') {
|
||||
|
|
@ -118,8 +118,8 @@ export default React.createClass({
|
|||
shareUrl: 'https://match.audio/' + shares[0].service + '/' + shares[0].type + '/' + shares[0].id
|
||||
});
|
||||
}
|
||||
}.bind(this));
|
||||
}.bind(this);
|
||||
});
|
||||
};
|
||||
|
||||
if (!this.state.shares.length) {
|
||||
getShares();
|
||||
|
|
@ -134,19 +134,19 @@ export default React.createClass({
|
|||
|
||||
// Some hacks to pop open the Twitter/Facebook/Google Plus sharing dialogs without using their code.
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.share-dialog'), function(dialog){
|
||||
dialog.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
var w = 845;
|
||||
var h = 670;
|
||||
var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
|
||||
var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
|
||||
dialog.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const w = 845;
|
||||
const h = 670;
|
||||
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
|
||||
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
|
||||
|
||||
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
|
||||
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
|
||||
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
|
||||
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
|
||||
|
||||
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
|
||||
var top = ((height / 2) - (h / 2)) + dualScreenTop;
|
||||
var newWindow = window.open(dialog.href, 'Share Music', 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
|
||||
const left = ((width / 2) - (w / 2)) + dualScreenLeft;
|
||||
const top = ((height / 2) - (h / 2)) + dualScreenTop;
|
||||
const newWindow = window.open(dialog.href, 'Share Music', 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
|
||||
if (window.focus) {
|
||||
newWindow.focus();
|
||||
}
|
||||
|
|
@ -183,9 +183,9 @@ export default React.createClass({
|
|||
</div>
|
||||
</div>
|
||||
<div className='row'>
|
||||
{this.state.shares.map(function(item, i){
|
||||
{this.state.shares.map((item, i) => {
|
||||
return (<MusicItem items={this.state.shares} item={item} inc={i} key={i} />);
|
||||
}.bind(this))}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue