Skip to content

Commit 678f8b9

Browse files
lurimmlurimm
authored
Merge pull request #44 from FSACapstone/single-user
Single user
2 parents 23de422 + 2932be8 commit 678f8b9

File tree

11 files changed

+455
-60
lines changed

11 files changed

+455
-60
lines changed

‎Follow.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ class Follow extends Component {
5454
render() {
5555
const { relationshipExists } = this.state || {};
5656
return relationshipExists
57-
? <button onClick={this.handleUnfollow}>Unfollow</button>
58-
: <button onClick={this.handleFollow}>Follow</button>;
57+
? <button className="follow-button" onClick={this.handleUnfollow}>Unfollow</button>
58+
: <button className="follow-button" onClick={this.handleFollow}>Follow</button>;
5959
}
6060
}
6161

‎FollowersUsers.jsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,27 @@ class FollowersUsers extends Component {
1212
constructor(props) {
1313
super(props);
1414
this.state = {
15-
followers: []
15+
followers: [],
16+
userPage: {}
1617
};
1718

1819
this.findFollowers = this.findFollowers.bind(this);
1920
}
2021

2122
componentDidMount() {
2223
this.findFollowers();
24+
2325
}
2426

25-
// componentWillUnmount() {
26-
// this.unsubscribe()
27-
// }
2827

2928
findFollowers() {
3029
const user = this.props.match.params.userId;
30+
31+
db.collection("users")
32+
.where("uid", "==", user)
33+
.get()
34+
.then(querySnapshot => querySnapshot.forEach(doc => this.setState({userPage: doc.data()})));
35+
3136
db
3237
.collection("relationships")
3338
.where("following", "==", user)
@@ -49,11 +54,14 @@ class FollowersUsers extends Component {
4954
}
5055

5156
render() {
52-
const { followers } = this.state;
57+
const { followers, userPage } = this.state;
5358
console.log(this.state);
5459

5560
return (
56-
<div className="text-align-center">
61+
62+
<div className="following-page-flex">
63+
<h1>{userPage.displayName}</h1>
64+
<h1>Followers</h1>
5765
{ Object.keys(followers).length ?
5866
Object.keys(followers).map(followerId => {
5967
return (
@@ -64,8 +72,7 @@ class FollowersUsers extends Component {
6472
className="margin-top-5"
6573
/>
6674
</Link>
67-
<h1>{followers[followerId].displayName}</h1>
68-
<h2>{followers[followerId].email}</h2>
75+
<h1 className="text-align-center">{followers[followerId].displayName}</h1>
6976
</div>
7077
);
7178
})

‎FollowingUsers.jsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ class FollowingUsers extends Component {
1212
constructor(props) {
1313
super(props);
1414
this.state = {
15-
following: []
15+
loading: true,
16+
following: [],
17+
userPage: {}
1618
};
1719

1820
this.findFollowing = this.findFollowing.bind(this);
@@ -28,6 +30,13 @@ class FollowingUsers extends Component {
2830

2931
findFollowing() {
3032
const user = this.props.match.params.userId;
33+
34+
db.collection("users")
35+
.where("uid", "==", user)
36+
.get()
37+
.then(querySnapshot => querySnapshot.forEach(doc => this.setState({userPage: doc.data()})));
38+
39+
3140
db
3241
.collection("relationships")
3342
.where("follower", "==", user)
@@ -49,11 +58,14 @@ class FollowingUsers extends Component {
4958
}
5059

5160
render() {
52-
const { following } = this.state;
61+
const { following, userPage } = this.state;
5362
const newArr = Object.keys(following);
5463

5564
return (
56-
<div className="text-align-center">
65+
<div>
66+
<h1>{userPage.displayName} Following</h1>
67+
<h1>Following</h1>
68+
<div className="following-page-flex">
5769
{Object.keys(following).length &&
5870
Object.keys(following).map(followingId => {
5971
return (
@@ -65,10 +77,10 @@ class FollowingUsers extends Component {
6577
/>
6678
</Link>
6779
<h1>{following[followingId].displayName}</h1>
68-
<h2>{following[followingId].email}</h2>
6980
</div>
7081
);
7182
})}
83+
</div>
7284
</div>
7385
);
7486
}

‎GoogleMap.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ class GoogleMap extends Component {
237237
</Button>
238238
</div>
239239
)}
240-
<div ref="map" className="google-map">
240+
<div ref="map" className="google-map margin-subtract-70">
241241
Loading map...
242242
</div>
243243
</div>

‎NewMap.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ class NewMap extends Component {
231231
}
232232
</form>
233233
</div>
234-
<div ref="newmap" className="google-map">
234+
<div ref="newmap" className="google-map margin-subtract-70">
235235
Loading map...
236236
</div>
237237

‎Sidebar.jsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,21 +71,18 @@ class Sidebar extends Component {
7171
<div className="sidebar-flex-info">
7272
<div className="sidebar-flex-inner">
7373
<Link to={`/following/${user.uid}`}>
74-
<Typography color="inherit" className={classes.typography}>Following</Typography>
75-
<Typography color="inherit" className={classes.typography}><Count of={this.following} />
76-
</Typography>
74+
<Typography className={classes.typography}>Following: <Count of={this.following} /></Typography>
7775
</Link>
7876
</div>
7977
<div className="sidebar-flex-inner">
8078
<Link to={`/followers/${user.uid}`}>
81-
<Typography color="inherit" className={classes.typography}>Followers</Typography>
82-
<Typography color="inherit" className={classes.typography}><Count of={this.followers} /></Typography>
79+
<Typography className={classes.typography}>Followers: <Count of={this.followers} /></Typography>
8380
</Link>
8481
</div>
8582
<div className="sidebar-flex-inner">
8683
<Link to={`/allmaps/${user.uid}`}>
87-
<Typography color="inherit" className={classes.typography}>Maps</Typography>
88-
<Typography color="inherit" className={classes.typography}><Count of={this.mapsCreated} /></Typography>
84+
<Typography className={classes.typography}>Maps: <Count of={this.mapsCreated} /></Typography>
85+
8986
</Link>
9087
</div>
9188
</div>

‎SingleUser.jsx‎

Lines changed: 57 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -86,48 +86,72 @@ class SingleUser extends Component {
8686
} = this.state;
8787
const signedInUser = this.props.signedInUser;
8888
const userId = this.props.match.params.uid;
89-
89+
9090
return loading ? (
91-
<CircularLoad color={`secondary`} size={100} />
91+
<CircularLoad color={`secondary`} size={100} />
9292
) : (
93-
<div className="text-align-center">
94-
<img src={user.photoURL} className="margin-top-5" />
95-
<h1>{user.displayName}</h1>
96-
{signedInUser.uid === userId ? (
97-
<div />
98-
) : (
99-
<Follow followerId={signedInUser.uid} followingId={userId} />
100-
)}
101-
<Link to={`/followers/${userId}`}>
102-
<h2>
103-
Followers: <Count of={this.followers} />
104-
</h2>
105-
</Link>
106-
<Link to={`/following/${userId}`}>
107-
<h2>
108-
Following: <Count of={this.following} />
109-
</h2>
110-
</Link>
111-
112-
<div className="text-align-center">
113-
<h2>
114-
Maps Created: <Count of={this.mapsCreated} />
115-
</h2>
93+
<div className="single-user-flex">
94+
<div className="map-container">
95+
<div className="map-flex-outer">
11696
{Object.keys(createdMaps).length &&
11797
Object.keys(createdMaps).map(mapId => {
11898
return (
119-
<Link to={`/map/${mapId}`} key={mapId}>
99+
<div className="map-flex">
100+
<div className="map-flex-inner map-flex-color">
101+
<Link to={`/map/${mapId}`} key={mapId}>
102+
<p>
103+
{createdMaps[mapId].title} (<Count
104+
of={db
105+
.collection("favoritedMaps")
106+
.where("mapId", "==", mapId)}
107+
/> Pins)
108+
</p>
109+
</Link>
110+
</div>
111+
</div>
112+
);
113+
})}
114+
</div>
115+
</div>
116+
{signedInUser.uid === userId ? (
117+
<div />
118+
) :
119+
<div className="single-user-info-flex map-container">
120+
<div className="text-align-center">
121+
<img src={user.photoURL} />
122+
<h1>{user.displayName}</h1>
123+
<div className="follow-flex">
124+
<div className="follow-flex-inner">
125+
<Link to={`/followers/${userId}`}>
120126
<p>
121-
{createdMaps[mapId].title} (<Count
122-
of={db
123-
.collection("favoritedMaps")
124-
.where("mapId", "==", mapId)}
125-
/>)
127+
Followers
128+
</p>
129+
<p>
130+
<Count of={this.followers} />
126131
</p>
127132
</Link>
128-
);
129-
})}
133+
</div>
134+
<div className="follow-flex-inner">
135+
<Link to={`/following/${userId}`}>
136+
<p>
137+
Following
138+
</p>
139+
<p>
140+
<Count of={this.following} />
141+
</p>
142+
</Link>
143+
</div>
144+
<div className="follow-flex-inner">
145+
<Link to={`/`}><p>Maps </p>
146+
<p><Count of={this.mapsCreated} /></p>
147+
</Link>
148+
</div>
149+
</div>
150+
<Follow followerId={signedInUser.uid} followingId={userId} />
151+
</div>
152+
130153
</div>
154+
}
131155
</div>
132156
);
133157
}

0 commit comments

Comments
 (0)