Skip to content

Instantly share code, notes, and snippets.

@nicohvi

nicohvi/_store.js

Created Dec 17, 2017
Embed
What would you like to do?
JS-eksempel
// Denne brukes av alle React-apper (ligger i lib-mappe)
import B from 'baconjs';
import R from 'ramda';
import Dispatcher from './dispatcher';
import { renameKeys } from './functions';
export default function store (fields = {}, keyMap = {},
transform = state => state) {
const d = new Dispatcher();
const rename = renameKeys(keyMap);
const props = B.update(
fields,
[d.stream('pop')], (state, {item, arr}) => {
const items = R.reject(it => it.id === item.id, state[arr]);
return R.merge(state, { [arr]: items });
},
[d.stream('push')], (state, {item, arr}) => {
const old = state[arr];
const items = R.reduce((arr, it) => arr.concat(it), [], old.concat(item));
return R.merge(state, { [arr]: items });
},
[d.stream('reset')], () => fields,
[d.stream('update')], (state, data) => R.merge(state, data),
[d.stream('update-item')], (state, {item, arr, data}) => {
const items = R.map(it => it.id === item.id ? R.merge(it, data) : it, state[arr]);
return R.merge(state, { [arr]: items });
}
);
const params = () => props.take(1).map(rename).map(transform);
return {
combine: prop => B.combineWith((p1, p2) => R.merge(p1, p2), prop, params()),
params,
pop: (item, arr) => d.push('pop', {item, arr}),
props,
push: (item, arr) => d.push('push', {item, arr}),
reset: () => d.push('reset'),
update: data => d.push('update', data),
updateItem: (item, arr, data) => d.push('update-item', {item, arr, data})
}
}
import store from './store';
export default {
back () {
store.props.take(1)
.onValue(({ active, count }) => {
let step = active - 1;
if(step < 0) step = count-1;
store.update({ active: step });
});
},
next () {
store.props.take(1)
.onValue(({ active, count }) => {
let step = active + 1;
if(step === count) step = 0;
store.update({ active: step });
});
},
update (data) { store.update(data); }
}
import React from 'react';
import R from 'ramda';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import api from './api';
import CONSTANTS from './constants';
const Quotes = ({ active }) => {
const { quotes } = CONSTANTS;
const quote = R.find(item => R.indexOf(item, quotes) === active, quotes);
return (
<div className="quotes-container">
<div className="quotes">
<TransitionGroup>
<CSSTransition
key={quote.key}
classNames="slide-in"
timeout={600}>
<Quote {...quote} />
</CSSTransition>
</TransitionGroup>
</div>
<ul className="indicator margin-top-large">
{quotes.map((_, i) => <li key={i} className={`pip ${ active === i ? 'active' : ''}`} onClick={() => api.update({ active: i })}></li>)}
</ul>
<i className="icon icon-arrow-left click" onClick={api.back} />
<i className="icon icon-arrow-right click" onClick={api.next} />
</div>
);
};
const Quote = ({ text, quotee }) => {
return (
<div className="quote">
<h1 className="margin-bottom-small text-center centered width-medium">{`"${text}"`}</h1>
<p className="text-grey lead-text text-center">{quotee}</p>
</div>
);
};
export default Quotes;
const CONSTANTS = {
quotes:
[
{
"key": 0,
"text": "Helt genialt! Før brukte jeg timesvis på prosessen, nå går det automatisk",
"quotee": "Torstein Pettersen, Statsautorisert revisor"
},
{
"key": 1,
"text": "Ei slik teneste har eg etterlyst i mange år. Ei revisjonshandling mindre å følge opp. Veldig bra",
"quotee": "Vegard W. Hansen, Senior revisor (EY alumni)"
}
]
};
export default CONSTANTS;
// entry point
import $ from 'baquery';
import React from 'react';
import ReactDOM from 'react-dom';
import store from './store';
import api from './api';
import Quotes from './app';
import CONSTANTS from './constants';
export default function init () {
const $quotes = $('#js-quotes');
if($quotes.length === 0) return;
store.props.onValue(newProps => ReactDOM.render(<Quotes {...newProps} />, $quotes[0]));
api.update({ count: CONSTANTS.quotes.length });
}
import { store } from '../../lib';
export default store({ active: 0 });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment