From 0b00b190fc5f2c05316be0046081b153421c121d Mon Sep 17 00:00:00 2001 From: Jonathan Cremin Date: Mon, 15 Dec 2014 12:49:17 +0000 Subject: [PATCH] Lay client out a bit better --- app.js | 22 +---- client/{index.js => index.jsx} | 0 client/share.jsx | 153 +++++++++++++++++++++++++++++++++ routes/index.js | 19 ++++ routes/share.js | 23 +++-- 5 files changed, 191 insertions(+), 26 deletions(-) rename client/{index.js => index.jsx} (100%) create mode 100644 client/share.jsx create mode 100644 routes/index.js diff --git a/app.js b/app.js index 7eb4742..bf5eb6d 100644 --- a/app.js +++ b/app.js @@ -12,14 +12,12 @@ var compress = require('compression'); var bodyParser = require('body-parser'); var pmongo = require('promised-mongo'); +var index = require('./routes/index'); var search = require('./routes/search'); var share = require('./routes/share'); var itunesProxy = require('./routes/itunes-proxy'); var browserify = require('connect-browserify'); -var React = require('react'); -var nodejsx = require('node-jsx').install(); -var Home = React.createFactory(require('./client').Home); var app = express(); @@ -52,7 +50,7 @@ app.use(function(req, res, next) { if (development) { app.get('/javascript/bundle.js', - browserify('./client', { + browserify('./client/index.jsx', { debug: true, watch: true })); @@ -75,21 +73,7 @@ app.get('*', function(req,res,next) { } }); -app.get('/', function(req, res, next) { - - var path = url.parse(req.url).pathname; - - req.db.matches.find().sort({created_at:-1}).limit(6).toArray().then(function(docs){ - var recent = []; - docs.forEach(function(doc) { - recent.push(doc.services[doc._id.split("$$")[0]]); - }) - - var home = Home({recent: recent}); - res.send('\n' + React.renderToString(home).replace("", "")); - }); -}); - +app.get('/', index); app.post('/search', search); app.get('/:service/:type/:id.json', share.json); app.get('/:service/:type/:id', share.html); diff --git a/client/index.js b/client/index.jsx similarity index 100% rename from client/index.js rename to client/index.jsx diff --git a/client/share.jsx b/client/share.jsx new file mode 100644 index 0000000..e26a460 --- /dev/null +++ b/client/share.jsx @@ -0,0 +1,153 @@ +/** + * @jsx React.DOM + */ +'use strict'; + +var React = require('react'); +var Router = require('react-router'); +var request = require('superagent'); +var ga = require('react-google-analytics'); +var GAInitiailizer = ga.Initializer; + +var Head = React.createClass({ + + render: function() { + return ( + + + + Match Audio + + + + + + + + + + + + + + ); + } +}); + +var Foot = React.createClass({ + + render: function() { + return ( + + ); + } +}); + + +var Recent = React.createClass({ + + render: function() { + return (
+
+

Recently Shared

+
+ +
+
+
); + } + +}); + +var RecentItem = React.createClass({ + + render: function() { + return ( +
+ +
+ ); + } + +}); + +var SearchForm = React.createClass({ + + handleSubmit: function(e) { + e.preventDefault(); + var url = this.refs.url.getDOMNode().value.trim(); + if (!url) { + return; + } + request.post('/search').send({url:url}).end(function(res) { + window.location = "/" + res.body.service + "/" + res.body.type + "/" + res.body.id + }); + }, + + render: function() { + return ( +
+
+ + + + +
+
+ ); + } +}); + +var Share = React.createClass({ + + render: function() { + return ( + + + +
+
+

match.audio

+
+
+
+
+

share

+
+
+
+
+

Make sharing from music services better. + We match album and track links from Rdio, Spotify, Deezer, Beats Music, Google Music and iTunes and give you back a link with all of them. +

+
+
+ +
+
+ + + ")); + //res.render('index', { page: "home", recent: docs, error: req.flash('search-error') }); + }); +} \ No newline at end of file diff --git a/routes/share.js b/routes/share.js index 1cf6b37..815b2a4 100644 --- a/routes/share.js +++ b/routes/share.js @@ -2,6 +2,12 @@ var path = require('path'); var Promise = require('bluebird'); var util = require('util'); + +var browserify = require('connect-browserify'); +var React = require('react'); +var nodejsx = require('node-jsx').install(); +var Share = React.createFactory(require('../client/share').Share); + var services = {}; require("fs").readdirSync(path.join(__dirname, "..", "lib", "services")).forEach(function(file) { @@ -60,13 +66,16 @@ module.exports.html = function(req, res, next) { items.unshift(doc.services[serviceId]); - res.render(type, { - page: type, - title: doc.services[serviceId].name + " by " + doc.services[serviceId].artist.name, - matching: doc.services[serviceId], - matches: items, - thisUrl: req.userProtocol + '://' + req.get('host') + req.originalUrl - }); + var share = Share({items: items}); + res.send('\n' + React.renderToString(share).replace("", "")); + + // res.render(type, { + // page: type, + // title: doc.services[serviceId].name + " by " + doc.services[serviceId].artist.name, + // matching: doc.services[serviceId], + // matches: items, + // thisUrl: req.userProtocol + '://' + req.get('host') + req.originalUrl + // }); }); };