Merge pull request #3 from toolness/decouple-new-homepage-from-googs

Add a stub/fake blog feed loader and use it for now.

lib/blog-feed-loader.js

@@ -1,65 +1,2 @@
-var sanitizeHtml = require('sanitize-html');
-
-function loadGoogleAPI(window, callback) {
-  if (window.google) {
-    return process.nextTick(callback);
-  }
-  var head = document.getElementsByTagName('head')[0];
-  var gScript = document.createElement('script');
-  gScript.setAttribute('src', 'https://www.google.com/jsapi');
-  gScript.onload = callback;
-  head.appendChild(gScript);
-};
-
-function getBlogFeeds(feedUrl, callback) {
-  if (window.google) {
-    var google = window.google;
-    google.load('feeds', '1', {
-      callback: function() {
-        var feed = new google.feeds.Feed(feedUrl);
-        feed.load(function(result) {
-          callback(formatBlogFeeds(result.feed));
-        });
-      }
-    });
-  }
-}
-
-function formatBlogFeeds(feeds) {
-  var featured = feeds.entries[0];
-  var latestPosts = [];
-  var post;
-  for (var i = 1; i < 4; i++) {
-    post = feeds.entries[i];
-    latestPosts.push({
-      title: post.title,
-      publishedDate: post.publishedDate,
-      link: post.link
-    });
-  }
-  return {
-    featuredPostData: {
-      title: featured.title,
-      author: featured.author,
-      publishedDate: featured.publishedDate,
-      contentSnippet: sanitizeHtml(featured.content, {
-        allowedTags: []
-      }).split(' ').slice(0, 70).join(' ') + '...',
-      link: post.link
-    },
-    latestPostsData: latestPosts
-  };
-}
-
-var loadBlogFeed = function(requestedComp, window, feedUrl, callback) {
-  loadGoogleAPI(window, function() {
-    if (requestedComp.isMounted()) {
-      getBlogFeeds(feedUrl, function(result) {
-        callback(result);
-      });
-    }
-  });
-};
-
-module.exports = loadBlogFeed;
-
+// TODO: Replace this with a real implementation.
+module.exports = require('../test/browser/stub-blog-feed-loader');

package.json

@@ -38,7 +38,6 @@
     "react-ga": "^1.0.12",
     "react-router": "^0.13.2",
     "react-select": "0.4.6",
-    "sanitize-html": "^1.6.1",
     "should": "^5.1.0",
     "simplecrawler": "^0.5.2",
     "source-map-support": "^0.2.10",

pages/home.jsx

@@ -2,7 +2,6 @@ var React = require('react');
 var Router = require('react-router');
 var Link = Router.Link;
 var moment = require('moment');
-var sanitizeHtml = require('sanitize-html');
 
 var HeroUnit = require('../components/hero-unit.jsx');
 var Blockquote = require('../components/blockquote.jsx');
@@ -14,7 +13,7 @@ var IconButton = require('../components/icon-button.jsx');
 
 var config = require('../lib/config');
 
-var blogFeedLoader = require('../lib/blog-feed-loader');
+var loadBlogPosts = require('../lib/blog-feed-loader');
 
 var CaseStudies = React.createClass({
   render: function() {
@@ -88,26 +87,33 @@ var LatestPosts = React.createClass({
 });
 
 var BlogSection = React.createClass({
+  getDefaultProps: function() {
+    return {
+      loadBlogPosts: loadBlogPosts
+    };
+  },
   getInitialState: function() {
     return {
-      featuredPostData: {
+      featuredPost: {
         title: "",
         author: "",
         publishedDate: "",
         contentSnippet: "",
         link: ""
       },
-      latestPostsData: []
+      latestPosts: []
     }
   },
   componentDidMount: function() {
-    var self = this;
-    blogFeedLoader(this, window, "https://blog.webmaker.org/tag/teachtheweb/feed", function(data) {
-      self.setState({
-        featuredPostData: data.featuredPostData,
-        latestPostsData: data.latestPostsData
+    this.props.loadBlogPosts(function(data) {
+      if (!this.isMounted()) {
+        return;
+      }
+      this.setState({
+        featuredPost: data.featuredPosts,
+        latestPosts: data.latestPosts
       });
-    });
+    }.bind(this));
   },
   render: function() {
     return (
@@ -119,10 +125,10 @@ var BlogSection = React.createClass({
         </div>
         <div className="row">
           <div className="col-sm-8 col-md-8 col-lg-8">
-            <FeaturedPost data={this.state.featuredPostData} />
+            <FeaturedPost data={this.state.featuredPost} />
           </div>
           <div className="col-sm-4 col-md-4 col-lg-4">
-            <LatestPosts data={this.state.latestPostsData} />
+            <LatestPosts data={this.state.latestPosts} />
             <a className="more" href="https://blog.webmaker.org/tag/teachtheweb/">See all blog posts</a>
           </div>
         </div>

test/browser/stub-blog-feed-loader.js

@@ -0,0 +1,30 @@
+var FAKE_POSTS = {
+  "featuredPosts": {
+    "title": "What’s next for Thimble?",
+    "author": "Hannah Kane",
+    "publishedDate": "Tue, 12 May 2015 10:47:33 -0700",
+    "contentSnippet": "Last week we announced that Thimble will soon be moving over to our new site for people who teach the web, teach.mozilla.org. We also shared that Professor David Humphrey and a team of students from Seneca College have been working to make Thimble an even more powerful teaching, learning, and development tool.\nWe wanted to follow up with more specifics about what you can expect from the new Thimble:\n\nOver the next...",
+    "link": "https://blog.webmaker.org/whats-next-for-thimble"
+  },
+  "latestPosts": [
+    {
+      "title": "What’s next for Webmaker tools",
+      "publishedDate": "Mon, 04 May 2015 11:53:23 -0700",
+      "link": "https://blog.webmaker.org/whats-next-for-webmaker-tools"
+    },
+    {
+      "title": "Understanding Web Literacy within the Web Journey",
+      "publishedDate": "Tue, 21 Apr 2015 08:04:56 -0700",
+      "link": "https://blog.webmaker.org/understanding-web-literacy-within-the-web-journey"
+    },
+    {
+      "title": "Learning Through Making: The Best Kind of Education",
+      "publishedDate": "Thu, 16 Apr 2015 12:04:55 -0700",
+      "link": "https://blog.webmaker.org/learning-through-making-the-best-kind-of-education"
+    }
+  ]
+};
+
+module.exports = function(cb) {
+  process.nextTick(cb.bind(null, FAKE_POSTS));
+};