feat: app breakpoints

package.json

@@ -35,6 +35,7 @@
     "immer": "^7.0.1",
     "lodash.debounce": "^4.0.8",
     "lodash.memoize": "^4.1.2",
+    "lodash.throttle": "^4.1.1",
     "mysql2": "^2.1.0",
     "normalizr": "^3.6.0",
     "passport": "^0.4.1",

src/client/chat--left.jsx

@@ -3,12 +3,14 @@ import './chat--left.scss';
 import classnames from 'classnames';
 import React, {useState} from 'react';
 
+import useBreakpoints from './hooks/useBreakpoints';
 import Bar from './bar';
 
 export default function ChatLeft() {
+  const {desktop} = useBreakpoints();
   const [isOpen, setIsOpen] = useState(false);
-  // const [active, setActive] = useState(0);
   const toggleOpen = () => setIsOpen(!isOpen);
+  const showsAsOpen = isOpen || desktop;
   const buttons = [
     {
       icon: '📜',
@@ -21,12 +23,12 @@ export default function ChatLeft() {
   ];
   return (
     <div
-      className={classnames('left', 'flexed', isOpen ? 'open' : 'closed')}
+      className={classnames('left', 'flexed', showsAsOpen ? 'open' : 'closed')}
     >
       <Bar
         branding={<li className="bar__brandItem">reddichat</li>}
         buttons={buttons}
-        isHorizontal={isOpen}
+        isHorizontal={showsAsOpen}
         onActive={(active, i) => {
           if (i === active || !isOpen) {
             toggleOpen();

src/client/chat--right.jsx

@@ -3,11 +3,14 @@ import './chat--right.scss';
 import classnames from 'classnames';
 import React, {useState} from 'react';
 
+import useBreakpoints from './hooks/useBreakpoints';
 import Bar from './bar';
 
 export default function ChatRight() {
+  const {desktop} = useBreakpoints();
   const [isOpen, setIsOpen] = useState(false);
   const toggleOpen = () => setIsOpen(!isOpen);
+  const showsAsOpen = isOpen || desktop;
   const buttons = [
     {
       icon: '🙃',
@@ -16,11 +19,11 @@ export default function ChatRight() {
   ];
   return (
     <div
-      className={classnames('right', 'flexed', isOpen ? 'open' : 'closed')}
+      className={classnames('right', 'flexed', showsAsOpen ? 'open' : 'closed')}
     >
       <Bar
         buttons={buttons}
-        isHorizontal={isOpen}
+        isHorizontal={showsAsOpen}
         onActive={(active, i) => {
           if (i === active || !isOpen) {
             toggleOpen();

src/client/hooks/useBreakpoints.js

@@ -0,0 +1,32 @@
+import {useState, useEffect} from 'react';
+import throttle from 'lodash.throttle';
+
+const points = {
+  nano: 0,
+  tiny: 320,
+  tablet: 720,
+  desktop: 1280,
+  hd: 1920,
+  uhd: 3840,
+};
+
+const satisfiedPoints = (width) => {
+  const keys = Object.keys(points);
+  const satisfied = {};
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    satisfied[key] = width >= points[key];
+  }
+  return satisfied;
+};
+
+const useBreakpoints = () => {
+  const [satisfied, setSatisfied] = useState(() => satisfiedPoints(window.innerWidth));
+  useEffect(() => {
+    const onResize = throttle(() => setSatisfied(satisfiedPoints(window.innerWidth)), 100);
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+  return satisfied;
+};
+export default useBreakpoints;

yarn.lock

@@ -5817,7 +5817,7 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.throttle@^4.0.1:
+lodash.throttle@^4.0.1, lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://npm.i12e.cha0s.io/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=