arkhamjs-demo

ArkhamJS Demo

by Giraldo Rosales

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.19/system.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700" rel="stylesheet"/>
<div id="app"></div>

CSS

body {
  background-color: #f1f1f1;
  font-family: 'Source Sans Pro';
}


h1, h3 {
  color: #aaa;
}

h1 {
  font-size: 26px;
  font-weight: 700;
}

h3 {
  font-size: 16px;
  font-weight: 400;
  border-bottom: 1px solid #aaa;
}

input {
  border: 1px solid #ddd;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 15px;
  padding: 15px 5px;
}

p {
  font-size: 24px;
  font-weight: 100;
  padding: 0 5px;
}

.form {
  background-color: #fff;
  border-radius: 15px;
  margin: 15px;
  padding: 15px 30px;
}

Babel + JSX

System.config({
  map: {
    "arkhamjs": "//arkhamjs.io/versions/arkhamjs-3.2.0.min.js",
    "@nlabs/arkhamjs-storage-browser": "//arkhamjs.io/versions/arkhamjs-storage-browser-1.0.6.min.js",
    "react": "//unpkg.com/react@16/umd/react.production.min.js",
    "react-dom": "//unpkg.com/react-dom@16/umd/react-dom.production.min.js"
  }
});

Promise.all([
	System.import("arkhamjs"),
	System.import("@nlabs/arkhamjs-storage-browser"),
	System.import("react"),
	System.import("react-dom")
]).then((modules) => {
  const [{Flux, Store}, {BrowserStorage}, React, ReactDOM] = modules;
  
  //Store
  class AppStore extends Store {
    constructor() {
      super('app');
    }

    initialState() {
      return {content: 'Demo'};
    }

    onAction(type, data, state) {
      switch(type) {
        case 'APP_UPDATE_CONTENT': {
          state.content = data.content;
          return state;
        }
        default: {
          return state;
        }
      }
    }
  }

  class Demo extends React.Component {
    constructor(props) {
      super(props);

      // Methods
      this.onChange = this.onChange.bind(this);
      this.onUpdateContent = this.onUpdateContent.bind(this);

      // Add stores to ArkhamJS

      // Initial state
      this.state = {content: ''};
    }

    componentWillMount() {
      // Add listeners
      Flux.onInit(this.onUpdateContent);
      Flux.on('APP_UPDATE_CONTENT', this.onUpdateContent);
      
      // Arkham storage configuration
      Flux.init({
        storage: new BrowserStorage(),
        stores: [AppStore]
      });
    }

    componentWillUnmount() {
      // Remove listeners
      Flux.offInit(this.onUpdateContent);
      Flux.off('APP_UPDATE_CONTENT', this.onUpdateContent);
    }

    onChange() {
      const {value} = this.input;
      Flux.dispatch({type: 'APP_UPDATE_CONTENT', content: value});
    }

    onUpdateContent() {
      this.setState({content: Flux.getStore('app.content', '')});
    }

    render() {
      return (
   ...