feat: one hour of progress

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 {}
 }