Merge pull request #127 from sparcs-kaist/feat/infinite-scroll-useInview

feat: implemented react intersection observer

Author: yaong12

package.json

@@ -37,16 +37,17 @@
     "react-ga": "^3.1.2",
     "react-ga4": "^2.1.0",
     "react-i18next": "^11.7.2",
+    "react-intersection-observer": "^10.0.0",
     "react-markdown": "^7.1.0",
+    "react-notion": "^0.10.0",
     "react-redux": "^7.2.1",
     "react-router": "^6.15.0",
     "react-router-dom": "^6.15.0",
     "react-scrollbars-custom": "^4.0.21",
     "react-slick": "^0.29.0",
     "redux": "^4.0.0",
     "slick-carousel": "^1.8.1",
-    "zabo-embed": "^0.0.7",
-    "react-notion": "^0.10.0"
+    "zabo-embed": "^0.0.7"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.24.1",

src/components/sections/dictionary/courselist/CourseListSection.jsx

@@ -24,6 +24,8 @@ import courseListsShape from '../../../../shapes/state/dictionary/CourseListsSha
 import userShape from '../../../../shapes/model/session/UserShape';
 import courseLastSearchOptionShape from '../../../../shapes/state/dictionary/CourseLastSearchOptionShape';
 
+import { InView } from 'react-intersection-observer';
+
 import {
   getLabelOfValue,
   getDepartmentOptions,
@@ -32,19 +34,30 @@ import {
   getTermOptions,
 } from '../../../../common/searchOptions';
 
-const REFRESH_LIMIT = 20;
+const REFRESH_LIMIT = 10;
 
 class CourseListSection extends Component {
   constructor(props) {
     super(props);
+    this.inViewRef = React.createRef();
   }
 
-  onScrollChange = (e) => {
-    const { scrollTop, scrollHeight, clientHeight } = e;
-
-    if (scrollTop + clientHeight >= scrollHeight) this._addCourseToList();
+  state = {
+    isLoading: false,
+    hasMore: true,
   };
 
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      this.inViewRef?.current &&
+      this.state.hasMore &&
+      prevState.isLoading &&
+      !this.state.isLoading
+    ) {
+      this._tryLoadMore();
+    }
+  }
+
   showSearch = () => {
     const { openSearchDispatch } = this.props;
     openSearchDispatch();
@@ -98,6 +111,14 @@ class CourseListSection extends Component {
     return lists[selectedListCode].courses;
   };
 
+  _tryLoadMore = () => {
+    const { isLoading, hasMore } = this.state;
+
+    if (isLoading || !hasMore) return;
+
+    this._addCourseToList();
+  };
+
   _addCourseToList = () => {
     const {
       setListCoursesDispatch,
@@ -106,23 +127,28 @@ class CourseListSection extends Component {
       setLastSearchOptionDispatch,
     } = this.props;
 
+    this.setState({ isLoading: true });
+
     const courses = this._getCourses(selectedListCode);
     const offset = (lastSearchOption?.offset ?? 0) + REFRESH_LIMIT;
 
     const option = {
       ...lastSearchOption,
       offset,
-      limit: offset + REFRESH_LIMIT,
+      limit: REFRESH_LIMIT,
     };
 
     const beforeRequest = () => {
       setLastSearchOptionDispatch(option);
     };
 
     const afterResponse = async (newCourses) => {
-      if (newCourses.length > 0) {
-        await setListCoursesDispatch(CourseListCode.SEARCH, [...courses, ...newCourses]);
+      await setListCoursesDispatch(CourseListCode.SEARCH, [...courses, ...newCourses]);
+      if (newCourses.length < REFRESH_LIMIT) {
+        this.setState({ hasMore: false, isLoading: false });
+        return;
       }
+      this.setState({ isLoading: false });
     };
 
     performSearchCourses(option, option.limit, beforeRequest, afterResponse);
@@ -202,7 +228,7 @@ class CourseListSection extends Component {
         );
       }
       return (
-        <Scroller key={selectedListCode} onScroll={this.onScrollChange}>
+        <Scroller key={selectedListCode}>
           <div className={classNames('block-list')}>
             {courses.map((c, idx) => (
               <CourseBlock
@@ -215,6 +241,17 @@ class CourseListSection extends Component {
                 onClick={this.focusCourseWithClick}
               />
             ))}
+
+            <InView
+              threshold={0}
+              onChange={(inView) => {
+                this.inViewRef.current = inView;
+                if (inView) {
+                  this._tryLoadMore();
+                }
+              }}>
+              {({ ref }) => <div ref={ref}></div>}
+            </InView>
           </div>
         </Scroller>
       );

src/components/sections/dictionary/courselist/CourseSearchSubSection.jsx

@@ -48,7 +48,7 @@ class CourseSearchSubSection extends Component {
   };
 
   searchStart = () => {
-    const LIMIT = 20;
+    const LIMIT = 10;
 
     const { t } = this.props;
     const { selectedTypes, selectedDepartments, selectedLevels, selectedTerms, keyword } =

src/components/sections/timetable/lecturelist/LectureListSection.jsx

@@ -62,25 +62,36 @@ import {
 import LectureGroupBlockRow from '../../../blocks/LectureGroupBlockRow';
 import { TIMETABLE_START_HOUR } from '../../../../common/constants';
 
+import { InView } from 'react-intersection-observer';
+
 const REFRESH_LIMIT = 50;
 
 class LectureListSection extends Component {
   constructor(props) {
     super(props);
     this.arrowRef = React.createRef();
+    this.inViewRef = React.createRef();
   }
 
-  onScrollChange = (e) => {
-    const { scrollTop, scrollHeight, clientHeight } = e;
-
-    if (scrollTop + clientHeight >= scrollHeight) this._addLectureGroups();
+  state = {
+    isLoading: false,
+    hasMore: true,
   };
 
   componentDidMount() {
     window.addEventListener('resize', this.selectWithArrow);
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
+    if (
+      this.inViewRef?.current &&
+      this.state.hasMore &&
+      prevState.isLoading &&
+      !this.state.isLoading
+    ) {
+      this._tryLoadMore();
+    }
+
     const { lists, selectedListCode, lectureFocus, isLectureListOpenOnMobile } = this.props;
 
     if (selectedListCode !== prevProps.selectedListCode) {
@@ -297,6 +308,14 @@ class LectureListSection extends Component {
     clearLectureFocusDispatch();
   };
 
+  _tryLoadMore = () => {
+    const { isLoading, hasMore } = this.state;
+
+    if (isLoading || !hasMore) return;
+
+    this._addLectureGroups();
+  };
+
   _getLectureGroups = (selectedListCode, lists) => {
     if (!lists[selectedListCode]) {
       return null;
@@ -314,6 +333,8 @@ class LectureListSection extends Component {
       lists,
     } = this.props;
 
+    this.setState({ isLoading: true });
+
     const lectures = this._getLectureGroups(LectureListCode.SEARCH, lists);
 
     let offset = 0;
@@ -357,6 +378,12 @@ class LectureListSection extends Component {
           spreadedLectures = spreadedLectures.concat(response.data);
 
           setListLecturesDispatch(LectureListCode.SEARCH, spreadedLectures);
+
+          if (response.data.length < REFRESH_LIMIT) {
+            this.setState({ hasMore: false, isLoading: false });
+            return;
+          }
+          this.setState({ isLoading: false });
         }
       })
       .catch((error) => {});
@@ -448,7 +475,6 @@ class LectureListSection extends Component {
         <Scroller
           onScroll={(e) => {
             this.selectWithArrow();
-            this.onScrollChange(e);
           }}
           key={selectedListCode}>
           <div className={classNames('block-list')}>
@@ -480,6 +506,16 @@ class LectureListSection extends Component {
                 ))}
               </LectureGroupBlock>
             ))}
+            <InView
+              threshold={0}
+              onChange={(inView) => {
+                this.inViewRef.current = inView;
+                if (inView) {
+                  this._tryLoadMore();
+                }
+              }}>
+              {({ ref }) => <div ref={ref}></div>}
+            </InView>
           </div>
         </Scroller>
       );

src/pages/DictionaryPage.jsx

@@ -56,7 +56,7 @@ class DictionaryPage extends Component {
     }
 
     if (startSearchKeyword && startSearchKeyword.toString().trim()) {
-      const LIMIT = 20;
+      const LIMIT = 10;
 
       const option = {
         keyword: startSearchKeyword.toString().trim(),

yarn.lock

@@ -6033,6 +6033,11 @@ react-i18next@^11.7.2:
     "@babel/runtime" "^7.14.5"
     html-parse-stringify "^3.0.1"
 
+react-intersection-observer@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-10.0.0.tgz#77613d4e819dd170fbac4821c126c046aab69978"
+  integrity sha512-JJRgcnFQoVXmbE5+GXr1OS1NDD1gHk0HyfpLcRf0575IbJz+io8yzs4mWVlfaqOQq1FiVjLvuYAdEEcrrCfveg==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"