feat: sync redux to localstorage

pages/index.js

@@ -1,44 +1,59 @@
-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 React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { withRedux } from 'lib/redux';
 
-import Column from '../components/column';
-import Card from '../components/card';
+import Column from 'components/column';
+
+const rehydrateStore = () => {
+  if (localStorage.getItem('triplebyte-react-spa') === null) {
+    return null;
+  } else {
+    return JSON.parse(localStorage.getItem('triplebyte-react-spa'));
+  }
+};
 
 const IndexPage = () => {
+  const [loaded, setLoaded] = useState(false);
+  const dispatch = useDispatch();
   const columns = useSelector(state => state.columns, shallowEqual);
+
+  useEffect(() => {
+    dispatch({ type: 'RESET', payload: rehydrateStore() });
+    setLoaded(true);
+  }, []);
+  if (!loaded) return null;
   return (
     <main className='App'>
-      {columns.map((c, index) => <Column index={index} key={`column${index}`} name={c.name} headerColor={c.headerColor} />)}
+      {columns.map((c, index, array) => (
+        <Column
+          id={c.id}
+          key={`column-${c.id}`}
+          name={c.name}
+          headerColor={c.headerColor}
+        />
+      ))}
       <style jsx>{`
-      .App {
-        display: flex;
-        flex-direction: row;
-        padding: 12.5px;
-      }
+        .App {
+          display: flex;
+          flex-direction: row;
+          padding: 12.5px;
+        }
       `}</style>
       <style global jsx>{`
+        *, ::before, ::after {
+          box-sizing: inherit;
+        }
         body {
+          box-sizing: border-box;
           background: #ECEEEE;
+          margin: 0;
+          padding: 0;
+          font-family: sans-serif;
+          color: #000C;
         }
       `}</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(),
-  // })
-
-  return {}
-}
-
-export default withRedux(IndexPage)
+export default withRedux(IndexPage);