From 110f862bc3771c75d79b6572983b58737961700b Mon Sep 17 00:00:00 2001 From: JP1998 Date: Mon, 8 Apr 2019 10:20:31 +0200 Subject: [PATCH] Change the SignedInEnforcer to a more flexible and versatile UserRestrictor --- js/CommonComponents.js | 65 ++++++++++++++++++++++++++---------------- pages/create.js | 55 ++++++++++++++++++++++++++--------- 2 files changed, 82 insertions(+), 38 deletions(-) diff --git a/js/CommonComponents.js b/js/CommonComponents.js index 6bd133f..3e55f9f 100644 --- a/js/CommonComponents.js +++ b/js/CommonComponents.js @@ -133,39 +133,56 @@ export function Footer() { ); } -class PrivateSignedInEnforcer extends React.Component { +/** + * 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 { isSignedIn, children } = this.props; + const { children } = this.props; - if(isSignedIn) { - return children; - } else { - return ( -
- - Anmeldung - - -
- -
-
-
- ); + for(var i in children) { + var c = children[i]; + + if(c.props.condition) { + return c; + } } + + return null; } } -const mapStateToSignedInEnforcerProperties = (state) => { - const { isSignedIn } = state.userinfo; - return { isSignedIn }; +export function Option(props) { + return props.children; } -export const SignedInEnforcer = connect( - mapStateToSignedInEnforcerProperties -)(PrivateSignedInEnforcer); - export function Login(props) { return ( diff --git a/pages/create.js b/pages/create.js index 79e5c33..fed72a3 100644 --- a/pages/create.js +++ b/pages/create.js @@ -1,7 +1,8 @@ import Head from 'next/head'; import '../static/everypage.css'; -import { Footer, TurniereNavigation, SignedInEnforcer } from '../js/CommonComponents'; +import { Footer, TurniereNavigation, UserRestrictor, Option, Login } from '../js/CommonComponents'; import React from 'react'; +import { connect } from 'react-redux'; import { Button, @@ -23,30 +24,56 @@ import { import EditableStringList from '../js/EditableStringList'; -export default class CreatePage extends React.Component { +class PrivateCreatePage extends React.Component { componentDidMount() { verifyCredentials(); } render() { + const { isSignedIn } = this.props; + return ( - -
- - Turnier erstellen: turnie.re - - -
- + +
- + + + ); } -} +} +function mapStateToCreatePageProperties(state) { + const { isSignedIn } = state.userinfo; + return { isSignedIn }; +} + +const CreatePage = connect( + mapStateToCreatePageProperties +)(PrivateCreatePage); + +export default CreatePage; function CreateTournamentCard() { return (