Merge pull request #149 from Developer-DAO/fix/hydration-on-lessons-page

Squash React hydration errors on Lessons index page and Pomodoro timer

Author: briangershon

components/PomodoroTimer.tsx

@@ -12,7 +12,7 @@ import {
   PopoverArrow,
   useMediaQuery,
 } from '@chakra-ui/react'
-import { ReactElement, useReducer } from 'react'
+import { ReactElement, useEffect, useReducer, useState } from 'react'
 import { FaGraduationCap } from 'react-icons/fa'
 import { IoTimerOutline } from 'react-icons/io5'
 import {
@@ -137,13 +137,26 @@ export const PomodoroTimer = (props: any) => {
   const { isRunning, status, timeRemaining } = state
 
   const { variant, ...rest } = props
-  const [isBigScreen] = useMediaQuery('(min-width: 62em)')
-  const maxPopoverWidth = isBigScreen ? '14rem' : '11rem'
+  const [isBigScreenMediaQuery] = useMediaQuery('(min-width: 62em)')
+  const [isBigScreen, setIsBigScreen] = useState(false)
+  const [maxPopoverWidth, setMaxPopoverWidth] = useState('14rem')
+
+  useEffect(() => {
+    setIsBigScreen(isBigScreenMediaQuery)
+  }, [isBigScreenMediaQuery])
+
+  useEffect(() => {
+    setMaxPopoverWidth(isBigScreen ? '14rem' : '11rem')
+  }, [isBigScreen])
 
   const timerStyle = useStyleConfig('PomodoroTimer', { variant })
   const iconStyle = useStyleConfig('PomodoroIcon', { variant })
 
-  const getButton = (data: TimerEventData, idx: number) => {
+  const getButton = (
+    data: TimerEventData,
+    idx: number,
+    isBigScreen: boolean,
+  ) => {
     return data.eventIcon ? (
       isBigScreen ? (
         <Button
@@ -194,7 +207,7 @@ export const PomodoroTimer = (props: any) => {
             {status ? <Status>{status}</Status> : <Status>&nbsp;</Status>}
             <TimeRemaining time={time} />
             <ButtonGroup variant="pomodoroControl" size="sm" gap="0" isAttached>
-              {events.map((e, idx) => getButton(e, idx))}
+              {events.map((e, idx) => getButton(e, idx, isBigScreen))}
             </ButtonGroup>
           </Stack>
         </PopoverContent>

pages/lessons/index.tsx

@@ -1,21 +1,29 @@
-import { Flex, Stack, Heading } from '@chakra-ui/react'
+import { Flex, Stack, Heading, Box } from '@chakra-ui/react'
 import fs from 'fs'
 import path from 'path'
 import matter from 'gray-matter'
 import { ContentBanner } from '../../components/ContentBanner'
 
+interface Lesson {
+  path: string
+  frontMatter: any
+  slug: string
+}
+
 interface LessonProps {
-  lessons: {
-    path: string
-    frontMatter: any
-    slug: string
-  }[]
+  lessons: Lesson[]
 }
 
-const Lessons: React.FC<LessonProps> = ({ lessons }) => {
-  const result = lessons.reduce((acc: any, curr: any) => {
-    if (!acc[curr.path]) acc[curr.path] = []
+interface LessonTrackMap {
+  [key: string]: Lesson[]
+}
 
+const Lessons: React.FC<LessonProps> = ({ lessons }: { lessons: Lesson[] }) => {
+  const result = lessons.reduce((acc: LessonTrackMap, curr) => {
+    if (!acc[curr.path]) {
+      // initial an array of lessons for a given track
+      acc[curr.path] = []
+    }
     acc[curr.path].push(curr)
     return acc
   }, {})
@@ -25,16 +33,22 @@ const Lessons: React.FC<LessonProps> = ({ lessons }) => {
       <Flex as="main" py={5} px={[4, 10, 16]} direction="column" minH="90vh">
         <Stack spacing={5} direction="column">
           <>
-            {Object.entries(result).map((track: any) => {
+            {Object.entries(result).map((track, idx: number) => {
+              const trackName = track[0].toUpperCase()
+              const lessons = track[1]
               return (
-                <>
+                <Box key={idx}>
                   <Heading size="lg" color="yellow.300">
-                    {track[0].toUpperCase()}
+                    {trackName}
                   </Heading>
-                  {track[1].map((lesson: any, idx: number) => {
-                    return <ContentBanner key={idx} lesson={lesson} idx={idx} />
+                  {lessons.map((lesson: Lesson, idx: number) => {
+                    return (
+                      <Box marginTop="4" key={idx}>
+                        <ContentBanner lesson={lesson} idx={idx} />
+                      </Box>
+                    )
                   })}
-                </>
+                </Box>
               )
             })}
           </>
@@ -48,7 +62,7 @@ export default Lessons
 
 export const getStaticProps = async () => {
   const directories = fs.readdirSync(path.join('lessons'))
-  const lessons: object[] = []
+  const lessons: Lesson[] = []
   directories.reverse().map((filename) => {
     fs.readdirSync(path.join('lessons', filename)).map((file) => {
       const markdownWithMeta = fs.readFileSync(