update user item styles in following and followers page

Author: omidnikrah

src/components/UserItem/index.jsx

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import { Link } from 'react-router-dom';
+import UserItemStyles from './styles';
+
+type Props = {
+  data: any
+};
+
+export default (props: Props) => (
+  <Link to={`/user/${props.data.login}`}>
+    <UserItemStyles>
+      <div className="user-info">
+        <figure className="user-info--avatar">
+          <img src={props.data.avatarUrl} alt={props.data.name} />
+        </figure>
+        <div className="user-info--name">
+          <span>{props.data.name}</span>
+          <span>@{props.data.login}</span>
+        </div>
+      </div>
+      {(props.data.repositories && props.data.repositories.totalCount) ? (
+        <span className="repositories-count">
+          {props.data.repositories.totalCount}
+        </span>
+      ): null}
+    </UserItemStyles>
+  </Link>
+);

src/components/UserItem/styles.js

@@ -0,0 +1,59 @@
+// @flow
+
+import styled from 'styled-components';
+
+export default styled.div`
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  margin: 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  box-shadow: 0 0 15px rgba(0,0,0,0.03);
+  cursor: pointer;
+  .user-info {
+    display: flex;
+    align-items: center;
+    &--avatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 10rem;
+      overflow: hidden;
+      margin: 0;
+      float: left;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    &--name {
+      float: left;
+      font-size: 15px;
+      color: #444;
+      margin-left: 20px;
+      text-align: left;
+      span {
+        cursor: pointer;
+        &:last-child {
+          opacity: 0.4;
+        }
+      }
+    }
+  }
+  .repositories-count {
+    background-color: #ff5959;
+    padding: 10px;
+    border-radius: 10rem;
+    color: #fff;
+    font-size: 13px;
+    line-height: 1;
+    min-height: 35px;
+    display: inline-block;
+    min-width: 35px;
+    cursor: pointer;
+  }
+`;

src/components/UsersWrapper/index.jsx

@@ -0,0 +1,27 @@
+// @flow
+import React, { Component } from "react";
+import RepositoryItem from "../RepositoryItem";
+import InfiniteLoader from "../InfiniteLoader";
+import UserItem from "../UserItem";
+
+type Props = {
+  data: any,
+  hasLoadMore: boolean,
+  onLoadMore: any
+};
+type State = {};
+
+export default class UsersWrapper extends Component<Props, State> {
+  render() {
+    const { data, hasLoadMore, onLoadMore } = this.props;
+    return (
+      <div id="users--item">
+        <InfiniteLoader hasNextPage={hasLoadMore} onLoadMore={onLoadMore}>
+          {data.map((user: any, index: number) => (
+            <UserItem data={user} key={`user-item--${index}`} />
+          ))}
+        </InfiniteLoader>
+      </div>
+    );
+  }
+}

src/containers/Followers/index.jsx

@@ -6,6 +6,7 @@ import gql from "graphql-tag";
 import { Query, withApollo } from "react-apollo";
 import Loading from "../../components/Loading";
 import UserSidebar from "../../components/UserSidebar";
+import UsersWrapper from "../../components/UsersWrapper";
 import FollowersWrapper from './styles';
 
 const GET_FOLLOWERS = gql`
@@ -25,6 +26,10 @@ const GET_FOLLOWERS = gql`
         }
         followers(first: 100, after: $nextPage) {
           totalCount
+          pageInfo {
+            hasNextPage
+            endCursor
+          }
           nodes {
             name
             login
@@ -63,7 +68,38 @@ const FollowersPage = (props : any) => {
                     <header id="repositories--header">
                       <h3>Followers</h3>
                     </header>
-                    
+                    <UsersWrapper
+                      data={repositoryOwner.followers.nodes}
+                      hasLoadMore={
+                        repositoryOwner.followers.pageInfo.hasNextPage
+                      }
+                      onLoadMore={() => {
+                        fetchMore({
+                          variables: {
+                            nextPage:
+                              repositoryOwner.followers.pageInfo.endCursor
+                          },
+                          updateQuery: (prev, { fetchMoreResult }) => {
+                            if (!fetchMoreResult) return prev;
+                            return {
+                              repositoryOwner: {
+                                ...prev.repositoryOwner,
+                                followers: {
+                                  ...fetchMoreResult.repositoryOwner
+                                    .followers,
+                                  nodes: [
+                                    ...prev.repositoryOwner.followers
+                                      .nodes,
+                                    ...fetchMoreResult.repositoryOwner
+                                      .followers.nodes
+                                  ]
+                                }
+                              }
+                            };
+                          }
+                        });
+                      }}
+                    />
                   </div>
                 </Fragment>
               );

src/containers/Followers/styles.js

@@ -25,7 +25,7 @@ export default styled.div `
         letter-spacing: 1.2px;
       }
     }
-    #repositories--item {
+    #users--item {
       margin: 40px -10px;
       height: 81.4vh;
     }

src/containers/Followings/index.jsx

@@ -6,6 +6,7 @@ import gql from "graphql-tag";
 import { Query, withApollo } from "react-apollo";
 import Loading from "../../components/Loading";
 import UserSidebar from "../../components/UserSidebar";
+import UsersWrapper from "../../components/UsersWrapper";
 import FollowingsWrapper from './styles';
 
 const GET_FOLLOWINGS = gql`
@@ -25,6 +26,10 @@ const GET_FOLLOWINGS = gql`
         }
         following(first: 100, after: $nextPage) {
           totalCount
+          pageInfo {
+            hasNextPage
+            endCursor
+          }
           nodes {
             name
             login
@@ -63,7 +68,38 @@ const FollowingsPage = (props : any) => {
                     <header id="repositories--header">
                       <h3>Followings</h3>
                     </header>
-                    
+                    <UsersWrapper
+                      data={repositoryOwner.following.nodes}
+                      hasLoadMore={
+                        repositoryOwner.following.pageInfo.hasNextPage
+                      }
+                      onLoadMore={() => {
+                        fetchMore({
+                          variables: {
+                            nextPage:
+                              repositoryOwner.following.pageInfo.endCursor
+                          },
+                          updateQuery: (prev, { fetchMoreResult }) => {
+                            if (!fetchMoreResult) return prev;
+                            return {
+                              repositoryOwner: {
+                                ...prev.repositoryOwner,
+                                following: {
+                                  ...fetchMoreResult.repositoryOwner
+                                    .following,
+                                  nodes: [
+                                    ...prev.repositoryOwner.following
+                                      .nodes,
+                                    ...fetchMoreResult.repositoryOwner
+                                      .following.nodes
+                                  ]
+                                }
+                              }
+                            };
+                          }
+                        });
+                      }}
+                    />
                   </div>
                 </Fragment>
               );

src/containers/Followings/styles.js

@@ -25,7 +25,7 @@ export default styled.div `
         letter-spacing: 1.2px;
       }
     }
-    #repositories--item {
+    #users--item {
       margin: 40px -10px;
       height: 81.4vh;
     }