feat: sync redux to localstorage

components/column.js

@@ -1,23 +1,64 @@
 import React from 'react';
-import { useSelector, shallowEqual } from 'react-redux';
-import { withRedux } from '../lib/redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { withRedux } from 'lib/redux';
 
-import Card from './card';
-import AddCard from './addCard';
+import Card from 'components/card';
+import AddCard from 'components/addCard';
 
-const column = ({ name, index, headerColor }) => {
-  const cards = useSelector(state => state.columns[index].cards);
+const column = ({ name, id, headerColor }) => {
+  const dispatch = useDispatch();
+  const cards = useSelector(state => state.cards.filter(
+    c => (c.column === id)
+  ), shallowEqual);
+  const colIds = useSelector(state => state.columns.map(c => c.id));
+  const myIndex = colIds.findIndex(x => x === id);
+  const neighbors = [null, ...colIds, null];
+  const prevColId = neighbors[myIndex+1-1];
+  const nextColId = neighbors[myIndex+1+1];
 
-  return <div className='column'>
-    <h1 className='card-title' style={{ color: 'white', backgroundColor: headerColor }}>{name}</h1>
-    { cards.map((c, cardIndex) => <Card key={`card-${index}-${cardIndex}`} />) }
-    <AddCard index={index} />
+  const moverFactory = (id, column) => {
+    if (column) {
+      return () => {
+        dispatch({
+          type: 'MOVE_CARD',
+          payload: {
+            id,
+            column
+          }
+        });
+      }
+    } else {
+      return null;
+    }
+  }
+
+  return <section className='column'>
+    <h2
+      className='card-title'
+      style={{ color: '#FFFD', backgroundColor: headerColor }}
+    >{name}</h2>
+    { cards.map(({ text, id }) => <Card
+      key={id}
+      text={text}
+      moveLeft={moverFactory(id, prevColId)}
+      moveRight={moverFactory(id, nextColId)}
+    />) }
+    <AddCard column={id} />
     <style jsx>{`
       .column {
+        flex-basis: 0;
+        flex-grow: 1;
         margin: 12.5px;
       }
+      h2 {
+        padding: 8px;
+        line-height: 14px;
+        margin-bottom: 6px;
+        font-size: inherit;
+        text-align: center;
+      }
     `}</style>
-  </div>
+  </section>
 }
 
 export default withRedux(column);