Skip to content

Commit 8354137

Browse files
omidnikrahomidnikrah
committed
add followings and followers pages
1 parent e57cd0f commit 8354137

9 files changed

Lines changed: 226 additions & 9 deletions

File tree

‎src/app/Routes.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { Route, HashRouter } from 'react-router-dom';
33
import GlobalStyles from './global-styles';
44
import HomePage from '../containers/Home';
55
import UserPage from '../containers/User';
6+
import FollowersPage from '../containers/Followers';
7+
import FollowingsPage from '../containers/Followings';
68

79
export default () => (
810
<React.Fragment>
@@ -11,6 +13,8 @@ export default () => (
1113
<React.Fragment>
1214
<Route path="/" component={HomePage} exact />
1315
<Route path="/user/:username" component={UserPage} exact />
16+
<Route path="/followers/:username" component={FollowersPage} exact />
17+
<Route path="/followings/:username" component={FollowingsPage} exact />
1418
</React.Fragment>
1519
</HashRouter>
1620
</React.Fragment>

‎src/components/RepositoryItem/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @flow
2-
import React, { Component } from "react";
2+
import React from "react";
33
import StarIcon from "./assets/star.svg";
44
import ForkIcon from "./assets/fork.svg";
55
import RepositoryItemStyles from "./styles";

‎src/components/UserSidebar/index.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
// @flow
22
import React from "react";
33
import { shell } from "electron";
4+
import { Link } from 'react-router-dom';
45
import UserSidebarStyles from "./styles";
56
import linkIcon from "./assets/link.svg";
67
import bagIcon from "./assets/bag.svg";
78
import locationIcon from "./assets/location.svg";
89

9-
export default ({ data }: any) => (
10+
export default ({ data, isFollowingsPage, isFollowersPage }: any) => (
1011
<UserSidebarStyles>
1112
<figure className="user-avatar">
1213
<img src={data.avatarUrl} alt={data.name} />
@@ -50,12 +51,12 @@ export default ({ data }: any) => (
5051
)}
5152
</ul>
5253
<div className="user-followers--wrapper">
53-
<span>
54+
<Link className={isFollowersPage ? 'active' : ''} to={`/followers/${data.login}`}>
5455
<span>{data.followers.totalCount}</span>Followers
55-
</span>
56-
<span>
56+
</Link>
57+
<Link className={isFollowingsPage ? 'active' : ''} to={`/followings/${data.login}`}>
5758
<span>{data.following.totalCount}</span>Followings
58-
</span>
59+
</Link>
5960
</div>
6061
<button className="back-btn" type="button" onClick={window.history.back}>
6162
Back

‎src/components/UserSidebar/styles.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,27 @@ export default styled.aside`
109109
right: 0;
110110
left: 0;
111111
display: flex;
112-
& > span {
112+
& > a {
113113
flex: 1;
114114
text-align: center;
115115
padding: 10px 0;
116116
font-size: 12px;
117117
font-weight: 100;
118118
color: #c1c1c1;
119+
transition: color 200ms ease;
120+
&:hover {
121+
color: #848484;
122+
span {
123+
color: #848484;
124+
}
125+
}
126+
&.active {
127+
color: #848484;
128+
pointer-events: none;
129+
span {
130+
color: #848484;
131+
}
132+
}
119133
&:not(:last-child) {
120134
position: relative;
121135
&::after {
@@ -134,6 +148,8 @@ export default styled.aside`
134148
color: #b9b9b9;
135149
font-size: 20px;
136150
font-weight: bold;
151+
cursor: pointer;
152+
transition: color 200ms ease;
137153
}
138154
}
139155
}

‎src/containers/Followers/index.jsx‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,23 @@ import gql from "graphql-tag";
66
import { Query, withApollo } from "react-apollo";
77
import Loading from "../../components/Loading";
88
import UserSidebar from "../../components/UserSidebar";
9+
import FollowersWrapper from './styles';
910

