[react-todo@1.0.2] created auxiliary files for configuration, saved i…

…nfo using local storage

package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-todo",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "homepage": "http://beraliv.github.io/react-todo",
   "dependencies": {
     "classnames": "^2.2.5",
+    "node-uuid": "^1.4.8",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",

src/configureStore.js

@@ -0,0 +1,28 @@
+import { createStore } from 'redux';
+
+import rootReducer from './js/reducers'
+
+import { loadState, saveState } from './js/helpers/local-storage';
+import throttle from './js/helpers/throttle';
+
+const configureStore = () => {
+  const persistedState = loadState();
+
+  let store = createStore(
+    rootReducer,
+    persistedState,
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+  );
+
+  store.subscribe(throttle(() =>{
+    saveState({
+      todos: store.getState().todos
+    });
+  }));
+
+  return store;
+};
+
+
+
+export default configureStore;

src/index.js

@@ -1,24 +1,16 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Provider } from 'react-redux';
-import { createStore } from 'redux';
-
-import App from './js/components/App';
-import rootReducer from './js/reducers'
 
 import registerServiceWorker from './registerServiceWorker';
+import configureStore from './configureStore';
 
+import Root from './js/components';
 import './index.css';
 
-let store = createStore(
-  rootReducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
+const store = configureStore();
 
 render(
-  <Provider store={store}>
-    <App />
-  </Provider>,
+  <Root store={store}/>,
   document.getElementById('root')
 );
 

src/js/actionCreators/todos.js

@@ -1,4 +1,4 @@
-let todoId = 0;
+import { v4 } from 'node-uuid';
 
 export const ADD_TODO = 'ADD_TODO';
 export const TOGGLE_TODO = 'TOGGLE_TODO';
@@ -10,7 +10,7 @@ export const TOGGLE_ALL_TODO = 'TOGGLE_ALL_TODO';
 
 export const addTodo = title => ({
   type: ADD_TODO,
-  id: todoId++,
+  id: v4(),
   title
 });
 

src/js/components/App.js

@@ -14,4 +14,4 @@ const App = () => (
   </div>
 );
 
-export default App
+export default App;

src/js/components/TodoList.js

@@ -18,7 +18,7 @@ const TodoList = ({ todos, actions: { toggleTodo, removeTodo } }) => (
 TodoList.propTypes = {
   todos: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.number.isRequired,
+      id: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
       isCompleted: PropTypes.bool.isRequired
     }).isRequired

src/js/components/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import App from './App';
+
+const Root = ({ store }) => (
+  <Provider store={store}>
+    <App/>
+  </Provider>
+);
+
+export default Root;

src/js/helpers/local-storage.js

@@ -0,0 +1,20 @@
+export const loadState = () => {
+  try {
+    const persistedState = localStorage.getItem('state');
+    if (persistedState === null) {
+      return undefined;
+    }
+    return JSON.parse(persistedState);
+  } catch (error) {
+    return undefined;
+  }
+}
+
+export const saveState = (state) => {
+  try {
+    const persistedState = JSON.stringify(state);
+    localStorage.setItem('state', persistedState);
+  } catch (error) {
+    // TODO: add logging
+  }
+};

src/js/helpers/throttle.js

@@ -0,0 +1,19 @@
+// 400 ms
+const DEFAULT_THROTTLE_TIME = 400;
+
+const throttle = (fn, time = DEFAULT_THROTTLE_TIME) => {
+  let running = false;
+  return (...args) => {
+    if (running) {
+      return Promise.reject();
+    }
+
+    running = true;
+    setTimeout(() => {
+      running = false;
+    });
+    return Promise.resolve().then(fn(...args));
+  };
+};
+
+export default throttle;