Commit c09c845d authored by TJHeeringa's avatar TJHeeringa

Again to many changes for a single commit

parent 485a4554
REACT_APP_OSIRIS=false
REACT_APP_API_URL='https://dev.sun.snt.utwente.nl'
REACT_APP_SERVER_URL='https://sun.snt.utwente.nl'
REACT_APP_PRODUCTION_ENV=false
\ No newline at end of file
REACT_APP_OSIRIS=false
REACT_APP_API_URL='https://api.sun.utwente.nl'
REACT_APP_SERVER_URL='https://sun.utwente.nl'
REACT_APP_PRODUCTION_ENV=true
\ No newline at end of file
......@@ -41,6 +41,7 @@
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/default-props-match-prop-types": [1, { "allowRequiredDefaults": false }],
"react/display-name": 0,
"react/no-children-prop": 2,
"react/prop-types": 1,
"react/no-this-in-sfc": 2,
......
......@@ -17197,6 +17197,11 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-lines-ellipsis": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/react-lines-ellipsis/-/react-lines-ellipsis-0.14.1.tgz",
"integrity": "sha512-4nEDEzzfXy2bqRhLc00DWYb39FKIpGqaIIh/YT3KdHyM9pqD8cSfDSCdGy657sB12alCdT7cKK48Uk0OsRMvHQ=="
},
"react-lorem-ipsum": {
"version": "1.4.5",
"resolved": "https://registry.npmjs.org/react-lorem-ipsum/-/react-lorem-ipsum-1.4.5.tgz",
......
......@@ -12,10 +12,6 @@
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!--<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>-->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
......
......@@ -6,57 +6,43 @@ import { fab } from "@fortawesome/free-brands-svg-icons";
import {faBars,faCheck,faChevronLeft,faHome,faIgloo,faPlus,faSignOutAlt,faTimes,faUser} from "@fortawesome/free-solid-svg-icons";
import CssBaseline from "@material-ui/core/CssBaseline";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import { BrowserRouter as Router } from "react-router-dom";
import moment from "moment";
import React, { Component } from "react";
import React from "react";
import PublicPageLayout from "./Components/PageLayout/PublicPageLayout";
import { AuthenticationContext } from "./Contexts/Authentication";
import { PageLayoutContext } from "./Contexts/PageLayout";
import Authenticator from "./Contexts/Authentication";
import PageLayoutProvider from "./Contexts/PageLayout";
import RestProvider from "./Contexts/RestProvider";
import ThemeProvider from "./Contexts/Theme";
import { Routing } from "./Routing/Routing";
import AlertHandlerProvider from "./Contexts/AlertHandler";
require("bootstrap");
library.add(fab,faSignOutAlt, faUser, faIgloo, faBars, faCheck, faTimes, faHome, faPlus, faChevronLeft);
class App extends Component {
constructor(props){
super(props);
const login = () => this.setState({authentication:{}});
const logout = ()=> this.setState({authentication:{}});
const setLayout = (component)=> this.setState({pagelayout: {component:component}});
this.state = {
authentication: {
authenticated: false,
login: login,
logout: logout
},
pagelayout: {
component: PublicPageLayout,
setLayout: setLayout
},
};
}
render() {
return (
<div className={"App"}>
<AuthenticationContext.Provider value={this.state.authentication}>
<ThemeProvider>
<CssBaseline/>
<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
<PageLayoutContext.Provider value={this.state.pagelayout}>
<Routing/>
</PageLayoutContext.Provider>
</MuiPickersUtilsProvider>
</ThemeProvider>
</AuthenticationContext.Provider>
</div>
);
}
}
const App = (props) => {
return (
<div className={"App"}>
<Router>
<AlertHandlerProvider>
<Authenticator>
<ThemeProvider>
<CssBaseline/>
<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
<PageLayoutProvider>
<RestProvider>
<Routing/>
</RestProvider>
</PageLayoutProvider>
</MuiPickersUtilsProvider>
</ThemeProvider>
</Authenticator>
</AlertHandlerProvider>
</Router>
</div>
);
};
export default App;
\ No newline at end of file
import {Alert} from "reactstrap";
import PropTypes from "prop-types";
import React from "react";
export const AlertHandler = (props) => {
const {color, message, visible} = props;
let color_message;
if (color) {
switch (color) {
case "green":
color_message = "success";
break;
case "red":
color_message = "danger";
break;
case "yellow":
color_message = "warning";
break;
case "blue":
color_message = "primary";
break;
case "grey":
color_message = "secondary";
break;
case "lightblue":
color_message = "info";
break;
case "white:":
color_message = "light";
break;
case "darkgrey:":
color_message = "dark";
break;
default:
color_message = color;
}
}
return (
<Alert
className={"login-error-alert"}
fade={true}
isOpen={visible}
color={color_message}
>
{ message }
</Alert>
);
};
AlertHandler.propTypes = {
color: PropTypes.string,
message: PropTypes.string.isRequired,
visible: PropTypes.bool.isRequired
};
AlertHandler.defaultProps = {
color: "info"
};
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import React, { Component } from "react";
import PropTypes from "prop-types";
import React from "react";
import { useHistory } from "react-router-dom";
import {Button,Col,Container,Row} from "reactstrap";
export class BackButton extends Component {
render() {
const {history, container} = this.props;
export const BackButton = (props) => {
const history = useHistory();
const { container } = props;
if (container) {
return (
<Container>
<Col>
<Row>
<Button onClick={history.goBack} color={"link"} className={"backbutton"}>
<FontAwesomeIcon className={"fa-xs"} icon={"chevron-left"}/>
&nbsp;Back
</Button>
</Row>
</Col>
</Container>
);
} else {
return (
<>
{ container === true ?
<Container>
<Col>
<Row>
<Button onClick={history.goBack} color={"link"} className={"backbutton"}>
<FontAwesomeIcon className={"fa-xs"} icon={"chevron-left"}/>
&nbsp;Back
</Button>
</Row>
</Col>
</Container>
:
<Button onClick={history.goBack} color={"link"} className={"backbutton"}>
<FontAwesomeIcon className={"fa-xs"} icon={"chevron-left"}/>
&nbsp;Back
</Button>
}
</>
<Button onClick={history.goBack} color={"link"} className={"backbutton"}>
<FontAwesomeIcon className={"fa-xs"} icon={"chevron-left"}/>
&nbsp;Back
</Button>
);
}
}
};
BackButton.propTypes = {
container: PropTypes.bool
};
BackButton.defaultProps = {
container: true
};
\ No newline at end of file
......@@ -4,20 +4,25 @@ import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Divider from "@material-ui/core/Divider";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import TextInfoContent from "@mui-treasury/components/content/textInfo";
import { useOverShadowStyles } from "@mui-treasury/styles/shadow/over";
import { useBlogTextInfoContentStyles } from "@mui-treasury/styles/textInfoContent/blog";
import cx from "clsx";
import PropTypes from "prop-types";
import React from "react";
import LinesEllipsis from "react-lines-ellipsis";
import { loremIpsum } from "react-lorem-ipsum";
import { useHistory } from "react-router-dom";
import Image from "img/default_photo.jpg"; // Import using relative path
import Info from "../Info/Info";
const useStyles = makeStyles(theme => ({
root: {
margin: "auto",
borderRadius: theme.spacing(2), // 16px
borderRadius: theme.shape.borderRadius,
transition: "0.3s",
boxShadow: "0px 14px 80px rgba(34, 35, 58, 0.2)",
position: "relative",
......@@ -25,24 +30,23 @@ const useStyles = makeStyles(theme => ({
maxWidth: 500,
marginLeft: "auto",
overflow: "initial",
background: "#ffffff",
background: theme.palette.background.paper,
display: "flex",
flexDirection: "column",
alignItems: "center",
paddingBottom: theme.spacing(2),
},
media: {
width: "88%",
marginLeft: 10,
marginRight: 10,
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
height: 0,
paddingBottom: "48%",
borderRadius: theme.spacing(2),
backgroundColor: "#fff",
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.paper,
position: "relative",
transform: "translateY(8px)",
paddingLeft: 10,
paddingRight: 10,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
"&:after": {
content: "\" \"",
position: "absolute",
......@@ -50,14 +54,14 @@ const useStyles = makeStyles(theme => ({
left: 0,
width: "100%",
height: "100%",
borderRadius: theme.spacing(2), // 16
borderRadius: theme.shape.borderRadius,
opacity: 0.5,
},
},
buttonSeparator : {
display: "flex",
justifyContent: "space-between",
marginTop: theme.spacing(1),
marginTop: theme.spacing(2),
},
content: {
padding: 24,
......@@ -77,25 +81,32 @@ const AssociationCard = (props) => {
} = useBlogTextInfoContentStyles();
const shadowStyles = useOverShadowStyles();
console.log(props);
console.log(history);
const { name, description, photo, slug } = props;
const { name, description, photo, slug, onBecomeMemberClick, becomeMemberButton } = props;
const text = description || loremIpsum()[0];
return (
<Card className={cx(styles.root, shadowStyles.root)}>
<CardMedia
className={styles.media}
image={photo || "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"}
image={photo || Image}
/>
<CardContent style={{width: "100%"}}>
<TextInfoContent
classes={contentStyles}
heading={name}
body={description || loremIpsum()}
<Typography variant={"h5"}>{ name }</Typography>
<Info
headerless={true}
data={{}}
/>
<LinesEllipsis
className={`${styles.body} MuiTypography-root MuiTypography-body1`}
component={"p"}
maxLine={5}
text={text}
/>
<Divider/>
<div className={styles.buttonSeparator}>
<Button className={buttonStyles} onClick={()=>history.push("/protected/v/associations/" + slug)}>Read more</Button>
<Button className={buttonStyles}>Become Member</Button>
<Button variant={"contained"} color={"primary"} onClick={()=>history.push("/protected/v/associations/" + slug + "/info")}>Read more</Button>
{becomeMemberButton && <Button variant={"contained"} color={"primary"} onClick={onBecomeMemberClick}>Become Member</Button>}
</div>
</CardContent>
</Card>
......@@ -106,7 +117,9 @@ AssociationCard.propTypes = {
name: PropTypes.string.isRequired,
description: PropTypes.string,
slug: PropTypes.string,
photo: PropTypes.string
photo: PropTypes.string,
onBecomeMemberClick: PropTypes.func,
becomeMemberButton: PropTypes.bool
};
export default AssociationCard;
......@@ -5,8 +5,8 @@ import { Button, Card, CardBody, CardSubtitle, CardText,CardTitle } from "reacts
import Poll from "restful-react";
var SUNCard = (card) => {
const {title, subtitle, poll, text, link} = card;
const SUNCard = (props) => {
const {title, subtitle, poll, text, link} = props;
return (
<Card>
<CardBody>
......@@ -20,8 +20,8 @@ var SUNCard = (card) => {
data && <x-fragment>{ poll.render(data) }</x-fragment>
)
}
</Poll> }
</CardSubtitle> }
</Poll> }
</CardSubtitle> }
{ text && <CardText>{ text }</CardText> }
{ link && <Link to={link}><Button>View</Button></Link> }
</CardBody>
......
......@@ -22,7 +22,7 @@ const CardGrid = (props) => {
return r;
}, []);
};
console.log(props.card_grid);
let card_grid = props.chunk_size > 0 ? chunkArrayIntoListOfArrays(props.card_grid, props.chunk_size) : props.card_grid;
return (
......
......@@ -9,6 +9,7 @@ import Info from "App/Components/Info/Info";
import cx from "clsx";
import PropTypes from "prop-types";
import React from "react";
import Image from "img/default_photo.jpg"; // Import using relative path
const useStyles = makeStyles(theme => ({
......@@ -33,7 +34,7 @@ const useStyles = makeStyles(theme => ({
},
},
media: {
minWidth: 50,
minWidth: 100,
maxWidth: 200,
width: "88%",
marginLeft: 10,
......@@ -84,7 +85,7 @@ const ContactCard = (props) => {
<Card className={cx(styles.root, shadowStyles.root)}>
<CardMedia
className={styles.media}
image={photo || "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"}
image={photo || Image}
/>
<CardContent>
<Typography variant={"h5"}>{ duty }</Typography>
......
......@@ -10,6 +10,7 @@ import cx from "clsx";
import PropTypes from "prop-types";
import React from "react";
import {Link} from "react-router-dom";
import Image from "img/default_photo.jpg"; // Import using relative path
const useStyles = makeStyles(theme => ({
root: {
......@@ -109,7 +110,7 @@ GroupCard.propTypes = {
};
GroupCard.defaultProps = {
photo: "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)",
photo: `url(${Image})`,
path: undefined,
enrolled: false,
self_enrollable: false,
......
import Checkbox from "@material-ui/core/Checkbox";
import red from "@material-ui/core/colors/red";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import React from "react";
import { ValidatorComponent } from "react-material-ui-form-validator";
const red300 = red["500"];
const style = {
right: 0,
fontSize: "12px",
color: red300,
position: "absolute",
marginTop: "-25px",
color: red[500],
marginTop: "-15px",
};
class CheckboxValidator extends ValidatorComponent {
class CheckboxField extends ValidatorComponent {
render() {
const { errorMessages, validators, requiredError, value, ...rest } = this.props;
renderValidatorComponent() {
const { errorMessages, validators, validatorListener, requiredError, label, labelPlacement, ...rest } = this.props;
return (
<div>
<Checkbox
{...rest}
ref={(r) => { this.input = r; }}
<FormControlLabel
control={<Checkbox {...rest} ref={(r) => { this.input = r; }}/>}
label={label}
labelPlacement={labelPlacement}
/>
{ this.errorText() }
</div>
......@@ -44,4 +42,4 @@ class CheckboxValidator extends ValidatorComponent {
}
}
export default CheckboxValidator;
\ No newline at end of file
export default CheckboxField;
\ No newline at end of file
import makeStyles from "@material-ui/core/styles/makeStyles";
import useTheme from "@material-ui/core/styles/useTheme";
import PropTypes from "prop-types";
import React from "react";
const useStyles = makeStyles(theme=>({
icon: {
margin: theme.spacing(2, 0),
marginRight: theme.spacing(2),
},
}));
const IconHolder = (props) => {
const theme = useTheme();
const classes = useStyles(theme);
const { Icon, ...rest_props } = props;
return (
<Icon className={classes.icon} color={"action"} {...rest_props} />
);
};
IconHolder.propTypes = {
Icon: PropTypes.object.isRequired
};
export default IconHolder;
import { makeStyles, useTheme } from "@material-ui/core/styles";
import PropTypes from "prop-types";
import React from "react";
import TextField from "App/Components/Fields/TextField";
const useStyles = makeStyles(theme => ({
}));
const NumberField = (props) => {
const theme = useTheme();
const classes = useStyles(theme);
return (
<TextField
{...props}
InputLabelProps={{
shrink: true,
}}
type={"number"}
/>
);
};