to heroku

thai321 · Oct 5, 2017 · 0e323f2 · 0e323f2
1 parent 6126f3b
commit 0e323f2
Show file tree

Hide file tree

Showing 7 changed files with 1,521 additions and 1,427 deletions.
diff --git a/FrontEnd/components/user_show/user_follow.jsx b/FrontEnd/components/user_show/user_follow.jsx
@@ -1,15 +1,29 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
 
 import { uniqueId } from '../../util/id_generator';
 
 import UserIndexItem from '../user_index/user_index_item';
 
 class UserFollow extends React.Component {
-  constructor(props) {
-    super(props);
+  componentDidMount() {
+    this.props.fetchFollowers(this.props.user.id);
+    this.props.fetchFollowees(this.props.user.id);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { userId } = this.props.match.params;
+    const nextId = nextProps.match.params.userId;
+
+    if (userId !== nextId) {
+      this.props.fetchFollowers(nextId);
+      this.props.fetchFollowees(nextId);
+    }
   }
 
   displayFollowUsers(users, type) {
+    if (!users) return;
+
     return users.map((user, idx) => {
       return (
         <UserIndexItem
@@ -21,37 +35,42 @@ class UserFollow extends React.Component {
   }
 
   render() {
-    const { followeeUsers, followerUsers } = this.props;
-    const hideFollowee = followeeUsers.length === 0 ? 'none' : '';
-
-    return (
-      <div className="user-follow-index">
-        {followeeUsers.length === 0 ? (
-          ''
-        ) : (
-          <div className="user-follow-following">
-            <Element name="following" />
-            <h2>{followeeUsers.length} Following</h2>
-            <div className="row">
-              {this.displayFollowUsers(followeeUsers, 'follower')}
+    if (!this.props.user) {
+      return <div className="loader" />;
+    } else {
+      const { followeeUsers, followerUsers } = this.props;
+      const hideFollowee =
+        followeeUsers && followeeUsers.length === 0 ? 'none' : '';
+
+      return (
+        <div className="user-follow-index">
+          {followeeUsers && followeeUsers.length === 0 ? (
+            ''
+          ) : (
+            <div className="user-follow-following">
+              <Element name="following" />
+              <h2>{followeeUsers && followeeUsers.length} Following</h2>
+              <div className="row">
+                {this.displayFollowUsers(followeeUsers, 'follower')}
+              </div>
             </div>
-          </div>
-        )}
-
-        {followerUsers.length === 0 ? (
-          ''
-        ) : (
-          <div className="user-follow-follower">
-            <Element name="follower" />
-            <h2>{followerUsers.length} Followers</h2>
-            <div className="row">
-              {this.displayFollow(followerUsers, 'followers')}
+          )}
+
+          {followerUsers && followerUsers.length === 0 ? (
+            ''
+          ) : (
+            <div className="user-follow-follower">
+              <Element name="follower" />
+              <h2>{followerUsers && followerUsers.length} Followers</h2>
+              <div className="row">
+                {this.displayFollowUsers(followerUsers, 'followers')}
+              </div>
             </div>
-          </div>
-        )}
-      </div>
-    );
+          )}
+        </div>
+      );
+    }
   }
 }
 
-export default UserFollow;
+export default withRouter(UserFollow);
diff --git a/FrontEnd/components/user_show/user_follow_container.js b/FrontEnd/components/user_show/user_follow_container.js
@@ -2,6 +2,8 @@ import { connect } from 'react-redux';
 
 import UserFollow from './user_follow';
 
+import { fetchFollowers, fetchFollowees } from '../../actions/user_actions';
+
 const mapStateToProps = (state, ownProps) => {
   const { user } = ownProps;
 
@@ -26,8 +28,16 @@ const mapStateToProps = (state, ownProps) => {
 
   return {
     followerUsers,
-    followeeUsers
+    followeeUsers,
+    Element: ownProps.Element
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchFollowers: id => dispatch(fetchFollowers(id)),
+    fetchFollowees: id => dispatch(fetchFollowees(id))
   };
 };
 
-export default connect(mapStateToProps, null)(UserFollow);
+export default connect(mapStateToProps, mapDispatchToProps)(UserFollow);
diff --git a/FrontEnd/components/user_show/user_show.jsx b/FrontEnd/components/user_show/user_show.jsx
@@ -7,7 +7,7 @@ import { uniqueId } from '../../util/id_generator';
 import ProjectIndexItem from '../project_index/project_index_item';
 import FavoriteShowContainer from '../favorite_show/favorite_show_container';
 
-import UserIndexItem from '../user_index/user_index_item';
+import UserFollowContainer from './user_follow_container';
 
 class UserShow extends React.Component {
   constructor(props) {
@@ -180,17 +180,6 @@ class UserShow extends React.Component {
     }
   }
 
-  displayFollowUsers(users, type) {
-    return users.map((user, idx) => {
-      return (
-        <UserIndexItem
-          key={user.id + user.username + idx + uniqueId()}
-          user={user}
-        />
-      );
-    });
-  }
-
   render() {
     if (!this.props.user) {
       return <div className="loader" />;
@@ -199,8 +188,8 @@ class UserShow extends React.Component {
         user,
         projectsByUser,
         unPublishedProjects,
-        followeeUsers,
-        followerUsers
+        followees,
+        followers
       } = this.props;
 
       const publishText =
@@ -280,23 +269,23 @@ class UserShow extends React.Component {
               </div>
 
               <div className="user-show-follow-buttons">
-                {followeeUsers.length > 0 ? (
+                {followees.length > 0 ? (
                   <button
                     className="btn btn-outline-primary"
                     onClick={this.handleScroll('following')}
                   >
-                    {`${followeeUsers.length} Following`}
+                    {`${followees.length} Following`}
                   </button>
                 ) : (
                   ''
                 )}
 
-                {followerUsers.length > 0 ? (
+                {followers.length > 0 ? (
                   <button
                     className="btn btn-outline-success"
                     onClick={this.handleScroll('follower')}
                   >
-                    {`${followerUsers.length} Followers`}
+                    {`${followers.length} Followers`}
                   </button>
                 ) : (
                   ''
@@ -337,31 +326,7 @@ class UserShow extends React.Component {
 
           <FavoriteShowContainer user={user} />
 
-          <div className="user-follow-index">
-            {followeeUsers.length === 0 ? (
-              ''
-            ) : (
-              <div className="user-follow-following">
-                <Element name="following" />
-                <h2>{followeeUsers.length} Following</h2>
-                <div className="row">
-                  {this.displayFollowUsers(followeeUsers, 'follower')}
-                </div>
-              </div>
-            )}
-
-            {followerUsers.length === 0 ? (
-              ''
-            ) : (
-              <div className="user-follow-follower">
-                <Element name="follower" />
-                <h2>{followerUsers.length} Followers</h2>
-                <div className="row">
-                  {this.displayFollowUsers(followerUsers, 'followers')}
-                </div>
-              </div>
-            )}
-          </div>
+          <UserFollowContainer user={user} Element={Element} />
         </div>
       );
     }

diff --git a/FrontEnd/components/user_show/user_show_container.js b/FrontEnd/components/user_show/user_show_container.js
@@ -51,35 +51,21 @@ const mapStateToProps = (state, ownProps) => {
     }
   }
 
-  const followerUsers = [];
-  const followeeUsers = [];
+  let followers = [];
+  let followees = [];
 
   if (user) {
-    const followers = user.followers;
-    const followees = user.followees;
-
-    followers.forEach(id => {
-      const usr = state.entities.users[id];
-      if (usr) {
-        followerUsers.push(usr);
-      }
-    });
-
-    followees.forEach(id => {
-      const usr = state.entities.users[id];
-      if (usr) {
-        followeeUsers.push(usr);
-      }
-    });
+    followers = user.followers;
+    followees = user.followees;
   }
 
   return {
     user,
     currentUser,
     unPublishedProjects,
     projectsByUser,
-    followerUsers,
-    followeeUsers
+    followers,
+    followees
   };
 };