Skip to content

Instantly share code, notes, and snippets.

View kitze's full-sized avatar
🚀
Solving problems

Kitze kitze

🚀
Solving problems
View GitHub Profile
@kitze
kitze / index.ios.js
Created January 6, 2016 15:46
react native bug
import React, { AppRegistry, View, Text } from 'react-native';
const AppContainer = () => {
console.warn('Rendering component');
console.log('simple log');
return (
<View>
<Text>
Hello world
@kitze
kitze / todos.js
Created January 8, 2016 16:28
todos reducer
import * as actions from "../actions/todos";
const INITIAL_STATE = {
items: ['initial', 'todo', 'items'],
loading: false
}
export default (state = INITIAL_STATE, action) => {
console.log('action type is', action.type);
@kitze
kitze / todos.js
Created January 8, 2016 16:29
todo actions
export const ADD_TODO = "ADD_TODO";
export const GET_TODOS_INIT = "GET_TODOS_INIT";
export const GET_TODOS = "GET_TODOS";
export function addTodo(text) {
return {
type: ADD_TODO,
text: text
};
}
@kitze
kitze / Todos.js
Created January 8, 2016 16:30
todos component
import React, { Component, PropTypes } from "react";
//redux
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { addTodo, getTodos } from "../actions/todos";
//components
import TodoList from "../components/TodoList";
import { createAction, handleActions } from 'redux-actions'
import axios from 'axios'
import {async, addWithLoading, deleteWithLoading, getWithLoading} from './redux-helpers'
const API = 'http://localhost:3000/v1'
// ------------------------------------
// Initial state
// ------------------------------------
export const deleteFromArray = (itemKey, loadingKey, stateProperty) => (state, action) => {
return {
...state,
[loadingKey]: false,
[stateProperty]: state[stateProperty].filter(item => item[itemKey] !== action.value)
}
}
export const addToArray = (collection, loadingKey) => (state, action) => {
return {
@kitze
kitze / container.js
Created January 11, 2016 22:32
Shortest version of onnecting a container to a store (without a decorator on the class) with ES6, ES7 and lodash.pick
export default connect(
({storage, addStorageForm}) => ({
...pick(storage, ['storages', 'loading']),
...pick(addStorageForm, ['editingStorageItem']),
}),
dispatch => ({
actions: bindActionCreators({...storageActions, ...addStorageFormActions}, dispatch)
})
)(Container);
import {StyleSheet} from 'aphrodite';
const flexsheet = StyleSheet.create({
horizontal: {
display: 'flex',
flexDirection: 'row'
},
vertical: {
display: 'flex',
flexDirection: 'column'
@kitze
kitze / plopfile.js
Created May 25, 2016 10:41
A sample plopfile for generating React components and components with containers
module.exports = function (plop) {
/* Helpers */
plop.addHelper('upperCase', function (text) {
return text.toUpperCase();
});
/* Files */
var createIndex = {
type: 'add',
@kitze
kitze / mixins.js
Last active May 27, 2016 09:50
Styles with and without mixins
//without mixins
const header = {
position: 'absolute',
top: 0,
bottom:0,
left:0,
right:0,
"@media max-width 3948 min-width 1038 mobile blah": {
paddingTop:10;
paddingBottom:10;