Add ConversationsToolPage

src/actions/tools.js

@@ -24,6 +24,7 @@ export const TOOLS__ADD_USER_POSTS_TO_RIVER = 'TOOLS__ADD_USER_POSTS_TO_RIVER';
 export const TOOLS__SET_USER_POSTS_RIVER = 'TOOLS__SET_USER_POSTS_RIVER';
 
 export const TOOLS__SET_FOLLOWED_USERS = 'TOOLS__SET_FOLLOWED_USERS';
+export const TOOLS__SET_CONVERSATIONS_RIVER = 'TOOLS__SET_CONVERSATIONS_RIVER';
 
 export function addSchoolsToRiver(schools) {
   return {
@@ -74,3 +75,10 @@ export function setFollowedUsers(users) {
     users
   };
 }
+
+export function setConversationsRiver(users) {
+  return {
+    type: TOOLS__SET_CONVERSATIONS_RIVER,
+    users
+  };
+}

src/components/tools/user-list.js

@@ -55,7 +55,11 @@ export default function UserList({ onClick, users, selectedUserId }) {
 }
 
 UserList.propTypes = {
-  onClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   selectedUserId: uuid4PropType,
   users: ImmutablePropType(ArrayOfUsersPropType).isRequired
 };
+
+UserList.defaultParams = {
+  onClick: () => { }
+};

src/less/blocks/color.less

@@ -45,4 +45,10 @@
   &-green {
     color: @color__green;
   }
+  &-gray {
+    color: @color__gray;
+  }
+  &-dark_gray {
+    color: @color__dark_gray;
+  }
 }

src/pages/tools/conversations-tool.js

@@ -0,0 +1,101 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2016  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from 'react';
+import { connect } from 'react-redux';
+import Helmet from 'react-helmet';
+import { Link } from 'react-router';
+
+import {
+  Immutable as ImmutablePropType
+} from '../../prop-types/common';
+import {
+  ArrayOfUsersId as ArrayOfUsersIdPropType,
+  MapOfUsers
+} from '../../prop-types/users';
+import createSelector from '../../selectors/createSelector';
+import { setConversationsRiver } from '../../actions/tools';
+import { addUsers } from '../../actions/users';
+import { getUrl } from '../../utils/urlGenerator';
+import { URL_NAMES } from '../../config';
+
+import Avatar from '../../components/user/avatar';
+import Icon from '../../components/icon';
+
+
+class ConversationsToolPage extends React.Component {
+  static displayName = 'ConversationsToolPage';
+
+  static propTypes = {
+    conversations_river: ImmutablePropType(ArrayOfUsersIdPropType).isRequired,
+    users: ImmutablePropType(MapOfUsers).isRequired,
+  };
+
+  static async fetchData(router, store, client) {
+    const state = store.getState();
+    const currentUserId = state.getIn(['current_user', 'id']);
+
+    if (currentUserId === null) {
+      return;
+    }
+
+    const users = await client.mutualFollows(currentUserId);
+    store.dispatch(setConversationsRiver(users));
+    store.dispatch(addUsers(users));
+  }
+
+  render() {
+    const {
+      conversations_river,
+      users
+    } = this.props;
+
+    const followedUsers = conversations_river.map(id => users.get(id));
+    const userItems = followedUsers.map((user, index) => (
+      <div
+        className="tools_item layout-align_justify"
+        key={index}
+      >
+        <Link className="layout" to={getUrl(URL_NAMES.USER, { username: user.get('username') })}>
+          <Avatar size={23} user={user} />
+          <span className="tools_item__child-padded">{user.get('username')}</span>
+        </Link>
+        <Icon className="action" color="gray" icon="message" />
+      </div>
+    ));
+
+    return (
+      <div className="layout">
+        <Helmet title="Followed people tool on " />
+        <div className="tools_page__list_col">
+          {userItems}
+        </div>
+      </div>
+    );
+  }
+}
+
+const selector = createSelector(
+  state => state.getIn(['tools', 'conversations_river']), // for the list of followed users
+  state => state.get('users'),
+  (conversations_river, users) => ({
+    conversations_river,
+    users
+  })
+);
+
+export default connect(selector)(ConversationsToolPage);

src/routing.js

@@ -54,6 +54,7 @@ import MyPostsToolPage from './pages/tools/my-posts-tool';
 import PeopleToolPage from './pages/tools/people-tool';
 import PasswordToolPage from './pages/tools/password-tool';
 import NewSchoolToolPage from './pages/tools/new-school-tool';
+import ConversationsToolPage from './pages/tools/conversations-tool';
 
 import List from './pages/list';
 import Induction from './pages/induction';
@@ -128,6 +129,7 @@ export function getRoutes(authHandler, fetchHandler) {
           <IndexRedirect to="password" />
           <Route component={PasswordToolPage} path="password" onEnter={withAuth} />
         </Route>
+        <Route component={ConversationsToolPage} path="conversations" onEnter={withAuth} />
       </Route>
       <Redirect from="/settings/password" to="/tools/account/password" />
     </Route>

src/store/tools.js

@@ -21,11 +21,12 @@ import { tools } from '../actions';
 
 
 const initialState = i.fromJS({
-  schools_river: [], // group things when the state gets clutered
+  schools_river: [],
   all_schools_loaded: false,
   schools_alphabet: [],
   user_posts_river: [],
-  followed_users: []
+  followed_users: [],
+  conversations_river: []
 });
 
 export default function reducer(state = initialState, action) {
@@ -65,6 +66,13 @@ export default function reducer(state = initialState, action) {
     case tools.TOOLS__SET_FOLLOWED_USERS: {
       const ids = action.users.map(u => u.id);
       state = state.set('followed_users', i.List(ids));
+      break;
+    }
+
+    case tools.TOOLS__SET_CONVERSATIONS_RIVER: {
+      const ids = action.users.map(u => u.id);
+      state = state.set('conversations_river', i.List(ids));
+      break;
     }
   }
 

src/utils/menu.js

@@ -134,5 +134,9 @@ export const toolsMenu = new MenuTree([
     children: [
       { name: 'Following', path: '/tools/people/following' }
     ]
+  },
+  {
+    name: 'Conversations',
+    path: '/tools/conversations'
   }
 ]);