Design public tournament list

2018-12-03 13:41:28 +01:00 · 2018-12-03 13:41:28 +01:00 · 2e9d6353c4
parent 9dd2466e10
commit 2e9d6353c4
1 changed files with 66 additions and 3 deletions
--- a/pages/list.js
+++ b/pages/list.js
@ -1,10 +1,73 @@
 import Head from 'next/head'
+import '../static/everypage.css'
+import {Footer, TurniereNavigation} from "../js/CommonComponents";
+import React from "react";
+import {Card, CardBody, Container} from "reactstrap";
+import {getRequest} from "../js/api";

 export default () => (
-    <div>
+    <div className="main generic-fullpage-bg">
        <Head>
-            <title>Turnie.re - Turnierliste</title>
+            <title>Öffentliche Turniere: turnie.re</title>
        </Head>
-        <p>Turnierliste</p>
+        <TurniereNavigation/>
+        <div>
+            <TournamentList/>
+        </div>
+        <Footer/>
    </div>
 )
+
+class TournamentList extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            isLoaded: false,
+            items: []
+        };
+    }
+
+    componentDidMount() {
+        getRequest('/tournaments?type=public',{})
+            .then(
+                response => {
+                    console.log('response:');
+                    console.log(response);
+                    this.setState({
+                        isLoaded: true,
+                        items: response.data.data
+                    });
+                },
+                error => {
+                    this.setState({
+                        isLoaded: true,
+                        error
+                    });
+                }
+            )
+    }
+
+    render() {
+        return (
+            <Container className="py-5">
+                <Card className="shadow">
+                    <CardBody>
+                        <h1 className="custom-font">Öffentliche Turniere</h1>
+                        {this.state.items.map(item => (
+                            <TournamentListEntry name={item.attributes.name} code={item.attributes.code} 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>
+    );
+}