mega react views

example.jsx

import React from 'react';
import { Link } from 'react-router';
import { MegaRouteHandler } from '../src';

import { schema } from './api';

export class Layout extends React.Component {
  render() {
    return <div>
      <Header />
      <MegaRouteHandler />
    </div>;
  }
}

export class Header extends React.Component {
  render() {
    return <header>
      <h1>example application</h1>
    </header>;
  }
}

export class Dashboard extends React.Component {
  render() {
    return <Link to="projectList">projects</Link>;
  }
}

export class ProjectListItem extends React.Component {
  static propTypes = {
    project: schema.item(schema.Project.makePropTypes([
      'id',
      'name',
      'description',
    ])).isRequired,
  };

  render() {
    return <li className="ProjectList--Item">
      <Link to="projectDetails" params={{projectId: this.props.project.model.id}}>{this.props.project.model.name}</Link> ({this.props.project.model.description})
    </li>;
  }
}

export class ProjectList extends React.Component {
  static propTypes = {
    projects: schema.arrayOf(ProjectListItem.propTypes.project).isRequired,
  };

  static megaRequirements = {
    projects: schema.Project.search(),
  };

  render() {
    return <ul className="ProjectList">{this.props.projects.models.map(project =>
      <ProjectListItem key={project.model.id} project={project} />
    )}</ul>;
  }
}

export class ProjectDetails extends React.Component {
  static propTypes = {
    store: schema.store({
      Project: ['replace'],
    }),
    project: schema.item(schema.Project.makePropTypes([
      'id',
      'name',
      'description',
      'tags',
    ]).isRequired).isRequired,
  };

  static megaRequirements = {
    project: schema.Project.read({
      id: 'projectId',
    }),
  };

  onKeyDown(ev) {
    if (ev.key !== 'Enter') {
      return;
    }

    this.props.store.Project.replace(this.props.project.model.id, this.props.project.model.version, Object.assign({}, this.props.project.model, {
      version: null,
      tags: this.props.project.model.tags.slice().concat([
        ev.target.value,
      ]),
    }));

    ev.target.value = "";
  }

  removeTag(i) {
    this.props.store.Project.replace(this.props.project.model.id, this.props.project.model.version, Object.assign({}, this.props.project.model, {
      version: null,
      tags: this.props.project.model.tags.slice(0, i).concat(this.props.project.model.tags.slice(i+1)),
    }));
  }

  swapTags(i, j) {
    const tags = this.props.project.model.tags.slice();

    [tags[i], tags[j]] = [tags[j], tags[i]];

    this.props.store.Project.replace(this.props.project.model.id, this.props.project.model.version, Object.assign({}, this.props.project.model, {
      version: null,
      tags: tags,
    }));
  }

  render() {
    return <table className="ProjectDetails">
      <tr>
        <td>Name</td>
        <td>{this.props.project.model.name}</td>
      </tr>
      <tr>
        <td>Description</td>
        <td>{this.props.project.model.description}</td>
      </tr>
      <tr>
        <td>Tags</td>
        <td>{this.props.project.model.tags.map((tag, i) => {
          return <span key={tag}>[
            <button onClick={this.swapTags.bind(this, i, i-1)} disabled={i === 0}>&lt;</button>
            {tag}
            <button onClick={this.swapTags.bind(this, i, i+1)} disabled={i === this.props.project.model.tags.length-1}>&gt;</button>

            <button onClick={this.removeTag.bind(this, i)}>x</button>
          ]</span>
        })}</td>
      </tr>
      <tr>
        <td><input onKeyDown={this.onKeyDown.bind(this)} /></td>
      </tr>
    </table>;
  }
}