Skip to content

Commit 34a0575

Browse files
aadityarajkumawataadityarajkumawat
committed
working on these saved posts is hard
1 parent a62c229 commit 34a0575

File tree

9 files changed

+170
-88
lines changed

9 files changed

+170
-88
lines changed

‎client/src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function App() {
2424
<Provider store={store}>
2525
<Router>
2626
<Navbar />
27-
<Flex justifyContent="space-between" alignItems="flex-start">
27+
<Flex justifyContent="space-between" alignItems="flex-start" h="100%">
2828
<Switch>
2929
<Routes />
3030
</Switch>

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

Lines changed: 49 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
MenuButton,
77
MenuItem,
88
MenuList,
9+
Skeleton,
910
Text,
1011
} from "@chakra-ui/react";
1112
import React, { Fragment, useEffect, useState } from "react";
@@ -32,9 +33,11 @@ const TrendingItem = ({
3233
savePost,
3334
auth,
3435
getSavedPosts,
36+
forComp,
3537
}) => {
3638
const [loadingUNI, setLoadingUNI] = useState(true);
3739
const [styleForHeading, setStyleForHeading] = useState({});
40+
const [imageLoaded, setImageLoaded] = useState(false);
3841

3942
useEffect(() => {
4043
if (status === "" && auth.isAuthenticated) {
@@ -102,23 +105,38 @@ const TrendingItem = ({
102105
cursor="pointer"
103106
rounded="md"
104107
border="2px solid #a6a6a690"
105-
w="100%"
108+
w={forComp === "user-post" ? "100%" : "350px"}
106109
maxWidth="350px"
107110
>
108-
<Flex onClick={post !== undefined ? openPost : null}>
111+
<Flex
112+
onClick={post !== undefined ? openPost : null}
113+
w={forComp === "user-post" ? "100%" : "350px"}
114+
h="170px"
115+
maxWidth="350px"
116+
>
117+
{!imageLoaded && (
118+
<Skeleton
119+
w={forComp === "user-post" ? "100%" : "350px"}
120+
h="170px"
121+
maxW="346px"
122+
></Skeleton>
123+
)}
109124
<Image
110125
src={post && post.image}
111126
fallbackSrc="https://i.ibb.co/RBT25fY/default-fallback-image.png"
112-
w="100%"
127+
w={forComp === "user-post" ? "100%" : "346px"}
113128
h="170px"
114129
objectFit="cover"
115130
alt="post"
116131
borderTopLeftRadius="5px"
117132
borderTopRightRadius="5px"
133+
onLoad={() => setImageLoaded(true)}
134+
display={imageLoaded ? "" : "none"}
135+
maxWidth="346px"
118136
/>
119137
</Flex>
120138
{loadingUNI && <PostPlaceHolder />}
121-
{post !== undefined && (
139+
{post !== undefined ? (
122140
<Flex
123141
style={styleForHeading}
124142
justifyContent="space-between"
@@ -134,16 +152,20 @@ const TrendingItem = ({
134152
</Text>
135153
<Flex alignItems="center" mt="10px">
136154
<Text>{post.name}</Text>
137-
<span
138-
style={{
139-
width: "5px",
140-
height: "5px",
141-
borderRadius: "100%",
142-
backgroundColor: "#eee",
143-
margin: "0 4px 0 4px",
144-
}}
145-
></span>
146-
<Text>7 min</Text>
155+
{forComp !== "saved" && (
156+
<Fragment>
157+
<span
158+
style={{
159+
width: "5px",
160+
height: "5px",
161+
borderRadius: "100%",
162+
backgroundColor: "#eee",
163+
margin: "0 4px 0 4px",
164+
}}
165+
></span>
166+
<Text>7 min</Text>
167+
</Fragment>
168+
)}
147169
</Flex>
148170
</Flex>
149171
<Flex flexDir="column" alignItems="center" alignSelf="center">
@@ -154,7 +176,7 @@ const TrendingItem = ({
154176
{adminPrivilages.postAccessibility && (
155177
<Fragment>
156178
<Flex mt="10px" className="admin-post-drop">
157-
<Menu>
179+
<Menu isLazy>
158180
<MenuButton
159181
as={Flex}
160182
w="20px"
@@ -176,6 +198,18 @@ const TrendingItem = ({
176198
)}
177199
</Flex>
178200
</Flex>
201+
) : (
202+
<Flex
203+
style={styleForHeading}
204+
justifyContent="space-between"
205+
px="10px"
206+
py="5px"
207+
bg="#2a2c33"
208+
flexDir="column"
209+
>
210+
<Skeleton my="0.2rem" h="25px" w="240px"></Skeleton>
211+
<Skeleton my="0.2rem" h="20px" w="100px"></Skeleton>
212+
</Flex>
179213
)}
180214
</Flex>
181215
);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ const Navbar = ({
8585
src={profile.profile.image ? profile.profile.image : ""}
8686
alt="User profile image"
8787
fallbackSrc="https://i.ibb.co/cTWq2Mm/depositphotos-171453724-stock-illustration-default-avatar-profile-icon-grey.jpg"
88+
objectFit="cover"
8889
/>
8990
</Box>
9091
</MenuButton>

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

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import React, { useState, useEffect } from "react";
1+
import { Box, Flex, Grid } from "@chakra-ui/layout";
2+
import React, { useEffect, useState } from "react";
23
import { connect } from "react-redux";
34
import {
45
getSavedPosts,
56
savePost,
6-
setCurrentPost,
7+
setCurrentPost
78
} from "../../actions/getPostAction";
9+
import TrendingItem from "../layout components/Trending/TrendingItem/TrendingItem";
810

911
const ActivityList = ({
1012
post,
@@ -31,38 +33,29 @@ const ActivityList = ({
3133

3234
const openThisPost = (id) => {
3335
if (post !== undefined && routing !== undefined) {
34-
console.log(id);
3536
setCurrentPost(id.toString());
3637
sessionStorage.setItem("postID", id.toString());
3738
routing.push("/post");
3839
}
3940
};
4041

42+
console.log(post);
43+
4144
return (
42-
<div className="activity-list">
43-
<ul className="list-ul">
45+
<Flex className="activity-list" px="1rem" w="100%" mt="2rem">
46+
<Grid
47+
templateColumns="repeat(2, 1fr)"
48+
gap="calc(100% - 700px)"
49+
className="list-ul"
50+
width="100%"
51+
>
4452
{postsSaved.map((post) => (
45-
<li key={post._id}>
46-
<div className="list-item-div d-flex justify-content-between align-items-center">
47-
<div className="right">
48-
<div className="post-img">
49-
<img src={post !== undefined ? `${post.image}` : ""} alt="" />
50-
</div>
51-
<h3 onClick={() => openThisPost(post.savedID)}>
52-
{post.heading}
53-
</h3>
54-
</div>
55-
<div
56-
className="options-manipulate"
57-
onClick={() => removeThisSavedPost(post.savedID.toString())}
58-
>
59-
<i className="fas fa-trash-alt"></i>
60-
</div>
61-
</div>
62-
</li>
53+
<Box w="350px" onClick={openThisPost} mb="2rem">
54+
<TrendingItem post={post} forComp="saved" />
55+
</Box>
6356
))}
64-
</ul>
65-
</div>
57+
</Grid>
58+
</Flex>
6659
);
6760
};
6861

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

Lines changed: 3 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 { removeNav } from "../../actions/navAction";
4+
import { useRouteMatch } from "react-router-dom";
45
import { clearPost } from "../../actions/getPostAction";
6+
import { removeNav } from "../../actions/navAction";
57
import DashboardHome from "./DashboardHome";
6-
import { Flex } from "@chakra-ui/react";
7-
import { useRouteMatch } from "react-router-dom";
88

99
const Dashboard = ({ removeNav, clearPost, history }) => {
1010
useEffect(() => {
@@ -15,7 +15,6 @@ const Dashboard = ({ removeNav, clearPost, history }) => {
1515
}, []);
1616

1717
const match = useRouteMatch();
18-
console.log({ match });
1918

2019
return (
2120
<Flex>

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

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import * as S from "@chakra-ui/react";
22
import { Box, Flex, Text } from "@chakra-ui/react";
33
import React from "react";
4+
import { connect } from "react-redux";
45
import { Link } from "react-router-dom";
56
import Logo from "../../assets/favicon.svg";
6-
import DashboardSideBar from "./DashboardSideBar";
77
import Profile from "./profile/Profile";
88
import UserPost from "./user-post/UserPost";
99

10-
const DashboardHome = ({ routing, user }) => {
10+
const DashboardHome = ({ routing, user, profile }) => {
1111
return (
1212
<Flex justifyContent="center" w="100vw">
13-
<Flex w="calc(50vw - 350px)" h="100vh" justifyContent="flex-end">
13+
<Flex w="calc(50vw - 400px)" h="100vh" justifyContent="flex-end">
1414
<Flex flexDir="column" w="15rem" pt="1rem">
1515
<S.Flex justifyContent="flex-start" alignItems="center">
1616
<Link to="/">
@@ -22,7 +22,9 @@ const DashboardHome = ({ routing, user }) => {
2222
</S.Flex>
2323
<S.Flex flexDirection="column" pt="5">
2424
<S.Box mb="1rem" fontSize="20">
25-
<Link to="/dashboard/home">Home</Link>
25+
<Link to={`/dashboard/home/user/${profile.profile._id}`}>
26+
Home
27+
</Link>
2628
</S.Box>
2729
<S.Box mb="1rem" fontSize="20">
2830
<Link to="/dashboard/saved">Saved Posts</Link>
@@ -50,19 +52,14 @@ const DashboardHome = ({ routing, user }) => {
5052
px="0rem"
5153
h="100vh"
5254
flexDir="column"
53-
w="700px"
55+
w="800px"
5456
pt="1rem"
5557
>
5658
<Flex
5759
justifyContent="flex-start"
5860
alignItems="center"
5961
borderBottom="1px solid #a6a6a680"
6062
>
61-
{user.params.name === "user" && (
62-
<Box>
63-
<DashboardSideBar />
64-
</Box>
65-
)}
6663
<Box>
6764
<Text ml="1rem" fontSize="25px" fontWeight="600" mb="1rem">
6865
{user.params.name === "user"
@@ -74,9 +71,15 @@ const DashboardHome = ({ routing, user }) => {
7471
<Profile user={user.params} />
7572
<UserPost routing={routing} />
7673
</Flex>
77-
<Flex w="calc(50vw - 350px)" h="100vh"></Flex>
74+
<Flex w="calc(50vw - 400px)" h="100vh"></Flex>
7875
</Flex>
7976
);
8077
};
8178

82-
export default DashboardHome;
79+
const mapStateToProps = (state) => {
80+
return {
81+
profile: state.profile,
82+
};
83+
};
84+
85+
export default connect(mapStateToProps, {})(DashboardHome);

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
import React from 'react';
2-
import ActivityList from './ActivityList';
3-
import HamMenu from './HamMenu';
1+
import { Flex, Text } from "@chakra-ui/layout";
2+
import React from "react";
3+
import ActivityList from "./ActivityList";
44

55
const DashboardSaved = ({ routing }) => {
6-
return (
7-
<div className='d-flex flex-column user-data-dash saved-data'>
8-
<div className='dashboard-heading'>
9-
<h2>Saved Posts</h2>
10-
<HamMenu />
11-
</div>
12-
<ActivityList routing={routing} />
13-
</div>
14-
);
6+
return (
7+
<Flex w="800px" flexDir="column" px="0" borderX="1px solid #a6a6a680">
8+
<Flex p="1rem" borderBottom="1px solid #a6a6a680">
9+
<Text fontSize="25px" fontWeight="600">
10+
Saved Posts
11+
</Text>
12+
</Flex>
13+
<ActivityList routing={routing} />
14+
</Flex>
15+
);
1516
};
1617

1718
export default DashboardSaved;

0 commit comments

Comments
 (0)