feat: sync redux to localstorage

components/addCard.js

@@ -1,19 +1,38 @@
 import React from 'react';
 import { useDispatch } from 'react-redux'
 
-import { withRedux } from '../lib/redux';
+import { withRedux } from 'lib/redux';
 
-const addCard = ({ columnIndex }) => {
+const addCard = ({ column }) => {
   const dispatch = useDispatch();
-  return <a onClick={
-    () => {
-      const userText = window.prompt('New card text:', '(no text)');
-      dispatch({ type: 'ADD_CARD', payload: {
-        column: columnIndex,
-        text: userText
-      } });
-    }
-  }>+ Add a card</a>;
+  return <>
+    <a className='addCard' onClick={
+      () => {
+        const userText = window.prompt('New card text:', '');
+        if (userText !== null) {
+          dispatch({ type: 'ADD_CARD', payload: {
+            column,
+            text: userText
+          }});
+        }
+      }
+    }><span>+</span> Add a card</a>
+    <style jsx>{`
+      .addCard {
+        margin-top: 12px;
+        cursor: pointer;
+        opacity: 0.4;
+        display: block;
+        padding: 0 8px;
+      }
+      .addCard:hover {
+        opacity: 1;
+      }
+      span {
+        font-size: 1.5em;
+      }
+    `}</style>
+  </>;
 }
 
 export default withRedux(addCard);