Skip to content

Instantly share code, notes, and snippets.

@rtablada
Forked from toranb/components.number-count.js
Last active February 23, 2017 05:36
Show Gist options
  • Save rtablada/1ef5794df8d8e5f677bd30d3869dab70 to your computer and use it in GitHub Desktop.
Save rtablada/1ef5794df8d8e5f677bd30d3869dab70 to your computer and use it in GitHub Desktop.
REDUXIFY
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
import connect from 'ember-redux/components/connect';
var stateToComputed = (state) => ({});
var dispatchToActions = (dispatch) => {
return {
save: (data, clear, ev) => {
console.log(data);
ev.preventDefault();
dispatch({ type: 'GAME@CREATE:COMPLETE', data: {
...data,
_id: new Date(),
}});
clear();
}
};
};
var NumbersComponent = Ember.Component.extend({
layout: hbs`
<form class="create-form" onsubmit={{action "save" (hash name=name maxPlayers=maxPlayers minPlayers=minPlayers) (action "clear")}}>
<div class="control">
{{input type="text" placeholder="Name" class="create-form__name" value=name}}
</div>
<div class="control">
{{input type="text" placeholder="Max Players" class="create-form__max-players" value=maxPlayers}}
</div>
<div class="control">
{{input type="text" placeholder="Min Players" class="create-form__min-players" value=minPlayers}}
</div>
<button class="create-form__submit">Submit</button>
</form>`,
actions: {
clear() {
this.setProperties({
name: '',
maxPlayers: '',
minPlayers: '',
});
}
}
});
export default connect(stateToComputed, dispatchToActions)(NumbersComponent);
import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
import connect from 'ember-redux/components/connect';
var stateToComputed = (state) => {
return {
games: state.gametracker.games
};
};
var dispatchToActions = (dispatch) => {
return {
delete: (id) => {
console.log('delete')
dispatch({ type: 'GAME@REMOVE:COMPLETE', id });
},
toggle: (id) => {
console.log('toggle', id)
dispatch({ type: 'GAME@UPDATE:TOGGLE_ATCAMPUS', id });
}
};
};
var NumbersComponent = Ember.Component.extend({
layout: hbs`
<ul>
{{#each games as |game|}}
{{game-item game=game delete=(action "delete") toggle=(action "toggle")}}
{{/each}}
</ul>`,
});
export default connect(stateToComputed, dispatchToActions)(NumbersComponent);
import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
import connect from 'ember-redux/components/connect';
var stateToComputed = (state) => {
return {
games: state.gametracker.games
};
};
var dispatchToActions = (dispatch) => {
};
var NumbersComponent = Ember.Component.extend({
layout: hbs`
{{game-tracker-form}}
{{game-tracker-list}}`
});
export default connect(stateToComputed, dispatchToActions)(NumbersComponent);
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
function gametracker(state, action) {
switch (action.type) {
case 'GAME@FIND_ALL:START':
return {
...state,
loading: true
};
case 'GAME@FIND_ALL:COMPLETE':
return {
...state,
loading: false,
games: action.data
};
case 'GAME@CREATE:START':
return {
...state,
loading: true
};
case 'GAME@CREATE:COMPLETE':
return {
...state,
games: [action.data, ...state.games],
loading: false
};
case 'GAME@UPDATE:TOGGLE_ATCAMPUS':
return {
...state,
games: state.games.map((game) => {
if (game._id === action.id) {
return { ...game, atCampus: !game.atCampus };
}
return game;
}),
};
case 'GAME@REMOVE:COMPLETE':
return {
...state,
games: state.games.filter(game => game._id !== action.id),
};
default:
return state || {
loading: false,
showOnlyAt: null, // 'home', 'campus'
games: [],
};
}
}
export default {
gametracker
}
<li class="game">
<h2 class="game__name">{{game.name}}</h2>
<p class="game__players">{{game.minPlayers}}-{{game.maxPlayers}} Players</p>
<button class="game__on-campus {{unless game.atCampus "active"}}" onclick={{action toggle game._id}}>
{{#if game.atCampus}}
On Campus
{{else}}
At Home
{{/if}}
</button>
<button class="game__remove" onclick={{action delete game._id}}>X</button>
</li>
{
"version": "0.11.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.10.2",
"ember-data": "2.11.0",
"ember-template-compiler": "2.10.2",
"ember-testing": "2.10.2"
},
"addons": {
"ember-redux": "2.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment