Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
React/Flux Score Card Implementation
import { api } from "../../../../assets/scripts/js/api";
import dispatcher from '../_shared/FluxAppDispatcher';
import constants from '../_shared/FluxAppConstants';
export function initScoreCardData(props){
dispatcher.dispatch({
type:constants.score_card_init_data,
payload: {
index: props.postId,
object: props,
}
});
}
export function updateCategoryScore(post_id, category_index, score) {
dispatcher.dispatch({
type: constants.score_card_update_category_score,
payload: {
postId: post_id,
category_index: category_index,
score: score,
}
});
}
export function submitScore(post_id, scoring) {
dispatcher.dispatch({
type: constants.score_card_show_loader,
payload: {
postId: post_id
}
});
api.post('/voting/api/url', {
post_id: post_id,
vote_data: this.formatUserScoresForBackend(scoring)
}).done((response) => {
let revealEvent = new Event('reveal-author-and-score', { bubbles: true });
this.wrapperElement.dispatchEvent(revealEvent);
dispatcher.dispatch({
type: constants.score_card_finish_scoring,
payload: {
postId: post_id,
currentResults: {
totalNumberOfVotes: response.data.totalNumberOfVotes,
averageCommunityScore: response.data.averageCommunityScore,
currentUserScore: response.data.currentUserScore,
},
currentUserCanVote: false,
isLoading: false,
}
});
});
}
export function restartScoring(post_id) {
dispatcher.dispatch({
type: constants.score_card_restart_scoring,
payload: {
postId: post_id,
}
});
}
import React from 'react';
import ImageRanker from "../Voting__ImageRanker/Voting__ImageRanker";
import VotingStore from './VotingStore';
import * as actions from './VotingActions';
import {Container} from 'flux/utils';
class VotingContainer extends React.Component {
static getStores() {
return [VotingStore];
}
static calculateState() {
return VotingStore.getState();
}
render() {
return React.createElement(ImageRanker, this.state[this.props.postId]);
}
componentWillMount() {
actions.initScoreCardData(this.props);
}
}
export default Container.create(VotingContainer);
import {ReduceStore} from 'flux/utils';
import dispatcher from '../_shared/FluxAppDispatcher';
import constants from '../_shared/FluxAppConstants';
import clone from 'fast-clone';
class VotingStore extends ReduceStore {
constructor() {
super(dispatcher);
}
getInitialState() {
return {};
}
reduce(prevState, action) {
// !!! Do not mutate old state !!!
let newState = clone(prevState);
switch (action.type) {
case constants.score_card_init_data:
if(!prevState[action.payload.object.postId]) {
newState[action.payload.object.postId] = action.payload.object;
}
break;
case constants.score_card_show_loader:
newState[action.payload.postId].isLoading = true;
break;
case constants.score_card_update_category_score:
newState[action.payload.postId].userScores[action.payload.category_index] = action.payload.score;
break;
case constants.score_card_finish_scoring:
newState[action.payload.postId].isLoading = false;
newState[action.payload.postId] = {...newState[action.payload.postId], ...action.payload};
break;
case constants.score_card_restart_scoring:
newState[action.payload.postId].userScores = [];
break;
}
return newState;
}
}
export default new VotingStore();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment