Fetch results from the API

docs/adding-a-page.md

@@ -250,8 +250,8 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { asyncConnect } from 'redux-async-connect';
 
+import { loadEntities, setCurrentUser } from 'core/actions';
 import { fetchProfile } from 'core/api';
-import { loadEntities, setCurrentUser } from 'search/actions';
 
 class UserPage extends React.Component {
   static propTypes = {

karma.conf.js

@@ -26,6 +26,8 @@ const newWebpackConfig = Object.assign({}, webpackConfigProd, {
     new webpack.NormalModuleReplacementPlugin(/config$/, 'core/client/config.js'),
     // Substitutes client only config.
     new webpack.NormalModuleReplacementPlugin(/core\/logger$/, 'core/client/logger.js'),
+    // Use the browser's window for window.
+    new webpack.NormalModuleReplacementPlugin(/core\/window/, 'core/browserWindow.js'),
   ],
   devtool: 'inline-source-map',
   module: {

package.json

@@ -123,11 +123,13 @@
     "camelcase": "3.0.0",
     "classnames": "2.2.5",
     "config": "1.20.4",
+    "dompurify": "0.8.0",
     "express": "4.13.4",
     "extract-text-webpack-plugin": "1.0.1",
     "helmet": "2.1.0",
     "isomorphic-fetch": "2.2.1",
     "jed": "1.1.0",
+    "jsdom": "9.2.0",
     "normalize.css": "4.1.1",
     "normalizr": "2.1.0",
     "piping": "0.3.2",

src/core/actions/index.js

@@ -4,3 +4,19 @@ export function setJWT(token) {
     payload: {token},
   };
 }
+
+export function loadEntities(entities) {
+  return {
+    type: 'ENTITIES_LOADED',
+    payload: {entities},
+  };
+}
+
+export function setCurrentUser(username) {
+  return {
+    type: 'SET_CURRENT_USER',
+    payload: {
+      username,
+    },
+  };
+}

src/core/api/index.js

@@ -7,15 +7,15 @@ import 'isomorphic-fetch';
 
 const API_BASE = `${config.get('apiHost')}${config.get('apiPath')}`;
 
-const addon = new Schema('addons', {idAttribute: 'slug'});
-const user = new Schema('users', {idAttribute: 'username'});
+export const addon = new Schema('addons', {idAttribute: 'slug'});
+export const user = new Schema('users', {idAttribute: 'username'});
 
 function makeQueryString(query) {
   return url.format({query});
 }
 
-function callApi({endpoint, schema, params, auth = false, state = {}, method = 'get', body,
-                  credentials}) {
+export function callApi({endpoint, schema, params, auth = false, state = {}, method = 'get', body,
+                         credentials}) {
   const queryString = makeQueryString(params);
   const options = {
     headers: {},

src/core/browserWindow.js

@@ -0,0 +1 @@
+export default window;

src/core/purify.js

@@ -0,0 +1,4 @@
+import createDOMPurify from 'dompurify';
+import universalWindow from 'core/window';
+
+export default createDOMPurify(universalWindow);

src/core/reducers/addons.js

@@ -3,7 +3,28 @@ const initialState = {};
 export default function addon(state = initialState, action) {
   const { payload } = action;
   if (payload && payload.entities && payload.entities.addons) {
-    return {...state, ...payload.entities.addons};
+    const newState = {...state};
+    Object.keys(payload.entities.addons).forEach((key) => {
+      const thisAddon = payload.entities.addons[key];
+      if (thisAddon.theme_data) {
+        newState[key] = {
+          ...thisAddon,
+          ...thisAddon.theme_data,
+          guid: `${thisAddon.id}@personas.mozilla.org`,
+        };
+        delete newState[key].theme_data;
+      } else {
+        if (thisAddon.current_version && thisAddon.current_version.files.length > 0) {
+          newState[key] = {
+            ...thisAddon,
+            installURL: thisAddon.current_version.files[0].url,
+          };
+        } else {
+          newState[key] = thisAddon;
+        }
+      }
+    });
+    return newState;
   }
   return state;
 }

src/core/window.js

@@ -0,0 +1,8 @@
+import { jsdom } from 'jsdom';
+
+export default jsdom('', {
+  features: {
+    FetchExternalResources: false, // disables resource loading over HTTP / filesystem
+    ProcessExternalResources: false, // do not execute JS within script blocks
+  },
+}).defaultView;

src/disco/actions.js

@@ -0,0 +1,8 @@
+export function discoResults(results) {
+  return {
+    type: 'DISCO_RESULTS',
+    payload: {
+      results,
+    },
+  };
+}

src/disco/api.js

@@ -0,0 +1,16 @@
+import { Schema, arrayOf } from 'normalizr';
+
+import { addon, callApi } from 'core/api';
+
+export const discoResult = new Schema('discoResults', {idAttribute: (result) => result.addon.slug});
+discoResult.addon = addon;
+
+
+export function getDiscoveryAddons({ api }) {
+  return callApi({
+    endpoint: 'discovery',
+    schema: {results: arrayOf(discoResult)},
+    params: {lang: 'en-US'},
+    state: api,
+  });
+}

src/disco/components/Addon.js

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React, { PropTypes } from 'react';
 import { sprintf } from 'sprintf-js';
 import translate from 'core/i18n/translate';
+import purify from 'core/purify';
 
 import themeAction, { getThemeData } from 'disco/themePreview';
 
@@ -18,26 +19,32 @@ import {
 
 import 'disco/css/Addon.scss';
 
+function sanitizeHTML(text, allowTags = []) {
+  // TODO: Accept tags to allow and run through dom-purify.
+  return {
+    __html: purify.sanitize(text, {ALLOWED_TAGS: allowTags}),
+  };
+}
 
 export class Addon extends React.Component {
   static propTypes = {
     accentcolor: PropTypes.string,
     closeErrorAction: PropTypes.func,
+    description: PropTypes.string,
     editorialDescription: PropTypes.string.isRequired,
     errorMessage: PropTypes.string,
     footerURL: PropTypes.string,
     headerURL: PropTypes.string,
     heading: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired,
     i18n: PropTypes.string.isRequired,
-    imageURL: PropTypes.string,
+    iconUrl: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    previewURL: PropTypes.string,
     name: PropTypes.string.isRequired,
     slug: PropTypes.string.isRequired,
     status: PropTypes.oneOf(validInstallStates).isRequired,
-    subHeading: PropTypes.string,
     textcolor: PropTypes.string,
     themeAction: PropTypes.func,
-    themeURL: PropTypes.string,
     type: PropTypes.oneOf(validAddonTypes).isRequired,
   }
 
@@ -60,15 +67,15 @@ export class Addon extends React.Component {
   }
 
   getLogo() {
-    const { imageURL } = this.props;
+    const { iconUrl } = this.props;
     if (this.props.type === EXTENSION_TYPE) {
-      return <div className="logo"><img src={imageURL} alt="" /></div>;
+      return <div className="logo"><img src={iconUrl} alt="" /></div>;
     }
     return null;
   }
 
   getThemeImage() {
-    const { i18n, name, themeURL } = this.props;
+    const { i18n, name, previewURL } = this.props;
     if (this.props.type === THEME_TYPE) {
       return (<a href="#" className="theme-image"
                  data-browsertheme={this.getBrowserThemeData()}
@@ -77,13 +84,24 @@ export class Addon extends React.Component {
                  onFocus={this.previewTheme}
                  onMouseOut={this.resetPreviewTheme}
                  onMouseOver={this.previewTheme}>
-        <img src={themeURL} alt={sprintf(i18n.gettext('Preview %(name)s'), {name})} /></a>);
+        <img src={previewURL} alt={sprintf(i18n.gettext('Preview %(name)s'), {name})} /></a>);
     }
     return null;
   }
 
   getDescription() {
-    return { __html: this.props.editorialDescription };
+    const { i18n, description, type } = this.props;
+    if (type === THEME_TYPE) {
+      return (
+        <p className="editorial-description">{i18n.gettext('Hover over the image to preview')}</p>
+      );
+    }
+    return (
+      <div
+        ref="editorialDescription"
+        className="editorial-description"
+        dangerouslySetInnerHTML={sanitizeHTML(description, ['blockquote', 'cite'])} />
+    );
   }
 
   handleClick = (e) => {
@@ -99,10 +117,10 @@ export class Addon extends React.Component {
   }
 
   render() {
-    const { heading, slug, subHeading, type } = this.props;
+    const { heading, slug, type } = this.props;
 
     if (!validAddonTypes.includes(type)) {
-      throw new Error('Invalid addon type');
+      throw new Error(`Invalid addon type "${type}"`);
     }
 
     const addonClasses = classNames('addon', {
@@ -116,11 +134,11 @@ export class Addon extends React.Component {
         <div className="content">
           {this.getError()}
           <div className="copy">
-            <h2 ref="heading" className="heading">{heading} {subHeading ?
-              <span ref="sub-heading" className="sub-heading">{subHeading}</span> : null}</h2>
-            <p ref="editorial-description"
-               className="editorial-description"
-               dangerouslySetInnerHTML={this.getDescription()} />
+            <h2
+              ref="heading"
+              className="heading"
+              dangerouslySetInnerHTML={sanitizeHTML(heading, ['span'])} />
+            {this.getDescription()}
           </div>
           <div className="install-button">
             <InstallButton slug={slug} />

src/disco/constants.js

@@ -18,7 +18,7 @@ export const validInstallStates = [
 
 // Add-on types.
 export const EXTENSION_TYPE = 'extension';
-export const THEME_TYPE = 'theme';
+export const THEME_TYPE = 'persona';
 // These types are not used.
 // export const DICT_TYPE = 'dictionary';
 // export const SEARCH_TYPE = 'search';

src/disco/containers/DiscoPane.js

@@ -5,6 +5,10 @@ import { connect } from 'react-redux';
 import { asyncConnect } from 'redux-async-connect';
 import { camelCaseProps } from 'core/utils';
 
+import { getDiscoveryAddons } from 'disco/api';
+import { discoResults } from 'disco/actions';
+import { loadEntities } from 'core/actions';
+
 import Addon from 'disco/components/Addon';
 import translate from 'core/i18n/translate';
 
@@ -13,7 +17,7 @@ import videoMp4 from 'disco/video/AddOns.mp4';
 import videoWebm from 'disco/video/AddOns.webm';
 
 
-class DiscoPane extends React.Component {
+export class DiscoPane extends React.Component {
   static propTypes = {
     i18n: PropTypes.object.isRequired,
     results: PropTypes.arrayOf(PropTypes.object),
@@ -72,15 +76,26 @@ class DiscoPane extends React.Component {
   }
 }
 
-function loadDataIfNeeded() {
-  /* istanbul ignore next */
-  return Promise.resolve();
+function loadedAddons(state) {
+  return state.discoResults.map((result) => ({...result, ...state.addons[result.addon]}));
+}
+
+export function loadDataIfNeeded({ store: { dispatch, getState }}) {
+  const state = getState();
+  const addons = loadedAddons(state);
+  if (addons.length > 0) {
+    return Promise.resolve();
+  }
+  return getDiscoveryAddons({api: state.api})
+    .then(({ entities, result }) => {
+      dispatch(loadEntities(entities));
+      dispatch(discoResults(result.results.map((r) => entities.discoResults[r])));
+    });
 }
 
-function mapStateToProps(state) {
-  const { addons } = state;
+export function mapStateToProps(state) {
   return {
-    results: [addons['japanese-tattoo'], addons['awesome-screenshot-capture-']],
+    results: loadedAddons(state),
   };
 }
 

src/disco/css/Addon.scss

@@ -11,6 +11,16 @@ $addon-padding: 20px;
   line-height: 1.5;
   margin-top: 20px;
 
+  blockquote {
+    margin: 0;
+  }
+
+  .editorial-description {
+    color: $secondary-font-color;
+    font-size: 12px;
+    margin: 0.5em 0;
+  }
+
   &.theme {
     display: block;
 
@@ -49,6 +59,19 @@ $addon-padding: 20px;
     }
   }
 
+  .heading {
+    color: $primary-font-color;
+    font-size: 18px;
+    font-weight: medium;
+    margin: 0;
+
+    span {
+      color: $secondary-font-color;
+      font-size: 14px;
+      font-weight: normal;
+    }
+  }
+
   .content {
     display: flex;
     align-items: center;
@@ -88,25 +111,6 @@ $addon-padding: 20px;
       padding: 30px 20px;
       flex-grow: 1;
 
-      .heading {
-        color: $primary-font-color;
-        font-size: 18px;
-        font-weight: medium;
-        margin: 0;
-      }
-
-      .sub-heading {
-        color: $secondary-font-color;
-        font-size: 14px;
-        font-weight: normal;
-      }
-
-      .editorial-description {
-        color: $secondary-font-color;
-        font-size: 12px;
-        margin: 0.5em 0;
-      }
-
       // Remove the bottom margin of the last element.
       & :last-child {
         margin-bottom: 0;