Skip to content

Commit e8aca5b

Browse files
aadityarajkumawataadityarajkumawat
committed
completed dashboard
1 parent 2f1aef6 commit e8aca5b

File tree

11 files changed

+271
-289
lines changed

11 files changed

+271
-289
lines changed

‎client/package-lock.json‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"html-react-parser": "^0.13.0",
1919
"react": "^16.13.1",
2020
"react-dom": "^16.13.1",
21+
"react-icons": "^4.2.0",
2122
"react-redux": "^7.2.0",
2223
"react-router-dom": "^5.2.0",
2324
"react-scripts": "3.4.1",

‎client/src/actions/profileAction.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export const uploadProfilePhoto = (formData) => async (dispatch) => {
2222

2323
export const loadProfile = () => async (dispatch) => {
2424
try {
25-
console.log(typeof dispatch);
2625
if (localStorage.getItem("token")) {
2726
const res = await Axios.get("/api/profile");
2827
dispatch({ type: GET_PROFILE, payload: res.data });

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import PostPlaceHolder from "../../PostPlaceHolder";
99
import { getAdminPrivilages } from "../../../../actions/adminPrivilagesAction";
1010
import OptionsMenu from "../../OptionsMenu";
11-
import { Box, Flex, Image, Text } from "@chakra-ui/react";
11+
import { Avatar, AvatarBadge, Box, Flex, Image, Text } from "@chakra-ui/react";
1212

1313
const TrendingItem = ({
1414
post,
@@ -95,7 +95,13 @@ const TrendingItem = ({
9595
};
9696

9797
return (
98-
<Flex flexDirection="column" mx="30px" cursor="pointer">
98+
<Flex
99+
flexDirection="column"
100+
mr="60px"
101+
cursor="pointer"
102+
boxShadow="base"
103+
rounded="md"
104+
>
99105
<Flex onClick={post !== undefined ? openPost : null}>
100106
<Image
101107
src={post && post.image}
@@ -112,9 +118,6 @@ const TrendingItem = ({
112118
<Flex
113119
style={styleForHeading}
114120
justifyContent="space-between"
115-
bg="#eee"
116-
borderBottomLeftRadius="5px"
117-
borderBottomRightRadius="5px"
118121
px="10px"
119122
py="5px"
120123
>

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

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import React, { useEffect } from 'react';
2-
import { connect } from 'react-redux';
3-
import { removeNav } from '../../actions/navAction';
4-
import { clearPost } from '../../actions/getPostAction';
5-
import DashboardSideBar from './DashboardSideBar';
6-
import DashboardHome from './DashboardHome';
1+
import React, { useEffect } from "react";
2+
import { connect } from "react-redux";
3+
import { removeNav } from "../../actions/navAction";
4+
import { clearPost } from "../../actions/getPostAction";
5+
import DashboardSideBar from "./DashboardSideBar";
6+
import DashboardHome from "./DashboardHome";
7+
import { Flex } from "@chakra-ui/react";
78

89
const Dashboard = ({ removeNav, clearPost, history }) => {
9-
useEffect(() => {
10-
removeNav();
11-
clearPost();
10+
useEffect(() => {
11+
removeNav();
12+
clearPost();
1213

13-
// eslint-disable-next-line
14-
}, []);
14+
// eslint-disable-next-line
15+
}, []);
1516

16-
return (
17-
<div className='d-flex dashboard-container'>
18-
<DashboardSideBar />
19-
<DashboardHome routing={history} />
20-
</div>
21-
);
17+
return (
18+
<Flex>
19+
<DashboardHome routing={history} />
20+
</Flex>
21+
);
2222
};
2323

2424
const mapStateToProps = (state) => {
25-
return {
26-
auth: state.auth,
27-
post: state.post,
28-
};
25+
return {
26+
auth: state.auth,
27+
post: state.post,
28+
};
2929
};
3030

3131
export default connect(mapStateToProps, {
32-
removeNav,
33-
clearPost,
32+
removeNav,
33+
clearPost,
3434
})(Dashboard);

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
import React from "react";
22
import UserPost from "./user-post/UserPost";
33
import Profile from "./profile/Profile";
4-
import HamMenu from "./HamMenu";
4+
import { Flex, Box, Text } from "@chakra-ui/react";
5+
import DashboardSideBar from "./DashboardSideBar";
56

67
const DashboardHome = ({ routing }) => {
78
return (
8-
<div className="d-flex flex-column user-data-dash">
9-
<h2>Dashboard</h2>
9+
<Flex flexDir="column" pt="2rem" px="6rem" w="100vw">
10+
<Flex justifyContent='flex-start' alignItems='center'>
11+
<Box>
12+
<DashboardSideBar />
13+
</Box>
14+
<Box>
15+
<Text fontSize="25px" fontWeight="600">
16+
Dashboard
17+
</Text>
18+
</Box>
19+
</Flex>
1020
<Profile />
1121
<UserPost routing={routing} />
12-
</div>
22+
</Flex>
1323
);
1424
};
1525

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

Lines changed: 37 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,60 @@
11
import React, { Fragment } from "react";
2+
import * as S from "@chakra-ui/react";
23
import { Link } from "react-router-dom";
34
import { logout } from "../../actions/authAction";
45
import { connect } from "react-redux";
56
import Logo from "../../assets/favicon.svg";
67
import { toggleSlideMenu } from "../../actions/slideMenu";
7-
import useMediaQuery from "@material-ui/core/useMediaQuery";
88
import { cleanAdminPrivilages } from "../../actions/adminPrivilagesAction";
99
import { cleanGetPostAction } from "../../actions/getPostAction";
1010
import { cleanProfile } from "../../actions/profileAction";
11-
import * as S from "@chakra-ui/react";
12-
import { Text } from "@chakra-ui/react";
13-
14-
const DashboardSideBar = ({
15-
logout,
16-
slideMenu,
17-
toggleSlideMenu,
18-
cleanAdminPrivilages,
19-
cleanGetPostAction,
20-
cleanProfile,
21-
}) => {
22-
const matches = useMediaQuery("(max-width: 950px)");
23-
24-
const logoutUser = () => {
25-
logout();
26-
cleanAdminPrivilages();
27-
cleanGetPostAction();
28-
cleanProfile();
29-
localStorage.removeItem("token");
30-
};
31-
32-
const toggleMenu = React.useRef(null);
33-
const backdrop = React.useRef(null);
34-
35-
React.useEffect(() => {
36-
if (matches && slideMenu) {
37-
toggleMenu.current.classList.add("open-slide-bar");
38-
backdrop.current.classList.remove("remove-backdrop");
39-
} else {
40-
toggleMenu.current.classList.remove("open-slide-bar");
41-
backdrop.current.classList.add("remove-backdrop");
42-
}
43-
}, [slideMenu, matches]);
44-
45-
const removeMenu = () => {
46-
if (matches) {
47-
toggleSlideMenu(false);
48-
backdrop.current.classList.add("remove-backdrop");
49-
} else {
50-
backdrop.current.classList.add("remove-backdrop");
51-
}
52-
};
11+
import { MdMenu } from "react-icons/md";
5312

13+
const DashboardSideBar = ({}) => {
5414
const { isOpen, onOpen, onClose } = S.useDisclosure();
5515

5616
return (
5717
<Fragment>
58-
<div ref={toggleMenu}>
59-
<Link to="/">
60-
<div>
61-
<img src={Logo} alt="" />
62-
</div>
63-
</Link>
64-
<Link to="/dashboard/home">Home</Link>
65-
<Link to="/dashboard/saved">Saved Posts</Link>
66-
<a href="!#">Posts</a>
67-
<a href="!#">Stats</a>
68-
<a href="!#">Plans</a>
69-
<a href="!#">Help</a>
70-
<Link to="/">Logout</Link>
71-
</div>
72-
<div ref={backdrop} className="backdrop" onClick={removeMenu}></div>
73-
74-
<S.Button colorScheme="blue" onClick={onOpen}>
75-
Open
76-
</S.Button>
18+
<S.Box onClick={onOpen} mr="4">
19+
<S.Icon as={MdMenu} fontSize="3xl" />
20+
</S.Box>
7721
<S.Drawer placement={"left"} onClose={onClose} isOpen={isOpen}>
7822
<S.DrawerOverlay>
7923
<S.DrawerContent>
8024
<S.DrawerHeader borderBottomWidth="1px">
81-
Basic Drawer
25+
<S.Flex justifyContent="flex-start" alignItems="center">
26+
<Link to="/">
27+
<div>
28+
<img src={Logo} alt="" />
29+
</div>
30+
</Link>
31+
<S.Text ml="1rem">Devhelp</S.Text>
32+
</S.Flex>
8233
</S.DrawerHeader>
8334
<S.DrawerBody>
84-
<Text>Some contents...</Text>
85-
<Text>Some contents...</Text>
86-
<Text>Some contents...</Text>
35+
<S.Flex flexDirection="column" pt="5">
36+
<S.Box mb="1rem" fontSize="20">
37+
<Link to="/dashboard/home">Home</Link>
38+
</S.Box>
39+
<S.Box mb="1rem" fontSize="20">
40+
<Link to="/dashboard/saved">Saved Posts</Link>
41+
</S.Box>
42+
<S.Box mb="1rem" fontSize="20">
43+
<Link to="!#">Posts</Link>
44+
</S.Box>
45+
<S.Box mb="1rem" fontSize="20">
46+
<Link to="!#">Stats</Link>
47+
</S.Box>
48+
<S.Box mb="1rem" fontSize="20">
49+
<Link to="!#">Plans</Link>
50+
</S.Box>
51+
<S.Box mb="1rem" fontSize="20">
52+
<Link to="!#">Help</Link>
53+
</S.Box>
54+
<S.Box mb="1rem" fontSize="20">
55+
<Link to="/">Logout</Link>
56+
</S.Box>
57+
</S.Flex>
8758
</S.DrawerBody>
8859
</S.DrawerContent>
8960
</S.DrawerOverlay>

0 commit comments

Comments
 (0)