Merge branch 'new-design' into fix/file-upload-warnings

src/app/Sidebar/RightSidebar.js

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
-import people from '../../helpers/people';
 
 import {
   getIsAuthenticated,
   getAuthenticatedUser,
-  getFollowingList,
   getIsAuthFetching,
+  getRecommendations,
 } from '../../reducers';
+import { updateRecommendations } from '../../user/userActions';
 
 import InterestingPeople from '../../components/Sidebar/InterestingPeople';
 import StartNow from '../../components/Sidebar/StartNow';
@@ -20,52 +20,35 @@ import PostRecommendation from '../../components/Sidebar/PostRecommendation';
   state => ({
     authenticated: getIsAuthenticated(state),
     authenticatedUser: getAuthenticatedUser(state),
-    followingList: getFollowingList(state),
     isAuthFetching: getIsAuthFetching(state),
-  }),
+    recommendations: getRecommendations(state),
+  }), {
+    updateRecommendations,
+  },
 )
 export default class RightSidebar extends React.Component {
   static propTypes = {
     authenticated: PropTypes.bool.isRequired,
     authenticatedUser: PropTypes.shape().isRequired,
-    followingList: PropTypes.arrayOf(PropTypes.string).isRequired,
     isAuthFetching: PropTypes.bool.isRequired,
     showPostRecommendation: PropTypes.bool,
+    recommendations: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })).isRequired,
+    updateRecommendations: PropTypes.func,
   };
 
   static defaultProps = {
     showPostRecommendation: false,
+    updateRecommendations: () => {},
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      randomPeople: this.getRandomPeople(),
-    };
-  }
-
-  getRandomPeople = () =>
-    people
-      .reduce((res, item) => {
-        if (!this.props.followingList.includes(item)) {
-          res.push({ name: item });
-        }
-        return res;
-      }, [])
-      .sort(() => 0.5 - Math.random())
-      .slice(0, 5);
-
-  handleRefreshInterestingPeople = () =>
-    this.setState({
-      randomPeople: this.getRandomPeople(),
-    });
+  handleInterestingPeopleRefresh = () => this.props.updateRecommendations();
 
   render() {
     const { authenticated, authenticatedUser, showPostRecommendation, isAuthFetching } = this.props;
     const InterestingPeopleWithData = () => (
       <InterestingPeople
-        users={this.state.randomPeople}
-        onRefresh={this.handleRefreshInterestingPeople}
+        users={this.props.recommendations}
+        onRefresh={this.handleInterestingPeopleRefresh}
       />
     );
 

src/components/Sidebar/InterestingPeople.js

@@ -29,7 +29,7 @@ const InterestingPeople = ({ users, onRefresh }) =>
   </div>);
 
 InterestingPeople.propTypes = {
-  users: PropTypes.arrayOf(PropTypes.shape()),
+  users: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
   onRefresh: PropTypes.func,
 };
 

src/reducers.js

@@ -78,6 +78,7 @@ export const getPendingReblogs = state => fromReblog.getPendingReblogs(state.reb
 
 export const getFollowingList = state => fromUser.getFollowingList(state.user);
 export const getPendingFollows = state => fromUser.getPendingFollows(state.user);
+export const getRecommendations = state => fromUser.getRecommendations(state.user);
 
 export const getUser = (state, username) => fromUsers.getUser(state.users, username);
 

src/user/userActions.js

@@ -1,5 +1,6 @@
 import Promise from 'bluebird';
 import steemConnect from 'sc2-sdk';
+import { createAction } from 'redux-actions';
 import { getFeed, getPosts } from '../reducers';
 import { getUserCommentsFromState, getFeedLoadingFromState } from '../helpers/stateHelpers';
 import { getAllFollowing } from '../helpers/apiHelpers';
@@ -133,3 +134,6 @@ export const getFollowing = (userName = '') => (dispatch, getState) => {
     },
   });
 };
+
+export const UPDATE_RECOMMENDATIONS = '@user/UPDATE_RECOMMENDATIONS';
+export const updateRecommendations = createAction(UPDATE_RECOMMENDATIONS);

src/user/userReducer.js

@@ -1,13 +1,26 @@
 import * as actions from './userActions';
+import people from '../helpers/people';
 
 const initialState = {
+  recommendations: [],
   following: {
     list: [],
     pendingFollows: [],
     isFetching: false,
   },
 };
 
+// filterRecommendations generates a random list of `count` recommendations
+// include users followed by the current user.
+const filterRecommendations = (following, count = 5) => {
+  const usernames = Object.values(following);
+  return people
+    .filter(p => !usernames.includes(p))
+    .sort(() => 0.5 - Math.random())
+    .slice(0, count)
+    .map(name => ({ name }));
+};
+
 export default function userReducer(state = initialState, action) {
   switch (action.type) {
     case actions.GET_FOLLOWING_START:
@@ -31,6 +44,7 @@ export default function userReducer(state = initialState, action) {
     case actions.GET_FOLLOWING_SUCCESS:
       return {
         ...state,
+        recommendations: filterRecommendations(action.payload),
         following: {
           ...state.following,
           list: action.payload,
@@ -80,6 +94,13 @@ export default function userReducer(state = initialState, action) {
           ),
         },
       };
+
+    case actions.UPDATE_RECOMMENDATIONS:
+      return {
+        ...state,
+        recommendations: filterRecommendations(state.following.list),
+      };
+
     default: {
       return state;
     }
@@ -88,3 +109,4 @@ export default function userReducer(state = initialState, action) {
 
 export const getFollowingList = state => state.following.list;
 export const getPendingFollows = state => state.following.pendingFollows;
+export const getRecommendations = state => state.recommendations;