Skip to content

Commit 40b8bb9

Browse files
aadityarajkumawataadityarajkumawat
committed
completed home and post
1 parent 87afd9e commit 40b8bb9

File tree

13 files changed

+206
-81
lines changed

13 files changed

+206
-81
lines changed

‎client/src/actions/getPostAction.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,3 +157,13 @@ export const clearPostID = () => (dispatch) => {
157157
export const cleanGetPostAction = () => (dispatch) => {
158158
dispatch({ type: CLEAN_POST_ACTION });
159159
};
160+
161+
export const fetchPopularPosts = () => async (dispatch) => {
162+
try {
163+
const res = await axios.get("/api/post/5fc4c6a6cf07d202383aadcf");
164+
console.log(res.data);
165+
// dispatch({ type: , payload: res.data });
166+
} catch (err) {
167+
console.log("Error Fetching All Articles");
168+
}
169+
};

‎client/src/actions/trendingAction.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { GET_TRENDING_POSTS } from '../actions/types';
2-
import axios from 'axios';
1+
import { GET_TRENDING_POSTS } from "../actions/types";
2+
import axios from "axios";
33

44
export const getTrendingPosts = () => async (dispatch) => {
5-
try {
6-
const res = await axios.get('/api/post/');
7-
dispatch({ type: GET_TRENDING_POSTS, payload: res.data });
8-
} catch (err) {
9-
console.log('Error Fetching All Articles');
10-
}
5+
try {
6+
const res = await axios.get("/api/post/");
7+
dispatch({ type: GET_TRENDING_POSTS, payload: res.data });
8+
} catch (err) {
9+
console.log("Error Fetching All Articles");
10+
}
1111
};

‎client/src/components/auth/Login.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { login } from "../../actions/authAction";
44
import { removeNav } from "../../actions/navAction";
55
import { loadProfile } from "../../actions/profileAction";
66
import { Link } from "react-router-dom";
7+
import i from "../../utils/mediaQ";
78

89
// Assets import
910
import auth from "../../assets/auth.jpg";
@@ -66,7 +67,7 @@ const Login = ({
6667

6768
return (
6869
<Fragment>
69-
<Box w="calc(100% - 700px)">
70+
<Box w={i() ? "calc(100% - 700px)" : ""}>
7071
<Flex alignItems="center" flexDirection="column" pt="2.5rem">
7172
<Heading as="h1">Welcome to DevHelp</Heading>
7273
<Text color="#00000080">
@@ -79,7 +80,7 @@ const Login = ({
7980
</Flex>
8081
<Alert />
8182
<Flex flexDirection="column" alignItems="center">
82-
<HStack mb="1rem" w="450px">
83+
<HStack mb="1rem" w={i() ? "450px" : ""}>
8384
<Box>
8485
<i className="fas fa-envelope"></i>
8586
</Box>
@@ -123,15 +124,17 @@ const Login = ({
123124
</Link>
124125
</Flex>
125126
</Box>
126-
<Box>
127-
<Image
128-
src={auth}
129-
alt="random"
130-
width="700px"
131-
height="100vh"
132-
maxWidth="700px"
133-
/>
134-
</Box>
127+
{i() && (
128+
<Box>
129+
<Image
130+
src={auth}
131+
alt="random"
132+
width="700px"
133+
height="100vh"
134+
maxWidth="700px"
135+
/>
136+
</Box>
137+
)}
135138
</Fragment>
136139
);
137140
};

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ const Comment = ({
1414
post,
1515
}) => {
1616
const [comments, setComments] = useState([]);
17+
const [i] = S.useMediaQuery("(min-width: 500px)");
18+
1719
useEffect(() => {
1820
if (post_id) {
1921
getComments(post_id);
@@ -41,7 +43,7 @@ const Comment = ({
4143
)}
4244
</S.Flex>
4345
{comments.length > 0 ? (
44-
<S.Box mt="40px">
46+
<S.Box mt={i ? "40px" : ""}>
4547
{comments.map((cmt) => (
4648
<CommentItem
4749
username={cmt.nameOfUser}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@ import React from "react";
22
import * as S from "@chakra-ui/react";
33

44
const CommentItem = ({ username, src, comment_msg }) => {
5+
const [i] = S.useMediaQuery("(min-width: 500px)");
56
return (
6-
<S.Flex flexDir="column" justifyContent="center" h="80px" w="500px">
7+
<S.Flex
8+
flexDir="column"
9+
justifyContent="center"
10+
h="80px"
11+
w={i ? "500px" : ""}
12+
>
713
<S.Flex>
814
<S.Flex justifyContent="center" alignItems="center">
915
<S.Image src={src} borderRadius="100%" w="40px" h="40px" />

‎client/src/components/layout components/General posts/PopularPosts.js‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
1-
import { Flex, Heading, Text } from "@chakra-ui/react";
2-
import React from "react";
1+
import { Flex, Heading, Text, useMediaQuery } from "@chakra-ui/react";
2+
import React, { useEffect } from "react";
3+
import { connect } from "react-redux";
4+
import { fetchPopularPosts } from "../../../actions/getPostAction";
5+
6+
const PopularPosts = ({ fetchPopularPosts }) => {
7+
const [isLargerThan500] = useMediaQuery("(min-width: 500px)");
8+
9+
useEffect(() => {
10+
fetchPopularPosts();
11+
}, []);
312

4-
const PopularPosts = () => {
513
return (
6-
<Flex flexDirection='column' px='100px' mt='3rem'>
14+
<Flex
15+
flexDirection={"column"}
16+
px={isLargerThan500 ? "100px" : "50px"}
17+
mt={isLargerThan500 ? "3rem" : ""}
18+
>
719
<Heading as="h1">Popular Posts</Heading>
8-
<Text>No posts available</Text>
920
</Flex>
1021
);
1122
};
1223

13-
export default PopularPosts;
24+
const mapStateToProps = (states) => ({
25+
posts: states.posts,
26+
});
27+
28+
export default connect(mapStateToProps, { fetchPopularPosts })(PopularPosts);

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

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ import { reallyGetAllPosts } from "../../../actions/getPostAction";
1313
import { postComment } from "../../../actions/commentAction";
1414
import Comment from "../../comment/Comment";
1515
import * as S from "@chakra-ui/react";
16-
import styled from "styled-components";
16+
import styled, { css } from "styled-components";
1717
import { useToast } from "@chakra-ui/react";
18+
import { useMediaQuery } from "@chakra-ui/react";
1819

1920
const Post = ({
2021
post: { currentPost, openedPost, likedStatus, likedPost },
@@ -32,6 +33,7 @@ const Post = ({
3233
const [lik, setLik] = useState([]);
3334
const [post, setPost] = useState({});
3435
const toast = useToast();
36+
const [isLargerThan500] = useMediaQuery("(min-width: 500px)");
3537

3638
useEffect(() => {
3739
showNav();
@@ -104,15 +106,19 @@ const Post = ({
104106

105107
return (
106108
<React.Fragment>
107-
<S.Flex flexDir="column" px="400px">
108-
<S.Heading fontSize="80" color="gray.900">
109+
<S.Flex
110+
flexDir="column"
111+
px={isLargerThan500 ? "400px" : "50px"}
112+
w="100vw"
113+
>
114+
<S.Heading fontSize={["35", "50", "80"]} color="gray.900">
109115
{post.heading}
110116
</S.Heading>
111117
<S.Flex flexDir="column">
112118
{openedPost.user ? (
113119
<S.Box
114120
onClick={getThatP}
115-
fontSize="23px"
121+
fontSize={["15px", "23px"]}
116122
color="gray.700"
117123
mb="10px"
118124
>
@@ -122,7 +128,7 @@ const Post = ({
122128
<span>No id</span>
123129
)}
124130
<S.Flex alignItems="center" mb="10px">
125-
<S.Text fontSize="18">{"7min"}</S.Text>
131+
<S.Text fontSize={["15", "18"]}>{"7min"}</S.Text>
126132
<span
127133
style={{
128134
width: "5px",
@@ -138,7 +144,7 @@ const Post = ({
138144
style={
139145
likedBtn()
140146
? { color: "rgb(255, 0, 106)", fontSize: "25px" }
141-
: { fontSize: "25px" }
147+
: { fontSize: isLargerThan500 ? "25px" : "" }
142148
}
143149
></i>
144150
</S.Flex>
@@ -148,18 +154,25 @@ const Post = ({
148154
src={post && `${post.image}`}
149155
fallbackSrc="https://i.ibb.co/RBT25fY/default-fallback-image.png"
150156
alt="post"
151-
style={{ width: "100%", height: "600px" }}
157+
style={{
158+
width: isLargerThan500 ? "100%" : "300px",
159+
height: isLargerThan500 ? "600px" : "auto",
160+
}}
152161
/>
153162
</S.Flex>
154163
<S.Flex mt="30px">
155164
{post.content && (
156-
<TurnIn>
165+
<TurnIn isLargerThan500>
157166
<ParsedData draftJSRawData={post.content.toString()} />
158167
</TurnIn>
159168
)}
160169
</S.Flex>
161-
<S.Divider my="60px" />
162-
<S.Box fontSize="24px" fontWeight="600" mb="15px">
170+
<S.Divider my={isLargerThan500 ? "60px" : "20px"} />
171+
<S.Box
172+
fontSize={isLargerThan500 ? "24px" : "18px"}
173+
fontWeight="600"
174+
mb="15px"
175+
>
163176
Comments
164177
</S.Box>
165178
<Comment auth={auth} post_id={currentPost} />
@@ -175,6 +188,16 @@ const TurnIn = styled.div`
175188
font-size: 25px;
176189
}
177190
}
191+
192+
${(props) =>
193+
props.isLargerThan500 &&
194+
css`
195+
div {
196+
span {
197+
font-size: 16px;
198+
}
199+
}
200+
`}
178201
`;
179202

180203
const mapStateToProps = (state) => {

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

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React, { useState, useEffect, Fragment } from "react";
2-
import { Flex, useToast } from "@chakra-ui/react";
2+
import { Flex, useToast, Wrap, WrapItem } from "@chakra-ui/react";
33
import { connect } from "react-redux";
44
import { getTrendingPosts } from "../../../actions/trendingAction";
55
import TrendingItem from "./TrendingItem/TrendingItem";
6+
import styled from "styled-components";
7+
import { useMediaQuery } from "@chakra-ui/react";
68

79
const Trending = ({
810
getTrendingPosts,
@@ -11,6 +13,7 @@ const Trending = ({
1113
post,
1214
}) => {
1315
const [posts, setPosts] = useState([]);
16+
const [isLargerThan500] = useMediaQuery("(min-width: 500px)");
1417
const toast = useToast();
1518

1619
useEffect(() => {
@@ -52,29 +55,47 @@ const Trending = ({
5255
}, [post.savedToast]);
5356

5457
return (
55-
<Flex justifyContent="center" mt="0rem">
56-
{posts.length > 0 ? (
57-
posts.map((post) => (
58-
<TrendingItem
59-
key={post._id}
60-
post={post}
61-
routing={routing}
62-
by={"home"}
63-
forComp="home-trend"
64-
/>
65-
))
66-
) : (
67-
<Fragment>
68-
<TrendingItem />
69-
<TrendingItem />
70-
<TrendingItem />
71-
<TrendingItem />
72-
</Fragment>
73-
)}
74-
</Flex>
58+
<ItemWrapper>
59+
<Wrap
60+
mt={isLargerThan500 ? "0rem" : "1rem"}
61+
px={isLargerThan500 ? "100px" : "0"}
62+
>
63+
{posts.length > 0 ? (
64+
posts.map((post) => (
65+
<WrapItem>
66+
<TrendingItem
67+
key={post._id}
68+
post={post}
69+
routing={routing}
70+
by={"home"}
71+
forComp="home-trend"
72+
/>
73+
</WrapItem>
74+
))
75+
) : (
76+
<Fragment>
77+
<TrendingItem />
78+
<TrendingItem />
79+
<TrendingItem />
80+
<TrendingItem />
81+
</Fragment>
82+
)}
83+
</Wrap>
84+
</ItemWrapper>
7585
);
7686
};
7787

88+
const ItemWrapper = styled.div`
89+
div {
90+
ul {
91+
margin: 0;
92+
max-width: 1700px;
93+
justify-content: space-between;
94+
justify-content: center;
95+
}
96+
}
97+
`;
98+
7899
const mapStateToProps = (state) => {
79100
return {
80101
trending: state.trending,

‎client/src/components/layout components/Trending/TrendingItem/TrendingItem.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const TrendingItem = ({
106106
return (
107107
<Flex
108108
flexDirection="column"
109-
mr="60px"
109+
mx="30px"
110110
cursor="pointer"
111111
boxShadow="base"
112112
rounded="md"

0 commit comments

Comments
 (0)