Skip to content

Commit ec5f5c5

Browse files
AuraOfDivinityAuraOfDivinity
committed
Requested changes
1 parent 2e6152a commit ec5f5c5

File tree

5 files changed

+685
-430
lines changed

5 files changed

+685
-430
lines changed

‎src/actions/postAction.js‎

Lines changed: 57 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,101 @@
1-
import axios from 'axios';
2-
import { errorHandler } from '../utils/errorHandler';
3-
import { setRequestStatus } from '../utils/setRequestStatus';
4-
import { GET_ALL_POSTS, GET_ALL_PINNED_POSTS, GET_SINGLE_POST } from './types';
5-
import { BASE_URL } from './baseApi'
1+
import axios from "axios";
2+
import { errorHandler } from "../utils/errorHandler";
3+
import { setRequestStatus } from "../utils/setRequestStatus";
4+
import { GET_ALL_POSTS, GET_ALL_PINNED_POSTS, GET_SINGLE_POST } from "./types";
5+
import { BASE_URL } from "./baseApi";
66

77
// GET ALL POSTS
88
export const getAllPosts = (pagination = 10, page = 1) => async (dispatch) => {
99
try {
10-
const res = await axios.get(`${BASE_URL}/post/all_posts?pagination=${pagination}&page=${page}`)
11-
dispatch(setRequestStatus(false))
12-
if(res.status === 200) {
13-
dispatch(setRequestStatus(true))
14-
console.log('all posts ', res.data.posts)
10+
const res = await axios.get(
11+
`${BASE_URL}/post/all_posts?pagination=${pagination}&page=${page}`
12+
);
13+
dispatch(setRequestStatus(false));
14+
if (res.status === 200) {
15+
dispatch(setRequestStatus(true));
16+
console.log("all posts ", res.data.posts);
1517
dispatch({
1618
type: GET_ALL_POSTS,
17-
payload: res.data.posts
18-
})
19+
payload: res.data.posts,
20+
});
1921
}
20-
} catch(error) {
21-
dispatch(errorHandler(error))
22+
} catch (error) {
23+
dispatch(errorHandler(error));
2224
}
23-
}
25+
};
2426

25-
// GET ALL PINNED POSTS
26-
export const getAllPinnedPosts = (pagination = 10, page = 1) => async (dispatch) => {
27+
// GET ALL PINNED POSTS
28+
export const getAllPinnedPosts = (pagination = 10, page = 1) => async (
29+
dispatch
30+
) => {
2731
try {
28-
const res = await axios.get(`${BASE_URL}/post/all/pinned?pagination=${pagination}&page=${page}`)
29-
dispatch(setRequestStatus(false))
30-
if(res.status === 200){
31-
dispatch(setRequestStatus(true))
32-
console.log('fetching all pinned posts ', res.data.pinnedPost)
32+
const res = await axios.get(
33+
`${BASE_URL}/post/all/pinned?pagination=${pagination}&page=${page}`
34+
);
35+
dispatch(setRequestStatus(false));
36+
if (res.status === 200) {
37+
dispatch(setRequestStatus(true));
38+
console.log("fetching all pinned posts ", res.data.pinnedPost);
3339
dispatch({
3440
type: GET_ALL_PINNED_POSTS,
35-
payload: res.data.pinnedPost
36-
})
41+
payload: res.data.pinnedPost,
42+
});
3743
}
38-
} catch(error) {
39-
dispatch(errorHandler(error))
44+
} catch (error) {
45+
dispatch(errorHandler(error));
4046
}
41-
}
47+
};
4248

