Load articles off wire (#33)

* successfully load articles from heroku

* delete mock article json, alt

* add todo comment

app/actions/actions.js

@@ -9,6 +9,8 @@ export function activateTopic(topic) {
 }
 
 export function newArticle(article) {
+  // Where article is the index of the next article to get, or null to indicate
+  // we should hit the backend for a fresh batch of articles
   return { type: types.NEW_ARTICLE, article };
 }
 

app/api.js

@@ -0,0 +1,38 @@
+import data from 'assets/tua.json';
+import $ from 'jquery';
+
+const USE_DOCKER = false;
+let   BASE_URL   = 'http://text-thresher.herokuapp.com';
+if (USE_DOCKER) {
+  BASE_URL       = 'http://192.168.99.100:5000';
+}
+const ARTICLES_URL   = BASE_URL + '/api/articles/';
+const HIGHLIGHTS_URL = BASE_URL + '/api/highlight_groups/';
+
+export default class api {
+  static getArticles() {
+    // TODO: consider somehow not synch doing this
+    var res = $.ajax({ url: ARTICLES_URL, async: false });
+    if (res.status !== 200) {
+      return { article: data.results };
+    }
+    // need to have conversation with backend about where these legacy properties
+    // i.e. topics comes from
+    var articles = [];
+    res = JSON.parse(res.responseText);
+    for (var article of res.results) {
+      articles.push(Object.assign({},
+        { article, analysis_type: { topics: [{ name: 'Event type' }] } })
+      );
+    }
+    return articles;
+  }
+
+  static sendHighlights(highlights) {
+    // TODO: finish this function
+    $.ajax({ url: HIGHLIGHTS_URL,
+             method: 'POST',
+             data: highlights,
+             success: _ => _ });
+  }
+}

app/components/annotation/Article.js

@@ -88,7 +88,7 @@ const Article = React.createClass({
     }
 
     return (
-      <div>
+      <div className='article'>
         <div className='tua__header-text'>
           Focus on the bold text about '{topic.name}' and answer the questions.
         </div>

app/components/annotation/Tua.js

@@ -1,12 +1,12 @@
 import { newArticle } from 'actions/actions';
 import Article from 'components/annotation/article';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ReactCSSTransitionsGroup from 'react-addons-css-transition-group';
 import { connect } from 'react-redux';
 import TopicPicker from 'components/annotation/topicPicker';
-import tmpdata from 'assets/tmpArticles.json';
 
-import 'fadeIn.scss';
+import 'fade.scss';
 
 const mapDispatchToProps = dispatch => {
   return {
@@ -17,7 +17,8 @@ const mapDispatchToProps = dispatch => {
 }
 
 const mapStateToProps = state => {
-  return { articles: state.articleReducers.article };
+  return { articles: state.articleReducers.articles,
+           curArticle: state.articleReducers.curArticle };
 }
 
 const Tua = React.createClass({
@@ -36,16 +37,20 @@ const Tua = React.createClass({
   propTypes: {
     articles: React.PropTypes.array,
     onNewArticle: React.PropTypes.func,
-    params: React.PropTypes.object.isRequired
+    params: React.PropTypes.object.isRequired,
+    curArticle: React.PropTypes.number
   },
 
   handleNext() {
-    this.props.onNewArticle(tmpdata.results);
+    this.props.onNewArticle(this.props.curArticle + 1);
+    ReactDOM.findDOMNode(this).scrollIntoView();
   },
 
   render() {
-    const {tua_id}: string = this.props.params;
-    let tua = this.props.articles[tua_id];
+    // TODO: we need to have a larger discussion of route design
+    // const {cur_article}: string = this.props.params;
+    let cur_article = this.props.curArticle;
+    let tua = this.props.articles[cur_article];
     let article = tua.article;
     let topics = tua.analysis_type.topics;
 
@@ -57,7 +62,13 @@ const Tua = React.createClass({
                                 transitionLeaveTimeout={500}>
         <div className='tua'>
           <div className='text-wrapper'>
-            <Article topics={topics} article={article}/>
+            <ReactCSSTransitionsGroup transitionName='fade-between'
+                                      transitionAppear
+                                      transitionAppearTimeout={500}
+                                      transitionEnterTimeout={500}
+                                      transitionLeaveTimeout={500}>
+              <Article topics={topics} article={article} key={cur_article}/>
+            </ReactCSSTransitionsGroup>
             <br/>
             <button onClick={this.handleNext}>Next</button>
           </div>

app/components/quiz/Quiz.js

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import tmpQuestions from 'assets/tmpQuestions.json';
 
 import 'Quiz.scss';
-import 'fadeIn.scss';
+import 'fade.scss';
 
 const mapDispatchToProps = dispatch => {
   return {

app/reducers/articleReducers.js

@@ -1,17 +1,22 @@
 import { ADD_HIGHLIGHT,
          NEW_ARTICLE,
          ACTIVATE_TOPIC } from '../actions/actionTypes';
-import data from 'assets/tua.json';
+import api from '../api.js';
 
 // Note: not 100% sure this is the 'proper' reducer layout - we'll find out more
 // as we go
 
-const initialState = {
-  // For testing purposes there will be a default static article
-  article: data.results,
-  highlights: [],
+function getInitialState() {
+  return { articles: api.getArticles() };
 }
 
+const initialState = Object.assign({
+  articles: [],
+  highlights: [],
+  // TODO: somehow track what the user's seen in their sessions not just count
+  curArticle: 0,
+}, getInitialState());
+
 function mergeHighlights(list) {
   // TODO: write tests for me
   var newlist = [];
@@ -55,12 +60,16 @@ export default function articleReducer(state = initialState, action) {
       return Object.assign({}, state,
                            { highlights: mergeHighlights(newHighlights) });
     case NEW_ARTICLE:
-      // TODO: save highlights before deleting htem
-      return Object.assign({}, state, { article: action.article, highlights: [] });
-
+      api.sendHighlights(state.highlights);
+      if (!action.article || action.article >= state.articles.length) {
+        return Object.assign({}, state, { articles: api.getArticles(),
+                                          highlights: [],
+                                          curArticle: 0 });
+      }
+      return Object.assign({}, state, { highlights: [],
+                                        curArticle: state.curArticle + 1 });
     case ACTIVATE_TOPIC:
       return Object.assign({}, state, { currentTopic: action.topic });
-
     default:
       return state;
   }

app/routes.js

@@ -9,7 +9,7 @@ export default (
   <Route name='app' path='/' component={App}>
     <Route
       name='tuaAnalysis'
-      path='tua/:tua_id'
+      path='tua/:cur_article'
       component={Tua}>
       <Route
         name='topicAnalysis'

app/styles/Article.scss

@@ -16,6 +16,7 @@
 
   .article {
     @include newspaper;
+    transition: opacity $transition-slow;
 
     .highlighted {
       // TODO: generate programmatically?

app/styles/_styleguide.scss

@@ -1,6 +1,7 @@
 $font-newspaper: georgia, 'PT Serif', serif;
 $font-ui: 'Avenir Next', 'Montserrat', sans-serif;
 $transition-fast: 0.3s ease;
+$transition-slow: 0.6s ease;
 $offblack      : #333;
 $offwhite      : #ededed;
 $red_accent    : #F16061;

app/styles/fade.scss

@@ -0,0 +1,28 @@
+.fadein-appear {
+  opacity: 0.01;
+}
+
+.fadein-appear.fadein-appear-active {
+  opacity: 1;
+  transition: opacity .5s ease-in;
+}
+
+.fade-between-enter {
+  opacity: 0.01;
+}
+
+.fade-between-enter.fade-between-enter-active {
+  opacity: 1;
+}
+
+.fade-between-leave {
+  /* hacky disappear for state change */
+  visibility: hidden;
+  height: 0px;
+  width: 0px;
+  opacity: 1;
+}
+
+.fade-between-leave.fade-between-leave-active {
+  opacity: 0;
+}

notes.json

@@ -0,0 +1,43 @@
+{
+  "@context": "http://www.w3.org/ns/anno.jsonld",
+  "id": "http://example.org/anno23",
+  "type": "Annotation",
+  "body": "http://example.org/review1",
+  "target": {
+    "source": "http://example.org/ebook1",
+    "selector": {
+      "type": "TextPositionSelector",
+      "start": 412,
+      "end": 795
+    }
+  }
+}
+
+
+/api/
+{
+  "@context": "http://www.w3.org/ns/anno.jsonld",
+  "id": "http://example.org/anno23",
+  "type": "Annotation",
+  "body": "http://example.org/review1",
+  "target": {
+    "source": "http://example.org/ebook1",
+    "selector": {
+      "type": "MultiplePositionSelector",
+      "offsets": [
+        {
+          "start": 0,
+          "end": 5
+        },
+        {
+          "start": 0,
+          "end": 5
+        },
+        {
+          "start": 0,
+          "end": 5
+        }
+      ]
+    }
+  }
+}

package.json

@@ -15,7 +15,6 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "alt": "^0.18.2",
     "autoprefixer-loader": "^3.2.0",
     "babel-core": "^6.4.5",
     "babel-eslint": "^4.1.8",