Merge pull request #3 from andrerfneves/feature/redux-ducks
Feature/redux ducks
This commit is contained in:
commit
0b85199db4
59
.eslintrc
59
.eslintrc
|
@ -1,9 +1,6 @@
|
||||||
{
|
{
|
||||||
"parser": "babel-eslint",
|
"parser": "babel-eslint",
|
||||||
"extends": [
|
"extends": ["airbnb", "plugin:flowtype/recommended"],
|
||||||
"airbnb",
|
|
||||||
"plugin:flowtype/recommended"
|
|
||||||
],
|
|
||||||
"env": {
|
"env": {
|
||||||
"browser": true,
|
"browser": true,
|
||||||
"node": true,
|
"node": true,
|
||||||
|
@ -17,39 +14,33 @@
|
||||||
},
|
},
|
||||||
"rules": {
|
"rules": {
|
||||||
"jsx-quotes": ["error", "prefer-single"],
|
"jsx-quotes": ["error", "prefer-single"],
|
||||||
"import/prefer-default-export": [
|
"import/prefer-default-export": ["off"],
|
||||||
"off"
|
"react/jsx-filename-extension": [1, { "extensions": [".js"] }],
|
||||||
],
|
|
||||||
"react/jsx-filename-extension": [
|
|
||||||
1,
|
|
||||||
{ "extensions": [".js"] }
|
|
||||||
],
|
|
||||||
"jsx-a11y/anchor-is-valid": [
|
"jsx-a11y/anchor-is-valid": [
|
||||||
"error",
|
"error",
|
||||||
{
|
{
|
||||||
"components": [
|
"components": ["Link"],
|
||||||
"Link"
|
"specialLink": ["to", "hrefLeft", "hrefRight"],
|
||||||
],
|
"aspects": ["noHref", "invalidHref", "preferButton"]
|
||||||
"specialLink": [
|
|
||||||
"to",
|
|
||||||
"hrefLeft",
|
|
||||||
"hrefRight"
|
|
||||||
],
|
|
||||||
"aspects": [
|
|
||||||
"noHref",
|
|
||||||
"invalidHref",
|
|
||||||
"preferButton"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"jsx-a11y/no-autofocus": [ 0, {
|
"jsx-a11y/no-autofocus": [
|
||||||
"ignoreNonDOM": true
|
0,
|
||||||
}],
|
{
|
||||||
"max-len": ["error", {
|
"ignoreNonDOM": true
|
||||||
"ignoreUrls": true,
|
}
|
||||||
"ignoreComments": true,
|
],
|
||||||
"ignoreStrings": true,
|
"max-len": [
|
||||||
"ignorePattern": "<p[^>]*>.*?</p>"
|
"error",
|
||||||
}]
|
{
|
||||||
|
"code": 120,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"ignoreUrls": true,
|
||||||
|
"ignoreComments": true,
|
||||||
|
"ignoreStrings": true,
|
||||||
|
"ignorePattern": "<p[^>]*>.*?</p>",
|
||||||
|
"ignoreTrailingComments": true
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import uuidv4 from 'uuid/v4';
|
|
||||||
import { ADD_TODO } from '../constants/actions';
|
|
||||||
import { getTimestamp } from '../utils/timestamp';
|
|
||||||
|
|
||||||
export const addTodo = (text: string) => ({
|
|
||||||
type: ADD_TODO,
|
|
||||||
payload: {
|
|
||||||
text,
|
|
||||||
id: uuidv4(),
|
|
||||||
editing: false,
|
|
||||||
createdAt: getTimestamp(),
|
|
||||||
},
|
|
||||||
});
|
|
|
@ -1,8 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import { CANCEL_UPDATE_TODO } from '../constants/actions';
|
|
||||||
|
|
||||||
export const cancelUpdateTodo = (id: string) => ({
|
|
||||||
type: CANCEL_UPDATE_TODO,
|
|
||||||
payload: { id },
|
|
||||||
});
|
|
|
@ -1,8 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import { DELETE_TODO } from '../constants/actions';
|
|
||||||
|
|
||||||
export const deleteTodo = (id: string) => ({
|
|
||||||
type: DELETE_TODO,
|
|
||||||
payload: { id },
|
|
||||||
});
|
|
|
@ -1,8 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import { TOGGLE_EDIT_TODO } from '../constants/actions';
|
|
||||||
|
|
||||||
export const toggleEdit = (id: string) => ({
|
|
||||||
type: TOGGLE_EDIT_TODO,
|
|
||||||
payload: { id },
|
|
||||||
});
|
|
|
@ -1,11 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import { UPDATE_TODO } from '../constants/actions';
|
|
||||||
|
|
||||||
export const updateTodo = (id: string, text: string) => ({
|
|
||||||
type: UPDATE_TODO,
|
|
||||||
payload: {
|
|
||||||
text,
|
|
||||||
id,
|
|
||||||
},
|
|
||||||
});
|
|
|
@ -3,7 +3,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Provider } from 'react-redux';
|
import { Provider } from 'react-redux';
|
||||||
import { ConnectedRouter } from 'connected-react-router';
|
import { ConnectedRouter } from 'connected-react-router';
|
||||||
import { configureStore, history } from './store/configure';
|
import { configureStore, history } from './redux/create';
|
||||||
import { Router } from './router/container';
|
import { Router } from './router/container';
|
||||||
|
|
||||||
const store = configureStore({});
|
const store = configureStore({});
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
export const ADD_TODO = 'ADD_TODO';
|
|
||||||
export const DELETE_TODO = 'DELETE_TODO';
|
|
||||||
export const UPDATE_TODO = 'UPDATE_TODO';
|
|
||||||
export const TOGGLE_EDIT_TODO = 'TOGGLE_EDIT_TODO';
|
|
||||||
export const CANCEL_UPDATE_TODO = 'CANCEL_UPDATE_TODO';
|
|
|
@ -2,11 +2,10 @@
|
||||||
|
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import TodoView from '../views/todo';
|
import TodoView from '../views/todo';
|
||||||
import { addTodo } from '../actions/add-todo';
|
import {
|
||||||
import { deleteTodo } from '../actions/delete-todo';
|
addTodo, deleteTodo, toggleEdit, updateTodo, cancelUpdateTodo,
|
||||||
import { toggleEdit } from '../actions/toggle-edit-todo';
|
} from '../redux/modules/todo';
|
||||||
import { updateTodo } from '../actions/update-todo';
|
|
||||||
import { cancelUpdateTodo } from '../actions/cancel-update-todo';
|
|
||||||
import type { AppState } from '../types/app-state';
|
import type { AppState } from '../types/app-state';
|
||||||
import type { Dispatch } from '../types/redux';
|
import type { Dispatch } from '../types/redux';
|
||||||
|
|
||||||
|
|
|
@ -1,53 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import {
|
|
||||||
ADD_TODO,
|
|
||||||
DELETE_TODO,
|
|
||||||
UPDATE_TODO,
|
|
||||||
CANCEL_UPDATE_TODO,
|
|
||||||
TOGGLE_EDIT_TODO,
|
|
||||||
} from '../constants/actions';
|
|
||||||
import type { TodoType } from '../types/todo';
|
|
||||||
import type { Action } from '../types/redux';
|
|
||||||
|
|
||||||
const initialState = [];
|
|
||||||
|
|
||||||
export default (state: Array<TodoType> = initialState, action: Action) => {
|
|
||||||
switch (action.type) {
|
|
||||||
case ADD_TODO:
|
|
||||||
return [
|
|
||||||
...state,
|
|
||||||
action.payload,
|
|
||||||
];
|
|
||||||
case DELETE_TODO:
|
|
||||||
// $FlowFixMe
|
|
||||||
return state.filter((todo: Object) => todo.id !== action.payload.id);
|
|
||||||
case TOGGLE_EDIT_TODO: {
|
|
||||||
const { id } = action.payload;
|
|
||||||
const todos = [...state];
|
|
||||||
const index = todos.map(todo => todo.id).indexOf(id);
|
|
||||||
todos[index].editing = true;
|
|
||||||
|
|
||||||
return todos;
|
|
||||||
}
|
|
||||||
case UPDATE_TODO: {
|
|
||||||
const { id, text } = action.payload;
|
|
||||||
const todos = [...state];
|
|
||||||
const index = todos.map(todo => todo.id).indexOf(id);
|
|
||||||
todos[index].text = text;
|
|
||||||
todos[index].editing = false;
|
|
||||||
|
|
||||||
return todos;
|
|
||||||
}
|
|
||||||
case CANCEL_UPDATE_TODO: {
|
|
||||||
const { id } = action.payload;
|
|
||||||
const todos = [...state];
|
|
||||||
const index = todos.map(todo => todo.id).indexOf(id);
|
|
||||||
todos[index].editing = false;
|
|
||||||
|
|
||||||
return todos;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
};
|
|
|
@ -0,0 +1,22 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import { createStore, applyMiddleware, compose } from 'redux';
|
||||||
|
import { routerMiddleware } from 'connected-react-router';
|
||||||
|
import { createBrowserHistory } from 'history';
|
||||||
|
import thunk from 'redux-thunk';
|
||||||
|
import { createRootReducer } from './modules/reducer';
|
||||||
|
|
||||||
|
export const history = createBrowserHistory();
|
||||||
|
|
||||||
|
const shouldEnableDevTools = (process.env.NODE_ENV !== 'production' || process.env.NODE_ENV !== 'staging') && window.devToolsExtension;
|
||||||
|
|
||||||
|
export const configureStore = (initialState: Object) => {
|
||||||
|
const middleware = applyMiddleware(thunk, routerMiddleware(history));
|
||||||
|
|
||||||
|
const enhancer = compose(
|
||||||
|
middleware,
|
||||||
|
shouldEnableDevTools ? window.devToolsExtension() : f => f,
|
||||||
|
);
|
||||||
|
|
||||||
|
return createStore(createRootReducer(history), initialState, enhancer);
|
||||||
|
};
|
|
@ -2,9 +2,11 @@
|
||||||
|
|
||||||
import { combineReducers } from 'redux';
|
import { combineReducers } from 'redux';
|
||||||
import { connectRouter } from 'connected-react-router';
|
import { connectRouter } from 'connected-react-router';
|
||||||
|
import type { History } from 'react-router-dom';
|
||||||
|
|
||||||
import todoReducer from './todo';
|
import todoReducer from './todo';
|
||||||
|
|
||||||
export const createRootReducer = (history: Object) => combineReducers({
|
export const createRootReducer = (history: History) => combineReducers({
|
||||||
todos: todoReducer,
|
todos: todoReducer,
|
||||||
router: connectRouter(history),
|
router: connectRouter(history),
|
||||||
});
|
});
|
|
@ -0,0 +1,78 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import UUID from 'uuid/v4';
|
||||||
|
|
||||||
|
import { getTimestamp } from '../../utils/timestamp';
|
||||||
|
|
||||||
|
import type { Action } from '../../types/redux';
|
||||||
|
import type { TodoType } from '../../types/todo';
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
export const ADD_TODO = 'ADD_TODO';
|
||||||
|
export const DELETE_TODO = 'DELETE_TODO';
|
||||||
|
export const UPDATE_TODO = 'UPDATE_TODO';
|
||||||
|
export const TOGGLE_EDIT_TODO = 'TOGGLE_EDIT_TODO';
|
||||||
|
export const CANCEL_UPDATE_TODO = 'CANCEL_UPDATE_TODO';
|
||||||
|
|
||||||
|
// Actions Creators
|
||||||
|
export const addTodo = (text: string) => ({
|
||||||
|
type: ADD_TODO,
|
||||||
|
payload: {
|
||||||
|
text,
|
||||||
|
id: UUID(),
|
||||||
|
editing: false,
|
||||||
|
createdAt: getTimestamp(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const cancelUpdateTodo = (id: string) => ({
|
||||||
|
type: CANCEL_UPDATE_TODO,
|
||||||
|
payload: { id },
|
||||||
|
});
|
||||||
|
|
||||||
|
export const deleteTodo = (id: string) => ({
|
||||||
|
type: DELETE_TODO,
|
||||||
|
payload: { id },
|
||||||
|
});
|
||||||
|
|
||||||
|
export const toggleEdit = (id: string) => ({
|
||||||
|
type: TOGGLE_EDIT_TODO,
|
||||||
|
payload: { id },
|
||||||
|
});
|
||||||
|
|
||||||
|
export const updateTodo = (id: string, text: string) => ({
|
||||||
|
type: UPDATE_TODO,
|
||||||
|
payload: {
|
||||||
|
text,
|
||||||
|
id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initial State
|
||||||
|
const initialState = [];
|
||||||
|
|
||||||
|
// Reducers
|
||||||
|
export default (state: Array<TodoType> = initialState, action: Action): Array<TodoType> => {
|
||||||
|
switch (action.type) {
|
||||||
|
case ADD_TODO:
|
||||||
|
return [...state, action.payload];
|
||||||
|
case DELETE_TODO:
|
||||||
|
return state.filter((todo: TodoType) => todo.id !== action.payload.id);
|
||||||
|
case TOGGLE_EDIT_TODO: {
|
||||||
|
const { id } = action.payload;
|
||||||
|
return state.map(todo => (todo.id === id ? { ...todo, editing: true } : todo));
|
||||||
|
}
|
||||||
|
case UPDATE_TODO: {
|
||||||
|
const { id, text } = action.payload;
|
||||||
|
return state.map(todo => (todo.id === id ? { ...todo, editing: false, text } : todo));
|
||||||
|
}
|
||||||
|
case CANCEL_UPDATE_TODO: {
|
||||||
|
const { id } = action.payload;
|
||||||
|
return state.map(todo => (todo.id === id ? { ...todo, editing: false } : todo));
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// SideEffects
|
|
@ -1,35 +0,0 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import { createStore, applyMiddleware, compose } from 'redux';
|
|
||||||
import { routerMiddleware } from 'connected-react-router';
|
|
||||||
import { createBrowserHistory } from 'history';
|
|
||||||
import thunk from 'redux-thunk';
|
|
||||||
import { createRootReducer } from '../reducers';
|
|
||||||
|
|
||||||
export const history = createBrowserHistory();
|
|
||||||
|
|
||||||
export const configureStore = (initialState: Object) => {
|
|
||||||
let enhancer;
|
|
||||||
const middleware = applyMiddleware(
|
|
||||||
thunk,
|
|
||||||
routerMiddleware(history),
|
|
||||||
);
|
|
||||||
|
|
||||||
if (
|
|
||||||
process.env.NODE_ENV !== 'production'
|
|
||||||
|| process.env.NODE_ENV !== 'staging'
|
|
||||||
) {
|
|
||||||
enhancer = compose(
|
|
||||||
middleware,
|
|
||||||
window.devToolsExtension ? window.devToolsExtension() : f => f,
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
enhancer = compose(middleware);
|
|
||||||
}
|
|
||||||
|
|
||||||
return createStore(
|
|
||||||
createRootReducer(history),
|
|
||||||
initialState,
|
|
||||||
enhancer,
|
|
||||||
);
|
|
||||||
};
|
|
|
@ -105,7 +105,10 @@
|
||||||
"./node_modules/**/*"
|
"./node_modules/**/*"
|
||||||
],
|
],
|
||||||
"linux": {
|
"linux": {
|
||||||
"icon": "./build/icons/png"
|
"icon": "./build/icons/png",
|
||||||
|
"target": [
|
||||||
|
"deb"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"mac": {
|
"mac": {
|
||||||
"category": "public.app-category.productivity",
|
"category": "public.app-category.productivity",
|
||||||
|
|
Loading…
Reference in New Issue