From 7838237f4befbf2ea7b343647a8b634d3c2ff722 Mon Sep 17 00:00:00 2001 From: JP1998 Date: Tue, 9 Apr 2019 09:22:12 +0200 Subject: [PATCH] Export all the common components into their own files --- js/CommonComponents.js | 282 ------------------------------- js/components/ErrorComponents.js | 3 +- js/components/Footer.js | 19 +++ js/components/Login.js | 112 ++++++++++++ js/components/Navigation.js | 97 +++++++++++ js/components/UserRestrictor.js | 51 ++++++ pages/create.js | 5 +- pages/faq.js | 4 +- pages/imprint.js | 4 +- pages/index.js | 4 +- pages/list.js | 3 +- pages/login.js | 4 +- pages/privacy.js | 4 +- pages/register.js | 3 +- pages/tournament-edit.js | 6 +- pages/tournament.js | 4 +- 16 files changed, 312 insertions(+), 293 deletions(-) delete mode 100644 js/CommonComponents.js create mode 100644 js/components/Footer.js create mode 100644 js/components/Login.js create mode 100644 js/components/Navigation.js create mode 100644 js/components/UserRestrictor.js diff --git a/js/CommonComponents.js b/js/CommonComponents.js deleted file mode 100644 index b32d412..0000000 --- a/js/CommonComponents.js +++ /dev/null @@ -1,282 +0,0 @@ -import { - Badge, - Button, - ButtonGroup, - Card, - CardBody, - Container, - Collapse, - Form, - FormGroup, - Nav, - Navbar, - NavbarBrand, - NavbarToggler, - NavItem, - NavLink, - Input, - Label -} from 'reactstrap'; - -import { connect } from 'react-redux'; - -import React from 'react'; - -import { login, logout } from './api'; - -export function BigImage(props) { - return ( -
-

{props.text}

-
- ); -} - -export class TurniereNavigation extends React.Component { - - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - - this.state = { - collapsed: true - }; - } - - toggle() { - this.setState({ - collapsed: !this.state.collapsed - }); - } - - render() { - return ( - - turnie.re - - - - - - - - ); - } -} - -function Navlink(props) { - return ( - - {props.text} - - ); -} - -function Betabadge() { - return (BETA); -} - -class InvisibleLoginLogoutButtons extends React.Component { - - render() { - const { isSignedIn, username } = this.props; - - if(isSignedIn) { - return ( - - - - - ); - } else { - return ( - - - - - ); - } - } -} - -const mapStateToLoginLogoutButtonProperties = (state) => { - const { isSignedIn, username } = state.userinfo; - return { isSignedIn, username }; -}; - -const LoginLogoutButtons = connect( - mapStateToLoginLogoutButtonProperties -)(InvisibleLoginLogoutButtons); - -export function Footer() { - return ( - - ); -} - -/** - * This component works just like a switch statement, although the conditions of the first items - * are checked first, and the first component with a condition that is true will be shown. - * - * For single conditions and options any kind of component can be taken, while the Option-component - * is dedicated for this job. The only important thing is that this component has to have a condition property. - * - * You should also give a default option with a condition that always evaluates to true. - * - * A quick example would be some content that is only to be shown when the user is logged in: - * - * function SomeRestrictedContent(props) { - * const { isSignedIn } = props; - * - * return ( - * - * - * - * - * ); - * } - * - * In the example you'll have to note that the default option is at the bottom of all the options - * since it would always be taken otherwise (the options' conditions are checked from top to bottom) - */ -export class UserRestrictor extends React.Component { - - render() { - const { children } = this.props; - - for(var i in children) { - var c = children[i]; - - if(c.props.condition) { - return c; - } - } - - return null; - } -} - -export function Option(props) { - return props.children; -} - -export function Login(props) { - return ( - - - -

Login

- - - - - - - ); -} - -class LoginErrorList extends React.Component { - render() { - const { error, errorMessages } = this.props; - if(error) { - return ( - - ); - } else { - return null; - } - } -} - -const mapStateToErrorMessages = (state) => { - const { errorMessages, error } = state.userinfo; - return { errorMessages, error }; -}; - -const VisibleLoginErrorList = connect( - mapStateToErrorMessages -)(LoginErrorList); - - -class LoginForm extends React.Component { - - constructor(props) { - super(props); - - this.state = { - email : '', - password : '' - }; - } - - render() { - return ( -
- - - - - - - - - - - - ); - } - - handlePasswordInput(input) { - this.setState({ password : input.target.value }); - } - - handleEmailInput(input) { - this.setState({ email : input.target.value }); - } -} - -function Hint(props) { - if(props.hint != null) { - return ( -

{ props.hint }

- ); - } else { - return null; - } -} diff --git a/js/components/ErrorComponents.js b/js/components/ErrorComponents.js index 2e84ee9..8515ec2 100644 --- a/js/components/ErrorComponents.js +++ b/js/components/ErrorComponents.js @@ -1,6 +1,7 @@ import Head from 'next/head'; import React from 'react'; -import {Footer, TurniereNavigation} from '../CommonComponents'; +import { TurniereNavigation } from './Navigation'; +import { Footer } from './Footer' import 'bootstrap/dist/css/bootstrap.min.css'; import {Container} from 'reactstrap'; import '../../static/everypage.css'; diff --git a/js/components/Footer.js b/js/components/Footer.js new file mode 100644 index 0000000..9d39ad7 --- /dev/null +++ b/js/components/Footer.js @@ -0,0 +1,19 @@ + + +export function Footer() { + return ( + + ); +} diff --git a/js/components/Login.js b/js/components/Login.js new file mode 100644 index 0000000..13861fa --- /dev/null +++ b/js/components/Login.js @@ -0,0 +1,112 @@ +import { + Container, + Card, + CardBody, + Form, + FormGroup, + Label, + Input, + Button +} from 'reactstrap'; +import React from 'react'; +import { connect } from 'react-redux'; +import { login } from '../api'; + +export function Login(props) { + return ( + + + +

Login

+ + + + + + + ); +} + +class LoginErrorList extends React.Component { + render() { + const { error, errorMessages } = this.props; + if(error) { + return ( +
    + { errorMessages.map((message, index) => +
  • + + {message} +
    • + + ) } +
+ ); + } else { + return null; + } + } +} + +const mapStateToErrorMessages = (state) => { + const { errorMessages, error } = state.userinfo; + return { errorMessages, error }; +}; + +const VisibleLoginErrorList = connect( + mapStateToErrorMessages +)(LoginErrorList); + +class LoginForm extends React.Component { + + constructor(props) { + super(props); + + this.state = { + email : '', + password : '' + }; + } + + render() { + return ( +
+ + + + + + + + + + + + ); + } + + handlePasswordInput(input) { + this.setState({ password : input.target.value }); + } + + handleEmailInput(input) { + this.setState({ email : input.target.value }); + } +} + +function Hint(props) { + if(props.hint != null) { + return ( +

{ props.hint }

+ ); + } else { + return null; + } +} diff --git a/js/components/Navigation.js b/js/components/Navigation.js new file mode 100644 index 0000000..69a5e11 --- /dev/null +++ b/js/components/Navigation.js @@ -0,0 +1,97 @@ +import { + Badge, + Button, + ButtonGroup, + Collapse, + Nav, + Navbar, + NavbarBrand, + NavbarToggler, + NavItem, + NavLink +} from 'reactstrap'; +import { connect } from 'react-redux'; +import React from 'react'; +import { login, logout } from '../api'; + +export class TurniereNavigation extends React.Component { + + constructor(props) { + super(props); + + this.toggle = this.toggle.bind(this); + + this.state = { + collapsed: true + }; + } + + toggle() { + this.setState({ + collapsed: !this.state.collapsed + }); + } + + render() { + return ( + + turnie.re + + + + + + + + ); + } +} + +function Navlink(props) { + return ( + + {props.text} + + ); +} + +function Betabadge() { + return (BETA); +} + +class InvisibleLoginLogoutButtons extends React.Component { + + render() { + const { isSignedIn, username } = this.props; + + if(isSignedIn) { + return ( + + + + + ); + } else { + return ( + + + + + ); + } + } +} + +const mapStateToLoginLogoutButtonProperties = (state) => { + const { isSignedIn, username } = state.userinfo; + return { isSignedIn, username }; +}; + +const LoginLogoutButtons = connect( + mapStateToLoginLogoutButtonProperties +)(InvisibleLoginLogoutButtons); + diff --git a/js/components/UserRestrictor.js b/js/components/UserRestrictor.js new file mode 100644 index 0000000..84daeb7 --- /dev/null +++ b/js/components/UserRestrictor.js @@ -0,0 +1,51 @@ +import React from 'react'; + +/** + * This component works just like a switch statement, although the conditions of the first items + * are checked first, and the first component with a condition that is true will be shown. + * + * For single conditions and options any kind of component can be taken, while the Option-component + * is dedicated for this job. The only important thing is that this component has to have a condition property. + * + * You should also give a default option with a condition that always evaluates to true. + * + * A quick example would be some content that is only to be shown when the user is logged in: + * + * function SomeRestrictedContent(props) { + * const { isSignedIn } = props; + * + * return ( + * + * + * + * + * ); + * } + * + * In the example you'll have to note that the default option is at the bottom of all the options + * since it would always be taken otherwise (the options' conditions are checked from top to bottom) + */ +export class UserRestrictor extends React.Component { + + render() { + const { children } = this.props; + + for(var i in children) { + var c = children[i]; + + if(c.props.condition) { + return c; + } + } + + return null; + } +} + +export function Option(props) { + return props.children; +} diff --git a/pages/create.js b/pages/create.js index 3a25a0b..6fb0992 100644 --- a/pages/create.js +++ b/pages/create.js @@ -1,6 +1,9 @@ import Head from 'next/head'; import '../static/everypage.css'; -import { Footer, TurniereNavigation, UserRestrictor, Option, Login } from '../js/CommonComponents'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { Footer } from '../js/components/Footer.js'; +import { UserRestrictor, Option } from '../js/components/UserRestrictor'; +import { Login } from '../js/components/Login.js'; import React from 'react'; import { connect } from 'react-redux'; diff --git a/pages/faq.js b/pages/faq.js index d747e7d..b00056b 100644 --- a/pages/faq.js +++ b/pages/faq.js @@ -2,7 +2,9 @@ import Head from 'next/head'; import React from 'react'; import {Col, Container, Row} from 'reactstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; -import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { BigImage } from '../js/components/BigImage'; +import { Footer } from '../js/components/Footer.js'; import '../static/everypage.css'; import { diff --git a/pages/imprint.js b/pages/imprint.js index 34fb942..c0e7628 100644 --- a/pages/imprint.js +++ b/pages/imprint.js @@ -2,7 +2,9 @@ import Head from 'next/head'; import React from 'react'; import {Container} from 'reactstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; -import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { BigImage } from '../js/components/BigImage'; +import { Footer } from '../js/components/Footer.js'; import '../static/everypage.css'; import { diff --git a/pages/index.js b/pages/index.js index b49f80d..3bcbbd1 100644 --- a/pages/index.js +++ b/pages/index.js @@ -5,7 +5,9 @@ import { Alert, Button, Card, CardBody } from 'reactstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; -import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { BigImage } from '../js/components/BigImage'; +import { Footer } from '../js/components/Footer.js'; import '../static/everypage.css'; import '../static/css/index.css'; diff --git a/pages/list.js b/pages/list.js index 200e412..9a3c015 100644 --- a/pages/list.js +++ b/pages/list.js @@ -2,7 +2,8 @@ import Head from 'next/head'; import React from 'react'; import { Card, CardBody, Container } from 'reactstrap'; -import { Footer, TurniereNavigation } from '../js/CommonComponents'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { Footer } from '../js/components/Footer.js'; import { getRequest, getState, diff --git a/pages/login.js b/pages/login.js index aa43fa5..6edb1dd 100644 --- a/pages/login.js +++ b/pages/login.js @@ -1,6 +1,8 @@ import Head from 'next/head'; import '../static/everypage.css'; -import { Footer, TurniereNavigation, Login } from '../js/CommonComponents'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { Footer } from '../js/components/Footer.js'; +import { Login } from '../js/components/Login.js'; import React from 'react'; import { diff --git a/pages/privacy.js b/pages/privacy.js index e4263eb..a5c4250 100644 --- a/pages/privacy.js +++ b/pages/privacy.js @@ -2,7 +2,9 @@ import Head from 'next/head'; import React from 'react'; import {Container} from 'reactstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; -import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { BigImage } from '../js/components/BigImage'; +import { Footer } from '../js/components/Footer.js'; import '../static/everypage.css'; import { diff --git a/pages/register.js b/pages/register.js index 096d6c1..a5ce015 100644 --- a/pages/register.js +++ b/pages/register.js @@ -1,6 +1,7 @@ import Head from 'next/head'; import '../static/everypage.css'; -import {Footer, TurniereNavigation} from '../js/CommonComponents'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { Footer } from '../js/components/Footer.js'; import React from 'react'; import { Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, Label } from 'reactstrap'; import { register } from '../js/api'; diff --git a/pages/tournament-edit.js b/pages/tournament-edit.js index 1d147c1..2614b19 100644 --- a/pages/tournament-edit.js +++ b/pages/tournament-edit.js @@ -5,7 +5,11 @@ import { connect } from 'react-redux'; import { notify } from 'react-notify-toast'; import { requestTournament } from '../js/api'; -import { BigImage, Footer, TurniereNavigation, Login, UserRestrictor, Option } from '../js/CommonComponents.js'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { BigImage } from '../js/components/BigImage'; +import { UserRestrictor, Option } from '../js/components/UserRestrictor.js'; +import { Footer } from '../js/components/Footer.js'; +import { Login } from '../js/components/Login.js'; import { ErrorPageComponent } from '../js/components/ErrorComponents.js'; import { diff --git a/pages/tournament.js b/pages/tournament.js index 779a0ba..d753724 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -19,8 +19,10 @@ import { Table } from 'reactstrap'; import { ErrorPageComponent } from '../js/components/ErrorComponents.js'; +import { Footer } from '../js/components/Footer.js'; import 'bootstrap/dist/css/bootstrap.min.css'; -import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js'; +import { TurniereNavigation } from '../js/components/Navigation'; +import { BigImage } from '../js/components/BigImage'; import '../static/everypage.css'; import '../static/css/tournament.css'; import { connect } from 'react-redux';