Refactor index page to use reactstrap

pages/index.js

@@ -1,13 +1,30 @@
 import Head from 'next/head'
-import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react'
+
+import {
+    Button,
+    Navbar,
+    NavbarBrand,
+    NavbarToggler,
+    Collapse,
+    Nav,
+    NavItem, 
+    NavLink,
+    Badge,
+    ButtonGroup,
+    Alert,
+    Card,
+    CardBody
+} from 'reactstrap';
+
 import '../static/everypage.css'
 import '../static/css/index.css'
 
 const Index = (props) => {
     return (
         <div>
-            <Nav/>
+            <TurniereNavigation/>
-            <Bigimage text="Einfach Turniere organisieren"/>
+            <BigImage text="Einfach Turniere organisieren"/>
             <Main/>
             <Footer/>
         </div>
@@ -32,7 +49,7 @@ function Footer() {
     );
 }
 
-function Bigimage(props) {
+function BigImage(props) {
     return (
         <div className="big-image">
             <h1 className="display-1">{props.text}</h1>
@@ -40,58 +57,70 @@ function Bigimage(props) {
     );
 }
 
-function Nav() {
+class TurniereNavigation extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.toggle = this.toggle.bind(this);
+        this.state = {
+            collapsed: true
+        };
+    }
+
+    toggle() {
+        this.setState({
+            collapsed: !this.state.collapsed
+        });
+    }
+
+    render() {
         return (
-        <nav className="navbar navbar-expand-lg navbar-light bg-light">
+            <Navbar color="light" light expand="lg">
-            <a className="navbar-brand" href="/">turnie.re</a>
+                <NavbarBrand href="/">turnie.re</NavbarBrand>
                 <Betabadge/>
-            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
+                <NavbarToggler onClick={this.toggle} />
-                    aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+                <Collapse isOpen={!this.state.collapsed} navbar>
-                <span className="navbar-toggler-icon"/>
+                    <Nav navbar>
-            </button>
-            <div className="collapse navbar-collapse" id="navbarTogglerDemo01">
-                <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
                         <Navlink target="/create" text="Turnier erstellen"/>
                         <Navlink target="/list" text="Öffentliche Turniere"/>
                         <Navlink target="/faq" text="FAQ"/>
-                </ul>
+                    </Nav>
-
                     <LoginLogoutButtons/>
-            </div>
+                </Collapse>
-        </nav>
+            </Navbar>
         );
+    }
 }
 
 function Navlink(props) {
     return (
-        <li className="nav-item active">
+        <NavItem>
-            <a className="nav-link" href={props.target}>{props.text}</a>
+            <NavLink href={props.target}>{props.text}</NavLink>
-        </li>
+        </NavItem>
     );
 }
 
 function Betabadge() {
-    return <span className="badge badge-danger mr-2">BETA</span>;
+    return (<Badge color="danger">BETA</Badge>);
 }
 
 function LoginLogoutButtons() {
     return (
-        <div className="nav-item btn-group">
+        <ButtonGroup className="nav-item">
-            <a className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5" role="button"
+            <Button href="/login" className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5">Login</Button>
-               href="/login">Login</a>
+            <Button href="/register" className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5">Registrieren</Button>
-            <a className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5" role="button"
+        </ButtonGroup>
-               href="/register">Registrieren</a>
-        </div>
     );
 }
 
 function Main() {
     return (
-        <main>
+        <div>
             <Marketing/>
             <MainPromotedLinks/>
             <MainBottomSummary/>
-        </main>
+        </div>
     );
 }
 
@@ -132,14 +161,14 @@ function Marketing() {
 
 function Betawarning() {
     return (
-        <div className="alert alert-danger shadow-sm mt-4">
+        <Alert color="danger" className="shadow-sm mt-4">
             <h4 className="alert-heading custom-font">Public Beta</h4>
             <p>
                 Diese Website ist noch in der Entwicklung.<br/>
                 Bei Problemen fülle bitte <a href="#" id="bugLink" className="alert-link">dieses </a>
                 und für Feedback <a href="#" id="feedbackLink" className="alert-link">dieses</a> Formular aus.
             </p>
-        </div>
+        </Alert>
     );
 }
 
@@ -185,8 +214,9 @@ function MainPromotedLinks() {
 }
 
 function PromotedLinkTournamentCode() {
-    return (<div className="container card shadow-lg mt-3">
+    return (
-        <div className="card-body row">
+        <Card className="container shadow-lg mt-3">
+            <CardBody className="row">
                 <form id="turniercode-form" className="col-lg-4" action="/t" method="get">
                     <input className="form-control" type="search" name="code" placeholder="Turnier-Code"/>
                     <button className="btn btn-outline-success w-100 my-2" type="submit">Turnier-Code öffnen</button>
@@ -194,15 +224,17 @@ function PromotedLinkTournamentCode() {
                 <div className="col-lg-8">
                     <p>Gib hier einen Turnier Code ein, um direkt zum entsprechenden Turnier zu gelangen.</p>
                 </div>
-        </div>
+            </CardBody>
-    </div>);
+        </Card>
+    );
 }
+
 function PromotedLinkListTournaments() {
     return (
-        <div className="container card shadow-lg my-4">
+        <Card className="container shadow-lg my-4">
-            <div className="card-body row">
+            <CardBody className="row">
                 <div className="col-lg-4 pb-3">
-                    <a className="btn btn-outline-success w-100" role="button" href="/list">Alle Turniere anzeigen</a>
+                    <Button outline color="success" className="w-100" href="/list">Alle Turniere anzeigen</Button>
                 </div>
                 <div className="col-lg-8">
                     <p>
@@ -214,13 +246,14 @@ function PromotedLinkListTournaments() {
                         Wenn du eingeloggt bist, findest du hier auch deine eigenen Turniere.
                     </p>
                 </div>
-            </div>
+            </CardBody>
-        </div>
+        </Card>
     );
 }
+
 function PromotedLinkCreateTournament() {
-    return (<div className="container card shadow-lg mb-3">
+    return (<Card className="container shadow-lg mb-3">
-        <div className="card-body row">
+        <CardBody className="row">
             <div className="col-lg-8">
                 <p>
                     <strong>Einfach ausprobieren:</strong> Einen Turnier-Namen, ein paar Team-Namen, und schon
@@ -229,10 +262,10 @@ function PromotedLinkCreateTournament() {
                 </p>
             </div>
             <div className="col-lg-4">
-                <a className="btn btn-success btn-lg w-100" role="button" href="/create">Turnier erstellen</a>
+                <Button color="success" size="lg" className="w-100" href="/create">Turnier erstellen</Button>
             </div>
-        </div>
+        </CardBody>
-    </div>);
+    </Card>);
 }
 
 export default () => (

yarn.lock

@@ -1217,6 +1217,11 @@ body-parser@1.18.3:
     raw-body "2.3.3"
     type-is "~1.6.16"
 
+bootstrap@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
+  integrity sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"