turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #8 from turniere/ticket/TURNIERE-133 

Create own files for common components
This commit is contained in:
betanummeric 2019-04-09 10:47:07 +02:00 committed by GitHub
parent ebbff7b01a 5f1a8877df
commit 264629b24f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 436 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

282
js/CommonComponents.js
View File

@ -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 (
<div className="big-image">
<h1 className="display-1">{props.text}</h1>
</div>
);
}
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 (
<Navbar color="light" light expand="lg">
<NavbarBrand href="/">turnie.re</NavbarBrand>
<Betabadge/>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar className="mr-auto">
<Navlink target="/create" text="Turnier erstellen"/>
<Navlink target="/list" text="Öffentliche Turniere"/>
<Navlink target="/faq" text="FAQ"/>
</Nav>
<LoginLogoutButtons/>
</Collapse>
</Navbar>
);
}
}
function Navlink(props) {
return (
<NavItem active={true}>
<NavLink href={props.target}>{props.text}</NavLink>
</NavItem>
);
}
function Betabadge() {
return (<Badge color="danger" className="mr-2">BETA</Badge>);
}
class InvisibleLoginLogoutButtons extends React.Component {
render() {
const { isSignedIn, username } = this.props;
if(isSignedIn) {
return (
<ButtonGroup className="nav-item">
<Button outline color="success" href="/profile" className="navbar-btn my-2 my-sm-0 px-5">{ username }</Button>
<Button outline color="success" onClick={logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
</ButtonGroup>
);
} else {
return (
<ButtonGroup className="nav-item">
<Button outline color="success" href="/login" className="navbar-btn my-2 my-sm-0 px-5">Login</Button>
<Button outline color="success" href="/register" className="navbar-btn my-2 my-sm-0 px-5">Registrieren</Button>
</ButtonGroup>
);
}
}
}
const mapStateToLoginLogoutButtonProperties = (state) => {
const { isSignedIn, username } = state.userinfo;
return { isSignedIn, username };
};
const LoginLogoutButtons = connect(
mapStateToLoginLogoutButtonProperties
)(InvisibleLoginLogoutButtons);
export function Footer() {
return (
<footer className="footer mt-5 bg-dark text-light">
<div className="container py-3">
<div className="row">
<div className="col-md-6 text-center">
&copy; 2018 turnie.re &middot;
<a className="text-white" href="/privacy"> Datenschutzerklärung </a>
&middot;
<a className="text-white" href="/imprint"> Impressum</a>
</div>
<div className="col-md-6 text-center"><a href="#" className="text-white">zurück nach oben</a></div>
</div>
</div>
</footer>
);
}
/**
* 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 (
* <UserRestrictor>
* <Option condition={isSignedIn}>
* < The restricted content >
* </Option>
* <Option condition={true}>
* < Some default content; in this case some kind of login >
* </Option>
* </UserRestrictor>
* );
* }
*
* 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 (
<Container className="py-5">
<Card className="shadow">
<CardBody>
<h1 className="custom-font">Login</h1>
<Hint hint={props.hint}/>
<LoginForm/>
<div className="mt-3">
<a href="/register" className="mr-3">Account anlegen</a>
<a href="/register#account-requirement">Warum ist ein Account nötig?</a>
</div>
</CardBody>
</Card>
</Container>
);
}
class LoginErrorList extends React.Component {
render() {
const { error, errorMessages } = this.props;
if(error) {
return (
<ul>
{ errorMessages.map((message, index) =>
<li key={index}>
<style jsx>{`
li {
color:red;
}
`}</style>
{message}
</li>
) }
</ul>
);
} 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 (
<Form>
<FormGroup>
<Label for="username">E-Mail-Adresse</Label>
<Input type="email" name="username" value={this.state.email} onChange={ this.handleEmailInput.bind(this) } />
</FormGroup>
<FormGroup>
<Label for="password">Passwort</Label>
<Input type="password" name="password" value={this.state.password} onChange={ this.handlePasswordInput.bind(this) } />
</FormGroup>
<Button onClick={login.bind(this, this.state.email, this.state.password)} color="success" size="lg" className="w-100 shadow-sm">Anmelden</Button>
<VisibleLoginErrorList/>
</Form>
);
}
handlePasswordInput(input) {
this.setState({ password : input.target.value });
}
handleEmailInput(input) {
this.setState({ email : input.target.value });
}
}
function Hint(props) {
if(props.hint != null) {
return (
<h3>{ props.hint }</h3>
);
} else {
return null;
}
}

11
js/api.js
View File

@ -1,7 +1,12 @@
import { createStore, applyMiddleware, combineReducers } from 'redux';
import {
createStore,
applyMiddleware,
combineReducers
} from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk';
import { errorMessages } from './constants';
import thunkMiddleware from 'redux-thunk';
import { errorMessages } from './constants';
const axios = require('axios');

8
js/EditableStringList.js → js/components/EditableStringList.js
View File

@ -1,5 +1,11 @@
import React from 'react';
import { Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import {
Alert,
Button,
Input,
InputGroup,
InputGroupAddon
} from 'reactstrap';
export default class EditableStringList extends React.Component {
constructor(props) {

12
js/components/ErrorComponents.js
View File

@ -1,8 +1,12 @@
import Head from 'next/head';
import React from 'react';
import {Footer, TurniereNavigation} from '../CommonComponents';
import Head from 'next/head';
import React from 'react';
import { Container } from 'reactstrap';
import { TurniereNavigation } from './Navigation';
import { Footer } from './Footer';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Container} from 'reactstrap';
import '../../static/everypage.css';
import '../../static/css/error.css';

19
js/components/Footer.js Normal file
View File

@ -0,0 +1,19 @@
export function Footer() {
return (
<footer className="footer mt-5 bg-dark text-light">
<div className="container py-3">
<div className="row">
<div className="col-md-6 text-center">
&copy; 2018 turnie.re &middot;
<a className="text-white" href="/privacy"> Datenschutzerklärung </a>
&middot;
<a className="text-white" href="/imprint"> Impressum</a>
</div>
<div className="col-md-6 text-center"><a href="#" className="text-white">zurück nach oben</a></div>
</div>
</div>
</footer>
);
}

113
js/components/Login.js Normal file
View File

@ -0,0 +1,113 @@
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 (
<Container className="py-5">
<Card className="shadow">
<CardBody>
<h1 className="custom-font">Login</h1>
<Hint hint={props.hint}/>
<LoginForm/>
<div className="mt-3">
<a href="/register" className="mr-3">Account anlegen</a>
<a href="/register#account-requirement">Warum ist ein Account nötig?</a>
</div>
</CardBody>
</Card>
</Container>
);
}
class LoginErrorList extends React.Component {
render() {
const { error, errorMessages } = this.props;
if(error) {
return (
<ul>
{ errorMessages.map((message, index) =>
<li key={index}>
<style jsx>{`
li {
color:red;
}
`}</style>
{message}
</li>
) }
</ul>
);
} 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 (
<Form>
<FormGroup>
<Label for="username">E-Mail-Adresse</Label>
<Input type="email" name="username" value={this.state.email} onChange={ this.handleEmailInput.bind(this) } />
</FormGroup>
<FormGroup>
<Label for="password">Passwort</Label>
<Input type="password" name="password" value={this.state.password} onChange={ this.handlePasswordInput.bind(this) } />
</FormGroup>
<Button onClick={login.bind(this, this.state.email, this.state.password)} color="success" size="lg" className="w-100 shadow-sm">Anmelden</Button>
<VisibleLoginErrorList/>
</Form>
);
}
handlePasswordInput(input) {
this.setState({ password : input.target.value });
}
handleEmailInput(input) {
this.setState({ email : input.target.value });
}
}
function Hint(props) {
if(props.hint != null) {
return (
<h3>{ props.hint }</h3>
);
} else {
return null;
}
}

98
js/components/Navigation.js Normal file
View File

@ -0,0 +1,98 @@
import {
Badge,
Button,
ButtonGroup,
Collapse,
Nav,
Navbar,
NavbarBrand,
NavbarToggler,
NavItem,
NavLink
} from 'reactstrap';
import { connect } from 'react-redux';
import React from 'react';
import { 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 (
<Navbar color="light" light expand="lg">
<NavbarBrand href="/">turnie.re</NavbarBrand>
<Betabadge/>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar className="mr-auto">
<Navlink target="/create" text="Turnier erstellen"/>
<Navlink target="/list" text="Öffentliche Turniere"/>
<Navlink target="/faq" text="FAQ"/>
</Nav>
<LoginLogoutButtons/>
</Collapse>
</Navbar>
);
}
}
function Navlink(props) {
return (
<NavItem active={true}>
<NavLink href={props.target}>{props.text}</NavLink>
</NavItem>
);
}
function Betabadge() {
return (<Badge color="danger" className="mr-2">BETA</Badge>);
}
class InvisibleLoginLogoutButtons extends React.Component {
render() {
const { isSignedIn, username } = this.props;
if(isSignedIn) {
return (
<ButtonGroup className="nav-item">
<Button outline color="success" href="/profile" className="navbar-btn my-2 my-sm-0 px-5">{ username }</Button>
<Button outline color="success" onClick={logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
</ButtonGroup>
);
} else {
return (
<ButtonGroup className="nav-item">
<Button outline color="success" href="/login" className="navbar-btn my-2 my-sm-0 px-5">Login</Button>
<Button outline color="success" href="/register" className="navbar-btn my-2 my-sm-0 px-5">Registrieren</Button>
</ButtonGroup>
);
}
}
}
const mapStateToLoginLogoutButtonProperties = (state) => {
const { isSignedIn, username } = state.userinfo;
return { isSignedIn, username };
};
const LoginLogoutButtons = connect(
mapStateToLoginLogoutButtonProperties
)(InvisibleLoginLogoutButtons);

51
js/components/UserRestrictor.js Normal file
View File

@ -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 (
* <UserRestrictor>
* <Option condition={isSignedIn}>
* < The restricted content >
* </Option>
* <Option condition={true}>
* < Some default content; in this case some kind of login >
* </Option>
* </UserRestrictor>
* );
* }
*
* 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;
}

2
js/redux/reduxStoreBinder.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React from 'react';
import { initializeStore } from '../api';
const isServer = typeof window === 'undefined';

11
pages/_app.js
View File

@ -1,8 +1,9 @@
import App, {Container} from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import withReduxStore from '../js/redux/reduxStoreBinder';
import Notifications from 'react-notify-toast';
import App, { Container } from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import Notifications from 'react-notify-toast';
import withReduxStore from '../js/redux/reduxStoreBinder';
class TurniereApp extends App {

8
pages/_error.js
View File

@ -1,9 +1,7 @@
import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
import React from 'react';
import React from 'react';
import {
verifyCredentials
} from '../js/api';
import { ErrorPageComponent } from '../js/components/ErrorComponents';
import { verifyCredentials } from '../js/api';
export default class Error extends React.Component {
static getInitialProps({ res, err }) {

19
pages/create.js
View File

@ -1,8 +1,6 @@
import Head from 'next/head';
import '../static/everypage.css';
import { Footer, TurniereNavigation, UserRestrictor, Option, Login } from '../js/CommonComponents';
import React from 'react';
import { connect } from 'react-redux';
import Head from 'next/head';
import React from 'react';
import { connect } from 'react-redux';
import {
Button,
@ -17,11 +15,14 @@ import {
Label
} from 'reactstrap';
import {
verifyCredentials
} from '../js/api';
import { TurniereNavigation } from '../js/components/Navigation';
import { Footer } from '../js/components/Footer';
import { UserRestrictor, Option } from '../js/components/UserRestrictor';
import { Login } from '../js/components/Login';
import { verifyCredentials } from '../js/api';
import EditableStringList from '../js/components/EditableStringList';
import EditableStringList from '../js/EditableStringList';
import '../static/everypage.css';
class PrivateCreatePage extends React.Component {

20
pages/faq.js
View File

@ -1,13 +1,15 @@
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 '../static/everypage.css';
import Head from 'next/head';
import React from 'react';
import { Col, Container, Row } from 'reactstrap';
import {
verifyCredentials
} from '../js/api';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { Footer } from '../js/components/Footer';
import { verifyCredentials } from '../js/api';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
function Main() {
return (

19
pages/imprint.js
View File

@ -1,13 +1,14 @@
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 '../static/everypage.css';
import Head from 'next/head';
import React from 'react';
import { Container } from 'reactstrap';
import {
verifyCredentials
} from '../js/api';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { Footer } from '../js/components/Footer';
import { verifyCredentials } from '../js/api';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
function Main() {
return (

30
pages/index.js
View File

@ -1,21 +1,25 @@
import Head from 'next/head';
import React from 'react';
import { Alert, Button, Card, CardBody } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
import '../static/everypage.css';
import '../static/css/index.css';
import { connect } from 'react-redux';
import Head from 'next/head';
import React from 'react';
import { connect } from 'react-redux';
import {
Alert,
Button,
Card,
CardBody
} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { Footer } from '../js/components/Footer';
import {
verifyCredentials
} from '../js/api';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
import '../static/css/index.css';
function Main() {
return (
<div className="main">

13
pages/list.js
View File

@ -1,8 +1,13 @@
import Head from 'next/head';
import React from 'react';
import { Card, CardBody, Container } from 'reactstrap';
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';
import {
getRequest,
getState,

15
pages/login.js
View File

@ -1,11 +1,12 @@
import Head from 'next/head';
import '../static/everypage.css';
import { Footer, TurniereNavigation, Login } from '../js/CommonComponents';
import React from 'react';
import Head from 'next/head';
import React from 'react';
import {
verifyCredentials
} from '../js/api';
import { TurniereNavigation } from '../js/components/Navigation';
import { Footer } from '../js/components/Footer';
import { Login } from '../js/components/Login';
import { verifyCredentials } from '../js/api';
import '../static/everypage.css';
export default class LoginPage extends React.Component {

20
pages/privacy.js
View File

@ -1,13 +1,15 @@
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 '../static/everypage.css';
import Head from 'next/head';
import React from 'react';
import { Container } from 'reactstrap';
import {
verifyCredentials
} from '../js/api';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { Footer } from '../js/components/Footer';
import { verifyCredentials } from '../js/api';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
function Main() {
return (

30
pages/register.js
View File

@ -1,14 +1,24 @@
import Head from 'next/head';
import '../static/everypage.css';
import {Footer, TurniereNavigation} from '../js/CommonComponents';
import React from 'react';
import { Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, Label } from 'reactstrap';
import { register } from '../js/api';
import { connect } from 'react-redux';
import Head from 'next/head';
import React from 'react';
import { connect } from 'react-redux';
import {
verifyCredentials
} from '../js/api';
Button,
Card,
CardBody,
Container,
Form,
FormGroup,
FormText,
Input,
Label
} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation';
import { Footer } from '../js/components/Footer';
import { register } from '../js/api';
import { verifyCredentials } from '../js/api';
import '../static/everypage.css';
export default class RegisterPage extends React.Component {

23
pages/tournament-edit.js
View File

@ -1,13 +1,7 @@
import Head from 'next/head';
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
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 { ErrorPageComponent } from '../js/components/ErrorComponents.js';
import Head from 'next/head';
import React from 'react';
import { connect } from 'react-redux';
import { notify } from 'react-notify-toast';
import {
Container,
Button,
@ -16,11 +10,20 @@ import {
Table
} from 'reactstrap';
import { requestTournament } from '../js/api';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import { UserRestrictor, Option } from '../js/components/UserRestrictor';
import { Footer } from '../js/components/Footer';
import { Login } from '../js/components/Login';
import { ErrorPageComponent } from '../js/components/ErrorComponents';
import {
verifyCredentials,
updateTeamName
} from '../js/api';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
import '../static/css/index.css';

2
pages/tournament-fullscreen.js
View File

@ -1,4 +1,4 @@
import Head from 'next/head';
import Head from 'next/head';
import React from 'react';
import {

20
pages/tournament.js
View File

@ -1,5 +1,6 @@
import Head from 'next/head';
import React from 'react';
import Head from 'next/head';
import React from 'react';
import { connect } from 'react-redux';
import {
Button,
Card,
@ -18,19 +19,22 @@ import {
Row,
Table
} from 'reactstrap';
import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js';
import '../static/everypage.css';
import '../static/css/tournament.css';
import { connect } from 'react-redux';
import { ErrorPageComponent } from '../js/components/ErrorComponents';
import { Footer } from '../js/components/Footer';
import { TurniereNavigation } from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage';
import {
getRequest,
getState,
verifyCredentials
} from '../js/api';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
import '../static/css/tournament.css';
class TournamentPage extends React.Component {
render() {