Export some common components to be used in all pages

js/CommonComponents.js

@@ -0,0 +1,96 @@
+
+import {
+    Badge,
+    ButtonGroup,
+    Button,
+    Collapse,
+    Nav,
+    Navbar,
+    NavbarBrand,
+    NavbarToggler,
+    NavItem, 
+    NavLink
+} from 'reactstrap';
+
+export function BigImage(props) {
+    return (
+        <div className="big-image">
+            <h1 className="display-1">{props.text}</h1>
+        </div>
+    );
+}
+
+export 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 (
+            <Navbar color="light" light expand="lg">
+                <NavbarBrand href="/">turnie.re</NavbarBrand>
+                <Betabadge/>
+                <NavbarToggler onClick={this.toggle} />
+                <Collapse isOpen={!this.state.collapsed} navbar>
+                    <Nav navbar>
+                        <Navlink target="/create" text="Turnier erstellen"/>
+                        <Navlink target="/list" text="Öffentliche Turniere"/>
+                        <Navlink target="/faq" text="FAQ"/>
+                    </Nav>
+                    <LoginLogoutButtons/>
+                </Collapse>
+            </Navbar>
+        );
+    }
+}
+
+function Navlink(props) {
+    return (
+        <NavItem>
+            <NavLink href={props.target}>{props.text}</NavLink>
+        </NavItem>
+    );
+}
+
+function Betabadge() {
+    return (<Badge color="danger">BETA</Badge>);
+}
+
+function LoginLogoutButtons() {
+    return (
+        <ButtonGroup className="nav-item">
+            <Button href="/login" className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5">Login</Button>
+            <Button href="/register" className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5">Registrieren</Button>
+        </ButtonGroup>
+    );
+}
+
+export function Footer() {
+    return (
+        <footer className="footer mt-5 bg-dark text-light">
+            <div className="container py-3">
+                <div className="row">
+                    <div className="col-md-6 text-center">
+                        &copy; 2018 turnie.re &middot;
+                        <a className="text-white" href="/privacy"> Datenschutzerklärung </a>
+                        &middot;
+                        <a className="text-white" href="/imprint"> Impressum</a>
+                    </div>
+                    <div className="col-md-6 text-center"><a href="#" className="text-white">zurück nach oben</a></div>
+                </div>
+            </div>
+        </footer>
+    );
+}

pages/index.js

@@ -17,6 +17,14 @@ import {
     CardBody
 } from 'reactstrap';
 
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import {
+    BigImage,
+    Footer,
+    TurniereNavigation
+} from '../js/CommonComponents.js'
+
 import '../static/everypage.css'
 import '../static/css/index.css'
 
@@ -31,89 +39,6 @@ const Index = (props) => {
     );
 };
 
-function Footer() {
-    return (
-        <footer className="footer mt-5 bg-dark text-light">
-            <div className="container py-3">
-                <div className="row">
-                    <div className="col-md-6 text-center">
-                        &copy; 2018 turnie.re &middot;
-                        <a className="text-white" href="/privacy"> Datenschutzerklärung </a>
-                        &middot;
-                        <a className="text-white" href="/imprint"> Impressum</a>
-                    </div>
-                    <div className="col-md-6 text-center"><a href="#" className="text-white">zurück nach oben</a></div>
-                </div>
-            </div>
-        </footer>
-    );
-}
-
-function BigImage(props) {
-    return (
-        <div className="big-image">
-            <h1 className="display-1">{props.text}</h1>
-        </div>
-    );
-}
-
-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 (
-            <Navbar color="light" light expand="lg">
-                <NavbarBrand href="/">turnie.re</NavbarBrand>
-                <Betabadge/>
-                <NavbarToggler onClick={this.toggle} />
-                <Collapse isOpen={!this.state.collapsed} navbar>
-                    <Nav navbar>
-                        <Navlink target="/create" text="Turnier erstellen"/>
-                        <Navlink target="/list" text="Öffentliche Turniere"/>
-                        <Navlink target="/faq" text="FAQ"/>
-                    </Nav>
-                    <LoginLogoutButtons/>
-                </Collapse>
-            </Navbar>
-        );
-    }
-}
-
-function Navlink(props) {
-    return (
-        <NavItem>
-            <NavLink href={props.target}>{props.text}</NavLink>
-        </NavItem>
-    );
-}
-
-function Betabadge() {
-    return (<Badge color="danger">BETA</Badge>);
-}
-
-function LoginLogoutButtons() {
-    return (
-        <ButtonGroup className="nav-item">
-            <Button href="/login" className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5">Login</Button>
-            <Button href="/register" className="btn navbar-btn btn-outline-success my-2 my-sm-0 px-5">Registrieren</Button>
-        </ButtonGroup>
-    );
-}
-
 function Main() {
     return (
         <div>