♻️ Use hooks in CurrentMediaProvider

Author: exah

src/current-media-provider/index.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types'
-import React, { createContext, Component } from 'react'
+import React, { createContext, useLayoutEffect, useState } from 'react'
 import { withTheme } from 'emotion-theming'
 import { reduceObj } from '@exah/utils'
+import { withDisplayName } from '../utils'
 
 const listenForChanges = (target, fn) => {
   fn()
@@ -14,67 +15,61 @@ const INITIAL_STATE = {
   currentMediaKey: []
 }
 
-const { Provider, Consumer } = createContext(INITIAL_STATE)
+const Context = createContext(INITIAL_STATE)
+const { Provider, Consumer } = Context
 
-class CurrentMediaProvider extends Component {
-  static defaultProps = {
-    theme: {},
-    media: null
+const updateCurrentMedia = (key, mql) => (currentMediaKey) => {
+  if (mql.matches) {
+    return [ ...currentMediaKey, key ]
   }
-  static propTypes = {
-    theme: PropTypes.object.isRequired,
-    media: PropTypes.object
-  }
-  state = INITIAL_STATE
-  listeners = []
-  setCurrentMedia = (key, mediaQueryList) => {
-    this.setState((prevState) => {
-      const nextMediaKey = prevState.currentMediaKey.slice(0)
-
-      if (mediaQueryList.matches) {
-        nextMediaKey.push(key)
-      } else {
-        const index = nextMediaKey.indexOf(key)
-        if (index === -1) return
-        nextMediaKey.splice(index, 1)
-      }
-
-      return {
-        currentMediaKey: nextMediaKey
-      }
-    })
-  }
-  componentDidMount () {
-    const media = this.props.media || this.props.theme.media || {}
 
-    this.listeners = reduceObj((acc, key, query) => {
-      const mediaQueryList = window.matchMedia(query)
-      const listener = () => this.setCurrentMedia(key, mediaQueryList)
+  return currentMediaKey.filter((item) => item !== key)
+}
 
-      return [ ...acc, listenForChanges(mediaQueryList, listener) ]
-    }, [], media)
-  }
-  componentWillUnmount () {
-    this.listeners.map((fn) => fn())
-  }
-  render () {
-    return (
-      <Provider value={this.state}>
-        {this.props.children}
-      </Provider>
-    )
-  }
+function CurrentMediaProvider ({
+  theme = {},
+  media = theme.media || {},
+  children
+}) {
+  const [ currentMediaKey, setCurrentMedia ] = useState(INITIAL_STATE.currentMediaKey)
+
+  useLayoutEffect(() => {
+    const listeners = reduceObj((acc, key, query) => {
+      const mql = window.matchMedia(query)
+      const listener = () => setCurrentMedia(updateCurrentMedia(key, mql))
+
+      return [ ...acc, listenForChanges(mql, listener) ]
+    }, [])(media || {})
+
+    return () => listeners.map((fn) => fn())
+  }, [ media ])
+
+  return (
+    <Provider value={{ currentMediaKey }}>
+      {children}
+    </Provider>
+  )
+}
+
+CurrentMediaProvider.propTypes = {
+  theme: PropTypes.shape({ media: PropTypes.object }),
+  media: PropTypes.object
 }
 
 const CurrentMediaProviderWithTheme = withTheme(CurrentMediaProvider)
 
-const withCurrentMedia = (BaseComponent) => (props) => (
-  <Consumer>
-    {(state) => <BaseComponent {...state} {...props} />}
-  </Consumer>
-)
+const withCurrentMedia = (Comp) => {
+  const HOC = (props) => (
+    <Consumer>
+      {(state) => <Comp {...state} {...props} />}
+    </Consumer>
+  )
+
+  return withDisplayName(`withCurrentMedia(${Comp.displayName || 'Component'})`)(HOC)
+}
 
 export {
+  Context as CurrentMediaContext,
   CurrentMediaProviderWithTheme as CurrentMediaProvider,
   Consumer as CurrentMediaConsumer,
   withCurrentMedia