Skip to content

Commit 30ec299

Browse files
sudarshan777sudarshan777
committed
Follow Button Functionality
1 parent 5d6640b commit 30ec299

File tree

5 files changed

+61
-51
lines changed

5 files changed

+61
-51
lines changed

‎src/components/article/article.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from "react";
22
import { Link } from "react-router-dom";
3+
import { formatDistanceToNow } from "date-fns";
4+
35
const Article = (props) => {
6+
var date = new Date(props.article.createdAt);
7+
48
return (
59
<div className="card">
610
<div className="card-body">
@@ -16,7 +20,7 @@ const Article = (props) => {
1620
{props.article.user.name}
1721
</Link>
1822
<br />
19-
<b>Created at - </b> {props.article.createdAt.substring(0, 10)}
23+
<b>{formatDistanceToNow(date)} ago</b>
2024
<br />
2125
</div>
2226
</div>

‎src/components/user/FollowButton.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,35 @@
11
import React, { useState, useEffect } from "react";
22
import { shallowEqual, useSelector, useDispatch } from "react-redux";
3-
import {
4-
followUser,
5-
unFollowUser,
6-
} from "../../redux/actions/get-user";
3+
import { followUser, unFollowUser } from "../../redux/actions/get-user";
74

85
const FollowButton = () => {
96
const dispatch = useDispatch();
10-
const following = useSelector(
11-
(state) => state.userReducer.following,
12-
shallowEqual
13-
);
7+
// const followers = useSelector(
8+
// (state) => state.userReducer.followers,
9+
// shallowEqual
10+
// );
1411
// Logged In user id
1512
const { id } = useSelector((state) => state.authReducer.user);
1613
// Follow User Id
17-
const { _id } = useSelector((state) => state.userReducer.user);
14+
const { _id, followers } = useSelector(
15+
(state) => state.userReducer.user,
16+
shallowEqual
17+
);
1818
const loggedIn = useSelector((state) => state.authReducer.loggedIn);
1919
const [isFollowed, setFollowed] = useState(false);
2020

2121
useEffect(() => {
22-
const result = following.find((user) => user._id === _id);
22+
console.log(_id, followers);
23+
let result = false;
24+
if (_id || followers) {
25+
result = followers.find((user) => user === id);
26+
}
2327
if (result) {
2428
setFollowed(true);
2529
} else {
2630
setFollowed(false);
2731
}
28-
29-
}, [following, _id]);
32+
}, [followers, _id]);
3033

3134
const handleFollow = (e) => {
3235
if (!isFollowed) {

‎src/components/user/index.js‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,6 @@ class User extends Component {
6565

6666
componentDidMount() {
6767
this.props.dispatch(getUser(this.props.match.params.id));
68-
this.props.dispatch(getBookmarks(this.props.match.params.id));
69-
if (this.props.loggedIn) {
70-
this.props.dispatch(getFollowing(this.props.user.id));
71-
}
7268
}
7369
componentDidUpdate(prevProps) {
7470
if (this.props.userDetails !== prevProps.userDetails) {
@@ -87,14 +83,8 @@ class User extends Component {
8783
});
8884
}
8985
}
90-
// shouldComponentUpdate(nextProps) {
91-
// if (this.props.match.params.id !== nextProps.match.params.id) {
92-
// return true;
93-
// }
94-
// return false;
95-
// }
9686

97-
getFollowers = (e) => {
87+
showFollowers = (e) => {
9888
e.preventDefault();
9989
if (this.state.user.followers.length === 0) {
10090
return false;
@@ -109,7 +99,7 @@ class User extends Component {
10999
});
110100
};
111101

112-
getFollowing = (e) => {
102+
showFollowing = (e) => {
113103
e.preventDefault();
114104
if (this.state.user.following.length === 0) {
115105
return false;
@@ -159,6 +149,12 @@ class User extends Component {
159149
});
160150
};
161151

152+
showFollow = () => {
153+
if (this.props.loggedIn && this.props.user.id !== this.state.user._id) {
154+
return <FollowButton />;
155+
}
156+
};
157+
162158
render() {
163159
return (
164160
// <div>
@@ -288,14 +284,12 @@ class User extends Component {
288284
</h2>
289285
<p>
290286
<small>
291-
<a href="#" onClick={this.getFollowers}>
287+
<a href="#" onClick={this.showFollowers}>
292288
Followers
293289
</a>
294290
</small>
295291
</p>
296-
297-
<FollowButton />
298-
292+
{this.showFollow()}
299293
<button
300294
type="button"
301295
className="btn btn-success btn-block"
@@ -310,7 +304,7 @@ class User extends Component {
310304
</h2>
311305
<p>
312306
<small>
313-
<a href="#" onClick={this.getFollowing}>
307+
<a href="#" onClick={this.showFollowing}>
314308
Following
315309
</a>
316310
</small>

‎src/redux/reducers/userReducer.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,11 @@ const getUserSuccessResponse = (state, action) => {
2828
const followUserSuccessResponse = (state, action) => {
2929
let newState = { ...state };
3030
if (action.result !== undefined) {
31-
newState = Object.assign({}, state, {
31+
newState = Object.assign({}, newState, {
3232
message: JSON.parse(JSON.stringify(action.result)),
33+
user: Object.assign({}, newState.user, {
34+
followers: newState.user.followers.concat(action._id),
35+
}),
3336
});
3437
}
3538
return { ...newState };
@@ -38,8 +41,13 @@ const followUserSuccessResponse = (state, action) => {
3841
const unFollowUserSuccessResponse = (state, action) => {
3942
let newState = { ...state };
4043
if (action.result !== undefined) {
41-
newState = Object.assign({}, state, {
44+
newState = Object.assign({}, newState, {
4245
message: JSON.parse(JSON.stringify(action.result)),
46+
user: Object.assign({}, newState.user, {
47+
followers: newState.user.followers.filter(
48+
(follower) => follower !== action._id
49+
),
50+
}),
4351
});
4452
}
4553
return { ...newState };

‎src/redux/store/sagas.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ import {
99
takeLatest,
1010
} from "redux-saga/effects";
1111
import * as Types from "../actions/types";
12-
import {
13-
GetDataFromServer,
14-
deleteService
15-
} from "../service";
12+
import { GetDataFromServer, deleteService } from "../service";
1613

1714
const baseUrl = "https://mern-article.herokuapp.com";
1815
// const baseUrl = "http://localhost:5000";
@@ -34,7 +31,7 @@ function* fetchLoginUser(action) {
3431
} else {
3532
yield put({
3633
type: Types.LOGIN_USER_SERVER_RESPONSE_SUCCESS,
37-
result
34+
result,
3835
});
3936
}
4037
} catch (error) {
@@ -52,12 +49,12 @@ function* listArticles(action) {
5249
if (result.error) {
5350
yield put({
5451
type: Types.ARTICLE_LIST_ERROR_RESPONSE,
55-
result
52+
result,
5653
});
5754
} else {
5855
yield put({
5956
type: Types.ARTICLE_LIST_SUCCESS_RESPONSE,
60-
result
57+
result,
6158
});
6259
}
6360
} catch (error) {
@@ -74,12 +71,12 @@ function* getUser(action) {
7471
if (result.error) {
7572
yield put({
7673
type: Types.GET_USER_ERROR_RESPONSE,
77-
result
74+
result,
7875
});
7976
} else {
8077
yield put({
8178
type: Types.GET_USER_SUCCESS_RESPONSE,
82-
result
79+
result,
8380
});
8481
}
8582
} catch (error) {
@@ -96,12 +93,12 @@ function* getBookmarks(action) {
9693
if (result.error) {
9794
yield put({
9895
type: Types.GET_BOOKMARKS_ERROR_RESPONSE,
99-
result
96+
result,
10097
});
10198
} else {
10299
yield put({
103100
type: Types.GET_BOOKMARKS_SUCCESS_RESPONSE,
104-
result
101+
result,
105102
});
106103
}
107104
} catch (error) {
@@ -236,7 +233,7 @@ function* deleteArticleDetails(action) {
236233
const newData = yield call(deleteService, formBody, deleteApi); // Refer sample to api calls in remote.js file
237234
yield put({
238235
type: Types.DELETE_ARTICLE_SUCCESS,
239-
newData
236+
newData,
240237
}); // pass in the id you updated and the newData returned from the API
241238
/// Other things can go here depending on what you want
242239
} catch (e) {
@@ -410,7 +407,7 @@ function* deleteArticleLike(action) {
410407
if (result.error) {
411408
yield put({
412409
type: Types.DELETE_LIKE_ARTICLE_ERROR_RESPONSE,
413-
result
410+
result,
414411
}); // pass in the id you updated and the newData returned from the API
415412
} else {
416413
yield put({
@@ -433,12 +430,12 @@ function* getFollowers(action) {
433430
if (result.error) {
434431
yield put({
435432
type: Types.GET_FOLLOWERS_ERROR_RESPONSE,
436-
result
433+
result,
437434
});
438435
} else {
439436
yield put({
440437
type: Types.GET_FOLLOWERS_SUCCESS_RESPONSE,
441-
result
438+
result,
442439
});
443440
}
444441
} catch (error) {
@@ -455,12 +452,12 @@ function* getFollowing(action) {
455452
if (result.error) {
456453
yield put({
457454
type: Types.GET_FOLLOWING_ERROR_RESPONSE,
458-
result
455+
result,
459456
});
460457
} else {
461458
yield put({
462459
type: Types.GET_FOLLOWING_SUCCESS_RESPONSE,
463-
result
460+
result,
464461
});
465462
}
466463
} catch (error) {
@@ -494,6 +491,7 @@ function* followUser(action) {
494491
try {
495492
let formBody = {};
496493
formBody.user = action.follow_id;
494+
const _id = action.user_id;
497495
const postUrl = baseUrl + "/user/" + action.user_id + "/follow";
498496
const response = yield call(GetDataFromServer, postUrl, "POST", formBody);
499497
const result = yield response.json();
@@ -506,6 +504,7 @@ function* followUser(action) {
506504
yield put({
507505
type: Types.FOLLOW_USER_SUCCESS_RESPONSE,
508506
result,
507+
_id,
509508
});
510509
}
511510
} catch (error) {
@@ -518,6 +517,7 @@ function* unFollowUser(action) {
518517
try {
519518
let formBody = {};
520519
formBody.user = action.unfollow_id;
520+
const _id = action.user_id;
521521
const postUrl = baseUrl + "/user/" + action.user_id + "/follow";
522522
const response = yield call(GetDataFromServer, postUrl, "POST", formBody);
523523
const result = yield response.json();
@@ -530,6 +530,7 @@ function* unFollowUser(action) {
530530
yield put({
531531
type: Types.UN_FOLLOW_USER_SUCCESS_RESPONSE,
532532
result,
533+
_id,
533534
});
534535
}
535536
} catch (error) {
@@ -558,7 +559,7 @@ function* signUpUser(action) {
558559
} else {
559560
yield put({
560561
type: Types.SIGNUP_USER_SERVER_RESPONSE_SUCCESS,
561-
result
562+
result,
562563
});
563564
}
564565
} catch (error) {
@@ -616,4 +617,4 @@ export default function* rootSaga(params) {
616617
yield takeEvery(Types.DELETE_LIKE_ARTICLE, deleteArticleLike);
617618
yield takeEvery(Types.GET_ARTICLES_LIKED, getArticlesLiked);
618619
console.log("ROOT SAGA");
619-
}
620+
}

0 commit comments

Comments
 (0)