turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #4 from turniere/ticket/TURNIERE-104 

Ticket/turniere 104
This commit is contained in:
Jonny 2018-12-12 21:29:42 +01:00 committed by GitHub
parent d46062f453 8612b88ff7
commit fe5098d1df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 65 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
pages/list.js
View File

@ -1,10 +1,72 @@
import Head from 'next/head'; 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, getState } from '../js/api';
export default () => ( export default () => (
<div> <div className="main generic-fullpage-bg">
<Head> <Head>
<title>Turnie.re - Turnierliste</title> <title>Öffentliche Turniere: turnie.re</title>
</Head> </Head>
<p>Turnierliste</p> <TurniereNavigation/>
<div>
<TournamentList/>
</div>
<Footer/>
</div> </div>
); );
class TournamentList extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
getRequest(getState(), '/tournaments?type=public')
.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">Öffentliche 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>
);
}