Commit b0dfcbe4 authored by TJHeeringa's avatar TJHeeringa

Made PageContent component

parent 181f9062
......@@ -4,14 +4,10 @@ import { makeStyles, useTheme } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import TextInfoContent from '@mui-treasury/components/content/textInfo';
import { useBlogTextInfoContentStyles } from '@mui-treasury/styles/textInfoContent/blog';
import { useOverShadowStyles } from '@mui-treasury/styles/shadow/over';
import PeopleCardFooter from '@mui-treasury/components/cardFooter/people';
import Box from '@material-ui/core/Box';
import PropTypes from "prop-types";
import uuid from "uuid";
import { Info } from "App/Components/Info";
......@@ -109,7 +105,7 @@ ContactCard.propTypes = {
duty: PropTypes.string.isRequired,
description: PropTypes.string,
photo: PropTypes.string,
data: PropTypes.array,
data: PropTypes.object,
};
export default ContactCard;
// TODO move default photo header page into hear, so others can extend it
\ No newline at end of file
// import React from 'react'
// import { makeStyles } from '@material-ui/core/styles';
// import Typography from '@material-ui/core/Typography';
// import sizeMe, { withSize } from "react-sizeme";
// import { withRouter } from "react-router-dom"
//
// import "react-simple-tree-menu/dist/main.css";
//
//
// const useStyles = makeStyles(theme => ({
// photo_header: {
// width: '100%',
// height: '300px',
// position: 'absolute',
// backgroundPosition: 'center center',
// backgroundSize: 'cover',
// backgroundRepeat: 'no-repeat',
// backgroundImage: "url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-AJ9Cw3DdY48%2FUFCb1npjRHI%2FAAAAAAAAALs%2Fy1BaWpM2WfI%2Fs1600%2FNature-wallpaper%2B%25286%2529.jpg&f=1&nofb=1)"
// },
// header: {
// display: 'flex',
// alignItems: 'center',
// justifyContent: 'center',
// lineHeight: '300px',
// color: '#fff',
// },
// sub_photo_container: {
// paddingTop: '300px'
// }
// }));
//
// function PageContent(props){
// const { title, size} = props;
// const styles = useStyles();
// console.log(size);
// return (
// <>
// <div className={styles.photo_header} style={{width: size.width}}>
// <Typography className={styles.header} variant={'h3'}>{title}</Typography>
// </div>
//
// <div className={styles.sub_photo_container}>
// {props.children}
// </div>
// </>
// )
// }
//
// export default withRouter(sizeMe({ monitorHeight: true, refreshRate: 32 })(PageContent));
import React, { Component } from 'react'
import { makeStyles, withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import sizeMe, { withSize, SizeMe } from "react-sizeme";
import { withRouter } from "react-router-dom"
import "react-simple-tree-menu/dist/main.css";
const useStyles = theme => ({
photo_header: {
width: '100%',
height: '300px',
position: 'absolute',
backgroundPosition: 'center center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundImage: "url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-AJ9Cw3DdY48%2FUFCb1npjRHI%2FAAAAAAAAALs%2Fy1BaWpM2WfI%2Fs1600%2FNature-wallpaper%2B%25286%2529.jpg&f=1&nofb=1)"
},
header: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
lineHeight: '300px',
color: '#fff',
},
sub_photo_container: {
paddingTop: '300px'
}
});
class PageContent extends Component {
render(){
let { title, size, classes} = this.props;
console.log(size);
return (
<div>
<div className={classes.photo_header} style={{width: size.width}}>
<Typography className={classes.header} variant={'h3'}>{title}</Typography>
</div>
<div className={classes.sub_photo_container}>
{this.props.children}
</div>
</div>
)
}
}
export default withRouter(
sizeMe({ monitorHeight: true, refreshRate: 32 })(
withStyles(useStyles)(PageContent)
)
);
\ No newline at end of file
......@@ -82,8 +82,8 @@ function AssociationBoardDrawerList(props) {
},
{
icon: <GradeIcon />,
primary: "Board",
to: url + "/board"
primary: "Boards",
to: url + "/boards"
},
]
},
......
......@@ -37,21 +37,19 @@ function AssociationMemberDrawerList(props) {
icon: <GradeIcon />,
primary: "Board",
to: url + '/board'
}
]
},
{
icon: <AccountBoxIcon />,
primary: "Profile",
items: [
},
{
icon: <SupervisedUserCircleIcon />,
primary: "My committees",
primary: "Committees",
to: url + '/committees'
},
]
},
{
icon: <AccountBoxIcon />,
primary: "Profile",
to: url + '/profile'
},
{
icon: <EventIcon />,
primary: "Calendar",
......
import React, { Component } from 'react'
import Get from "restful-react"
import uuid from 'uuid'
import { Spinner,Button,Container,Row,Col } from 'reactstrap'
import { withRouter } from "react-router-dom"
import { BackButton } from "App/Components/BackButton";
import { Info } from "App/Components/Info";
import { NavLink, Redirect, Route } from 'react-router-dom'
import { Helper } from "App/Helper";
import GroupCard from "../../Components/Card/GroupCard";
import ContactCard from "../../Components/Card/ContactCard";
import CardGrid from "../../Components/Card/CardGrid";
import Typography from '@material-ui/core/Typography';
import { withStyles, makeStyles, useTheme } from '@material-ui/core/styles';
import sizeMe, {withSize} from "react-sizeme";
import sizeMe, { withSize } from "react-sizeme";
import PageContent from '../../Components/Content/Content'
import "react-simple-tree-menu/dist/main.css";
const useStyles = theme => ({
photo_header: {
width: '100%',
height: '300px',
position: 'absolute',
backgroundPosition: 'center center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundImage: "url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-AJ9Cw3DdY48%2FUFCb1npjRHI%2FAAAAAAAAALs%2Fy1BaWpM2WfI%2Fs1600%2FNature-wallpaper%2B%25286%2529.jpg&f=1&nofb=1)"
},
header: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
lineHeight: '300px',
color: '#fff',
},
sub_photo_container: {
paddingTop: '300px'
}
});
......@@ -90,30 +64,21 @@ export class AssociationBoardInfo extends Component {
};
render() {
const { association, classes, size } = this.props;
const { boards, current } = this.state;
console.log(boards);
let x = current && current.groupmemberships && this.boardsToGrid(current.groupmemberships.map(board_member=>this.morphBoardMemberToData(board_member)));
console.log(x);
return (
<>
<div className={classes.photo_header} style={{width: size.width}}>
<Typography className={classes.header} variant={'h3'}>Board</Typography>
</div>
<div className={classes.sub_photo_container}>
<CardGrid
component={ContactCard}
card_grid={x}
/>
</div>
</>
<PageContent title={'Board'}>
<CardGrid
component={ContactCard}
card_grid={x}
/>
</PageContent>
)
}
}
export const AssociationBoardInfoWithRouter = withRouter(
sizeMe({ monitorHeight: true, refreshRate: 32 })(
withStyles(useStyles)(AssociationBoardInfo)
)
withStyles(useStyles)(AssociationBoardInfo)
);
\ No newline at end of file
import React, { Component } from 'react'
import { Col, Container, Row } from 'reactstrap'
import { Button } from 'reactstrap';
import { Link } from "react-router-dom"
import CardGrid from "App/Components/Card/CardGrid";
import Typography from '@material-ui/core/Typography';
import React from 'react'
import { makeStyles, useTheme } from '@material-ui/core/styles';
import sizeMe from 'react-sizeme';
import PageContent from '../../Components/Content/Content'
const useStyles = makeStyles(theme => ({
photo_header: {
width: '100%',
height: '300px',
position: 'absolute',
backgroundPosition: 'center center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundImage: "url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-AJ9Cw3DdY48%2FUFCb1npjRHI%2FAAAAAAAAALs%2Fy1BaWpM2WfI%2Fs1600%2FNature-wallpaper%2B%25286%2529.jpg&f=1&nofb=1)"
},
header: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
lineHeight: '300px',
color: '#fff',
}
}));
function AssociationHome(props) {
let {path, association, show_board_view_button} = props;
let { association } = props;
const classes = useStyles();
const theme = useTheme();
console.log(theme);
const card_grid = [
[
{title: "Association", subtitle:"Info", link: path+"/association/info"},
{title: "Association", subtitle:"Board", link: path+"/boardmembers"},
],
[
{title: "Profile", subtitle:"My info", link: path+"/profile"},
{title: "Profile", subtitle:"My committees", link: path+"/committees"},
],
[
{title: "Calendar", subtitle:"Events", link: path+"/calendar"},
]
];
return (
<div>
<div className={classes.photo_header} style={{width: props.size.width}}>
<Typography className={classes.header} variant={'h3'}>{association.name}</Typography>
</div>
</div>
<PageContent title={association.name}/>
)
};
}
export default sizeMe({ monitorHeight: true, refreshRate: 32 })(AssociationHome);
\ No newline at end of file
export default AssociationHome;
\ No newline at end of file
import React, { Component } from 'react'
import { NavLink, Redirect, Route } from 'react-router-dom'
import { Spinner,Button,Container,Row,Col } from 'reactstrap'
import { Route } from 'react-router-dom'
import { withRouter } from "react-router-dom"
import { BackButton } from "App/Components/BackButton";
import "react-simple-tree-menu/dist/main.css";
import "./Groups.css";
import { Helper } from "App/Helper";
......@@ -11,9 +9,9 @@ import { GroupDetailWithRouter } from "./GroupDetail";
import GroupCard from "../../Components/Card/GroupCard";
import DummyGroupCard from "../../Components/Card/DummyGroupCard";
import CardGrid from "../../Components/Card/CardGrid";
import Typography from '@material-ui/core/Typography';
import { withStyles, makeStyles, useTheme } from '@material-ui/core/styles';
import sizeMe, {withSize} from "react-sizeme";
import sizeMe, { withSize } from "react-sizeme";
import PageContent from '../../Components/Content/Content'
const useStyles = theme => ({
......@@ -75,46 +73,21 @@ export class MyCommittees extends Component {
let committees = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
console.log(this.committeesToGrid(committees));
return (
<div>
<>
<MyCommitteesRouter
groups={this.state.committees}
path={path}
association={this.props.association}
/>
{this.props.location.pathname === path &&
<x-fragment>
<div className={classes.photo_header} style={{width: size.width}}>
<Typography className={classes.header} variant={'h3'}>Committees</Typography>
</div>
<div className={classes.sub_photo_container}>
<CardGrid
component={DummyGroupCard}
card_grid={this.committeesToGrid(committees)}
/>
</div>
{/*<Container className={classes.sub_photo_container}>*/}
{/*/!*<div className="Groups box mt-20">*!/*/}
{/*/!*<Row>*!/*/}
{/*/!*<Col>*!/*/}
{/*/!*<h4>My Committees</h4>*!/*/}
{/*/!*</Col>*!/*/}
{/*/!*</Row>*!/*/}
{/*/!*<hr className="box-title-separator"/>*!/*/}
{/*/!*{this.state.committees && this.state.committees.map((committee) =>{*!/*/}
{/*/!*return !committee.archived && <x-fragment key={uuid.v4()}>*!/*/}
{/*/!*<NavLink to={path+'/'+committee.slug}>*!/*/}
{/*/!*{committee.full_name}*!/*/}
{/*/!*</NavLink>*!/*/}
{/*/!*<br/>*!/*/}
{/*/!*</x-fragment>*!/*/}
{/*/!*})}*!/*/}
{/*/!*</div>*!/*/}
{/*</Container>*/}
</x-fragment>
<PageContent title={'Committees'}>
<CardGrid
component={DummyGroupCard}
card_grid={this.committeesToGrid(committees)}
/>
</PageContent>
}
</div>
</>
);
}
}
......@@ -123,7 +96,7 @@ export class MyCommitteesRouter extends Component {
render() {
const {groups, path, association} = this.props;
return (
<x-fragment>
<>
{groups.map((group) =>{
return <x-fragment key={uuid.v4()}>
<Route
......@@ -140,14 +113,12 @@ export class MyCommitteesRouter extends Component {
/>
</x-fragment>
})}
</x-fragment>
</>
)
}
}
export const MyCommitteesWithRouter = withRouter(
sizeMe({ monitorHeight: true, refreshRate: 32 })(
withStyles(useStyles)(MyCommittees)
)
);
\ No newline at end of file
......@@ -41,6 +41,7 @@ export class AssociationProfile extends Component {
render() {
const {association, association_membership} = this.props;
const association_specific_data = association_membership.association_specific_data;
console.log(association_membership);
return (
<div>
<BackButton history={this.props.history} container={true}/>
......@@ -56,36 +57,17 @@ export class AssociationProfile extends Component {
</Col>
</Row>
<hr className="box-title-separator"/>
<Get
base={association_membership.profile}
path=""
>
{(data, { loading, error }) =>
loading ? (
<Spinner color="primary"/>
) : (
<div>
{error ? (
console.log(error)
) : (
<x-fragment>
{this.state.form_type === 'info'
?
<ProfileInfo
profile={data}
/>
:
<div>
<h4>Profile</h4>
<p>Your profile is shared between association. If you want to change your profile, go to <NavLink to="/protected/settings">settings</NavLink>.</p>
</div>
}
</x-fragment>
)}
</div>
)
}
</Get>
{this.state.form_type === 'info'
?
<ProfileInfo
profile={association_membership.profile}
/>
:
<div>
<h4>Profile</h4>
<p>Your profile is shared between association. If you want to change your profile, go to <NavLink to="/protected/v/settings">settings</NavLink>.</p>
</div>
}
{this.state.form_type === 'info'
?
<Info
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment