Merge pull request #138 from lisamcho/my_opinions

My opinions: stop following and ignore feature + refactoring

src/js/actions/GuideActions.js

@@ -1,24 +1,29 @@
-import AppDispatcher from "../dispatcher/AppDispatcher";
-import GuideConstants from "../constants/GuideConstants";
-
-const GuideActions = {
-  /**
-   * @param {String} id to ignore
-   */
-  ignore: function (id) {
-    AppDispatcher.dispatch({
-      actionType: GuideConstants.ORG_IGNORE, id
-    });
-  },
-
-  /**
-   * @param {String} id to follow
-   */
-  follow: function (id) {
-    AppDispatcher.dispatch({
-      actionType: GuideConstants.ORG_FOLLOW, id
-    });
-  }
-};
-
-export default GuideActions;
+var Dispatcher = require("../dispatcher/Dispatcher");
+
+var GuideActions = (function (_Dispatcher) {
+  function _GuideActions () { }
+
+  _GuideActions.prototype.ignore = function ignore (we_vote_id) {
+    _Dispatcher.loadEndpoint("organizationFollowIgnore", { organization_we_vote_id: we_vote_id} );
+  };
+
+  _GuideActions.prototype.follow = function follow (we_vote_id) {
+    _Dispatcher.loadEndpoint("organizationFollow", { organization_we_vote_id: we_vote_id} );
+  };
+
+  _GuideActions.prototype.stopFollowing = function stopFollowing (we_vote_id) {
+    _Dispatcher.loadEndpoint("organizationStopFollowing", { organization_we_vote_id: we_vote_id} );
+  };
+
+  _GuideActions.prototype.retrieveGuidesToFollow = function retrieveGuidesToFollow (election_id){
+    _Dispatcher.loadEndpoint("voterGuidesToFollowRetrieve", { google_civic_election_id: election_id });
+  };
+
+  _GuideActions.prototype.retrieveGuidesFollowed = function retrieveGuidesFollowed (){
+    _Dispatcher.loadEndpoint("voterGuidesFollowedRetrieve");
+  };
+
+  return new _GuideActions();
+}(Dispatcher));
+
+module.exports = GuideActions;

src/js/components/FollowOrIgnore.jsx

@@ -1,79 +1,26 @@
 "use strict";
-
 import React, { Component, PropTypes } from "react";
 import { Button, ButtonToolbar } from "react-bootstrap";
