Merge pull request #832 from Automattic/update/pretty-reader-urls

Reader: Pretty URLs for some feeds

client/reader/controller.js

@@ -20,7 +20,8 @@ var i18n = require( 'lib/mixins/i18n' ),
 	i18n = require( 'lib/mixins/i18n' ),
 	TitleStore = require( 'lib/screen-title/store' ),
 	titleActions = require( 'lib/screen-title/actions' ),
-	FeedSubscriptionActions = require( 'lib/reader-feed-subscriptions/actions' );
+	FeedSubscriptionActions = require( 'lib/reader-feed-subscriptions/actions' ),
+	readerRoute = require( 'reader/route' );
 
 // This is a tri-state.
 // null == nothing instantiated, nothing pending
@@ -72,6 +73,21 @@ function pageTitleSetter() {
 }
 
 module.exports = {
+	redirects: function( context, next ) {
+		let redirect;
+		if ( context.params.blog_id ) {
+			redirect = readerRoute.getPrettySiteUrl( context.params.blog_id );
+		} else if ( context.params.feed_id ) {
+			redirect = readerRoute.getPrettyFeedUrl( context.params.feed_id );
+		}
+
+		if ( redirect ) {
+			return page.redirect( redirect );
+		}
+
+		next();
+	},
+
 	loadSubscriptions: function( context, next ) {
 		// these three are included to ensure that the stores required have been loaded and can accept actions
 		const FeedSubscriptionStore = require( 'lib/reader-feed-subscriptions' ), // eslint-disable-line no-unused-vars

client/reader/discover/helper.jsx

@@ -9,7 +9,8 @@ var find = require( 'lodash/collection/find' ),
  * Internal Dependencies
  */
 var config = require( 'config' ),
-	userUtils = require( 'lib/user/utils' );
+	userUtils = require( 'lib/user/utils' ),
+	readerRoute = require( 'reader/route' );
 
 module.exports = {
 	isEnabled: function() {
@@ -38,7 +39,7 @@ module.exports = {
 		// If we have a blog ID, we want to send them to the site detail page
 		const blogId = get( post, 'discover_metadata.featured_post_wpcom_data.blog_id' );
 		if ( blogId ) {
-			return `/read/blog/id/${blogId}`;
+			return readerRoute.getSiteUrl( blogId );
 		}
 
 		return post.discover_metadata.permalink;

client/reader/following-edit/helper.jsx

@@ -1,3 +1,5 @@
+import { getSiteUrl, getFeedUrl } from 'reader/route';
+
 module.exports = {
 	formatUrlForDisplay: function( url ) {
 		if ( ! url ) {
@@ -28,9 +30,9 @@ module.exports = {
 		}
 
 		if ( siteData ) {
-			return '/read/blog/id/' + siteData.get( 'ID' );
+			return getSiteUrl( siteData.get( 'ID' ) );
 		}
 
-		return '/read/blog/feed/' + feedData.feed_ID;
+		return getFeedUrl( feedData.feed_ID );
 	}
 };

client/reader/following-stream/post.jsx

@@ -36,6 +36,7 @@ var Card = require( 'components/card' ),
 	PostCommentHelper = require( 'reader/comments/helper' ),
 	FollowingEditHelper = require( 'reader/following-edit/helper' ),
 	LikeHelper = require( 'reader/like-helper' ),
+	readerRoute = require( 'reader/route' ),
 	stats = require( 'reader/stats' ),
 	PostExcerptLink = require( 'reader/post-excerpt-link' ),
 	PostPermalink = require( 'reader/post-permalink' ),
@@ -281,12 +282,9 @@ var Post = React.createClass( {
 		if ( event.button > 0 || event.metaKey || event.controlKey || event.shiftKey || event.altKey ) {
 			return;
 		}
-		const post = this.props.post;
-		if ( post.feed_ID ) {
-			page.show( '/read/blog/feed/' + post.feed_ID );
-		} else {
-			page.show( '/read/blog/id/' + post.site_ID );
-		}
+
+		const url = readerRoute.getStreamUrlFromPost( this.props.post );
+		page.show( url );
 		event.preventDefault();
 	},
 

client/reader/index.js

@@ -35,13 +35,13 @@ module.exports = function() {
 
 		page( '/', saveLastRoute, controller.removePost, controller.sidebar, controller.following );
 
-		page( '/read/blog/feed/:feed_id', saveLastRoute, controller.removePost, controller.sidebar, controller.feedListing );
+		page( '/read/blog/feed/:feed_id', saveLastRoute, controller.redirects, controller.removePost, controller.sidebar, controller.feedListing );
 		page.exit( '/read/blog/feed/:feed_id', controller.resetTitle );
 
 		page( '/read/post/feed/:feed/:post', setLastRoute, controller.feedPost );
 		page.exit( '/read/post/feed/:feed/:post', controller.resetTitle, controller.removePost );
 
-		page( '/read/blog/id/:blog_id', saveLastRoute, controller.removePost, controller.sidebar, controller.blogListing );
+		page( '/read/blog/id/:blog_id', saveLastRoute, controller.redirects, controller.removePost, controller.sidebar, controller.blogListing );
 		page( '/read/post/id/:blog/:post', setLastRoute, controller.blogPost );
 		page.exit( '/read/post/id/:blog/:post', controller.resetTitle, controller.removePost );
 

client/reader/recommendations/for-you/index.jsx

@@ -17,6 +17,8 @@ import RecommendedSites from 'lib/recommended-sites-store/store';
 import { fetchMore } from 'lib/recommended-sites-store/actions';
 import SiteStore from 'lib/reader-site-store';
 import { recordFollow, recordUnfollow } from 'reader/stats';
+import { getSiteUrl } from 'reader/route';
+
 
 const RecommendedForYou = React.createClass( {
 
@@ -110,12 +112,14 @@ const RecommendedForYou = React.createClass( {
 	renderItem( rec ) {
 		const site = rec.site && rec.site.toJS(),
 			itemKey = this.getItemRef( rec ),
-			title = site.name || ( site.URL && url.parse( site.URL ).hostname );
+			title = site.name || ( site.URL && url.parse( site.URL ).hostname ),
+			siteUrl = getSiteUrl( site.ID );
+
 		return (
 			<ListItem key={ itemKey } ref={ itemKey }>
 				<Icon><SiteIcon site={ site } size={ 48 } /></Icon>
 				<Title>
-					<a href={'/read/blog/id/' + site.ID} onclick={ this.trackSiteClick }>{ title }</a>
+					<a href={ siteUrl } onclick={ this.trackSiteClick }>{ title }</a>
 				</Title>
 				<Description>{ rec.reason }</Description>
 				<Actions>

client/reader/route/Makefile

@@ -0,0 +1,10 @@
+REPORTER ?= spec
+NODE_BIN := $(shell npm bin)
+MOCHA ?= $(NODE_BIN)/mocha
+BASE_DIR := $(NODE_BIN)/../..
+NODE_PATH := test:$(BASE_DIR)/client:$(BASE_DIR)/shared
+
+test:
+	@NODE_ENV=test NODE_PATH=$(NODE_PATH) $(MOCHA) --compilers js:babel/register --reporter $(REPORTER)
+
+.PHONY: test

client/reader/route/index.js

@@ -0,0 +1,34 @@
+const FEED_URL_BASE = '/read/blog/feed/';
+const SITE_URL_BASE = '/read/blog/id/';
+
+const PRETTY_FEED_URLS = {
+	12733228: '/discover'
+};
+
+const PRETTY_SITE_URLS = {
+	53424024: '/discover'
+}
+
+export function getPrettySiteUrl( siteID ) {
+	return PRETTY_SITE_URLS[ siteID ];
+}
+
+export function getPrettyFeedUrl( feedID ) {
+	return PRETTY_FEED_URLS[ feedID ];
+}
+
+export function getSiteUrl( siteID ) {
+	return getPrettySiteUrl( siteID ) || SITE_URL_BASE + siteID;
+}
+
+export function getFeedUrl( feedID ) {
+	return getPrettyFeedUrl( feedID ) || FEED_URL_BASE + feedID;
+}
+
+export function getStreamUrlFromPost( post ) {
+	if ( post.feed_ID ) {
+		return getFeedUrl( post.feed_ID );
+	}
+
+	return getSiteUrl( post.site_ID );
+}

client/reader/route/test/index.js

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+var expect = require( 'chai' ).expect;
+
+/**
+ * Internal dependencies
+ */
+var route = require( '../' );
+
+describe( 'reader/route', function() {
+	describe( 'getStreamUrlFromPost', function() {
+		it( 'should return url for post from feed', function() {
+			expect( route.getStreamUrlFromPost( { feed_ID: 1234 } ) ).to.equal( '/read/blog/feed/1234' );
+		} );
+
+		it( 'should return url for post from site', function() {
+			expect( route.getStreamUrlFromPost( { site_ID: 1234 } ) ).to.equal( '/read/blog/id/1234' );
+		} );
+	} );
+
+	describe( 'getSiteUrl', function() {
+		it( 'should return site URL', function() {
+			expect( route.getSiteUrl( 1234 ) ).to.equal( '/read/blog/id/1234' );
+		} );
+
+		it( 'should return pretty URL for discover', function() {
+			expect( route.getSiteUrl( 53424024 ) ).to.equal( '/discover' );
+		} );
+	} );
+
+	describe( 'getFeedUrl', function() {
+		it( 'should return site URL', function() {
+			expect( route.getFeedUrl( 1234 ) ).to.equal( '/read/blog/feed/1234' );
+		} );
+
+		it( 'should return pretty URL for discover', function() {
+			expect( route.getFeedUrl( 12733228 ) ).to.equal( '/discover' );
+		} );
+	} );
+} );

client/reader/site-link/index.jsx

@@ -1,6 +1,7 @@
 var React = require( 'react' );
 
-var stats = require( 'reader/stats' );
+var stats = require( 'reader/stats' ),
+	readerRoute = require( 'reader/route' );
 
 var SiteLink = React.createClass( {
 
@@ -10,14 +11,8 @@ var SiteLink = React.createClass( {
 	},
 
 	render: function() {
-		var post = this.props.post,
-			link;
+		var link = readerRoute.getStreamUrlFromPost( this.props.post );
 
-		if ( post.feed_ID ) {
-			link = '/read/blog/feed/' + post.feed_ID;
-		} else if ( post.site_ID && ! post.is_external ) {
-			link = '/read/blog/id/' + post.site_ID;
-		}
 		return (
 			<a { ...this.props } href={ link } onClick={ this.recordClick }>{ this.props.children }</a>
 		);