Add key to fix hydration, which then needed replacing <></> with real tags.

Add TypeScript interfaces to replace 'any'.

Author: briangershon

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(