Skip to content

Instantly share code, notes, and snippets.

View arqex's full-sized avatar
💭
Bootstraping project faster allows to do more things!

Javier Marquez arqex

💭
Bootstraping project faster allows to do more things!
View GitHub Profile
@arqex
arqex / styles.less
Last active September 17, 2017 15:56
Atom compact styles
/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed.
*
* If you are unfamiliar with LESS, you can read more about it here:
* http://www.lesscss.org
*
* To apply this styles to your editor click on
@arqex
arqex / todomvc-store.js
Last active September 19, 2015 12:06
todomvc-store.js
var freezer = new Freezer({
todos: [],
todoInput: '',
status: 'ready',
filter: 'all'
});
// state variable is immutable
var state = freezer.get();
// Accessing is easy
console.log( state.todos ); // []
console.log( state.status ); // 'ready'
// But it is not possible to
// update the state directly
state.status = 'loading';
@arqex
arqex / todomvc-updating.js
Last active September 19, 2015 13:03
Todomvc
var state = freezer.get();
// this will replace app state for a new one
state.todos.push({
model: {id: 1, title: 'Do this.', completed: false},
ui: {status: 'ready', input: 'Do this.'}
});
// state variable is still unchanged,
// it is immutable
var TodoApp = React.createClass({
componentDidMount: function () {
var me = this;
// Here the magic happens. Everytime that the
// state is updated the app will re-render.
// A real data driven app.
freezer.on('update', function(){
me.forceUpdate();
});
// Creaing a todo item
// using a standard flux dispatcher
dispatch({actionType: 'createTodo', title: 'Do this.'});
// using freezer
freezer.trigger('todo:create', 'Do this.');
/* FREEZER */
// Create a reaction
freezer.on('todo:update', function( todo, text ){
todo.model.set({title: text});
});
// Trigger the event from your component
var TodoList = React.createComponent({
...
updateTodo: function( todo, text ){
/* STANDARD FLUX */
// Using flux you need to register the action in the dispatcher
AppDispatcher.register(function(payload) {
var action = payload.action;
var text;
switch(action.actionType) {
case 'updateTodo':
text = action.text.trim();
if (text !== '') {
// Our input is something like
var TodoInput = React.createElement({
render: function(){
return <input value={ this.props.state.todoInput } onChange={ this.updateInput } />
},
updateInput: function(){
// We don't need to create a reaction for this,
// This is not a problem because the whole state will be
// updated and the whole app will be notified of this change
this.props.state.set({ todoInput: e.target.value }).now()
var TodoList = React.createClass({
...
shouldComponentUpdate: function( nextProps ){
return nextProps.todos != this.props.todos;
}
...
});