Fix issue with order of mounting of components

Since the credentials were checked in the componentDidMount of the App
but the tournamen was loaded in the componentDidMount of the EditTournament component,
which was done first. Thus the auth headers were cleared, and the user was logged out.
This commit is contained in:
JP1998 2018-12-12 20:47:09 +01:00
parent ec0a75e5df
commit cbaa1b8270
13 changed files with 208 additions and 83 deletions

View File

@ -2,18 +2,15 @@ import App, {Container} from 'next/app';
import React from 'react'; import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import withReduxStore from '../js/redux/reduxStoreBinder'; import withReduxStore from '../js/redux/reduxStoreBinder';
import { verifyCredentials } from '../js/api'; import Notifications from 'react-notify-toast';
class TurniereApp extends App { class TurniereApp extends App {
componentDidMount() {
verifyCredentials();
}
render () { render () {
const {Component, pageProps, reduxStore} = this.props; const {Component, pageProps, reduxStore} = this.props;
return ( return (
<Container> <Container>
<Notifications />
<Provider store={reduxStore}> <Provider store={reduxStore}>
<Component {...pageProps} /> <Component {...pageProps} />
</Provider> </Provider>

View File

@ -1,11 +1,19 @@
import { ErrorPageComponent } from '../js/components/ErrorComponents.js'; import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
import {
verifyCredentials
} from '../js/api';
export default class Error extends React.Component { export default class Error extends React.Component {
static getInitialProps({ res, err }) { static getInitialProps({ res, err }) {
const statusCode = res ? res.statusCode : err ? err.statusCode : 400; const statusCode = res ? res.statusCode : err ? err.statusCode : 400;
return { statusCode }; return { statusCode };
} }
componentDidMount() {
verifyCredentials();
}
render() { render() {
return ( return (
<ErrorPageComponent statusCode={this.props.statusCode}/> <ErrorPageComponent statusCode={this.props.statusCode}/>

View File

@ -16,9 +16,20 @@ import {
Label Label
} from 'reactstrap'; } from 'reactstrap';
import {
verifyCredentials
} from '../js/api';
import EditableStringList from '../js/EditableStringList'; import EditableStringList from '../js/EditableStringList';
export default () => ( export default class CreatePage extends React.Component {
componentDidMount() {
verifyCredentials();
}
render() {
return (
<div className="main generic-fullpage-bg"> <div className="main generic-fullpage-bg">
<Head> <Head>
<title>Turnier erstellen: turnie.re</title> <title>Turnier erstellen: turnie.re</title>
@ -29,7 +40,10 @@ export default () => (
</div> </div>
<Footer/> <Footer/>
</div> </div>
); );
}
}
function CreateTournamentCard() { function CreateTournamentCard() {
return ( return (

View File

@ -5,6 +5,10 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js'; import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
import '../static/everypage.css'; import '../static/everypage.css';
import {
verifyCredentials
} from '../js/api';
function Main() { function Main() {
return ( return (
<div className="main"> <div className="main">
@ -216,7 +220,14 @@ function TournamentFaq() {
); );
} }
export default () => ( export default class FaqPage extends React.Component {
componentDidMount() {
verifyCredentials();
}
render() {
return (
<div> <div>
<Head> <Head>
<title>FAQ: turnie.re</title> <title>FAQ: turnie.re</title>
@ -226,4 +237,6 @@ export default () => (
<Main/> <Main/>
<Footer/> <Footer/>
</div> </div>
); );
}
}

View File

@ -5,6 +5,10 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js'; import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js';
import '../static/everypage.css'; import '../static/everypage.css';
import {
verifyCredentials
} from '../js/api';
function Main() { function Main() {
return ( return (
<div className="main running-text"> <div className="main running-text">
@ -69,7 +73,14 @@ function ImprintText(){
} }
export default () => ( export default class ImprintPage extends React.Component {
componentDidMount() {
verifyCredentials();
}
render() {
return (
<div> <div>
<Head> <Head>
<title>Impressum: turnie.re</title> <title>Impressum: turnie.re</title>
@ -79,4 +90,6 @@ export default () => (
<Main/> <Main/>
<Footer/> <Footer/>
</div> </div>
); );
}
}

View File

@ -12,6 +12,10 @@ import '../static/css/index.css';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import {
verifyCredentials
} from '../js/api';
function Main() { function Main() {
return ( return (
<div className="main"> <div className="main">
@ -165,6 +169,11 @@ function PromotedLinkCreateTournament() {
class Index extends React.Component { class Index extends React.Component {
componentDidMount() {
verifyCredentials();
}
render () { render () {
return ( return (
<div> <div>

View File

@ -1,10 +1,24 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react';
export default () => ( import {
verifyCredentials
} from '../js/api';
export default class ListPage extends React.Component {
componentDidMount() {
verifyCredentials();
}
render() {
return (
<div> <div>
<Head> <Head>
<title>Turnie.re - Turnierliste</title> <title>Turnie.re - Turnierliste</title>
</Head> </Head>
<p>Turnierliste</p> <p>Turnierliste</p>
</div> </div>
); );
}
}

View File

@ -6,7 +6,18 @@ import { Button, Card, CardBody, Container, Form, FormGroup, Input, Label } from
import { login } from '../js/api'; import { login } from '../js/api';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
export default () => ( import {
verifyCredentials
} from '../js/api';
export default class LoginPage extends React.Component {
componentDidMount() {
verifyCredentials();
}
render() {
return (
<div className="main generic-fullpage-bg"> <div className="main generic-fullpage-bg">
<Head> <Head>
<title>Login: turnie.re</title> <title>Login: turnie.re</title>
@ -17,7 +28,9 @@ export default () => (
</div> </div>
<Footer/> <Footer/>
</div> </div>
); );
}
}
function Login() { function Login() {
return ( return (

View File

@ -5,6 +5,10 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js'; import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
import '../static/everypage.css'; import '../static/everypage.css';
import {
verifyCredentials
} from '../js/api';
function Main() { function Main() {
return ( return (
<div className="main running-text"> <div className="main running-text">
@ -488,7 +492,14 @@ function PrivacyText(){
} }
export default () => ( export default class PrivacyPage extends React.Component {
componentDidMount() {
verifyCredentials();
}
render() {
return (
<div> <div>
<Head> <Head>
<title>Datenschutzerklärung: turnie.re</title> <title>Datenschutzerklärung: turnie.re</title>
@ -498,4 +509,6 @@ export default () => (
<Main/> <Main/>
<Footer/> <Footer/>
</div> </div>
); );
}
}

View File

@ -6,7 +6,18 @@ import { Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, La
import { register } from '../js/api'; import { register } from '../js/api';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
export default () => ( import {
verifyCredentials
} from '../js/api';
export default class RegisterPage extends React.Component {
componentDidMount() {
verifyCredentials();
}
render() {
return (
<div className="main generic-fullpage-bg"> <div className="main generic-fullpage-bg">
<Head> <Head>
<title>Registrieren: turnie.re</title> <title>Registrieren: turnie.re</title>
@ -18,7 +29,9 @@ export default () => (
</div> </div>
<Footer/> <Footer/>
</div> </div>
); );
}
}
function Register() { function Register() {
return ( return (

View File

@ -18,6 +18,7 @@ import {
} from 'reactstrap'; } from 'reactstrap';
import { import {
verifyCredentials,
updateTeamName updateTeamName
} from '../js/api'; } from '../js/api';
@ -39,6 +40,7 @@ class EditTournamentPage extends React.Component {
} }
componentDidMount() { componentDidMount() {
verifyCredentials();
requestTournament(this.props.query.code, () => { requestTournament(this.props.query.code, () => {
this.setState({ validCode: true }); this.setState({ validCode: true });
this._edittournamentcontent.notifyOfContentUpdate(); this._edittournamentcontent.notifyOfContentUpdate();

View File

@ -1,12 +1,20 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import {
verifyCredentials
} from '../js/api';
class FullscreenTournamentPage extends React.Component { class FullscreenTournamentPage extends React.Component {
static async getInitialProps({query}) { static async getInitialProps({query}) {
return {query}; return {query};
} }
componentDidMount() {
verifyCredentials();
}
render() { render() {
return ( return (
<div> <div>

View File

@ -2,12 +2,20 @@ import Head from 'next/head';
import React from 'react'; import React from 'react';
import '../style.css'; import '../style.css';
import {
verifyCredentials
} from '../js/api';
class TournamentPage extends React.Component { class TournamentPage extends React.Component {
static async getInitialProps({query}) { static async getInitialProps({query}) {
return {query}; return {query};
} }
componentDidMount() {
verifyCredentials();
}
render() { render() {
return ( return (
<div> <div>