chore: refactor BreakpointsProvider to use hooks (#199)

packages/design-system/atoms/breakpoints/BreakpointProvider.tsx

@@ -1,69 +1,57 @@
 import * as React from 'react';
 import { mediaQueryDefs } from './Breakpoints';
-import { BreakpointContext, ScreenSize } from './Context';
+import { BreakpointContext, BreakpointProps, ScreenSize } from './Context';
 
-const resetScreen: ScreenSize = {
+export const BreakpointsProvider = (props: { children: React.ReactNode }) => {
-  onSmallScreen: false,
+  const [screenSize, setScreenSize] = React.useState<ScreenSize>({
-  onTablet: false,
     onDesktop: false,
-};
+    onTablet: false,
+    onSmallScreen: true, // Always true to be a viable "failback"
+  });
 
-export class BreakpointsProvider extends React.Component<{}, ScreenSize> {
+  React.useEffect(() => {
-  public state = {
+    const mediaQueries = {
-    ...resetScreen,
-    onSmallScreen: true,
-  };
-
-  private mediaQueries: { [key in keyof ScreenSize]: MediaQueryList } = {
       onSmallScreen: window.matchMedia(
         mediaQueryDefs.onSmallScreen.replace('@media screen and', '')
       ),
-    onTablet: window.matchMedia(mediaQueryDefs.onTablet.replace('@media screen and', '')),
+      onTablet: window.matchMedia(
+        mediaQueryDefs.onTablet.replace('@media screen and', '')
+      ),
       onDesktop: window.matchMedia(
         mediaQueryDefs.onDesktop.replace('@media screen and', '')
       ),
     };
 
-  componentDidMount() {
+    const updateScreenSize = () => {
-    Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
+      setScreenSize({
-      mediaQuery.addEventListener('change', this.handleMediaEvent)
+        onDesktop: mediaQueries.onDesktop.matches,
-    );
+        onTablet: mediaQueries.onTablet.matches,
-
+        onSmallScreen: true, // Always true to be a viable "failback"
-    this.handleMediaEvent();
-    setTimeout(() => this.handleMediaEvent(), 0);
-    setTimeout(() => this.handleMediaEvent(), 10);
-  }
-
-  componentWillUnmount() {
-    Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
-      mediaQuery.removeEventListener('change', this.handleMediaEvent)
-    );
-  }
-
-  handleMediaEvent = () => {
-    this.setState({
-      ...resetScreen,
-      ...this.calculateScreen(),
       });
     };
 
-  calculateScreen = () => {
+    updateScreenSize();
-    if (this.mediaQueries.onDesktop.matches) {
+    setTimeout(() => updateScreenSize(), 0);
-      return { onDesktop: true };
+    setTimeout(() => updateScreenSize(), 10);
-    }
 
-    if (this.mediaQueries.onTablet.matches) {
+    mediaQueries.onDesktop.addEventListener('change', updateScreenSize);
-      return { onTablet: true };
+    mediaQueries.onTablet.addEventListener('change', updateScreenSize);
-    }
+    mediaQueries.onSmallScreen.addEventListener('change', updateScreenSize);
 
-    return { onSmallScreen: true };
+    return () => {
+      mediaQueries.onDesktop.removeEventListener('change', updateScreenSize);
+      mediaQueries.onTablet.removeEventListener('change', updateScreenSize);
+      mediaQueries.onSmallScreen.removeEventListener('change', updateScreenSize);
+    };
+  }, []);
+
+  const breakpointsValue: BreakpointProps = {
+    screenSize,
   };
 
-  render() {
   return (
-      <BreakpointContext.Provider value={{ screenSize: { ...this.state } }}>
+    <BreakpointContext.Provider value={breakpointsValue}>
-        {this.props.children}
+      {props.children}
     </BreakpointContext.Provider>
   );
-  }
+};
-}

packages/web/src/index.tsx

@@ -1,3 +1,4 @@
+import { BreakpointsProvider } from '@roleypoly/design-system/atoms/breakpoints';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppRouter } from './app-router/AppRouter';
@@ -24,6 +25,7 @@ ReactDOM.render(
         SessionContextProvider,
         RecentGuildsProvider,
         AppShellPropsProvider,
+        BreakpointsProvider,
       ]}
     >
       <AppRouter />