Begin implementing page for private tournaments

js/api.js

@@ -32,7 +32,7 @@ const actiontypes_userinfo = {
     'STORE_AUTH_HEADERS'           : 'STORE_AUTH_HEADERS',
 
     'REHYDRATE'                    : 'USERINFO_REHYDRATE',
-    'CLEAR'                        : 'USERINFO_CLEAR',
+    'CLEAR'                        : 'USERINFO_CLEAR'
 };
 
 const defaultstate_userinfo = {
@@ -72,6 +72,17 @@ const defaultstate_tournamentinfo = {
     teams : []
 };
 
+const actiontypes_tournamentlist = {
+    'FETCH': 'FETCH',
+    'FETCH_SUCCESS': 'FETCH_SUCCESS',
+    'FETCH_ERROR': 'FETCH_ERROR',
+    'REHYDRATE': 'REHYDRATE'
+};
+
+const defaultstate_tournamentlist = {
+    tournaments: []
+};
+
 export function postRequest(state, url, data) {
     return axios.post(api_url + url, data, {
         headers : generateHeaders(state)
@@ -263,6 +274,27 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
             expiry : null,
             uid : null
         });
+    case actiontypes_userinfo.GET_TOURNAMENT_LIST:
+        getRequest(action.state, '/tournaments?type=' + action.parameters.type).then((resp) => {
+            __store.dispatch({
+                type: actiontypes_tournamentinfo.GET_TOURNAMENT_LIST_SUCCESS,
+                parameters: resp
+            });
+            storeOptionalToken(resp);
+            action.parameters.successCallback();
+        }).catch((error) => {
+            __store.dispatch({
+                type: actiontypes_tournamentinfo.GET_TOURNAMENT_LIST_ERROR,
+                parameters: {error: error}
+            });
+            storeOptionalToken(error.response);
+            action.parameters.errorCallback();
+        });
+        return Object.assign({}, state, {});
+    case actiontypes_userinfo.GET_TOURNAMENT_LIST_ERROR:
+        return Object.assign({}, state, {});
+    case actiontypes_userinfo.GET_TOURNAMENT_LIST_SUCCESS:
+        return Object.assign({}, state, {...action.parameters});
     default: return state;
     }
 };
@@ -329,14 +361,44 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
     }
 };
 
+const reducer_tournamentlist = (state = defaultstate_tournamentlist, action) => {
+    switch (action.type) {
+        case actiontypes_tournamentlist.FETCH:
+            getRequest(action.state, '/tournaments?type=' + action.parameters.type).then((resp) => {
+                __store.dispatch({
+                    type: actiontypes_tournamentlist.FETCH_SUCCESS,
+                    parameters: resp
+                });
+                storeOptionalToken(resp);
+                action.parameters.successCallback();
+            }).catch((error) => {
+                __store.dispatch({
+                    type: actiontypes_tournamentlist.FETCH_ERROR,
+                    parameters: {error: error}
+                });
+                storeOptionalToken(error.response);
+                action.parameters.errorCallback();
+            });
+            return state;
+        case actiontypes_tournamentlist.FETCH_SUCCESS:
+            return Object.assign({}, state, {...action.parameters});
+        case actiontypes_tournamentlist.FETCH_ERROR:
+            return state;
+        default:
+            return state;
+    }
+};
+
 const reducers = {
     userinfo: reducer_userinfo,
-    tournamentinfo: reducer_tournamentinfo
+    tournamentinfo: reducer_tournamentinfo,
+    tournamentlist: reducer_tournamentlist
 };
 
 const default_applicationstate = {
     userinfo : defaultstate_userinfo,
-    tournamentinfo: defaultstate_tournamentinfo
+    tournamentinfo: defaultstate_tournamentinfo,
+    tournamentlist: defaultstate_tournamentlist
 };
 
 var __store;
@@ -444,6 +506,18 @@ export function getState() {
     return __store.getState();
 }
 
+export function requestTournamentList(myType, successCallback, errorCallback) {
+    __store.dispatch({
+        type: actiontypes_tournamentlist.FETCH,
+        parameters: {
+            type: myType,
+            successCallback: successCallback,
+            errorCallback: errorCallback
+        },
+        state: __store.getState()
+    });
+}
+
 function rehydrateApplicationState() {
     const persistedState = localStorage.getItem('reduxState') ?
         JSON.parse(localStorage.getItem('reduxState')) :
@@ -458,6 +532,10 @@ function rehydrateApplicationState() {
             type : actiontypes_tournamentinfo.REHYDRATE,
             parameters : Object.assign({}, persistedState.tournamentinfo)
         });
+        __store.dispatch({
+            type : actiontypes_tournamentlist.REHYDRATE,
+            parameters : Object.assign({}, persistedState.tournamentlist)
+        });
         applicationHydrated = true;
     }
 }

pages/private.js

@@ -0,0 +1,130 @@
+import Head from 'next/head';
+import React from 'react';
+import {connect} from 'react-redux';
+
+import {Card, CardBody, Container,} from 'reactstrap';
+
+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';
+
+class PrivateTournamentsPage extends React.Component {
+
+    render() {
+        const {isSignedIn} = this.props;
+
+        return (
+            <UserRestrictor>
+                <Option condition={isSignedIn}>
+                    <div className="main generic-fullpage-bg">
+                        <Head>
+                            <title>Private Turniere: turnie.re</title>
+                        </Head>
+                        <TurniereNavigation/>
+                        <div>
+                            <PrivateTournamentsListCard/>
+                        </div>
+                        <Footer/>
+                    </div>
+                </Option>
+                <Option condition={true}>
+                    <div className="main generic-fullpage-bg">
+                        <Head>
+                            <title>Anmeldung</title>
+                        </Head>
+                        <TurniereNavigation/>
+                        <div>
+                            <Login
+                                hint="Sie müssen angemeldet sein, um diesen Inhalt anzuzeigen!"/>
+                        </div>
+                        <Footer/>
+                    </div>
+                </Option>
+            </UserRestrictor>
+        );
+    }
+}
+
+function mapStateToCreatePageProperties(state) {
+    const {isSignedIn} = state.userinfo;
+    return {isSignedIn};
+}
+
+const CreatePage = connect(
+    mapStateToCreatePageProperties,
+)(PrivateTournamentsPage);
+
+export default CreatePage;
+
+
+
+class PrivateTournamentsListCard extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            isLoaded: false,
+            items: []
+        };
+    }
+
+    componentDidMount() {
+        requestTournamentList('private', response => {
+                this.setState({
+                    isLoaded: true,
+                    items: response.data
+                });
+            },
+            error => {
+                this.setState({
+                    isLoaded: true,
+                    error
+                });
+            });
+        /*
+        getRequest(getState(), '/tournaments?type=private')
+            .then(
+                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) {
+    return (
+        <a className="w-100 d-inline-block mt-2 text-left btn btn-outline-primary" href={ '/t/' + props.code }>
+            {props.name}
+        </a>
+    );
+}