Skip to content

Commit b218098

Browse files
aadityarajkumawataadityarajkumawat
committed
truned to dark mode and added skeleton to loading post
1 parent 9323f1c commit b218098

File tree

9 files changed

+2059
-88
lines changed

9 files changed

+2059
-88
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, Heading, Text, useMediaQuery } from "@chakra-ui/react";
1+
import { Flex, Heading, useMediaQuery } from "@chakra-ui/react";
22
import React, { useEffect } from "react";
33
import { connect } from "react-redux";
44
import { fetchPopularPosts } from "../../../actions/getPostAction";
@@ -15,6 +15,7 @@ const PopularPosts = ({ fetchPopularPosts }) => {
1515
flexDirection={"column"}
1616
px={isLargerThan500 ? "100px" : "50px"}
1717
mt={isLargerThan500 ? "3rem" : ""}
18+
ml="30px"
1819
>
1920
<Heading as="h1">Popular Posts</Heading>
2021
</Flex>

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

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,29 @@
1+
import * as S from "@chakra-ui/react";
2+
import { Skeleton, useMediaQuery, useToast } from "@chakra-ui/react";
3+
import { ParsedData } from "draftjs-raw-parser";
14
import React, { useEffect, useState } from "react";
25
import { connect } from "react-redux";
6+
import styled, { css } from "styled-components";
7+
import { postComment } from "../../../actions/commentAction";
38
import {
9+
getLikedPosts,
410
getPost,
511
likePost,
6-
getLikedPosts,
12+
reallyGetAllPosts,
713
setCurrentPost,
814
} from "../../../actions/getPostAction";
915
import { showNav } from "../../../actions/navAction";
10-
import { ParsedData } from "draftjs-raw-parser";
1116
import { getThatProfileE } from "../../../actions/profileAction";
12-
import { reallyGetAllPosts } from "../../../actions/getPostAction";
13-
import { postComment } from "../../../actions/commentAction";
1417
import Comment from "../../comment/Comment";
15-
import * as S from "@chakra-ui/react";
16-
import styled, { css } from "styled-components";
17-
import { useToast } from "@chakra-ui/react";
18-
import { useMediaQuery } from "@chakra-ui/react";
1918

2019
const Post = ({
21-
post: { currentPost, openedPost, likedStatus, likedPost },
20+
post: { currentPost, openedPost, likedStatus, likedPost, loadingPost },
2221
getPost,
2322
likePost,
2423
getLikedPosts,
2524
auth,
2625
showNav,
2726
history,
28-
getThatProfileE,
29-
reallyGetAllPosts,
3027
setCurrentPost,
3128
comment,
3229
}) => {
@@ -99,57 +96,65 @@ const Post = ({
9996
};
10097

10198
const getThatP = () => {
102-
// getThatProfileE(openedPost.user);
103-
// reallyGetAllPosts(openedPost.user);
10499
history.push(`/dashboard/home/${openedPost.name}/${openedPost.user}`);
105100
};
106101

102+
console.log(openedPost);
103+
107104
return (
108105
<React.Fragment>
109106
<S.Flex
110107
flexDir="column"
111108
px={isLargerThan500 ? "400px" : "50px"}
112109
w="100vw"
113110
>
114-
<S.Heading fontSize={["35", "50", "80"]} color="gray.900">
115-
{post.heading}
116-
</S.Heading>
111+
{loadingPost ? (
112+
<Skeleton h="80px" mt="30px"></Skeleton>
113+
) : (
114+
<S.Heading mt="30px" color="#d6d6d6" fontSize="65px">
115+
{post.heading}
116+
</S.Heading>
117+
)}
117118
<S.Flex flexDir="column">
118119
{openedPost.user ? (
119120
<S.Box
120121
onClick={getThatP}
121122
fontSize={["15px", "23px"]}
122-
color="gray.700"
123+
color="#d6d6d690"
123124
mb="10px"
124125
>
125126
{post.name}
126127
</S.Box>
127128
) : (
128-
<span>No id</span>
129+
<Skeleton h="30px" w="300px" mt="0.5rem"></Skeleton>
130+
)}
131+
{loadingPost ? (
132+
<Skeleton h="30px" w="200px" my="0.5rem"></Skeleton>
133+
) : (
134+
<S.Flex alignItems="center" mb="10px">
135+
<S.Text fontSize={["15", "18"]}>{"7min"}</S.Text>
136+
<span
137+
style={{
138+
width: "5px",
139+
height: "5px",
140+
borderRadius: "100%",
141+
backgroundColor: "#454545",
142+
margin: "0 10px 0 10px",
143+
}}
144+
></span>
145+
<i
146+
onClick={likeThisPost}
147+
className={`fa${likedBtn() ? "s" : "r"} fa-heart`}
148+
style={
149+
likedBtn()
150+
? { color: "rgb(255, 0, 106)", fontSize: "25px" }
151+
: { fontSize: isLargerThan500 ? "25px" : "" }
152+
}
153+
></i>
154+
</S.Flex>
129155
)}
130-
<S.Flex alignItems="center" mb="10px">
131-
<S.Text fontSize={["15", "18"]}>{"7min"}</S.Text>
132-
<span
133-
style={{
134-
width: "5px",
135-
height: "5px",
136-
borderRadius: "100%",
137-
backgroundColor: "#454545",
138-
margin: "0 10px 0 10px",
139-
}}
140-
></span>
141-
<i
142-
onClick={likeThisPost}
143-
className={`fa${likedBtn() ? "s" : "r"} fa-heart`}
144-
style={
145-
likedBtn()
146-
? { color: "rgb(255, 0, 106)", fontSize: "25px" }
147-
: { fontSize: isLargerThan500 ? "25px" : "" }
148-
}
149-
></i>
150-
</S.Flex>
151156
</S.Flex>
152-
<S.Flex>
157+
<S.Flex mt="0.5rem">
153158
<S.Image
154159
src={post && `${post.image}`}
155160
fallbackSrc="https://i.ibb.co/RBT25fY/default-fallback-image.png"

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

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

98
const Trending = ({
109
getTrendingPosts,
@@ -90,8 +89,7 @@ const ItemWrapper = styled.div`
9089
ul {
9190
margin: 0;
9291
max-width: 1700px;
93-
justify-content: space-between;
94-
justify-content: center;
92+
justify-content: flex-start;
9593
}
9694
}
9795
`;

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

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
1-
import React, { useState, useEffect, Fragment } from "react";
1+
import { Box, Flex, Image, Text } from "@chakra-ui/react";
2+
import React, { Fragment, useEffect, useState } from "react";
23
import { connect } from "react-redux";
4+
import { getAdminPrivilages } from "../../../../actions/adminPrivilagesAction";
35
import {
4-
setCurrentPost,
5-
savePost,
66
getSavedPosts,
7+
savePost,
8+
setCurrentPost,
79
} from "../../../../actions/getPostAction";
8-
import PostPlaceHolder from "../../PostPlaceHolder";
9-
import { getAdminPrivilages } from "../../../../actions/adminPrivilagesAction";
1010
import OptionsMenu from "../../OptionsMenu";
11-
import {
12-
Avatar,
13-
AvatarBadge,
14-
Box,
15-
Flex,
16-
Image,
17-
Text,
18-
useToast,
19-
} from "@chakra-ui/react";
11+
import PostPlaceHolder from "../../PostPlaceHolder";
2012

2113
const TrendingItem = ({
2214
post,
@@ -94,7 +86,6 @@ const TrendingItem = ({
9486
// eslint-disable-next-line
9587
}, [loadingUNI, loadingUserPosts, loading]);
9688

97-
9889
const openOptionsMenu = () => {
9990
setOpenOptions((prev) => !prev);
10091
};
@@ -108,8 +99,8 @@ const TrendingItem = ({
10899
flexDirection="column"
109100
mx="30px"
110101
cursor="pointer"
111-
boxShadow="base"
112102
rounded="md"
103+
border="2px solid #a6a6a690"
113104
>
114105
<Flex onClick={post !== undefined ? openPost : null}>
115106
<Image
@@ -129,6 +120,7 @@ const TrendingItem = ({
129120
justifyContent="space-between"
130121
px="10px"
131122
py="5px"
123+
bg="#2a2c33"
132124
>
133125
<Flex flexDir="column">
134126
<Text onClick={openPost} fontSize="18px">
@@ -137,17 +129,17 @@ const TrendingItem = ({
137129
: post.heading}
138130
</Text>
139131
<Flex alignItems="center" mt="10px">
140-
<Text color="#696969">{post.name}</Text>
132+
<Text>{post.name}</Text>
141133
<span
142134
style={{
143135
width: "5px",
144136
height: "5px",
145137
borderRadius: "100%",
146-
backgroundColor: "#454545",
138+
backgroundColor: "#eee",
147139
margin: "0 4px 0 4px",
148140
}}
149141
></span>
150-
<Text color="#696969">7 min</Text>
142+
<Text>7 min</Text>
151143
</Flex>
152144
</Flex>
153145
<Box>

‎client/src/components/navbar/Navbar.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,8 @@
1-
import React, { useRef, useEffect } from "react";
2-
import { connect } from "react-redux";
3-
import { Link } from "react-router-dom";
4-
import { cleanAdminPrivilages } from "../../actions/adminPrivilagesAction";
5-
import { cleanGetPostAction } from "../../actions/getPostAction";
6-
import { cleanProfile } from "../../actions/profileAction";
7-
import { logout } from "../../actions/authAction";
8-
import { loadProfile } from "../../actions/profileAction";
9-
import isEmpty from "../../utils/isEmpty";
10-
import { initDropAnim, resetDropAnim } from "../../actions/framerAction";
111
import {
122
Box,
133
Button,
144
Flex,
155
Image,
16-
ListItem,
176
Menu,
187
MenuButton,
198
MenuItem,
@@ -22,7 +11,15 @@ import {
2211
Text,
2312
useMediaQuery,
2413
} from "@chakra-ui/react";
25-
import { Fragment } from "react";
14+
import React, { Fragment, useEffect } from "react";
15+
import { connect } from "react-redux";
16+
import { Link } from "react-router-dom";
17+
import { cleanAdminPrivilages } from "../../actions/adminPrivilagesAction";
18+
import { logout } from "../../actions/authAction";
19+
import { initDropAnim, resetDropAnim } from "../../actions/framerAction";
20+
import { cleanGetPostAction } from "../../actions/getPostAction";
21+
import { cleanProfile, loadProfile } from "../../actions/profileAction";
22+
import isEmpty from "../../utils/isEmpty";
2623

2724
const Navbar = ({
2825
navbar,
@@ -50,7 +47,12 @@ const Navbar = ({
5047
};
5148

5249
return navbar ? (
53-
<Flex height="80px" alignItems="center" px="50px">
50+
<Flex
51+
height="60px"
52+
alignItems="center"
53+
px="50px"
54+
borderBottom="1px solid #a6a6a690"
55+
>
5456
<Flex w="100vw" justifyContent="space-between" alignItems="center">
5557
<Link to="/">
5658
<Text fontSize="20px">DevHelp</Text>

‎client/src/components/pages/Home.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1+
import { Flex } from "@chakra-ui/react";
12
import React, { useEffect } from "react";
23
import { connect } from "react-redux";
3-
import { showNav } from "../../actions/navAction";
44
import { clearPost } from "../../actions/getPostAction";
5-
import Trending from "../layout components/Trending/Trending";
5+
import { showNav } from "../../actions/navAction";
66
import PopularPosts from "../layout components/General posts/PopularPosts";
7-
import { Box, Flex } from "@chakra-ui/react";
7+
import Trending from "../layout components/Trending/Trending";
88

99
const Home = ({ showNav, clearPost, history }) => {
1010
useEffect(() => {
@@ -13,7 +13,7 @@ const Home = ({ showNav, clearPost, history }) => {
1313
// eslint-disable-next-line
1414
}, []);
1515
return (
16-
<Flex w="100vw" flexDirection="column">
16+
<Flex w="100vw" flexDirection="column" mt="2rem">
1717
<Trending routing={history} />
1818
<PopularPosts />
1919
</Flex>

‎client/src/index.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1+
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
12
import React from "react";
23
import ReactDOM from "react-dom";
3-
import "./index.css";
44
import App from "./App";
5-
import { ChakraProvider } from "@chakra-ui/react";
5+
import "./index.css";
66

77
ReactDOM.render(
88
<React.StrictMode>
9-
<ChakraProvider>
9+
<ChakraProvider
10+
theme={extendTheme({
11+
config: { useSystemColorMode: false, initialColorMode: "dark" },
12+
})}
13+
>
1014
<App />
1115
</ChakraProvider>
1216
</React.StrictMode>,

‎routes/post.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,13 @@ router.post(
3232
post.content = content;
3333
post.comment = [];
3434
await post.save();
35-
return res.status(200).json(post);
35+
36+
return new Promise((resolve, reject) => {
37+
setTimeout(() => {
38+
resolve(res.status(200).json(post));
39+
}, 2000);
40+
});
41+
// return res.status(200).json(post);
3642
} catch (err) {
3743
console.error(err.message);
3844
res.send("Server Error!");
@@ -89,7 +95,11 @@ router.get("/:post_id", async (req, res) => {
8995
try {
9096
const post = await Post.findOne({ _id: post_id });
9197
if (post) {
92-
return res.json(post);
98+
return new Promise((resolve, reject) => {
99+
setTimeout(() => {
100+
resolve(res.status(200).json(post));
101+
}, 2000);
102+
});
93103
} else {
94104
return res.json("No Post Found!");
95105
}

0 commit comments

Comments
 (0)