From 04bee8d201fb2fb94fca4ca1c6e10a2bf5de0b44 Mon Sep 17 00:00:00 2001
From: Evgeniy Nagalskiy <evgeniy.nagalskiy@gmail.com>
Date: Tue, 19 Jan 2021 13:32:31 +0200
Subject: [PATCH 1/6] done

---
 src/components/app/header.tsx | 12 ++++++------
 src/pages/lessons/[slug].tsx  | 10 +++++-----
 src/utils/breakpoints.ts      | 28 +++++++++++++---------------
 3 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/components/app/header.tsx b/src/components/app/header.tsx
index 25611a08e..121ff2845 100644
--- a/src/components/app/header.tsx
+++ b/src/components/app/header.tsx
@@ -6,7 +6,7 @@ import {useViewer} from 'context/viewer-context'
 import {track} from 'utils/analytics'
 import {isEmpty} from 'lodash'
 import Feedback from 'components/feedback-input'
-import useBreakpoint from 'utils/breakpoints'
+import breakpoints from 'utils/breakpoints'
 import {useRouter} from 'next/router'
 
 const ACCOUNT_LINK_ENABLED =
@@ -15,12 +15,12 @@ const ACCOUNT_LINK_ENABLED =
 const Header: FunctionComponent = () => {
   const router = useRouter()
   const {viewer, loading} = useViewer()
-  const {sm} = useBreakpoint()
+  const {isMinSM} = breakpoints()
   const [isOpen, setOpen] = React.useState<boolean>(false)
 
   React.useEffect(() => {
-    !sm ? setOpen(sm) : setOpen(false)
-  }, [sm, router])
+    !isMinSM ? setOpen(isMinSM) : setOpen(false)
+  }, [isMinSM, router])
 
   const Navigation: FunctionComponent<{
     className?: string
@@ -142,8 +142,8 @@ const Header: FunctionComponent = () => {
               </a>
             </Link>
           </div>
-          {!sm && <Navigation />}
-          {sm && !loading && (
+          {isMinSM && <Navigation />}
+          {!isMinSM && !loading && (
             <button
               onClick={() => setOpen(!isOpen)}
               aria-labelledby="menubutton"
diff --git a/src/pages/lessons/[slug].tsx b/src/pages/lessons/[slug].tsx
index 13b7fc86c..2802df196 100644
--- a/src/pages/lessons/[slug].tsx
+++ b/src/pages/lessons/[slug].tsx
@@ -36,7 +36,7 @@ import {track} from 'utils/analytics'
 import Eggo from 'components/icons/eggo'
 import Image from 'next/image'
 import cookieUtil from 'utils/cookies'
-import useBreakpoint from 'utils/breakpoints'
+import breakpoints from 'utils/breakpoints'
 import Share from 'components/share'
 import LessonDownload from 'components/pages/lessons/lesson-download'
 import {useNextForCollection} from 'hooks/use-next-up-data'
@@ -124,7 +124,7 @@ const Lesson: FunctionComponent<LessonProps> = ({initialLesson}) => {
   const {viewer} = useViewer()
   const {setPlayerPrefs, playbackRate, defaultView} = useEggheadPlayerPrefs()
 
-  const {md} = useBreakpoint()
+  const {isMinMD} = breakpoints()
 
   const {height} = useWindowSize()
   const CONTENT_OFFSET = height < 450 ? 30 : 120
@@ -677,9 +677,9 @@ const Lesson: FunctionComponent<LessonProps> = ({initialLesson}) => {
                         </div>
                       </div>
                     )}
-                    {!md && <Tags tags={collectionTags} lesson={lesson} />}
+                    {!isMinMD && <Tags tags={collectionTags} lesson={lesson} />}
                   </div>
-                  {md && <Tags tags={collectionTags} lesson={lesson} />}
+                  {isMinMD && <Tags tags={collectionTags} lesson={lesson} />}
                   <div className="flex items-center space-x-8">
                     <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2">
                       <Share
@@ -732,7 +732,7 @@ const Lesson: FunctionComponent<LessonProps> = ({initialLesson}) => {
                   </Markdown>
                 )}
               </div>
-              {md && (
+              {isMinMD && (
                 <>
                   <Course course={collection} currentLessonSlug={lesson.slug} />
 
diff --git a/src/utils/breakpoints.ts b/src/utils/breakpoints.ts
index ca6e1f53b..adc47118a 100644
--- a/src/utils/breakpoints.ts
+++ b/src/utils/breakpoints.ts
@@ -20,20 +20,18 @@ export const bpMaxSM = `@media (max-width: ${bp.md - 1}px)`
 export const bpMaxMD = `@media (max-width: ${bp.lg - 1}px)`
 export const bpMaxLG = `@media (max-width: ${bp.xl - 1}px)`
 
-const useBreakpoints = createBreakpoint(bp)
-
-const useBreakpoint = () => {
-  const breakpoint = useBreakpoints()
-
-  const xs = breakpoint == 'xs'
-  const sm = breakpoint == 'sm' || xs
-  const md = breakpoint == 'md' || sm
-  const lg = breakpoint == 'lg' || md
-  const xl = breakpoint == 'xl' || lg
-  const xl2 = breakpoint == '2xl' || xl
-  const xl3 = breakpoint == '3xl' || xl2
-
-  return {xs, sm, md, lg, xl, xl2, xl3}
+const getBreakpoint = createBreakpoint(bp)
+
+const breakpoints = () => {
+  const breakpoint = getBreakpoint()
+
+  const isMin3XL = breakpoint === '3xl'
+  const isMin2XL = breakpoint === '2xl' || isMin3XL
+  const isMinXL = breakpoint === 'xl' || isMin2XL
+  const isMinLG = breakpoint === 'lg' || isMinXL
+  const isMinMD = breakpoint === 'md' || isMinLG
+  const isMinSM = breakpoint === 'sm' || isMinMD
+  return {isMinSM, isMinMD, isMinLG, isMinXL, isMin2XL, isMin3XL}
 }
 
-export default useBreakpoint
+export default breakpoints

From 04f36910ae830a9d47f73a9d5620699086cac095 Mon Sep 17 00:00:00 2001
From: Evgeniy Nagalskiy <evgeniy.nagalskiy@gmail.com>
Date: Tue, 19 Jan 2021 13:57:51 +0200
Subject: [PATCH 2/6] fix condition

---
 src/components/app/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/app/header.tsx b/src/components/app/header.tsx
index 121ff2845..367d3835c 100644
--- a/src/components/app/header.tsx
+++ b/src/components/app/header.tsx
@@ -19,7 +19,7 @@ const Header: FunctionComponent = () => {
   const [isOpen, setOpen] = React.useState<boolean>(false)
 
   React.useEffect(() => {
-    !isMinSM ? setOpen(isMinSM) : setOpen(false)
+    isMinSM ? setOpen(false) : setOpen(true)
   }, [isMinSM, router])
 
   const Navigation: FunctionComponent<{

From 071b2bc653fa58411a6cbc8010a048927d873e8d Mon Sep 17 00:00:00 2001
From: Evgeniy Nagalskiy <evgeniy.nagalskiy@gmail.com>
Date: Tue, 19 Jan 2021 14:00:21 +0200
Subject: [PATCH 3/6] fix condition

---
 src/components/app/header.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/app/header.tsx b/src/components/app/header.tsx
index 367d3835c..a74021a89 100644
--- a/src/components/app/header.tsx
+++ b/src/components/app/header.tsx
@@ -19,7 +19,9 @@ const Header: FunctionComponent = () => {
   const [isOpen, setOpen] = React.useState<boolean>(false)
 
   React.useEffect(() => {
-    isMinSM ? setOpen(false) : setOpen(true)
+    if (isMinSM) {
+      setOpen(false)
+    }
   }, [isMinSM, router])
 
   const Navigation: FunctionComponent<{

From 10d555c304a0828589688ab86c08e2e2ad9c46f2 Mon Sep 17 00:00:00 2001
From: Evgeniy Nagalskiy <evgeniy.nagalskiy@gmail.com>
Date: Wed, 20 Jan 2021 16:44:38 +0200
Subject: [PATCH 4/6] refactoring

---
 src/utils/breakpoints.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/utils/breakpoints.ts b/src/utils/breakpoints.ts
index adc47118a..022505eeb 100644
--- a/src/utils/breakpoints.ts
+++ b/src/utils/breakpoints.ts
@@ -1,3 +1,4 @@
+import {includes} from 'lodash'
 import {createBreakpoint} from 'react-use'
 
 const bp: any = {
@@ -24,14 +25,12 @@ const getBreakpoint = createBreakpoint(bp)
 
 const breakpoints = () => {
   const breakpoint = getBreakpoint()
-
-  const isMin3XL = breakpoint === '3xl'
-  const isMin2XL = breakpoint === '2xl' || isMin3XL
-  const isMinXL = breakpoint === 'xl' || isMin2XL
-  const isMinLG = breakpoint === 'lg' || isMinXL
-  const isMinMD = breakpoint === 'md' || isMinLG
-  const isMinSM = breakpoint === 'sm' || isMinMD
-  return {isMinSM, isMinMD, isMinLG, isMinXL, isMin2XL, isMin3XL}
+  const keys = Object.keys(bp)
+  const foundInd = keys.indexOf(breakpoint)
+  return keys
+    .map((key, ind) => ({['isMin' + key.toUpperCase()]: ind <= foundInd}))
+    .filter((_, ind) => ind)
+    .reduce((acc, cur) => ({...acc, ...cur}), {})
 }
 
 export default breakpoints

From 584bc53b7a45c5609f5d9fded64831a79dd6e14b Mon Sep 17 00:00:00 2001
From: Evgeniy Nagalskiy <evgeniy.nagalskiy@gmail.com>
Date: Wed, 20 Jan 2021 17:29:33 +0200
Subject: [PATCH 5/6] clean up

---
 src/utils/breakpoints.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/utils/breakpoints.ts b/src/utils/breakpoints.ts
index 022505eeb..54c501d68 100644
--- a/src/utils/breakpoints.ts
+++ b/src/utils/breakpoints.ts
@@ -1,4 +1,3 @@
-import {includes} from 'lodash'
 import {createBreakpoint} from 'react-use'
 
 const bp: any = {

From 38144f82604c24fd81f6d9369c91e041c5194262 Mon Sep 17 00:00:00 2001
From: Evgeniy Nagalskiy <evgeniy.nagalskiy@gmail.com>
Date: Wed, 20 Jan 2021 21:14:38 +0200
Subject: [PATCH 6/6] add zero breakpoint

---
 src/utils/breakpoints.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/breakpoints.ts b/src/utils/breakpoints.ts
index 54c501d68..3fa9b324a 100644
--- a/src/utils/breakpoints.ts
+++ b/src/utils/breakpoints.ts
@@ -1,6 +1,7 @@
 import {createBreakpoint} from 'react-use'
 
 const bp: any = {
+  _: 0,
   xs: 375,
   sm: 640,
   md: 768,