feat: one hour of progress

components/addCard.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useDispatch } from 'react-redux'
+
+import { withRedux } from '../lib/redux';
+
+const addCard = ({ columnIndex }) => {
+  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>;
+}
+
+export default withRedux(addCard);

components/card.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children }) => {
+  return <div className='card'>
+    I am a card
+  </div>
+}

components/column.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { withRedux } from '../lib/redux';
+
+import Card from './card';
+import AddCard from './addCard';
+
+const column = ({ name, index, headerColor }) => {
+  const cards = useSelector(state => state.columns[index].cards);
+
+  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} />
+    <style jsx>{`
+      .column {
+        margin: 12.5px;
+      }
+    `}</style>
+  </div>
+}
+
+export default withRedux(column);