feat: render only visible thumbnails on landing page

this closes #196

src/component/home/home.component.jsx

@@ -2,14 +2,21 @@ import React, { useEffect, useState, Fragment } from 'react';
 import HeaderTitle from '../_dumb/header-title';
 import { db } from '../data/firebase';
 import LectureSlider from '../lecture-slider';
+import { debounce } from 'lodash'
 
 const Home = () => {
+  const [pageY, setPageY] = useState(0)
   const [data, updateData] = useState({
     courseList: [],
     lectureList: [],
     sectionList: [],
   });
 
+  const handleScroll = debounce(() => {
+    console.log('handleScroll()')
+    setPageY(window.pageYOffset || document.documentElement.scrollTop)
+  }, 500)
+
   useEffect(() => {
     (async () => {
       const lectureSnapshot = await db
@@ -46,13 +53,20 @@ const Home = () => {
       updateData({ lectureList, courseList, sectionList });
       // console.log(lectureList.map(x => x.course))
     })();
+
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
   }, []);
 
   const renderLectureSlider = courseId => {
     const { youtubePlaylistId } = data.courseList.find(course => course.id === courseId)
     const sectionList = data.sectionList.filter(section => section.course.id === courseId)
     const lectureList = data.lectureList.filter(lecture => lecture.course.id === courseId)
-    const lectureSliderPropList = { lectureList, courseId, youtubePlaylistId, sectionList }
+    const lectureSliderPropList = { lectureList, courseId, youtubePlaylistId, sectionList, pageY }
+
     return <LectureSlider {...lectureSliderPropList} />;
   };
 

src/component/lecture-info/lecture-info.component.jsx

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import HeaderTitle from '../_dumb/header-title';
 import ResponsiveThumbnail from '../_dumb/responsive-thumbnail';
 import { StyledLectureInfo } from './lecture-info.style';
 
-const LectureInfo = ({ title, id, description, imagePath, youtubeVideoId, sectionOrder }) => {
-  const getImagePath = () =>
-    imagePath ? imagePath : `http://img.youtube.com/vi/${youtubeVideoId}/0.jpg`;
+const LectureInfo = ({ title, id, description, imagePath, youtubeVideoId, sectionOrder, pageY }) => {
+  const [newImagePath, setNewImagePath] = useState('')
   const getYoutubePath = () => `/video/${youtubeVideoId}`;
 
   const headerTitlePropList = {
@@ -15,10 +14,19 @@ const LectureInfo = ({ title, id, description, imagePath, youtubeVideoId, sectio
     link: getYoutubePath()
   };
 
+  const element = useRef()
+
+  useEffect(() => {
+    // console.log(pageY)
+    if (pageY + window.innerHeight - element.current.getBoundingClientRect().top > 0 && !imagePath) {
+      setNewImagePath(imagePath ? imagePath : `http://img.youtube.com/vi/${youtubeVideoId}/0.jpg`)
+    }
+  }, [pageY])
+
   return (
-    <StyledLectureInfo sectionOrder={sectionOrder}>
+    <StyledLectureInfo sectionOrder={sectionOrder} ref={element}>
       <div>
-        <ResponsiveThumbnail imagePath={getImagePath()} />
+        <ResponsiveThumbnail imagePath={newImagePath} />
       </div>
       <HeaderTitle {...headerTitlePropList} />
     </StyledLectureInfo>

src/component/lecture-slider/lecture-slider.component.jsx

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import LectureInfo from '../lecture-info';
 import { StyledLectureSlider } from './lecture-slider.style';
 
-const LectureSlider = ({ lectureList, courseId, youtubePlaylistId, sectionList }) => {
+const LectureSlider = ({ lectureList, courseId, youtubePlaylistId, sectionList, pageY }) => {
   return (
     <StyledLectureSlider>
       {sectionList.map(section => {
@@ -16,6 +16,7 @@ const LectureSlider = ({ lectureList, courseId, youtubePlaylistId, sectionList }
                   <LectureInfo
                     key={id}
                     {...lecture}
+                    pageY={pageY}
                     sectionOrder={section.order}
                     youtubePlaylistId={youtubePlaylistId}
                   />