From 0de789b7e3aff18c07093fa54d425176fa8e2997 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Mon, 3 Dec 2018 13:02:23 +0100 Subject: [PATCH] Begin designing tournament page --- pages/tournament.js | 64 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 58 insertions(+), 6 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index a2010b7..efe7116 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -1,23 +1,75 @@ import Head from 'next/head' -import "../style.css" +import React from 'react' +import {Container, ListGroup, ListGroupItem} from 'reactstrap'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js' +import '../static/everypage.css' +import {getRequest} from "../js/api"; -class TournamentPage extends React.Component { +function Tournament(props) { + return ( + + Turnier bearbeiten +

{props.tournament.description}

+ + + {props.tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} + + Turnier-Code: {props.tournament.code} + + + ); +} + +function TournamentContainer(props) { + if (props.data === null) { + return null + } else { + return + } +} + +class Main extends React.Component { + constructor(props) { + super(props); + const code = this.props.query.code; + getRequest('/tournaments/' + code, {}) + .then(response => { + const attributes = response.data.data.attributes; + const relationships = response.data.data.relationships; + this.setState({ + tournament: { + name: attributes.name, + code: attributes.code, + description: attributes.description, + isPublic: attributes.public, + teams: relationships.teams.data.map(team => team.id), + stages: relationships.stages.data.map(stage => stage.id) + } + }); + }) + .catch(error => console.log(error)); + } static async getInitialProps({query}) { return {query} } render() { + const tournamentName = this.state === null ? 'Turnier' : this.state.tournament.name; return (
- Turnie.re - Turnieranzeige + {tournamentName}: turnie.re -

Turnieranzeige

-

Code: {this.props.query.code}

+ + + + {JSON.stringify(this.state)} +
); } } -export default TournamentPage \ No newline at end of file +export default Main \ No newline at end of file