diff --git a/app.js b/app.js index 2b53150..82c927c 100644 --- a/app.js +++ b/app.js @@ -17,7 +17,6 @@ import itunesProxy from './routes/itunes-proxy'; import React from 'react'; import { routes } from './views/app'; -import createHandler from './lib/react-handler'; import errorHandler from './lib/error-handler'; import debuglog from 'debug'; diff --git a/lib/error-handler.js b/lib/error-handler.js index 1bad98a..697c2c9 100644 --- a/lib/error-handler.js +++ b/lib/error-handler.js @@ -1,5 +1,5 @@ import React from 'react'; -import createHandler from './react-handler'; +import { renderPage } from './react-handler'; import debuglog from 'debug'; const debug = debuglog('match.audio'); @@ -11,12 +11,7 @@ export default function (routes) { yield next; } catch (err) { if (err.status === 404) { - let Handler = yield createHandler(routes, this.request.url); - - let App = React.createFactory(Handler); - let content = React.renderToString(new App()); - - this.body = '\n' + content; + this.body = yield renderPage(routes, this.request.url, {}); } else { debug('Error: %o', err); throw err; @@ -28,12 +23,7 @@ export default function (routes) { switch (this.accepts('html', 'json')) { case 'html': this.type = 'html'; - let Handler = yield createHandler(routes, this.request.url); - - let App = React.createFactory(Handler); - let content = React.renderToString(new App()); - - this.body = '\n' + content; + this.body = yield renderPage(routes, this.request.url, {}); break; case 'json': this.body = { diff --git a/lib/react-handler.js b/lib/react-handler.js index dda415a..484fb74 100644 --- a/lib/react-handler.js +++ b/lib/react-handler.js @@ -1,19 +1,34 @@ -import Router from 'react-router'; +import React from 'react'; +import { renderToString } from 'react-dom/server'; +import { RoutingContext, match } from 'react-router'; +import createLocation from 'history/lib/createLocation'; -export default function* (routes, url) { - let router = Router.create({ - location: url, - routes: routes, - onAbort(aborted) { - let { to, params, query } = aborted; - - this.redirect(Router.makePath(to, params, query)); - } - }); - - return new Promise(function(resolve) { - router.run((Handler) => { - resolve(Handler); +export function matchRoute(routes, url) { + const location = createLocation(url); + return new Promise((resolve, reject) => { + match({ routes, location }, (error, redirectLocation, renderProps) => { + resolve({error, redirectLocation, renderProps}); }); }); } + +export function* renderPage(routes, url, state) { + const { error, redirectLocation, renderProps } = yield matchRoute(routes, url); + + if (error) { + throw new Error(error.message); + } else if (redirectLocation) { + return redirectLocation.pathname + redirectLocation.search; + } else if (renderProps === null) { + return false; + } + + const content = renderToString(); + + return '\n' + content.replace('', ` + + + + +`); +} diff --git a/package.json b/package.json index b9a27ff..7cc909c 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "bluebird": "~2.0.7", "co": "~4.6.0", "debug": "~2.2.0", + "history": "^1.12.3", "jspm": "~0.16.13", "kcors": "^1.0.1", "koa": "~1.1.2", @@ -57,9 +58,10 @@ "mongodb-promisified": "~1.0.2", "node-uuid": "~1.4.2", "playmusic": "~2.1.0", - "react": "~0.13.3", + "react": "~0.14.5", + "react-dom": "~0.14.5", "react-google-analytics": "~0.2.0", - "react-router": "~0.13.3", + "react-router": "~1.0.0", "spotify": "~0.3.0", "superagent": "~1.4.0", "superagent-bluebird-promise": "~2.1.0" @@ -79,12 +81,18 @@ "baseURL": "public" }, "dependencies": { - "react": "npm:react@~0.13.3", + "history": "npm:history@^1.12.3", + "react": "npm:react@~0.14.5", + "react-dom": "npm:react-dom@~0.14.5", "react-google-analytics": "npm:react-google-analytics@~0.2.0", - "react-router": "npm:react-router@~0.13.3", + "react-router": "npm:react-router@~1.0.0", "superagent": "npm:superagent@~1.2.0" }, - "devDependencies": {}, + "devDependencies": { + "babel": "npm:babel-core@^5.8.24", + "babel-runtime": "npm:babel-runtime@^5.8.24", + "core-js": "npm:core-js@^1.1.4" + }, "buildConfig": { "minify": true, "transpileES6": true diff --git a/public/config.js b/public/config.js index 5be89e5..1c625d9 100644 --- a/public/config.js +++ b/public/config.js @@ -1,28 +1,42 @@ System.config({ baseURL: "/", defaultJSExtensions: true, - transpiler: "none", + transpiler: "babel", + babelOptions: { + "optional": [ + "runtime", + "optimisation.modules.system" + ] + }, paths: { "github:*": "jspm_packages/github/*", "npm:*": "jspm_packages/npm/*" }, map: { - "react": "npm:react@0.13.3", + "babel": "npm:babel-core@5.8.34", + "babel-runtime": "npm:babel-runtime@5.8.34", + "core-js": "npm:core-js@1.2.6", + "history": "npm:history@1.17.0", + "react": "npm:react@0.14.6", + "react-dom": "npm:react-dom@0.14.6", "react-google-analytics": "npm:react-google-analytics@0.2.0", - "react-router": "npm:react-router@0.13.4", + "react-router": "npm:react-router@1.0.3", "superagent": "npm:superagent@1.2.0", "github:jspm/nodelibs-assert@0.1.0": { "assert": "npm:assert@1.3.0" }, "github:jspm/nodelibs-buffer@0.1.0": { - "buffer": "npm:buffer@3.5.1" + "buffer": "npm:buffer@3.6.0" }, "github:jspm/nodelibs-constants@0.1.0": { "constants-browserify": "npm:constants-browserify@0.0.1" }, "github:jspm/nodelibs-crypto@0.1.0": { - "crypto-browserify": "npm:crypto-browserify@3.10.0" + "crypto-browserify": "npm:crypto-browserify@3.11.0" + }, + "github:jspm/nodelibs-domain@0.1.0": { + "domain-browser": "npm:domain-browser@1.1.7" }, "github:jspm/nodelibs-events@0.1.1": { "events": "npm:events@1.0.2" @@ -67,7 +81,7 @@ System.config({ "string_decoder": "npm:string_decoder@0.10.31" }, "github:jspm/nodelibs-timers@0.1.0": { - "timers-browserify": "npm:timers-browserify@1.4.1" + "timers-browserify": "npm:timers-browserify@1.4.2" }, "github:jspm/nodelibs-tty@0.1.0": { "tty-browserify": "npm:tty-browserify@0.0.0" @@ -90,9 +104,13 @@ System.config({ "path": "github:jspm/nodelibs-path@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" }, - "npm:asn1.js@2.2.1": { + "npm:asap@2.0.3": { + "domain": "github:jspm/nodelibs-domain@0.1.0", + "process": "github:jspm/nodelibs-process@0.1.2" + }, + "npm:asn1.js@4.3.0": { "assert": "github:jspm/nodelibs-assert@0.1.0", - "bn.js": "npm:bn.js@2.2.0", + "bn.js": "npm:bn.js@4.6.2", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "inherits": "npm:inherits@2.0.1", "minimalistic-assert": "npm:minimalistic-assert@1.0.0", @@ -105,6 +123,9 @@ System.config({ "process": "github:jspm/nodelibs-process@0.1.2", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, + "npm:babel-runtime@5.8.34": { + "process": "github:jspm/nodelibs-process@0.1.2" + }, "npm:browserify-aes@1.0.5": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer-xor": "npm:buffer-xor@1.0.3", @@ -130,23 +151,23 @@ System.config({ "des.js": "npm:des.js@1.0.0", "inherits": "npm:inherits@2.0.1" }, - "npm:browserify-rsa@2.0.1": { - "bn.js": "npm:bn.js@2.2.0", + "npm:browserify-rsa@4.0.0": { + "bn.js": "npm:bn.js@4.6.2", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "constants": "github:jspm/nodelibs-constants@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "randombytes": "npm:randombytes@2.0.1" }, - "npm:browserify-sign@3.0.8": { - "bn.js": "npm:bn.js@2.2.0", - "browserify-rsa": "npm:browserify-rsa@2.0.1", + "npm:browserify-sign@4.0.0": { + "bn.js": "npm:bn.js@4.6.2", + "browserify-rsa": "npm:browserify-rsa@4.0.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "create-hash": "npm:create-hash@1.1.2", "create-hmac": "npm:create-hmac@1.1.4", "crypto": "github:jspm/nodelibs-crypto@0.1.0", - "elliptic": "npm:elliptic@3.1.0", + "elliptic": "npm:elliptic@6.0.2", "inherits": "npm:inherits@2.0.1", - "parse-asn1": "npm:parse-asn1@3.0.2", + "parse-asn1": "npm:parse-asn1@5.0.0", "stream": "github:jspm/nodelibs-stream@0.1.0" }, "npm:browserify-zlib@0.1.4": { @@ -154,17 +175,20 @@ System.config({ "buffer": "github:jspm/nodelibs-buffer@0.1.0", "pako": "npm:pako@0.2.8", "process": "github:jspm/nodelibs-process@0.1.2", - "readable-stream": "npm:readable-stream@1.0.27-1", + "readable-stream": "npm:readable-stream@2.0.5", "util": "github:jspm/nodelibs-util@0.1.0" }, "npm:buffer-xor@1.0.3": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, - "npm:buffer@3.5.1": { + "npm:buffer@3.6.0": { "base64-js": "npm:base64-js@0.0.8", + "child_process": "github:jspm/nodelibs-child_process@0.1.0", + "fs": "github:jspm/nodelibs-fs@0.1.2", "ieee754": "npm:ieee754@1.1.6", - "is-array": "npm:is-array@1.0.1" + "isarray": "npm:isarray@1.0.0", + "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:cipher-base@1.0.2": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", @@ -181,14 +205,20 @@ System.config({ "npm:constants-browserify@0.0.1": { "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, - "npm:core-util-is@1.0.1": { + "npm:core-js@1.2.6": { + "fs": "github:jspm/nodelibs-fs@0.1.2", + "path": "github:jspm/nodelibs-path@0.1.0", + "process": "github:jspm/nodelibs-process@0.1.2", + "systemjs-json": "github:systemjs/plugin-json@0.1.0" + }, + "npm:core-util-is@1.0.2": { "buffer": "github:jspm/nodelibs-buffer@0.1.0" }, - "npm:create-ecdh@2.0.2": { - "bn.js": "npm:bn.js@2.2.0", + "npm:create-ecdh@4.0.0": { + "bn.js": "npm:bn.js@4.6.2", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0", - "elliptic": "npm:elliptic@3.1.0" + "elliptic": "npm:elliptic@6.0.2" }, "npm:create-hash@1.1.2": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", @@ -206,16 +236,16 @@ System.config({ "inherits": "npm:inherits@2.0.1", "stream": "github:jspm/nodelibs-stream@0.1.0" }, - "npm:crypto-browserify@3.10.0": { + "npm:crypto-browserify@3.11.0": { "browserify-cipher": "npm:browserify-cipher@1.0.0", - "browserify-sign": "npm:browserify-sign@3.0.8", - "create-ecdh": "npm:create-ecdh@2.0.2", + "browserify-sign": "npm:browserify-sign@4.0.0", + "create-ecdh": "npm:create-ecdh@4.0.0", "create-hash": "npm:create-hash@1.1.2", "create-hmac": "npm:create-hmac@1.1.4", - "diffie-hellman": "npm:diffie-hellman@3.0.2", + "diffie-hellman": "npm:diffie-hellman@5.0.0", "inherits": "npm:inherits@2.0.1", "pbkdf2": "npm:pbkdf2@3.0.4", - "public-encrypt": "npm:public-encrypt@2.0.1", + "public-encrypt": "npm:public-encrypt@4.0.0", "randombytes": "npm:randombytes@2.0.1" }, "npm:debug@2.2.0": { @@ -235,16 +265,19 @@ System.config({ "inherits": "npm:inherits@2.0.1", "minimalistic-assert": "npm:minimalistic-assert@1.0.0" }, - "npm:diffie-hellman@3.0.2": { - "bn.js": "npm:bn.js@2.2.0", + "npm:diffie-hellman@5.0.0": { + "bn.js": "npm:bn.js@4.6.2", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0", - "miller-rabin": "npm:miller-rabin@2.0.1", + "miller-rabin": "npm:miller-rabin@4.0.0", "randombytes": "npm:randombytes@2.0.1", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, - "npm:elliptic@3.1.0": { - "bn.js": "npm:bn.js@2.2.0", + "npm:domain-browser@1.1.7": { + "events": "github:jspm/nodelibs-events@0.1.1" + }, + "npm:elliptic@6.0.2": { + "bn.js": "npm:bn.js@4.6.2", "brorand": "npm:brorand@1.0.5", "hash.js": "npm:hash.js@1.0.3", "inherits": "npm:inherits@2.0.1", @@ -264,6 +297,14 @@ System.config({ "create-hash": "npm:create-hash@1.1.2", "crypto": "github:jspm/nodelibs-crypto@0.1.0" }, + "npm:fbjs@0.6.1": { + "core-js": "npm:core-js@1.2.6", + "loose-envify": "npm:loose-envify@1.1.0", + "process": "github:jspm/nodelibs-process@0.1.2", + "promise": "npm:promise@7.1.1", + "ua-parser-js": "npm:ua-parser-js@0.7.10", + "whatwg-fetch": "npm:whatwg-fetch@0.9.0" + }, "npm:form-data@0.2.0": { "async": "npm:async@0.9.2", "buffer": "github:jspm/nodelibs-buffer@0.1.0", @@ -295,12 +336,25 @@ System.config({ "npm:hash.js@1.0.3": { "inherits": "npm:inherits@2.0.1" }, + "npm:history@1.17.0": { + "child_process": "github:jspm/nodelibs-child_process@0.1.0", + "deep-equal": "npm:deep-equal@1.0.1", + "fs": "github:jspm/nodelibs-fs@0.1.2", + "invariant": "npm:invariant@2.2.0", + "process": "github:jspm/nodelibs-process@0.1.2", + "query-string": "npm:query-string@3.0.0", + "warning": "npm:warning@2.1.0" + }, "npm:https-browserify@0.0.0": { "http": "github:jspm/nodelibs-http@1.7.1" }, "npm:inherits@2.0.1": { "util": "github:jspm/nodelibs-util@0.1.0" }, + "npm:invariant@2.2.0": { + "loose-envify": "npm:loose-envify@1.1.0", + "process": "github:jspm/nodelibs-process@0.1.2" + }, "npm:jstransform@10.1.0": { "base62": "npm:base62@0.1.1", "buffer": "github:jspm/nodelibs-buffer@0.1.0", @@ -309,11 +363,17 @@ System.config({ "process": "github:jspm/nodelibs-process@0.1.2", "source-map": "npm:source-map@0.1.31" }, + "npm:loose-envify@1.1.0": { + "js-tokens": "npm:js-tokens@1.0.2", + "process": "github:jspm/nodelibs-process@0.1.2", + "stream": "github:jspm/nodelibs-stream@0.1.0", + "util": "github:jspm/nodelibs-util@0.1.0" + }, "npm:methods@1.0.1": { "http": "github:jspm/nodelibs-http@1.7.1" }, - "npm:miller-rabin@2.0.1": { - "bn.js": "npm:bn.js@2.2.0", + "npm:miller-rabin@4.0.0": { + "bn.js": "npm:bn.js@4.6.2", "brorand": "npm:brorand@1.0.5" }, "npm:mime-db@1.12.0": { @@ -336,8 +396,8 @@ System.config({ "buffer": "github:jspm/nodelibs-buffer@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" }, - "npm:parse-asn1@3.0.2": { - "asn1.js": "npm:asn1.js@2.2.1", + "npm:parse-asn1@5.0.0": { + "asn1.js": "npm:asn1.js@4.3.0", "browserify-aes": "npm:browserify-aes@1.0.5", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "create-hash": "npm:create-hash@1.1.2", @@ -357,43 +417,58 @@ System.config({ "process": "github:jspm/nodelibs-process@0.1.2", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, + "npm:process-nextick-args@1.0.6": { + "process": "github:jspm/nodelibs-process@0.1.2" + }, "npm:process@0.11.2": { "assert": "github:jspm/nodelibs-assert@0.1.0" }, - "npm:public-encrypt@2.0.1": { - "bn.js": "npm:bn.js@2.2.0", - "browserify-rsa": "npm:browserify-rsa@2.0.1", + "npm:promise@7.1.1": { + "asap": "npm:asap@2.0.3", + "fs": "github:jspm/nodelibs-fs@0.1.2" + }, + "npm:public-encrypt@4.0.0": { + "bn.js": "npm:bn.js@4.6.2", + "browserify-rsa": "npm:browserify-rsa@4.0.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "create-hash": "npm:create-hash@1.1.2", "crypto": "github:jspm/nodelibs-crypto@0.1.0", - "parse-asn1": "npm:parse-asn1@3.0.2", + "parse-asn1": "npm:parse-asn1@5.0.0", "randombytes": "npm:randombytes@2.0.1" }, "npm:punycode@1.3.2": { "process": "github:jspm/nodelibs-process@0.1.2" }, + "npm:query-string@3.0.0": { + "strict-uri-encode": "npm:strict-uri-encode@1.1.0" + }, "npm:randombytes@2.0.1": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" }, + "npm:react-dom@0.14.6": { + "react": "npm:react@0.14.6" + }, "npm:react-google-analytics@0.2.0": { - "react": "npm:react@0.13.3" + "react": "npm:react@0.14.6" }, - "npm:react-router@0.13.4": { - "object-assign": "npm:object-assign@2.1.1", + "npm:react-router@1.0.3": { + "child_process": "github:jspm/nodelibs-child_process@0.1.0", + "fs": "github:jspm/nodelibs-fs@0.1.2", + "history": "npm:history@1.17.0", + "invariant": "npm:invariant@2.2.0", "process": "github:jspm/nodelibs-process@0.1.2", - "qs": "npm:qs@2.4.1", - "react": "npm:react@0.13.3" + "warning": "npm:warning@2.1.0" }, - "npm:react@0.13.3": { - "buffer": "github:jspm/nodelibs-buffer@0.1.0", + "npm:react@0.14.6": { "envify": "npm:envify@3.4.0", + "fbjs": "npm:fbjs@0.6.1", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:readable-stream@1.0.27-1": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", - "core-util-is": "npm:core-util-is@1.0.1", + "core-util-is": "npm:core-util-is@1.0.2", "events": "github:jspm/nodelibs-events@0.1.1", "inherits": "npm:inherits@2.0.1", "isarray": "npm:isarray@0.0.1", @@ -401,6 +476,17 @@ System.config({ "stream": "github:jspm/nodelibs-stream@0.1.0", "string_decoder": "npm:string_decoder@0.10.31" }, + "npm:readable-stream@2.0.5": { + "buffer": "github:jspm/nodelibs-buffer@0.1.0", + "core-util-is": "npm:core-util-is@1.0.2", + "events": "github:jspm/nodelibs-events@0.1.1", + "inherits": "npm:inherits@2.0.1", + "isarray": "npm:isarray@0.0.1", + "process": "github:jspm/nodelibs-process@0.1.2", + "process-nextick-args": "npm:process-nextick-args@1.0.6", + "string_decoder": "npm:string_decoder@0.10.31", + "util-deprecate": "npm:util-deprecate@1.0.2" + }, "npm:ripemd160@1.0.1": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" @@ -452,21 +538,31 @@ System.config({ "process": "github:jspm/nodelibs-process@0.1.2", "stream": "github:jspm/nodelibs-stream@0.1.0" }, - "npm:timers-browserify@1.4.1": { + "npm:timers-browserify@1.4.2": { "process": "npm:process@0.11.2" }, + "npm:ua-parser-js@0.7.10": { + "systemjs-json": "github:systemjs/plugin-json@0.1.0" + }, "npm:url@0.10.3": { "assert": "github:jspm/nodelibs-assert@0.1.0", "punycode": "npm:punycode@1.3.2", "querystring": "npm:querystring@0.2.0", "util": "github:jspm/nodelibs-util@0.1.0" }, + "npm:util-deprecate@1.0.2": { + "util": "github:jspm/nodelibs-util@0.1.0" + }, "npm:util@0.10.3": { "inherits": "npm:inherits@2.0.1", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:vm-browserify@0.0.4": { "indexof": "npm:indexof@0.0.1" + }, + "npm:warning@2.1.0": { + "loose-envify": "npm:loose-envify@1.1.0", + "process": "github:jspm/nodelibs-process@0.1.2" } } }); diff --git a/routes/index.js b/routes/index.js index 6323a97..09a5141 100644 --- a/routes/index.js +++ b/routes/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import createHandler from '../lib/react-handler'; +import { renderPage } from '../lib/react-handler'; import { routes } from '../views/app'; export default function* () { @@ -15,12 +15,5 @@ export default function* () { }); }); - const Handler = yield createHandler(routes, this.request.url); - - const App = React.createFactory(Handler); - let content = React.renderToString(new App({recents: recents})); - - content = content.replace('', ''); - - this.body = '\n' + content; + yield renderPage(routes, this.request.url, {recents: recents}); }; diff --git a/routes/share.js b/routes/share.js index 33cab8f..73a640e 100644 --- a/routes/share.js +++ b/routes/share.js @@ -1,5 +1,5 @@ import React from 'react'; -import createHandler from '../lib/react-handler'; +import { renderPage } from '../lib/react-handler'; import { routes } from '../views/app'; import services from '../lib/services'; import co from 'co'; @@ -68,10 +68,5 @@ export default function* (serviceId, type, itemId, format, next) { return this.body = {shares: shares}; } - const Handler = yield createHandler(routes, this.request.url); - const App = React.createFactory(Handler); - let content = React.renderToString(new App({shares: shares})); - content = content.replace('', ''); - - this.body = '\n' + content; + this.body = yield renderPage(routes, this.request.url, {shares: shares}); }; diff --git a/views/app.js b/views/app.js index 9396e89..2bc42ef 100644 --- a/views/app.js +++ b/views/app.js @@ -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({ - + {this.props.children} - - - ); @@ -25,22 +24,16 @@ const App = React.createClass({ }); const routes = ( - - - - + + + + ); 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(, document); - } else if (typeof shares !== 'undefined') { - React.render(, document); - } - }); + ReactDOM.render({routes}, document); ga('create', 'UA-66209-8', 'auto'); ga('send', 'pageview'); } diff --git a/views/head.js b/views/head.js index c8ec0c8..ca6db24 100644 --- a/views/head.js +++ b/views/head.js @@ -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 ( diff --git a/views/home.js b/views/home.js index dccb4ce..6925010 100644 --- a/views/home.js +++ b/views/home.js @@ -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 (
@@ -29,7 +28,7 @@ const RecentItem = React.createClass({ } return (
- +
@@ -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({
-

match.audio

+

match.audio

diff --git a/views/notfound.js b/views/notfound.js index 6789d16..bab2942 100644 --- a/views/notfound.js +++ b/views/notfound.js @@ -12,7 +12,7 @@ export default React.createClass({
- +
@@ -20,7 +20,7 @@ export default React.createClass({

404

Sorry, it looks like the page you asked for is gone.

- Take Me Home or Take Me to the Wubs + Take Me Home or Take Me to the Wubs
diff --git a/views/share.js b/views/share.js index bfe40f2..e3d44c1 100644 --- a/views/share.js +++ b/views/share.js @@ -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({
-

match.audio

+

match.audio