Commit feab61f4 authored by TJHeeringa's avatar TJHeeringa

Applied lint

parent c97c9f7c
......@@ -6,8 +6,12 @@
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
"plugin:import/errors",
"plugin:import/warnings",
"plugin:react/recommended",
"plugin:react-hooks/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
......@@ -16,28 +20,55 @@
"sourceType": "module"
},
"plugins": [
"react"
"react",
"react-hooks",
"simple-import-sort",
"import"
],
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
},
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
],
"indent": ["error", 4, {"ignoredNodes": ["ConditionalExpression"] }],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"],
"no-unused-vars": "warn",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/default-props-match-prop-types": [1, { "allowRequiredDefaults": false }],
"react/no-children-prop": 2,
"react/prop-types": 1,
"react/no-this-in-sfc": 2,
"react/no-unused-state": 1,
"react/no-unused-prop-types": 1,
"react/jsx-closing-bracket-location": [1, "line-aligned"],
"react/jsx-closing-tag-location": 1,
"react/jsx-curly-brace-presence": [1, { "props": "always", "children": "never" }],
"react/jsx-curly-spacing": [1, {"when": "never", "children": {"when": "always"}}],
"react/jsx-no-useless-fragment": 1,
"react/jsx-no-undef": [1, { "allowGlobals": true }],
"react/jsx-key": [1, {"checkFragmentShorthand": true} ],
"react/jsx-no-duplicate-props": [1, { "ignoreCase": false }],
"react/jsx-pascal-case": 1,
"import/no-unresolved": 2
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/jsx-no-script-url": 2,
"react/react-in-jsx-scope": 1,
"import/no-unresolved": [2, { "ignore": ["App/$"] }],
"simple-import-sort/sort": "error",
"sort-imports": "off",
"import/first": "error",
"import/newline-after-import": "error",
"import/no-duplicates": "error",
"import/no-unused-modules": [1, {"unusedExports": true}],
"react/function-component-definition": [1, {
"namedComponents": "arrow-function",
"unnamedComponents": "arrow-function"
}]
}
}
\ No newline at end of file
This diff is collapsed.
import React, { Component } from 'react'
import { Routing } from './Routing/Routing'
import "@icon/open-iconic/open-iconic.css";
import { library } from "@fortawesome/fontawesome-svg-core";
import {faBars,faCheck,faChevronLeft,faHome,faIgloo,faPlus,faSignOutAlt,faTimes,faUser} from "@fortawesome/free-solid-svg-icons";
import { createMuiTheme, MuiThemeProvider,ThemeProvider } from "@material-ui/core/styles";
import React, { Component } from "react";
import PublicPageLayout from "./Components/PageLayout/PublicPageLayout";
import { AuthenticationContext } from "./Contexts/Authentication";
import { PageLayoutContext } from "./Contexts/PageLayout";
import { library } from '@fortawesome/fontawesome-svg-core'
import {faBars,faCheck,faHome,faIgloo,faPlus,faSignOutAlt,faTimes,faUser,faChevronLeft} from '@fortawesome/free-solid-svg-icons'
import { createMuiTheme, ThemeProvider, MuiThemeProvider } from '@material-ui/core/styles';
import '@icon/open-iconic/open-iconic.css'
import PublicPageLayout from "./Components/PageLayout/PublicPageLayout";
require('bootstrap');
import { Routing } from "./Routing/Routing";
require("bootstrap");
library.add(faSignOutAlt, faUser, faIgloo, faBars, faCheck, faTimes, faHome, faPlus, faChevronLeft);
const theme_dark = createMuiTheme({
palette: {
type: "dark",
}
palette: {
type: "dark",
}
});
const theme_light = createMuiTheme();
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
}
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() {
const PageLayout = this.state.pagelayout.component;
return (
<div className={"App"}>
<AuthenticationContext.Provider value={this.state.authentication}>
<MuiThemeProvider theme={theme_light}>
<PageLayoutContext.Provider value={this.state.pagelayout}>
<Routing/>
</PageLayoutContext.Provider>
</MuiThemeProvider>
</AuthenticationContext.Provider>
</div>
);
}
}
render() {
const PageLayout = this.state.pagelayout.component;
return (
<div className="App">
<AuthenticationContext.Provider value={this.state.authentication}>
<MuiThemeProvider theme={theme_light}>
<PageLayoutContext.Provider value={this.state.pagelayout}>
<Routing/>
</PageLayoutContext.Provider>
</MuiThemeProvider>
</AuthenticationContext.Provider>
</div>
);
}
}
export default App;
\ No newline at end of file
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import React from "react";
import ReactDOM from "react-dom";
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
import App from "./App";
it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
import { Component } from 'react'
import React from 'react'
import {Button,Container,Row,Col} from "reactstrap";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import React, { Component } from "react";
import {Button,Col,Container,Row} from "reactstrap";
export class BackButton extends Component {
render() {
const {history, container} = this.props;
return (
<x-fragment>
{container === true ?
<>
{ container === true ?
<Container>
<Col>
<Row>
<Button onClick={history.goBack} color="link" className="backbutton">
<FontAwesomeIcon className="fa-xs" icon="chevron-left"/>
<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"/>
<Button onClick={history.goBack} color={"link"} className={"backbutton"}>
<FontAwesomeIcon className={"fa-xs"} icon={"chevron-left"}/>
&nbsp;Back
</Button>
}
</x-fragment>
)
</>
);
}
}
import React from 'react';
import cx from 'clsx';
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 Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
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 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 Divider from '@material-ui/core/Divider';
import { loremIpsum } from 'react-lorem-ipsum';
import React from "react";
import { loremIpsum } from "react-lorem-ipsum";
import { useHistory } from "react-router-dom";
const useStyles = makeStyles(theme => ({
root: {
margin: 'auto',
margin: "auto",
borderRadius: theme.spacing(2), // 16px
transition: '0.3s',
boxShadow: '0px 14px 80px rgba(34, 35, 58, 0.2)',
position: 'relative',
transition: "0.3s",
boxShadow: "0px 14px 80px rgba(34, 35, 58, 0.2)",
position: "relative",
minWidth: 304,
maxWidth: 500,
marginLeft: 'auto',
overflow: 'initial',
background: '#ffffff',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginLeft: "auto",
overflow: "initial",
background: "#ffffff",
display: "flex",
flexDirection: "column",
alignItems: "center",
paddingBottom: theme.spacing(2),
},
media: {
width: '88%',
width: "88%",
marginLeft: 10,
marginRight: 10,
height: 0,
paddingBottom: '48%',
paddingBottom: "48%",
borderRadius: theme.spacing(2),
backgroundColor: '#fff',
position: 'relative',
transform: 'translateY(8px)',
backgroundColor: "#fff",
position: "relative",
transform: "translateY(8px)",
paddingLeft: 10,
paddingRight: 10,
'&:after': {
content: '" "',
position: 'absolute',
"&:after": {
content: "\" \"",
position: "absolute",
top: 0,
left: 0,
width: '100%',
height: '100%',
width: "100%",
height: "100%",
borderRadius: theme.spacing(2), // 16
opacity: 0.5,
},
},
buttonSeparator : {
display: 'flex',
justifyContent: 'space-between',
display: "flex",
justifyContent: "space-between",
marginTop: theme.spacing(1),
},
content: {
......@@ -64,7 +64,7 @@ const useStyles = makeStyles(theme => ({
},
cta: {
marginTop: 24,
textTransform: 'initial',
textTransform: "initial",
},
}));
......@@ -84,9 +84,9 @@ const AssociationCard = (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 || "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"}
/>
<CardContent style={{width: '100%'}}>
<CardContent style={{width: "100%"}}>
<TextInfoContent
classes={contentStyles}
heading={name}
......@@ -94,7 +94,7 @@ const AssociationCard = (props) => {
/>
<Divider/>
<div className={styles.buttonSeparator}>
<Button className={buttonStyles} onClick={()=>history.push('/protected/v/associations/' + slug)}>Read more</Button>
<Button className={buttonStyles} onClick={()=>history.push("/protected/v/associations/" + slug)}>Read more</Button>
<Button className={buttonStyles}>Become Member</Button>
</div>
</CardContent>
......
import PropTypes from "prop-types";
import React, { Component } from "react";
import { Button, Card, CardBody, CardSubtitle, CardTitle, CardText } from "reactstrap";
import { Link } from "react-router-dom";
import Poll from 'restful-react'
import PropTypes from 'prop-types';
import { Button, Card, CardBody, CardSubtitle, CardText,CardTitle } from "reactstrap";
import Poll from "restful-react";
function SUNCard(card){
var SUNCard = (card) => {
const {title, subtitle, poll, text, link} = card;
return (
<Card>
<CardBody>
{<CardTitle><h5>{title}</h5></CardTitle>}
{subtitle && <CardSubtitle>{subtitle}
{poll && <Poll path={poll.url} >
{(data, response) =>
<CardTitle><h5>{ title }</h5></CardTitle>
{ subtitle && <CardSubtitle>{ subtitle }
{ poll && <Poll path={poll.url} >
{ (data, response) =>
response.loading ? (
<x-fragment>{poll.loading}</x-fragment>
<x-fragment>{ poll.loading }</x-fragment>
) : (
data && <x-fragment>{poll.render(data)}</x-fragment>
data && <x-fragment>{ poll.render(data) }</x-fragment>
)
}
</Poll>}
</CardSubtitle>}
{text && <CardText>{text}</CardText>}
{link && <Link to={link}><Button>View</Button></Link>}
</Poll> }
</CardSubtitle> }
{ text && <CardText>{ text }</CardText> }
{ link && <Link to={link}><Button>View</Button></Link> }
</CardBody>
</Card>
)
}
);
};
SUNCard.propTypes = {
title: PropTypes.string.isRequired,
......
import PropTypes from "prop-types";
import React from "react";
import { Col, Row } from "reactstrap";
import PropTypes from "prop-types";
function CardGrid(props){
var CardGrid = (props) => {
const chunkArrayIntoListOfArrays = (ar, num) => {
return ar.reduce(function(r, v, i) {
if (i % num === 0) r.push(ar.slice(i, i + num));
......@@ -14,23 +14,23 @@ function CardGrid(props){
let card_grid = props.chunk_size > 0 ? chunkArrayIntoListOfArrays(props.card_grid, props.chunk_size) : props.card_grid;
return (
<Col className="mb-5">
{card_grid.map((card_rows, r)=>{
<Col className={"mb-5"}>
{ card_grid.map((card_rows, r)=>{
return(
<Row key={'card_row '+r} className="card-wrapper mb-2">
{card_rows.map((card, c)=>{
<Row key={"card_row "+r} className={"card-wrapper mb-2"}>
{ card_rows.map((card, c)=>{
return(
<Col key={'card '+r+' '+c}>
<Col key={"card "+r+" "+c}>
<props.component {...card}/>
</Col>
)
})}
);
}) }
</Row>
)
})}
);
}) }
</Col>
)
}
);
};
CardGrid.propTypes = {
card_grid: PropTypes.array.isRequired,
......
import React from 'react';
import cx from 'clsx';
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 TextInfoContent from '@mui-treasury/components/content/textInfo';
import { useBlogTextInfoContentStyles } from '@mui-treasury/styles/textInfoContent/blog';
import { useOverShadowStyles } from '@mui-treasury/styles/shadow/over';
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import { makeStyles, useTheme } from "@material-ui/core/styles";
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 Info from "App/Components/Info/Info";
import cx from "clsx";
import PropTypes from "prop-types";
import { Info } from "App/Components/Info/Info";
import React from "react";
const useStyles = makeStyles(theme => ({
root: {
margin: 'auto',
margin: "auto",
borderRadius: theme.spacing(2), // 16px
transition: '0.3s',
boxShadow: '0px 14px 80px rgba(34, 35, 58, 0.2)',
position: 'relative',
transition: "0.3s",
boxShadow: "0px 14px 80px rgba(34, 35, 58, 0.2)",
position: "relative",
minWidth: 304,
maxWidth: 500,
marginLeft: 'auto',
overflow: 'initial',
background: '#ffffff',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginLeft: "auto",
overflow: "initial",
background: "#ffffff",
display: "flex",
flexDirection: "column",
alignItems: "center",
paddingBottom: theme.spacing(2),
[theme.breakpoints.up('md')]: {
flexDirection: 'row',