Implement page for displaying the list of private tournaments

js/api.js

@@ -346,10 +346,10 @@ const reducer_tournamentlist = (state = defaultstate_tournamentlist, action) =>
             getRequest(action.state, '/tournaments?type=' + action.parameters.type).then((resp) => {
                 __store.dispatch({
                     type: actiontypes_tournamentlist.FETCH_SUCCESS,
-                    parameters: resp
+                    parameters: resp.data
                 });
                 storeOptionalToken(resp);
-                action.parameters.successCallback();
+                action.parameters.successCallback(resp.data);
             }).catch((error) => {
                 __store.dispatch({
                     type: actiontypes_tournamentlist.FETCH_ERROR,
@@ -360,7 +360,7 @@ const reducer_tournamentlist = (state = defaultstate_tournamentlist, action) =>
             });
             return state;
         case actiontypes_tournamentlist.FETCH_SUCCESS:
-            return Object.assign({}, state, {...action.parameters});
+            return Object.assign({}, state, {tournaments: action.parameters});
         case actiontypes_tournamentlist.FETCH_ERROR:
             return state;
         default:
@@ -485,11 +485,11 @@ export function getState() {
     return __store.getState();
 }
 
-export function requestTournamentList(myType, successCallback, errorCallback) {
+export function requestTournamentList(type, successCallback, errorCallback) {
     __store.dispatch({
         type: actiontypes_tournamentlist.FETCH,
         parameters: {
-            type: myType,
+            type: type,
             successCallback: successCallback,
             errorCallback: errorCallback
         },

js/components/TournamentList.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {requestTournamentList} from '../api';
+
+export default class TournamentList extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            tournaments: []
+        };
+    }
+
+    componentDidMount() {
+        requestTournamentList(this.props.type, tournaments => {
+                this.setState({
+                    tournaments: tournaments
+                });
+            },
+            error => {
+                this.setState({
+                    error
+                });
+            });
+    }
+
+    render() {
+        if (this.state.tournaments.length === 0) {
+            return <p className="text-center border-light font-italic text-secondary border-top border-bottom p-1">keine
+                Turniere vorhanden</p>;
+        } else {
+            return this.state.tournaments.map(item => (
+                //The code should be item.code but the api just supports it this way by now
+                <TournamentListEntry name={item.name} code={item.id} key={item.id}/>
+            ));
+        }
+    }
+}
+
+function TournamentListEntry(props) {
+    return (
+        <a className="w-100 d-inline-block mt-2 text-left btn btn-outline-primary" href={'/t/' + props.code}>
+            {props.name}
+        </a>
+    );
+}

pages/private.js

@@ -8,9 +8,9 @@ import {TurniereNavigation} from '../js/components/Navigation';
 import {Footer} from '../js/components/Footer';
 import {Option, UserRestrictor} from '../js/components/UserRestrictor';
 import {Login} from '../js/components/Login';
-import {requestTournamentList} from '../js/api';
 
 import '../static/everypage.css';
+import TournamentList from '../js/components/TournamentList';
 
 class PrivateTournamentsPage extends React.Component {
 
@@ -25,9 +25,7 @@ class PrivateTournamentsPage extends React.Component {
                             <title>Private Turniere: turnie.re</title>
                         </Head>
                         <TurniereNavigation/>
-                        <div>
+                        <PrivateTournamentsPageContent/>
-                            <PrivateTournamentsListCard/>
-                        </div>
                         <Footer/>
                     </div>
                 </Option>
@@ -49,65 +47,37 @@ class PrivateTournamentsPage extends React.Component {
     }
 }
 
-function mapStateToCreatePageProperties(state) {
+function mapStateToProperties(state) {
     const {isSignedIn} = state.userinfo;
     return {isSignedIn};
 }
 
-const CreatePage = connect(
+const PrivateTournamentListPage = connect(
-    mapStateToCreatePageProperties,
+    mapStateToProperties,
 )(PrivateTournamentsPage);
 
-export default CreatePage;
+export default PrivateTournamentListPage;
 
-
+function PrivateTournamentsPageContent() {
-
+    return (<div>
-class PrivateTournamentsListCard extends React.Component {
+        <Container className="pt-5">
-    constructor(props) {
+            <PrivateTournamentsCard/>
-        super(props);
+        </Container>
-        this.state = {
+        <Container className="pb-5 pt-3">
-            error: null,
+            <a href='/list' className="btn btn-success shadow">zu den öffentlichen Turnieren</a>
-            isLoaded: false,
+        </Container>
-            items: []
+    </div>);
-        };
-    }
-
-    componentDidMount() {
-        requestTournamentList('private', response => {
-                this.setState({
-                    isLoaded: true,
-                    items: response.data
-                });
-            },
-            error => {
-                this.setState({
-                    isLoaded: true,
-                    error
-                });
-            });
-    }
-
-    render() {
-        return (
-            <Container className="py-5">
-                <Card className="shadow">
-                    <CardBody>
-                        <h1 className="custom-font">Private Turniere</h1>
-                        {this.state.items.map(item => (
-                            //The code should be item.code but the api just supports it this way by now
-                            <TournamentListEntry name={item.name} code={item.id} key={item.id}/>
-                        ))}
-                    </CardBody>
-                </Card>
-            </Container>
-        );
-    }
 }
 
-function TournamentListEntry(props) {
+class PrivateTournamentsCard extends React.Component {
-    return (
+    render() {
-        <a className="w-100 d-inline-block mt-2 text-left btn btn-outline-primary" href={ '/t/' + props.code }>
+        return (
-            {props.name}
+            <Card className="shadow">
-        </a>
+                <CardBody>
-    );
+                    <h1 className="custom-font">Private Turniere</h1>
+                    <TournamentList type='private'/>
+                </CardBody>
+            </Card>
+        );
+    }
 }