Skip to content
A Framework to build rich UIs
Branch: master
Clone or download
boopathi Merge pull request #126 from flipkart-incubator/greenkeeper-eslint-3.…
…14.0

Update eslint to version 3.14.0 🚀
Latest commit 3e4e796 Jan 21, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
specs Add mocha helper, Fix test suite and enable concurrent builds Dec 8, 2015
src Fix Error stack by returning new Error from class Dec 8, 2015
util Add mocha helper, Fix test suite and enable concurrent builds Dec 8, 2015
.editorconfig
.eslintignore Add LICENSE, dot files, and CONTRIBUTING guide Jul 9, 2015
.eslintrc Update eslint and use eslint-config-phrontend Aug 31, 2015
.gitignore Migrate to babel6 and add support for using es6 features directly wit… Nov 1, 2015
.npmignore Migrate to babel6 and add support for using es6 features directly wit… Nov 1, 2015
.travis.yml Upgrade Travis Node version to 4.1 from 0.12 Dec 8, 2015
API.md
CODE_OF_CONDUCT.md Add LICENSE, dot files, and CONTRIBUTING guide Jul 9, 2015
CONTRIBUTING.md
README.md
package.json chore(package): update eslint to version 3.14.0 Jan 20, 2017

README.md

Phrontend

Build Status Code Climate Test Coverage

Phrontend is a flux implementation.

Install

npm install phrontend --save

Basic Usage

Let's create a simple counter application.

Define some actions (ActionTypes.js)

export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

Define action creators

import {Dispatcher} from 'phrontend';
import {INCREMENT_COUNTER, DECREMENT_COUNTER} from './ActionTypes';

export let increment = step => Dispatcher.dispatch(INCREMENT_COUNTER, step);
export let decrement = step => Dispatcher.dispatch(DECREMENT_COUNTER, step);

CounterStore.js

import {Store} from 'phrontend';
import {INCREMENT_COUNTER, DECREMENT_COUNTER} from './ActionTypes';

const initialState = {
  count: 0
};

class CounterStore extends Store {
  handler(payload) {
    switch(payload.actionType) {
      case INCREMENT_COUNTER:
        // increment the counter to the absolute value of the data sent
        this.set('count', this.get('count') + payload.data);
        // and emit the change event for the subscribers (views) to update themselves
        this.emitChange();
        break;
      case DECREMENT_COUNTER:
        this.set('count', this.get('count') - payload.data);
        this.emitChange();
    }
  }
}

export default new CounterStore(initialState);

CounterComponent.js

import React from 'react';
import CounterStore from './CounterStore';
import {increment, decrement} from './CounterActionCreator';

export default class extends React.Component {
  constructor(...args) {
    super(...args);
    this.handleChange = this.handleChange.bind(this);
    this.handleStepChange = this.handleStepChange.bind(this);
    this.state = {
      step: 1,
      count: 0,
    };
  }
  componentDidMount() {
    // subscribe to the change events published by the store this view
    // wants to listen to
    CounterStore.subscribe(this.handleChange);
  }
  componentWillUnmount() {
    // cleanup - unsubscribe from the store
    CounterStore.unsubscribe(this.handleChange);
  }
  // handle the change emitted by the store
  handleChange() {
    this.setState({
      // .get is synchronous
      count: CounterStore.get('count')
    });
  }
  handleStepChange(e) {
    // this is to maintain the step value
    this.setState({
      step: e.target.value ? parseInt(e.target.value) : 0
    });
  }
  render() {
    return <div>
      Current Value: {this.state.count}
      <div>
        <button style={buttonStyle} onClick={decrement.bind(null, this.state.step)}>-</button>
        <button style={buttonStyle} onClick={increment.bind(null, this.state.step)}>+</button>
      </div>
      <div>Step : <input onChange={this.handleStepChange} value={this.state.step}/></div>
    </div>;
  }
}

App.js

import React from 'react';
import CounterComponent from './CounterComponent';

window.addEventListener('DOMContentLoaded', function() {
    //Append the component to the container
  React.render(<CounterComponent/>, document.getElementById('container'));
});

LICENSE

Copyright 2016 Flipkart Internet Pvt. Ltd.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

You can’t perform that action at this time.