-import VoterGuideStore from "../stores/VoterGuideStore";
+import GuideActions from "../actions/GuideActions";
 
 export default class FollowOrIgnore extends Component {
     static propTypes = {
-        organization_we_vote_id: PropTypes.string,
-        action: PropTypes.object.isRequired,
-        action_text: PropTypes.string,
-        OrganizationFollowed: PropTypes.string
+        organization_we_vote_id: PropTypes.string.isRequired,
     };
 
-    constructor(props) {
-        super(props);
-
-        this.state = {
-          OrganizationFollowed: this.props.OrganizationFollowed,
-        };
-    }
-
-  toggleFollow (evt) {
-    evt.stopPropagation();
-    if (this.state.OrganizationFollowed == "Yes")
-      this.props.action.stopFollowingOrg(this.props.organization_we_vote_id);
-    else
-      this.props.action.followOrg(this.props.organization_we_vote_id);
-  }
-
-  ignoreOrgLocal (evt) {
-    evt.stopPropagation();
-    this.props.action.ignoreOrg(this.props.organization_we_vote_id);
-  }
+    render () {
+      var ignoreFunc = GuideActions.ignore.bind(this, this.props.organization_we_vote_id);
+      var stopFollowingFunc = GuideActions.stopFollowing.bind(this, this.props.organization_we_vote_id);
 
-  componentDidMount () {
-    this.changeListener = this._onChange.bind(this);
-    VoterGuideStore.addChangeListener(this.changeListener);
-  }
-
-  componentWillUnmount() {
-    VoterGuideStore.removeChangeListener(this.changeListener);
-  }
-
-  _onChange () {
-    VoterGuideStore.getVoterGuideByWeVoteId(
-      this.props.we_vote_id, voter_guide => this.setState({
-        OrganizationFollowed: voter_guide.OrganizationFollowed,
-      })
-    );
-  }
-
-    render() {
         var floatRight = {
             float: "right"
         };
-        var action_text;
-        if (this.props.action_text) {
-            action_text = this.props.action_text;
-        } else {
-            if (this.state.OrganizationFollowed == "Yes") {
-                action_text = "Followed";
-            } else {
-                action_text = "Follow";
-            }
-        }
-        var ignore_code;
-        if (this.state.OrganizationFollowed != "Yes") {
-            ignore_code = <Button bsStyle="danger" bsSize="small" onClick={this.ignoreOrgLocal.bind(this)}>Ignore</Button>
-        }
-
+
       return (
             <span style={floatRight}>
                 <ButtonToolbar>
-                    <Button bsStyle="info" bsSize="small" onClick={this.toggleFollow.bind(this)}>{action_text}</Button>
-                    {ignore_code}
+                    <Button bsStyle="info" bsSize="small" onClick={stopFollowingFunc}>Following</Button>
+                    <Button bsStyle="danger" bsSize="small" onClick={ignoreFunc}>Ignore</Button>
                 </ButtonToolbar>
             </span>
         );

src/js/components/VoterGuide/GuideList.jsx

@@ -1,8 +1,6 @@
 import React, { Component, PropTypes } from "react";
 import ReactCSSTransitionGroup from "react-addons-css-transition-group";
 import Organization from "./Organization";
-
-import GuideStore from "../../stores/GuideStore";
 import GuideActions from "../../actions/GuideActions";
 
 export default class GuideList extends Component {
@@ -11,88 +9,33 @@ export default class GuideList extends Component {
     organizations: PropTypes.array
   };
 
-  constructor (props) {
-    super(props);
-
-    var { organizations: orgs } = this.props;
-
-    /**
-     * this is being done because of issue #85...
-     * https://github.com/wevote/WeVoteServer/issues/85
-
-     * READ:
-     *   -- GuideStore is naturally unique per item key
-     *   -- so... store data and then convert it to an array
-
-     * SEE BELOW:
-     *  GuideStore.addOrganization
-     * then ->
-     *  GuideStore.toArray()
-
-     * this is inefficient but it needs to be done to create unique
-     * organizations in the list because the backend is not unique.
-     */
-
-    orgs.forEach(GuideStore.addOrganization);
-    this.state = { orgList: GuideStore.toArray() };
-
-  }
-
-  componentDidMount () {
-    GuideStore.addChangeListener(this.storeChange.bind(this));
-  }
-
-  componentWillUnmount () {
-    GuideStore.removeChangeListener(this.storeChange.bind(this));
-  }
-
-  storeChange () {
-    this.setState({ orgList: GuideStore.toArray() });
-  }
-
   /**
-   * when a user clicks ignore, make the org disappear
-   * @param {Integer} i index in array of the item clicked
+   * when a user clicks ignore or follow, make the org disappear
    */
-  handleIgnore (i) {
-
-    var {
-      organization_we_vote_id: id
-    } = this.state.orgList.slice().splice(i, 1)[0];
-
+  handleIgnore (id) {
     GuideActions.ignore(id);
-
   }
 
-  handleFollow (i) {
-    var {
-      organization_we_vote_id: id
-    } = this.state.orgList.slice().splice(i, 1)[0];
-
+  handleFollow (id) {
     GuideActions.follow(id);
   }
 
   render () {
 
-    let orgs = this.state.orgList.map( (org, i) => {
-
-      var {
-        organization_we_vote_id: id,
-        voter_guide_display_name: displayName,
-        voter_guide_image_url: imageUrl,
-        twitter_followers_count: followers
-      } = org;
-
-      // Key can be id once issue #85 is resolved on server
-      // https://github.com/wevote/WeVoteServer/issues/85
-      const key = id + "-" + i;
+    let orgs = this.props.organizations.map( (org, i) => {
 
       const organization =
-        <Organization id={id} key={key} displayName={displayName} followers={followers} imageUrl={imageUrl} >
-          <button className="btn btn-primary follow" onClick={this.handleFollow.bind(this, i)}>
+        <Organization id={org.organization_we_vote_id}
+                      key={org.organization_we_vote_id}
+                      displayName={org.voter_guide_display_name}
+                      followers={org.twitter_followers_count}
+                      imageUrl={org.voter_guide_image_url} >
+          <button className="btn btn-primary follow"
+                  onClick={this.handleFollow.bind(this, org.organization_we_vote_id)}>
             Follow
           </button>
-          <button className="btn btn-default ignore" onClick={this.handleIgnore.bind(this, i)}>
+          <button className="btn btn-default ignore"
+                  onClick={this.handleIgnore.bind(this, org.organization_we_vote_id)}>
             Ignore
           </button>
         </Organization>;