feat: sync redux to localstorage

store.js

@@ -1,31 +1,66 @@
-import { createStore, applyMiddleware } from 'redux'
-import { composeWithDevTools } from 'redux-devtools-extension'
+import { compose, createStore, applyMiddleware } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
 
 const initialState = {
   columns: [
-    { name: 'Backlog', headerColor: '#8E6E95', cards: [{}, {}] },
-    { name: 'In Progress', headerColor: '#8E6E95', headerColor: '#39A59C', cards: [{}, {}] },
-    { name: 'Ready for Review', headerColor: '#344759', cards: [{}, {}] },
-    { name: 'Completed', headerColor: '#E8741E', cards: [{}, {}] },
-  ]
-}
+    { name: 'Backlog', headerColor: '#8E6E95', id: 'backlog' },
+    { name: 'In Progress', headerColor: '#8E6E95', headerColor: '#39A59C', id: 'in-progress' },
+    { name: 'Ready for Review', headerColor: '#344759', id: 'ready-for-review' },
+    { name: 'Completed', headerColor: '#E8741E', id: 'completed' },
+  ],
+  cards: [
+  ],
+};
 
 const reducer = (state = initialState, {type, payload}) => {
   switch (type) {
     case 'ADD_CARD':
-      newCards = [...state.columns[action.payload.column].cards, { text: payload.text }];
       return {
         ...state,
+        cards: state.cards.concat(        {
+          id: `${Date.now()}-${Math.random()}`,
+          text: payload.text,
+          column: payload.column,
+        }),
       };
+    case 'MOVE_CARD':
+      const cardIndex = state.cards.findIndex(c => c.id === payload.id);
+      const newCards = state.cards.slice(0);
+      newCards.splice(cardIndex, 1, {
+        ...state.cards[cardIndex],
+        column: payload.column,
+      });
+      return {
+        ...state,
+        cards: newCards,
+      };
+    case 'RESET':
+      if (payload) {
+        return payload;
+      } else {
+        return initialState;
+      }
     default:
       return state
   }
-}
+};
+
+const localStorageMiddleware = ({getState}) => {
+  return (next) => (action) => {
+      const result = next(action);
+      localStorage.setItem('triplebyte-react-spa', JSON.stringify(
+        getState()
+      ));
+      return result;
+  };
+};
 
 export const initializeStore = (preloadedState = initialState) => {
   return createStore(
     reducer,
     preloadedState,
-    composeWithDevTools(applyMiddleware())
+    composeWithDevTools(applyMiddleware(
+      localStorageMiddleware
+    ))
   )
-}
+};