Refactor local storage

packages/components/src/MDXDeck.js

@@ -12,6 +12,7 @@ import Grid from './Grid'
 import Print from './Print'
 import GoogleFonts from './GoogleFonts'
 import Catch from './Catch'
+import Storage from './Storage'
 
 const NORMAL = 'normal'
 const PRESENTER = 'presenter'
@@ -26,9 +27,6 @@ const modes = {
   PRINT,
 }
 
-const STORAGE_INDEX = 'mdx-slide'
-const STORAGE_STEP = 'mdx-step'
-
 const keys = {
   right: 39,
   left: 37,
@@ -174,22 +172,6 @@ export class MDXDeck extends React.Component {
     this.setState({ slides })
   }
 
-  handleStorageChange = e => {
-    const { key } = e
-    switch (key) {
-      case STORAGE_INDEX:
-        const index = parseInt(e.newValue, 10)
-        this.goto(index)
-        break
-      case STORAGE_STEP:
-        const step = parseInt(e.newValue, 10)
-        this.setState({ step })
-        break
-      default:
-        break
-    }
-  }
-
   getMode = () => {
     const query = querystring.parse(
       globalHistory.location.search.replace(/^\?/, '')
@@ -199,21 +181,16 @@ export class MDXDeck extends React.Component {
 
   componentDidMount() {
     document.body.addEventListener('keydown', this.handleKeyDown)
-    window.addEventListener('storage', this.handleStorageChange)
     this.getMode()
   }
 
   componentWillUnmount() {
     document.body.removeEventListener('keydown', this.handleKeyDown)
-    window.removeEventListener('storage', this.handleStorageChange)
   }
 
   componentDidUpdate() {
-    const index = this.getIndex()
-    const { step, mode } = this.state
+    const { mode } = this.state
     const { pathname, search } = globalHistory.location
-    localStorage.setItem(STORAGE_INDEX, index)
-    localStorage.setItem(STORAGE_STEP, step)
 
     if (mode !== NORMAL && mode !== PRINT) {
       const query = '?' + querystring.stringify({ mode })
@@ -274,6 +251,7 @@ export class MDXDeck extends React.Component {
       <Provider {...this.props} {...this.state} mode={mode} index={index}>
         {style}
         <Catch>
+          <Storage {...this.state} goto={this.goto} index={index} />
           <GoogleFonts />
           <Wrapper {...this.props} {...this.state} modes={modes} index={index}>
             <Swipeable onSwipedRight={this.previous} onSwipedLeft={this.next}>

packages/components/src/Storage.js

@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+
+const STORAGE_INDEX = 'mdx-slide'
+const STORAGE_STEP = 'mdx-step'
+
+export const useLocalStorage = (handler, args = []) => {
+  useEffect(() => {
+    window.addEventListener('storage', handler)
+    return () => {
+      window.removeEventListener('storage', handler)
+    }
+  }, [...args])
+}
+
+export const useSetStorage = (key, value) => {
+  useEffect(() => {
+    localStorage.setItem(key, value)
+  }, [key, value])
+}
+
+const handleStorageChange = ({ goto, update }) => e => {
+  const { key } = e
+  switch (key) {
+    case STORAGE_INDEX:
+      const index = parseInt(e.newValue, 10)
+      goto(index)
+      break
+    case STORAGE_STEP:
+      const step = parseInt(e.newValue, 10)
+      update({ step })
+      break
+    default:
+      break
+  }
+}
+
+export default ({ goto, update, index, step }) => {
+  const handler = handleStorageChange({ goto, update })
+  useLocalStorage(handler)
+  useSetStorage(STORAGE_INDEX, index)
+  useSetStorage(STORAGE_STEP, step)
+
+  return false
+}