4349
// UPVOTE POST
44-
export const upVotePost = (postId) => async (dispatch) => {
50+
export const upVotePost = (postId, type) => async (dispatch) => {
4551
try {
46-
const res = await axios.patch(`${BASE_URL}/post/upvote/${postId}`)
47-
if(res.status === 200) {
48-
console.log('successfully upvoted post ', res.data)
52+
const res = await axios.patch(`${BASE_URL}/post/upvote/${postId}`, type);
53+
if (res.status === 200) {
54+
console.log("successfully upvoted post ", res.data);
4955
dispatch(getAllPosts());
5056
}
5157
} catch (error) {
52-
dispatch(errorHandler(error))
58+
dispatch(errorHandler(error));
5359
}
54-
}
60+
};
5561

56-
// GET POST BY ID
62+
// GET POST BY ID
5763
export const getPostById = (postId) => async (dispatch) => {
5864
try {
59-
console.log('postId from action ', postId)
65+
console.log("postId from action ", postId);
6066
const res = await axios.get(`${BASE_URL}/post/${postId}`);
6167
if (res.status === 200) {
6268
dispatch({
6369
type: GET_SINGLE_POST,
64-
payload: res.data.post
65-
})
70+
payload: res.data.post,
71+
});
6672
}
6773
} catch (error) {
68-
dispatch(errorHandler(error))
74+
dispatch(errorHandler(error));
6975
}
70-
}
76+
};
7177

72-
// UPDATE POST
78+
// UPDATE POST
7379
export const updatePost = (postId, updatedInfo) => async (dispatch) => {
7480
try {
75-
console.log('updatedPostInfo ', updatedInfo)
76-
const res = await axios.patch(`${BASE_URL}/post/${postId}`, updatedInfo)
81+
console.log("updatedPostInfo ", updatedInfo);
82+
const res = await axios.patch(`${BASE_URL}/post/${postId}`, updatedInfo);
7783
if (res.status === 200) {
78-
dispatch(getPostById(postId))
84+
dispatch(getPostById(postId));
7985
}
8086
} catch (error) {
81-
dispatch(errorHandler(error))
87+
dispatch(errorHandler(error));
8288
}
83-
}
89+
};
8490

85-
// DELETE POST
91+
// DELETE POST
8692
export const deletePost = (postId) => async (dispatch) => {
8793
try {
88-
const res = await axios.delete(`${BASE_URL}/post/${postId}`)
89-
if(res.status === 200) {
90-
dispatch(getAllPosts())
94+
const res = await axios.delete(`${BASE_URL}/post/${postId}`);
95+
if (res.status === 200) {
96+
dispatch(getAllPosts());
9197
}
9298
} catch (error) {
93-
dispatch(errorHandler(error))
99+
dispatch(errorHandler(error));
94100
}
95-
}
101+
};

