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);

pages/index.js

@@ -1,37 +1,42 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
+import { useSelector, shallowEqual } from 'react-redux'
 import { withRedux } from '../lib/redux'
 import useInterval from '../lib/useInterval'
-import Clock from '../components/clock'
-import Counter from '../components/counter'
+
+import Column from '../components/column';
+import Card from '../components/card';
 
 const IndexPage = () => {
-  // Tick the time every second
-  const dispatch = useDispatch()
-  useInterval(() => {
-    dispatch({
-      type: 'TICK',
-      light: true,
-      lastUpdate: Date.now(),
-    })
-  }, 1000)
+  const columns = useSelector(state => state.columns, shallowEqual);
   return (
-    <>
-      <Clock />
-      <Counter />
-    </>
+    <main className='App'>
+      {columns.map((c, index) => <Column index={index} key={`column${index}`} name={c.name} headerColor={c.headerColor} />)}
+      <style jsx>{`
+      .App {
+        display: flex;
+        flex-direction: row;
+        padding: 12.5px;
+      }
+      `}</style>
+      <style global jsx>{`
+        body {
+          background: #ECEEEE;
+        }
+      `}</style>
+    </main>
   )
 }
 
 IndexPage.getInitialProps = ({ reduxStore }) => {
-  // Tick the time once, so we'll have a
-  // valid time before first render
-  const { dispatch } = reduxStore
-  dispatch({
-    type: 'TICK',
-    light: typeof window === 'object',
-    lastUpdate: Date.now(),
-  })
+  // // Tick the time once, so we'll have a
+  // // valid time before first render
+  // const { dispatch } = reduxStore
+  // dispatch({
+  //   type: 'TICK',
+  //   light: typeof window === 'object',
+  //   lastUpdate: Date.now(),
+  // })
 
   return {}
 }

store.js

@@ -2,34 +2,21 @@ import { createStore, applyMiddleware } from 'redux'
 import { composeWithDevTools } from 'redux-devtools-extension'
 
 const initialState = {
-  lastUpdate: 0,
-  light: false,
-  count: 0,
+  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: [{}, {}] },
+  ]
 }
 
-const reducer = (state = initialState, action) => {
-  switch (action.type) {
-    case 'TICK':
+const reducer = (state = initialState, {type, payload}) => {
+  switch (type) {
+    case 'ADD_CARD':
+      newCards = [...state.columns[action.payload.column].cards, { text: payload.text }];
       return {
         ...state,
-        lastUpdate: action.lastUpdate,
-        light: !!action.light,
-      }
-    case 'INCREMENT':
-      return {
-        ...state,
-        count: state.count + 1,
-      }
-    case 'DECREMENT':
-      return {
-        ...state,
-        count: state.count - 1,
-      }
-    case 'RESET':
-      return {
-        ...state,
-        count: initialState.count,
-      }
+      };
     default:
       return state
   }