Skip to content

Commit e453620

Browse files
aadityarajkumawataadityarajkumawat
committed
styled post and added comment toast
1 parent e8aca5b commit e453620

File tree

10 files changed

+269
-314
lines changed

10 files changed

+269
-314
lines changed

‎client/src/actions/commentAction.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { GET_COMMENTS, POST_COMMENT } from "./types";
1+
import { COMMENT_TOAST, GET_COMMENTS, POST_COMMENT } from "./types";
22
import Axios from "axios";
33

44
export const postComment = (msg, user_id, post_id) => async (dispatch) => {
@@ -9,13 +9,16 @@ export const postComment = (msg, user_id, post_id) => async (dispatch) => {
99
};
1010
try {
1111
dispatch({ type: POST_COMMENT, payload: true });
12-
const res = await Axios.put(
12+
await Axios.put(
1313
`/api/post/comment/${user_id}/${post_id}`,
1414
{ comment_msg: msg },
1515
config
1616
);
1717
dispatch({ type: POST_COMMENT, payload: false });
18-
console.log(res.data);
18+
dispatch({ type: COMMENT_TOAST, payload: true });
19+
setTimeout(() => {
20+
dispatch({ type: COMMENT_TOAST, payload: false });
21+
}, 5000);
1922
} catch (err) {
2023
console.log(err.message);
2124
}
@@ -24,7 +27,6 @@ export const postComment = (msg, user_id, post_id) => async (dispatch) => {
2427
export const getComments = (post_id) => async (dispatch) => {
2528
try {
2629
const res = await Axios.get(`/api/post/comment/all/${post_id}`);
27-
console.log(post_id);
2830
dispatch({ type: GET_COMMENTS, payload: res.data });
2931
} catch (err) {
3032
console.log(err.message);

‎client/src/actions/types.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,4 @@ export const POST_COMMENT = "POST_COMMENT";
4646
export const GET_COMMENTS = "GET_COMMENTS";
4747
export const DISPATCH_POPUP = "DISPATCH_POPUP";
4848
export const REMOVE_POPUP = "REMOVE_POPUP";
49+
export const COMMENT_TOAST = "COMMENT_TOAST";

‎client/src/components/comment/Comment.js‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React, { useEffect } from "react";
1+
import React, { useEffect, useState } from "react";
22
import { connect } from "react-redux";
33
import { getComments, postComment } from "../../actions/commentAction";
44
import CommentInput from "./CommentInput";
55
import CommentItem from "./CommentItem";
6+
import * as S from "@chakra-ui/react";
67

78
const Comment = ({
89
getComments,
@@ -12,13 +13,24 @@ const Comment = ({
1213
postComment,
1314
post,
1415
}) => {
16+
const [comments, setComments] = useState([]);
1517
useEffect(() => {
16-
getComments(post_id);
18+
if (post_id) {
19+
getComments(post_id);
20+
}
1721
}, [commenting, post.currentPost]);
1822

23+
useEffect(() => {
24+
sessionStorage.setItem(post_id, JSON.stringify(cmts));
25+
26+
if (cmts) {
27+
setComments(cmts);
28+
}
29+
}, [cmts.length]);
30+
1931
return (
20-
<div>
21-
<div>
32+
<S.Flex flexDir="column">
33+
<S.Flex>
2234
{auth.isAuthenticated && (
2335
<CommentInput
2436
addComment={postComment}
@@ -27,21 +39,21 @@ const Comment = ({
2739
status={commenting}
2840
/>
2941
)}
30-
</div>
31-
{cmts.length > 0 ? (
32-
<div>
33-
{cmts.map((cmt) => (
42+
</S.Flex>
43+
{comments.length > 0 ? (
44+
<S.Box mt="40px">
45+
{comments.map((cmt) => (
3446
<CommentItem
3547
username={cmt.nameOfUser}
3648
src={cmt.imgOfUser}
3749
comment_msg={cmt.comment_msg}
3850
/>
3951
))}
40-
</div>
52+
</S.Box>
4153
) : (
4254
<div></div>
4355
)}
44-
</div>
56+
</S.Flex>
4557
);
4658
};
4759

‎client/src/components/comment/CommentInput.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
11
import React, { useState } from "react";
2+
import * as S from "@chakra-ui/react";
3+
import { useToast } from "@chakra-ui/react";
24

35
const CommentInput = ({ addComment, user_id, post_id, status }) => {
46
const [comment, setComment] = useState("");
7+
const toast = useToast();
58

69
const handleChange = (e) => {
710
setComment(e.target.value);
811
};
912

13+
const addCommentBtn = () => {
14+
addComment(comment, user_id, post_id);
15+
};
16+
1017
return (
11-
<div className="comm">
12-
<input
18+
<S.Flex>
19+
<S.Input
1320
type="text"
1421
className="comment-input"
1522
placeholder="Add a comment..."
1623
onChange={handleChange}
24+
w="450px"
1725
/>
18-
<button
26+
<S.Button
1927
className="comm-btn"
2028
type="submit"
2129
disabled={status}
22-
onClick={() => addComment(comment, user_id, post_id)}
30+
onClick={addCommentBtn}
2331
>
2432
Comment
25-
</button>
26-
</div>
33+
</S.Button>
34+
</S.Flex>
2735
);
2836
};
2937

‎client/src/components/comment/CommentItem.js‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import React from "react";
2+
import * as S from "@chakra-ui/react";
23

34
const CommentItem = ({ username, src, comment_msg }) => {
45
return (
5-
<div className="comment-item">
6-
<div className="user-img">
7-
<img style={{ height: "30px" }} src={src} />
8-
</div>
9-
<div className='cmt-right'>
10-
<div className='cmt-user'>{username}</div>
11-
<div className='cmt-msg'>{comment_msg}</div>
12-
</div>
13-
</div>
6+
<S.Flex flexDir="column" justifyContent="center" h="80px" w="500px">
7+
<S.Flex>
8+
<S.Flex justifyContent="center" alignItems="center">
9+
<S.Image src={src} borderRadius="100%" w="40px" h="40px" />
10+
</S.Flex>
11+
<S.Flex flexDir="column" ml="20px">
12+
<S.Flex fontWeight="600">{username}</S.Flex>
13+
<S.Flex>{comment_msg}</S.Flex>
14+
</S.Flex>
15+
</S.Flex>
16+
<S.Divider mt="10px" />
17+
</S.Flex>
1418
);
1519
};
1620

‎client/src/components/layout components/Post/Post.js‎

Lines changed: 81 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,17 @@ import {
77
setCurrentPost,
88
} from "../../../actions/getPostAction";
99
import { showNav } from "../../../actions/navAction";
10-
import PostHolder from "./Post-Placeholder/PostHolder";
1110
import { ParsedData } from "draftjs-raw-parser";
1211
import { getThatProfileE } from "../../../actions/profileAction";
1312
import { reallyGetAllPosts } from "../../../actions/getPostAction";
1413
import { postComment } from "../../../actions/commentAction";
1514
import Comment from "../../comment/Comment";
15+
import * as S from "@chakra-ui/react";
16+
import styled from "styled-components";
17+
import { useToast } from "@chakra-ui/react";
1618

1719
const Post = ({
18-
post: { currentPost, openedPost, loadingPost, likedStatus, likedPost },
20+
post: { currentPost, openedPost, likedStatus, likedPost },
1921
getPost,
2022
likePost,
2123
getLikedPosts,
@@ -25,9 +27,11 @@ const Post = ({
2527
getThatProfileE,
2628
reallyGetAllPosts,
2729
setCurrentPost,
30+
comment,
2831
}) => {
2932
const [lik, setLik] = useState([]);
3033
const [post, setPost] = useState({});
34+
const toast = useToast();
3135

3236
useEffect(() => {
3337
showNav();
@@ -69,6 +73,19 @@ const Post = ({
6973
// eslint-disable-next-line
7074
}, [likedStatus, post._id, likedPost.length]);
7175

76+
useEffect(() => {
77+
if (comment.commentToast) {
78+
toast({
79+
position: "bottom-left",
80+
title: "Comment Posted",
81+
description: "Your comment has been posted",
82+
status: "success",
83+
duration: 5000,
84+
isClosable: true,
85+
});
86+
}
87+
}, [comment.commentToast]);
88+
7289
/*
7390
* This onClick Function, request the backend to
7491
* register the like by user and save it to DB
@@ -97,8 +114,6 @@ const Post = ({
97114
);
98115
};
99116

100-
const loadingStyles = loadingPost ? { display: "none" } : {};
101-
102117
const getThatP = () => {
103118
getThatProfileE(openedPost.user);
104119
reallyGetAllPosts(openedPost.user);
@@ -107,39 +122,79 @@ const Post = ({
107122

108123
return (
109124
<React.Fragment>
110-
{loadingPost && <PostHolder />}
111-
<div className="post-container-one" style={loadingStyles}>
112-
<h1 className="post-heading">{post.heading}</h1>
113-
<div className="user-p d-flex align-items-center">
125+
<S.Flex flexDir="column" px="400px">
126+
<S.Heading fontSize="80" color="gray.900">
127+
{post.heading}
128+
</S.Heading>
129+
<S.Flex flexDir="column">
114130
{openedPost.user ? (
115-
<span onClick={getThatP}>{post.name}</span>
131+
<S.Box
132+
onClick={getThatP}
133+
fontSize="23px"
134+
color="gray.700"
135+
mb="10px"
136+
>
137+
{post.name}
138+
</S.Box>
116139
) : (
117140
<span>No id</span>
118141
)}
119-
<div className="dot-i"></div>
120-
<span>{"7min"}</span>
121-
<i
122-
onClick={likeThisPost}
123-
className={`fa${likedBtn() ? "s" : "r"} fa-heart`}
124-
style={likedBtn() ? { color: "rgb(255, 0, 106)" } : {}}
125-
></i>
126-
</div>
127-
<div className="img-post-container">
128-
<img src={post !== undefined ? `${post.image}` : null} alt="post" />
129-
</div>
130-
<div className="nn-new">
142+
<S.Flex alignItems="center" mb="10px">
143+
<S.Text fontSize="18">{"7min"}</S.Text>
144+
<span
145+
style={{
146+
width: "5px",
147+
height: "5px",
148+
borderRadius: "100%",
149+
backgroundColor: "#454545",
150+
margin: "0 10px 0 10px",
151+
}}
152+
></span>
153+
<i
154+
onClick={likeThisPost}
155+
className={`fa${likedBtn() ? "s" : "r"} fa-heart`}
156+
style={
157+
likedBtn()
158+
? { color: "rgb(255, 0, 106)", fontSize: "25px" }
159+
: { fontSize: "25px" }
160+
}
161+
></i>
162+
</S.Flex>
163+
</S.Flex>
164+
<S.Flex>
165+
<S.Image
166+
src={post && `${post.image}`}
167+
fallbackSrc="https://i.ibb.co/RBT25fY/default-fallback-image.png"
168+
alt="post"
169+
style={{ width: "100%", height: "600px" }}
170+
/>
171+
</S.Flex>
172+
<S.Flex mt="30px">
131173
{post.content && (
132-
<ParsedData draftJSRawData={post.content.toString()} />
174+
<TurnIn>
175+
<ParsedData draftJSRawData={post.content.toString()} />
176+
</TurnIn>
133177
)}
134-
</div>
135-
<div class="post-comment-seperator"></div>
136-
<div className="comment-tag">Comments</div>
178+
</S.Flex>
179+
<S.Divider my="60px" />
180+
<S.Box fontSize="24px" fontWeight="600" mb="15px">
181+
Comments
182+
</S.Box>
137183
<Comment auth={auth} post_id={currentPost} />
138-
</div>
184+
<S.Box h="100px"></S.Box>
185+
</S.Flex>
139186
</React.Fragment>
140187
);
141188
};
142189

190+
const TurnIn = styled.div`
191+
div {
192+
span {
193+
font-size: 25px;
194+
}
195+
}
196+
`;
197+
143198
const mapStateToProps = (state) => {
144199
return {
145200
post: state.post,

0 commit comments

Comments
 (0)