‎src/user/dashboard/news-feed/ReactionsElement.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React, { Component } from "react";
2+
import "./ReactionsElement.scss";
3+
import { motion } from "framer-motion";
4+
import Like from "../../../images/Like.png";
5+
import Heart from "../../../images/Heart.png";
6+
import Happy from "../../../images/Happy.png";
7+
import DonutReaction from "../../../images/DonutReaction.png";
8+
import { connect } from "react-redux";
9+
import { upVotePost } from "../../../actions/postAction";
10+
11+
const reactionVariant = {
12+
hover: {
13+
scale: 1.3,
14+
opacity: 0.9,
15+
rotate: [0, 10, 0, -10, 0],
16+
},
17+
};
18+
19+
class ReactionsElement extends Component {
20+
constructor(props) {
21+
super(props);
22+
this.state = {
23+
reacted: this.props.reacted,
24+
count: this.props.count,
25+
reaction: "like",
26+
};
27+
}
28+
29+
handleReaction = (reaction) => {
30+
const type = {
31+
reactionType: reaction,
32+
};
33+
this.setState({
34+
reacted: true,
35+
reaction: reaction,
36+
});
37+
this.onUpVote(this.props.postId, type);
38+
};
39+
40+
handleNoReaction = () => {
41+
this.setState({
42+
reacted: false,
43+
});
44+
};
45+
46+
onUpVote = (postId, type) => {
47+
this.props.upVotePost(postId, type);
48+
};
49+
50+
render() {
51+
const { reacted, count, reaction } = this.state;
52+
const { votes, openModal, reactionType } = this.props;
53+
return (
54+
<div className="reactions-container">
55+
{reacted ? (
56+
<div className="reaction-element">
57+
{reaction === "like" && (
58+
<motion.img
59+
src={Like}
60+
alt="like-reaction"
61+
variants={reactionVariant}
62+
whileHover="hover"
63+
onClick={() => this.handleNoReaction()}
64+
></motion.img>
65+
)}
66+
{reaction === "happy" && (
67+
<motion.img
68+
src={Happy}
69+
alt="like-reaction"
70+
variants={reactionVariant}
71+
whileHover="hover"
72+
onClick={() => this.handleNoReaction()}
73+
></motion.img>
74+
)}
75+
{reaction === "heart" && (
76+
<motion.img
77+
src={Heart}
78+
alt="like-reaction"
79+
variants={reactionVariant}
80+
whileHover="hover"
81+
onClick={() => this.handleNoReaction()}
82+
></motion.img>
83+
)}
84+
{reaction === "donut" && (
85+
<motion.img
86+
src={DonutReaction}
87+
alt="like-reaction"
88+
variants={reactionVariant}
89+
whileHover="hover"
90+
onClick={() => this.handleNoReaction()}
91+
></motion.img>
92+
)}
93+
{count > 1 ? (
94+
<span className="reaction-text">{`You reacted`}</span>
95+
) : (
96+
<span className="reaction-text">{`You and ${count} others reacted.`}</span>
97+
)}
98+
</div>
99+
) : (
100+
<motion.div className="reactions-holder">
101+
<div
102+
className="reaction-element"
103+
onClick={() => this.handleReaction("like")}
104+
>
105+
<motion.img
106+
src={Like}
107+
alt="like-reaction"
108+
variants={reactionVariant}
109+
whileHover="hover"
110+
></motion.img>
111+
</div>
112+
<div
113+
className="reaction-element"
114+
onClick={() => this.handleReaction("happy")}
115+
>
116+
<motion.img
117+
src={Happy}
118+
alt="happy-reaction"
119+
variants={reactionVariant}
120+
whileHover="hover"
121+
></motion.img>
122+
</div>
123+
<div
124+
className="reaction-element"
125+
onClick={() => this.handleReaction("heart")}
126+
>
127+
<motion.img
128+
src={Heart}
129+
alt="heart-reaction"
130+
variants={reactionVariant}
131+
whileHover="hover"
132+
></motion.img>
133+
</div>
134+
<div
135+
className="reaction-element"
136+
onClick={() => this.handleReaction("donut")}
137+
>
138+
<motion.img
139+
src={DonutReaction}
140+
alt="donut-reaction"
141+
variants={reactionVariant}
142+
whileHover="hover"
143+
></motion.img>
144+
</div>
145+
<span
146+
className="reaction-text"
147+
onClick={() => openModal(votes)}
148+
>{`${count} reactions`}</span>
149+
</motion.div>
150+
)}
151+
</div>
152+
);
153+
}
154+
}
155+
156+
export default connect(null, { upVotePost })(ReactionsElement);

‎src/user/dashboard/news-feed/ReactionsElement.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.reactions-container {
2+
.reaction-element {
3+
display: inline-block;
4+
margin-right: 5px;
5+
padding: 4px;
6+
}
7+
.reactions-holder {
8+
.reaction-element {
9+
display: inline-block;
10+
margin-right: 5px;
11+
padding: 4px;
12+
}
13+
}
14+
}
15+
16+
.reaction-text {
17+
font-family: Inter;
18+
font-style: normal;
19+
font-weight: 500;
20+
font-size: 12px;
21+
line-height: 15px;
22+
color: #65676b;
23+
cursor: pointer;
24+
margin-left: 4px;
25+
}

0 commit comments

Comments
 (0)