Added searching for a follower user

The Follower page has a search text field to find a user in the list of followers. A name can be given, or a letter, and the result will fidn the closes match by character if none matches exactly.

client/src/actions/followActions.js

@@ -13,6 +13,7 @@ export const SEND_FOLLOW_START = 'SEND_FOLLOW_START';
 export const SEND_FOLLOW_SUCCESS = 'SEND_FOLLOW_SUCCESS';
 export const SEND_UNFOLLOW_START = 'SEND_UNFOLLOW_START';
 export const SEND_UNFOLLOW_SUCCESS = 'SEND_UNFOLLOW_SUCCESS';
+export const SEARCH_START = 'SEARCH_START';
 
 const client = new Client('https://hive.anyx.io/');
 
@@ -128,6 +129,16 @@ export const sendUnfollowSuccess = user => ({
   user,
 });
 
+/**
+ *  Action creator for starting to unfollow a user.
+ *
+ *  @param {string} user User to unfollow
+ *  @return {object} The action data
+ */
+export const searchStart = () => ({
+  type: SEARCH_START,
+});
+
 /**
  *  Get the follow count for a user.
  *
@@ -154,7 +165,7 @@ export const getFollowCount = user => (dispatch, getState) => {
  *  @param {number} limit Number of users to get
  *  @returns {function} Dispatches returned action object
  */
-export const getFollowers = (user, startFrom = '', limit = 100, more = false, type = 'blog', ) => (dispatch, getState) => {
+export const getFollowers = (user, startFrom = '', limit = 100, more = false, type = 'blog') => (dispatch, getState) => {
   dispatch(followStart());
 
   if (more)
@@ -235,6 +246,15 @@ export const getAllFollowing = user => async (dispatch, getState) => {
     })
 }
 
+/**
+ *
+ */
+export const searchFollowers = (user, startFrom = '', limit = 100, more = false, type = 'blog') => (dispatch, getState) => {
+  dispatch(searchStart());
+
+  dispatch(getFollowers(user, startFrom));
+}
+
 /**
  *  Send a follow request to Steem.
  *
@@ -246,7 +266,7 @@ export const sendFollowUser = (userToFollow, pageOwner) => (dispatch, getState)
   const { auth: { user }} = getState();
 
   return SteemConnect.follow(user, userToFollow)
-    .then(result => {   
+    .then(result => {
       dispatch(sendFollowSuccess(userToFollow));
       if (pageOwner === userToFollow)
         dispatch(getFollowCount(pageOwner));

client/src/components/pages/Steem/Followers.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Header } from 'semantic-ui-react';
+import { Header, Icon, Form, Grid } from "semantic-ui-react";
 
 import UserCard from './UserCard';
 import FollowButton from './FollowButton';
@@ -14,11 +14,40 @@ const Followers = (props) => {
   const {
     followers,
     userLogged,
+    handleSubmitFollowFind,
+    handleChangeFollowFind,
+    userToFind,
   } = props;
 
+  const findUserError = null;
+  const findUserLoading = false;
+
   return (
     <div id='follows'>
-      <Header>Followers</Header>
+      <Grid columns={2}>
+        <Grid.Column width={4}>
+          <Header as='h2'>Followers</Header>
+        </Grid.Column>
+        <Grid.Column width={12}>
+          <Form size="tiny" onSubmit={handleSubmitFollowFind}>
+            <Form.Group className='left'>
+              <Form.Field>
+                <Form.Input
+                  placeholder='Find a user'
+                  name='userToFind'
+                  value={userToFind}
+                  onChange={handleChangeFollowFind}
+                  loading={findUserLoading}
+                />
+                {findUserError}
+              </Form.Field>
+              <Form.Button icon size="tiny" color="blue">
+                <Icon name="search" />
+              </Form.Button>
+            </Form.Group>
+          </Form>
+        </Grid.Column>
+      </Grid>
       {
         followers.map(follower => {
           const user = follower.follower;

client/src/components/pages/Steem/Posts.js

@@ -15,7 +15,7 @@ import { getSummaryContent } from '../../../actions/summaryPostActions';
 import * as addPostActions from '../../../actions/addPostActions';
 import { upvotePost } from '../../../actions/upvoteActions';
 import { resteem } from '../../../actions/resteemActions';
-import { getFollowCount, getFollowers, getFollowing, clearFollow } from '../../../actions/followActions';
+import { getFollowCount, getFollowers, getFollowing, clearFollow, searchFollowers } from '../../../actions/followActions';
 import ToggleView from '../../kure/ToggleView';
 import { changeViewSettings, initViewStorage } from '../../../actions/settingsActions';
 import ModalVotesList from '../../Modal/ModalVotesList';
@@ -120,6 +120,7 @@ class Posts extends Component {
         voters: [],
         ratio: 0,
       },
+      userToFind: '',
     };
   }
 
@@ -360,6 +361,35 @@ class Posts extends Component {
     });
   }
 
+  /**
+   *  Set state values for when finding a user changes.
+   *
+   *  @param {event} e Event triggered by element to handle
+   *  @param {string} name Name of the element triggering the event
+   *  @param {string} value Value of the element triggering the event
+   */
+  handleChangeFollowFind = (event, { name, value }) => {
+    this.setState({
+      [name]: value,
+     });
+  }
+
+  /**
+   *
+   */
+  handleSubmitFollowFind = () => {
+    const { userToFind } = this.state;
+    const {
+      match: {
+        params: {
+          author,
+        },
+      },
+      getSearchFollow,
+    } = this.props;
+    getSearchFollow(author, userToFind)
+  }
+
   render() {
     const {
       props: {
@@ -395,6 +425,7 @@ class Posts extends Component {
         showDesc,
         modalVotesOpen,
         voterData,
+        userToFind,
       },
     } = this;
 
@@ -588,6 +619,9 @@ class Posts extends Component {
                       <Followers
                         userLogged={user}
                         followers={followers}
+                        handleSubmitFollowFind={this.handleSubmitFollowFind}
+                        handleChangeFollowFind={this.handleChangeFollowFind}
+                        userToFind={userToFind}
                       />
 
                     )
@@ -725,6 +759,9 @@ const mapDispatchToProps = dispatch => (
     clearFollowData: () => (
       dispatch(clearFollow())
     ),
+    getSearchFollow: (user, userToFind) => (
+      dispatch(searchFollowers(user, userToFind))
+    ),
   }
 );
 

client/src/reducers/followReducer.js

@@ -9,6 +9,7 @@ import {
   SEND_FOLLOW_SUCCESS,
   SEND_UNFOLLOW_START,
   SEND_UNFOLLOW_SUCCESS,
+  SEARCH_START,
 } from '../actions/followActions';
 
 /**
@@ -115,6 +116,11 @@ export const follow = (state = {
           userFollowing: '',
         }
       }
+    case SEARCH_START:
+      return {
+        ...state,
+        followers: [],
+      }
     default:
       return state
   }