index.js

// @flow
/* eslint eqeqeq: "off" */

import ReactDOM from 'react-dom';
import * as React from 'react';
import { Component, sharedComponentData } from 'react-simplified';
import { HashRouter, Route, NavLink } from 'react-router-dom';

import { createHashHistory } from 'history';
const history = createHashHistory(); // Use history.push(...) to programmatically change path, for instance after successfully saving a student

class CardBig extends Component<{
  headline: string,
  image: string,
  case_id: number,
  children?: React.Node
}> {
  render() {
    return (
        <section>
          <div className="container">
            <div className="card"  onClick={this.onClick}>
              <div className="card-body">
                <div className="row">
                  <div className="col-md-6">
                    <div className="card-block">
                      <h4 className="card-title">{this.props.headline}</h4>
                      {this.props.children}
                    </div>
                  </div>
                  <div className="col-md-6">
                    <div className="card-img-bottom">
                      <img className="CardBigImage" src={this.props.image}></img>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
    );
  }
  onClick() {
    history.push('/case/' + this.props.case_id)
  }
}

class CaseCard extends Component<{
  case_id: number,
}> {
  headline = "test";
  content = "test";
  post_time = 1;
  image = "https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg";
  priority = 1;

  render() {

    return (
        <section>
          <div className="container">
            <div className="card"  onClick={this.onClick}>
              <div className="card-body">
                <div className="row">
                  <div className="col-md-6">
                    <div className="card-block">
                      <h4 className="card-title">{this.headline}</h4>
                      <p className="card-text">{this.content}</p>
                    </div>
                  </div>
                  <div className="col-md-6">
                    <div className="card-img-bottom">
                      <img className="CaseImage" src={this.image}></img>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
    );
  }
}

class CardSmall extends Component<{
  headline: string,
  case_id: number,
  children?: React.Node,
  onClick?: () => mixed
}> {
  render() {
    return (
        <section>
          <div className="container">
            <div className="card"  onClick={this.onClickCase}>
              <div className="card-body">
                <div className="row">
                  <div className="card-block">
                    <h4 className="card-title">{this.props.headline}</h4>
                    {this.props.children}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
    );
  }
  onClickCase() {
    history.push('/case/' + this.case_id)
  }
}

class Banner extends Component {
  render() {
    return <div className="card" onClick={this.onClick}>
      <div className="card-body">
        <h5 className="card-title">Vår Avis</h5>
      </div>
    </div>;
  }
  onClick() {
    history.push('/')
  }
}

class Navbar extends Component {
  render() {
    return <div>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item active">
            <a className="navbar-brand" href="/">Hjem<span className="sr-only">(current)</span></a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="/">Kategorier</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#/add">Legg Til</a>
          </li>
        </ul>
      </nav>
    </div>;
  }
}

class Case extends Component<{ match: { params: { id: number } } }> {
  header = "Header";
  content = "Content";
  image = "https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg";

  render() {
    return <div className="card">
      <div className="card-body">
        <div className="row">
          <div className="col-md-6">
          <h4 className="card-title">{this.header}</h4>
            <p>{this.content}</p>
          </div>
          <div className="col-md-6">
            <img className="CaseImage" src={this.image}></img>
          </div>
        </div>
      </div>
    </div>
  }
}

class CaseAdd extends Component<{ match: { params: { id: number } } }> {
  render() {
    return <div className="card card-body">
      <form>
        <div className="row">
          <div className="col-md-6">
            <h5 className="card-title">Tittel*</h5>
            <input className="input-group-text input-group" />
            <h5 className="card-title">Beskrivelse*</h5>
            <input className="input-group-text input-group" />
            <h5 className="card-title">Innhold*</h5>
            <input className="input-group-text input-group CaseInput" />
          </div>
          <div className="col-md-6">
            <h5 className="card-title">Bilde-adresse*</h5>
            <input className="input-group-text input-group" />
            <h5 className="card-title">Bildetekst*</h5>
            <input className="input-group-text input-group" />
            <h5 className="card-title">Forfatter*</h5>
            <input className="input-group-text input-group " />
          </div>
        </div>
      </form>
    </div>
  }
}

class Home extends Component {
  render() {
    return <div>
      <div className="card cardInLine">
        <div className="row card-body">
          <div className="col-sm-2">
            <CardSmall case_id="22" headline="test">General Kenobi</CardSmall>
          </div>
          <div className="col-sm-2">
            <CardSmall case_id="22" headline="test">General Kenobi</CardSmall>
          </div>
          <div className="col-sm-2">
            <CardSmall case_id="22" headline="test">General Kenobi</CardSmall>
          </div>
          <div className="col-sm-2">
            <CardSmall case_id="22" headline="test">General Kenobi</CardSmall>
          </div>
          <div className="col-sm-2">
            <CardSmall case_id="22" headline="test">General Kenobi</CardSmall>
          </div>
          <div className="col-sm-2">
            <CardSmall case_id="22" headline="test">General Kenobi</CardSmall>
          </div>
        </div>
      </div>
      <div>
        <div className="card card-body">
          <div className="row card-columns">
            <div className="col-sm-6">
              <CardBig case_id="11" headline="test" image="https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg">Hello there. I am the the the the the the the the the the the the the the the the the the the the </CardBig>
            </div>
            <div className="col-sm-6">
              <CardBig case_id="11" headline="test" image="https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg">Hello there. I am the the the the the the the the the the the the the the the the the the the the </CardBig>
            </div>
          </div>
          <div className="row card-columns">
            <div className="col-sm-6">
              <CardBig case_id="11" headline="test" image="https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg">Hello there. I am the the the the the the the the the the the the the the the the the the the the </CardBig>
            </div>
            <div className="col-sm-6">
              <CardBig case_id="11" headline="test" image="https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg">Hello there. I am the the the the the the the the the the the the the the the the the the the the </CardBig>
            </div>
          </div>
          <div className="row card-columns">
            <div className="col-sm-6">
              <CardBig case_id="11" headline="test" image="https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg">Hello there. I am the the the the the the the the the the the the the the the the the the the the </CardBig>
            </div>
            <div className="col-sm-6">
              <CardBig case_id="11" headline="test" image="https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg">Hello there. I am the the the the the the the the the the the the the the the the the the the the </CardBig>
            </div>
          </div>
        </div>
      </div>
    </div>;
  }
}

const root = document.getElementById('root');
if (root)
  ReactDOM.render(
      <HashRouter>
        <div>
          <Banner />
          <Navbar />
          <Route exact path="/" component={Home} />
          <Route path="/case/:id" component={Case} />
          <Route path="/add" component={CaseAdd} />
        </div>
      </HashRouter>,
      root
  );