From d08a396412c3c5551cb9f3387cec32acc223da23 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Tue, 14 Jul 2020 04:31:23 -0500
Subject: [PATCH] feat: app breakpoints

---
 package.json                       |  1 +
 src/client/chat--left.jsx          |  8 +++++---
 src/client/chat--right.jsx         |  7 +++++--
 src/client/hooks/useBreakpoints.js | 32 ++++++++++++++++++++++++++++++
 yarn.lock                          |  2 +-
 5 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 src/client/hooks/useBreakpoints.js

diff --git a/package.json b/package.json
index 5ad3e1d..8067637 100644
--- a/package.json
+++ b/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",
diff --git a/src/client/chat--left.jsx b/src/client/chat--left.jsx
index d69994d..4980e76 100644
--- a/src/client/chat--left.jsx
+++ b/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();
diff --git a/src/client/chat--right.jsx b/src/client/chat--right.jsx
index 42a5119..728e455 100644
--- a/src/client/chat--right.jsx
+++ b/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();
diff --git a/src/client/hooks/useBreakpoints.js b/src/client/hooks/useBreakpoints.js
new file mode 100644
index 0000000..9ae0023
--- /dev/null
+++ b/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;
diff --git a/yarn.lock b/yarn.lock
index 695fad1..e658bfe 100644
--- a/yarn.lock
+++ b/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=