Refactored breakpoints

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'
 import {useTheme} from 'next-themes'
 
@@ -16,12 +16,14 @@ 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])
+    if (isMinSM) {
+      setOpen(false)
+    }
+  }, [isMinSM, router])
 
   const Navigation: FunctionComponent<{
     className?: string
@@ -160,8 +162,8 @@ const Header: FunctionComponent = () => {
               </a>
             </Link>
           </div>
-          {!sm && <Navigation />}
-          {sm && !loading && (
+          {isMinSM && <Navigation />}
+          {!isMinSM && !loading && (
             <button
               onClick={() => setOpen(!isOpen)}
               aria-labelledby="menubutton"

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} />
 

src/utils/breakpoints.ts

@@ -1,6 +1,7 @@
 import {createBreakpoint} from 'react-use'
 
 const bp: any = {
+  _: 0,
   xs: 375,
   sm: 640,
   md: 768,
@@ -20,20 +21,16 @@ 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 getBreakpoint = 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 breakpoints = () => {
+  const breakpoint = getBreakpoint()
+  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 useBreakpoint
+export default breakpoints