Skip to content

Commit 986d3fd

Browse files
vaibhavdarenvaibhavdaren
authored
Merge pull request #8 from Kritika-30/master
Organization Detail Page added
2 parents c06f125 + 297f767 commit 986d3fd

19 files changed

+1237
-1090
lines changed

‎client/package-lock.json

Lines changed: 699 additions & 880 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
@@ -14,6 +14,7 @@
1414
"clsx": "latest",
1515
"react": "latest",
1616
"react-dom": "latest",
17+
"react-router-dom": "^5.2.0",
1718
"react-scripts": "latest"
1819
},
1920
"browserslist": {

‎client/src/App.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
import React, { Component } from 'react';
22
import { BrowserRouter, Switch, Route } from 'react-router-dom'
3-
import Navbar from './Components/Layout/Header'
4-
import Dashboard from './Components/Dashboard/DashboardPanel'
5-
import Organization from './Components/Organization/OrganizationPanel'
3+
import Navbar from './Components/Layout/Navbar'
4+
import OrganizationContainer from './Components/Organization/OrganizationContainer';
5+
import DashboardContainer from './Components/Dashboard/DashboardContainer';
6+
import DetailContainer from './Components/Organization/OrganizationDetail/DetailContainer';
67
import SignIn from './Components/Authentication/Signin'
78
import SignUp from './Components/Authentication/Signup'
89

10+
911
class App extends Component {
1012
render() {
1113
return (
1214
<BrowserRouter>
15+
<Navbar />
1316
<div className="App">
1417
<Switch>
15-
<Route exact path='/'component={Navbar} />
16-
{/* <Route path='/organizations' component={Organization} /> */}
18+
<Route exact path='/Dashboard' component={DashboardContainer} />
19+
<Route exact path='/organization' component={OrganizationContainer} />
20+
<Route path='/OrganizationDetail' component = {DetailContainer} />
21+
{/* <Route exact path='/'component={Navbar} /> */}
1722
<Route path='/signin' component={SignIn} />
1823
<Route path='/signup' component={SignUp} />
1924

‎client/src/Components/Dashboard/DashboardContainer.jsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, {Component} from "react";
2+
import { withStyles,makeStyles } from "@material-ui/core/styles";
3+
import Header from "../Layout/Header.jsx";
4+
import DashboardProfile from "../Dashboard/DashboardProfile.jsx";
5+
import DashboardProposal from "./DashboardProposal.jsx";
6+
7+
const useStyles = ({
8+
comp: {
9+
display: "flex",
10+
padding: "0px 30px 30px 30px"
11+
},
12+
index: {
13+
display: "flex"
14+
},
15+
ab: {
16+
marginTop: 70,
17+
marginLeft: 200,
18+
fontSize: "24px"
19+
},
20+
pro: {
21+
marginTop: 70,
22+
marginLeft: 430,
23+
fontSize: "24px"
24+
}
25+
});
26+
27+
class DashboardContainer extends Component {
28+
render() {
29+
const { classes } = this.props;
30+
return (
31+
<div>
32+
<Header name="Dashboard" />
33+
34+
<div className={classes.index}>
35+
<div className={classes.ab}>
36+
<p>Profile</p>
37+
</div>
38+
<div className={classes.pro}>
39+
<p>Your Proposals</p>
40+
</div>
41+
</div>
42+
43+
<div className={classes.comp}>
44+
<DashboardProfile />
45+
<DashboardProposal />
46+
</div>
47+
</div>
48+
);
49+
}
50+
}
51+
52+
53+
export default withStyles(useStyles)(DashboardContainer);

‎client/src/Components/Dashboard/DashboardPanel.jsx

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎client/src/Components/Dashboard/DashboardContent.jsx renamed to ‎client/src/Components/Dashboard/DashboardProfile.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import CardActions from "@material-ui/core/CardActions";
55
import CardContent from "@material-ui/core/CardContent";
66
import Button from "@material-ui/core/Button";
77
import Typography from "@material-ui/core/Typography";
8-
import DashboardImage from "../Dashboard/DashboardImage.jsx";
9-
import {profileData} from "./Profile.json";
8+
import ProfileImage from "../Dashboard/ProfileImage.jsx";
9+
import {profileData} from "../../Data/Profile.json";
1010

1111
const useStyles = makeStyles({
1212
root: {
1313
minWidth: 350,
14-
marginTop: 100,
14+
marginTop: 0,
1515
height: 400,
16-
marginLeft: 170
16+
marginLeft: 170,
1717
},
1818
pos1: {
1919
marginTop: 35,
@@ -42,7 +42,7 @@ export default function MediaCard() {
4242
</CardActions>
4343

4444
<CardContent>
45-
<DashboardImage />
45+
<ProfileImage />
4646

4747
<Typography
4848
className={classes.pos1}

‎client/src/Components/Dashboard/DashboardComponent.jsx renamed to ‎client/src/Components/Dashboard/DashboardProposal.jsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,44 @@ import CardActions from "@material-ui/core/CardActions";
55
import CardContent from "@material-ui/core/CardContent";
66
import Button from "@material-ui/core/Button";
77
import Typography from "@material-ui/core/Typography";
8+
import {useHistory} from "react-router-dom";
89

910
const useStyles = makeStyles({
1011
root: {
1112
width: 650,
12-
marginTop: 100,
13+
marginTop: 0,
1314
height: 400,
1415
marginLeft: 150,
1516
marginRight: 40
1617
},
1718
pos1: {
1819
marginTop: 140
1920
},
20-
pos2: {
21-
marginBottom: 40
22-
},
2321
buttonspacing: {
2422
marginLeft: 195
2523
}
2624
});
2725

26+
27+
2828
export default function MediaCard() {
2929
const classes = useStyles();
30+
const history = useHistory();
31+
32+
33+
function handleClick(){
34+
history.push('/Organization');
35+
}
36+
3037

3138
return (
39+
3240
<Card className={classes.root}>
3341
<Card />
3442
<CardContent>
3543
<Typography
3644
className={classes.pos1}
37-
variant="h7"
45+
variant="body1"
3846
component="p"
3947
align="center"
4048
>
@@ -47,6 +55,7 @@ export default function MediaCard() {
4755
variant="contained"
4856
color="primary"
4957
className={classes.buttonspacing}
58+
onClick={handleClick}
5059
>
5160
View Organizations
5261
</Button>

‎client/src/Components/Dashboard/DashboardImage.jsx renamed to ‎client/src/Components/Dashboard/ProfileImage.jsx

File renamed without changes.

‎client/src/Components/Layout/Header.jsx

Lines changed: 24 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,41 @@
11
import React from "react";
22
import { makeStyles } from "@material-ui/core/styles";
3-
import AppBar from "@material-ui/core/AppBar";
4-
import Toolbar from "@material-ui/core/Toolbar";
3+
import Card from "@material-ui/core/Card";
4+
import CardContent from "@material-ui/core/CardContent";
55
import Typography from "@material-ui/core/Typography";
6-
import Tabs from "@material-ui/core/Tabs";
7-
import Tab from "@material-ui/core/Tab";
8-
import BrushIcon from "@material-ui/icons/Brush";
9-
import PropTypes from "prop-types";
10-
import Box from "@material-ui/core/Box";
11-
import DashboardPanel from "../Dashboard/DashboardPanel";
12-
import OrganizationPanel from "../Organization/OrganizationPanel";
136

14-
function TabPanel(props) {
15-
const { children, value, index, ...other } = props;
167

17-
return (
18-
<Typography
19-
component="div"
20-
role="tabpanel"
21-
hidden={value !== index}
22-
id={`simple-tabpanel-${index}`}
23-
aria-labelledby={`simple-tab-${index}`}
24-
{...other}
25-
>
26-
{value === index && <Box p={3}>{children}</Box>}
27-
</Typography>
28-
);
29-
}
30-
31-
TabPanel.propTypes = {
32-
children: PropTypes.node,
33-
index: PropTypes.any.isRequired,
34-
value: PropTypes.any.isRequired
35-
};
36-
37-
function a11yProps(index) {
38-
return {
39-
id: `simple-tab-${index}`,
40-
"aria-controls": `simple-tabpanel-${index}`
41-
};
42-
}
43-
44-
const useStyles = makeStyles(theme => ({
8+
const useStyles = makeStyles({
459
root: {
46-
flexGrow: 1,
47-
backgroundColor: theme.palette.background
10+
minWidth: 275,
11+
height: 150
4812
},
4913
title: {
50-
flexGrow: 1,
51-
marginLeft: 5
14+
fontSize: 40,
15+
marginLeft: 60,
16+
marginTop: 30
17+
},
18+
pos: {
19+
marginBottom: 12,
20+
marginLeft: 60
5221
}
53-
}));
22+
});
5423

55-
export default function Header() {
24+
export default function OutlinedCard(props) {
5625
const classes = useStyles();
57-
const [value, setValue] = React.useState(0);
58-
59-
const handleChange = (event, newValue) => {
60-
setValue(newValue);
61-
};
6226

6327
return (
64-
<div className={classes.root}>
65-
<AppBar position="static">
66-
<Toolbar>
67-
<BrushIcon />
68-
<Typography variant="h6" className={classes.title}>
69-
Season of Design
28+
<div>
29+
<Card className={classes.root} variant="outlined">
30+
<CardContent>
31+
<Typography className={classes.title} component="h2">
32+
{props.name}
33+
</Typography>
34+
<Typography className={classes.pos}>
35+
{props.desc}
7036
</Typography>
71-
<Tabs
72-
value={value}
73-
onChange={handleChange}
74-
aria-label="simple tabs example"
75-
>
76-
<Tab label="DASHBOARD" {...a11yProps(1)} />
77-
<Tab label="ORGANIZATIONS" {...a11yProps(0)} />
78-
</Tabs>
79-
</Toolbar>
80-
</AppBar>
81-
<TabPanel value={value} index={1}>
82-
<OrganizationPanel />
83-
</TabPanel>
84-
<TabPanel value={value} index={0}>
85-
<DashboardPanel />
86-
</TabPanel>
37+
</CardContent>
38+
</Card>
8739
</div>
8840
);
8941
}

‎client/src/Components/Layout/Navbar.jsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from "react";
2+
import { makeStyles } from "@material-ui/core/styles";
3+
import AppBar from "@material-ui/core/AppBar";
4+
import Toolbar from "@material-ui/core/Toolbar";
5+
import Typography from "@material-ui/core/Typography";
6+
import Tabs from "@material-ui/core/Tabs";
7+
import Tab from "@material-ui/core/Tab";
8+
import BrushIcon from "@material-ui/icons/Brush";
9+
import {useHistory} from "react-router-dom";
10+
11+
const useStyles = makeStyles(theme => ({
12+
root: {
13+
flexGrow: 1,
14+
backgroundColor: theme.palette.background
15+
},
16+
title: {
17+
flexGrow: 1,
18+
marginLeft: 5
19+
}
20+
}));
21+
22+
export default function Navbar() {
23+
const classes = useStyles();
24+
const [value, setValue] = React.useState(0);
25+
const history = useHistory();
26+
27+
const handleChange = (event, newValue) => {
28+
setValue(newValue);
29+
};
30+
31+
const handleClick = () => {
32+
history.push('./Dashboard');
33+
34+
};
35+
36+
const handle = () => {
37+
history.push('./Organization');
38+
};
39+
40+
41+
42+
return (
43+
<div className={classes.root}>
44+
<AppBar position="static">
45+
<Toolbar>
46+
<BrushIcon />
47+
<Typography variant="h6" className={classes.title}>
48+
Season of Design
49+
</Typography>
50+
<Tabs
51+
value={value}
52+
onChange={handleChange}
53+
aria-label="simple tabs example"
54+
>
55+
<Tab label="DASHBOARD" onClick={handleClick}/>
56+
<Tab label="ORGANIZATION" onClick={handle} />
57+
</Tabs>
58+
</Toolbar>
59+
</AppBar>
60+
</div>
61+
);
62+
}

0 commit comments

Comments
 (0)