10-
const FOLLOWERS = gql`
11+
const GET_FOLLOWERS = gql`
1112
query($username: String!, $nextPage: String) {
1213
repositoryOwner(login: $username) {
14+
login
1315
... on User {
16+
bio
17+
avatarUrl
18+
name
19+
email
20+
websiteUrl
21+
location
22+
company
23+
following {
24+
totalCount
25+
}
1426
followers(first: 100, after: $nextPage) {
1527
totalCount
1628
nodes {
@@ -26,3 +38,42 @@ const FOLLOWERS = gql`
2638
}
2739
}
2840
`;
41+
42+
43+
const FollowersPage = (props : any) => {
44+
const {
45+
match: {
46+
params: { username }
47+
}
48+
} = props;
49+
return (
50+
<FollowersWrapper>
51+
<Query query={GET_FOLLOWERS} variables={{ username, nextPage: null }}>
52+
{({ loading, error, data, fetchMore }) => {
53+
if (loading) return <Loading />;
54+
if (error) return `Error! ${error.message}`;
55+
56+
if (data) {
57+
const { repositoryOwner } = data;
58+
if (repositoryOwner) {
59+
return (
60+
<Fragment>
61+
<UserSidebar data={repositoryOwner} isFollowersPage />
62+
<div id="repositories-container">
63+
<header id="repositories--header">
64+
<h3>Followers</h3>
65+
</header>
66+
67+
</div>
68+
</Fragment>
69+
);
70+
}
71+
}
72+
return true;
73+
}}
74+
</Query>
75+
</FollowersWrapper>
76+
);
77+
}
78+
79+
export default FollowersPage;

‎src/containers/Followers/styles.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// @flow
2+
import styled from 'styled-components';
3+
4+
export default styled.div `
5+
text-align: center;
6+
padding: 50px;
7+
position: relative;
8+
height: 100%;
9+
#repositories-container {
10+
width: calc(100% - 250px);
11+
float: right;
12+
#repositories--header {
13+
display: inline-block;
14+
width: 100%;
15+
text-align: left;
16+
h3 {
17+
font-weight: 100;
18+
letter-spacing: 3px;
19+
font-size: 18px;
20+
}
21+
span {
22+
font-size: 13px;
23+
font-weight: 100;
24+
color: #afafaf;
25+
letter-spacing: 1.2px;
26+
}
27+
}
28+
#repositories--item {
29+
margin: 40px -10px;
30+
height: 81.4vh;
31+
}
32+
}
33+
`;

‎src/containers/Followings/index.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// @flow
2+
import React, { Component, Fragment } from "react";
3+
import { TransitionGroup, CSSTransition } from "react-transition-group";
4+
import { Form, Field } from "react-final-form";
5+
import gql from "graphql-tag";
6+
import { Query, withApollo } from "react-apollo";
7+
import Loading from "../../components/Loading";
8+
import UserSidebar from "../../components/UserSidebar";
9+
import FollowingsWrapper from './styles';
10+
11+
const GET_FOLLOWINGS = gql`
12+
query($username: String!, $nextPage: String) {
13+
repositoryOwner(login: $username) {
14+
login
15+
... on User {
16+
bio
17+
avatarUrl
18+
name
19+
email
20+
websiteUrl
21+
location
22+
company
23+
followers {
24+
totalCount
25+
}
26+
following(first: 100, after: $nextPage) {
27+
totalCount
28+
nodes {
29+
name
30+
login
31+
avatarUrl
32+
repositories {
33+
totalCount
34+
}
35+
}
36+
}
37+
}
38+
}
39+
}
40+
`;
41+
42+
43+
const FollowingsPage = (props : any) => {
44+
const {
45+
match: {
46+
params: { username }
47+
}
48+
} = props;
49+
return (
50+
<FollowingsWrapper>
51+
<Query query={GET_FOLLOWINGS} variables={{ username, nextPage: null }}>
52+
{({ loading, error, data, fetchMore }) => {
53+
if (loading) return <Loading />;
54+
if (error) return `Error! ${error.message}`;
55+
56+
if (data) {
57+
const { repositoryOwner } = data;
58+
if (repositoryOwner) {
59+
return (
60+
<Fragment>
61+
<UserSidebar data={repositoryOwner} isFollowingsPage />
62+
<div id="repositories-container">
63+
<header id="repositories--header">
64+
<h3>Followings</h3>
65+
</header>
66+
67+
</div>
68+
</Fragment>
69+
);
70+
}
71+
}
72+
return true;
73+
}}
74+
</Query>
75+
</FollowingsWrapper>
76+
);
77+
}
78+
79+
export default FollowingsPage;

‎src/containers/Followings/styles.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// @flow
2+
import styled from 'styled-components';
3+
4+
export default styled.div `
5+
text-align: center;
6+
padding: 50px;
7+
position: relative;
8+
height: 100%;
9+
#repositories-container {
10+
width: calc(100% - 250px);
11+
float: right;
12+
#repositories--header {
13+
display: inline-block;
14+
width: 100%;
15+
text-align: left;
16+
h3 {
17+
font-weight: 100;
18+
letter-spacing: 3px;
19+
font-size: 18px;
20+
}
21+
span {
22+
font-size: 13px;
23+
font-weight: 100;
24+
color: #afafaf;
25+
letter-spacing: 1.2px;
26+
}
27+
}
28+
#repositories--item {
29+
margin: 40px -10px;
30+
height: 81.4vh;
31+
}
32+
}
33+
`;

‎src/containers/Home/components/UserItem/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @flow
2-
import React, { Component } from 'react';
2+
import React from 'react';
33
import { Link } from 'react-router-dom';
44
import UserItemStyles from './styles';
55

0 commit comments

Comments
 (0)