Merge pull request #114 from sparcs-kaist/rc

Release v3.4.4

Author: happycastle114

package.json

@@ -45,7 +45,8 @@
     "react-slick": "^0.29.0",
     "redux": "^4.0.0",
     "slick-carousel": "^1.8.1",
-    "zabo-embed": "^0.0.7"
+    "zabo-embed": "^0.0.7",
+    "react-notion": "^0.10.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.24.1",

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

@@ -37,13 +37,6 @@ const REFRESH_LIMIT = 10;
 class CourseListSection extends Component {
   constructor(props) {
     super(props);
-    this.offSetRef = React.createRef();
-  }
-
-  componentDidMount() {
-    if (this.offSetRef.current) {
-      this.offSetRef.current.value = REFRESH_LIMIT;
-    }
   }
 
   onScrollChange = (e) => {

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

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import axios from 'axios';
 import ReactGA from 'react-ga4';
 import { range } from 'lodash';
 
@@ -21,9 +22,11 @@ import {
   deleteLectureFromCart,
   setIsLectureListOpenOnMobile,
 } from '../../../../redux/actions/timetable/list';
-import { openSearch } from '../../../../redux/actions/timetable/search';
+import { openSearch, setLastSearchOption } from '../../../../redux/actions/timetable/search';
 import { addLectureToTimetable } from '../../../../redux/actions/timetable/timetable';
 
+import { setListLectures } from '../../../../redux/actions/timetable/list';
+
 import { LectureFocusFrom } from '@/shapes/enum';
 import { LectureListCode } from '@/shapes/enum';
 
@@ -59,12 +62,20 @@ import {
 import LectureGroupBlockRow from '../../../blocks/LectureGroupBlockRow';
 import { TIMETABLE_START_HOUR } from '../../../../common/constants';
 
+const REFRESH_LIMIT = 50;
+
 class LectureListSection extends Component {
   constructor(props) {
     super(props);
     this.arrowRef = React.createRef();
   }
 
+  onScrollChange = (e) => {
+    const { scrollTop, scrollHeight, clientHeight } = e;
+
+    if (scrollTop + clientHeight >= scrollHeight) this._addLectureGroups();
+  };
+
   componentDidMount() {
     window.addEventListener('resize', this.selectWithArrow);
   }
@@ -293,6 +304,64 @@ class LectureListSection extends Component {
     return lists[selectedListCode].lectureGroups;
   };
 
+  _addLectureGroups = async () => {
+    const {
+      lastSearchOption,
+      setLastSearchOption,
+      year,
+      semester,
+      setListLecturesDispatch,
+      lists,
+    } = this.props;
+
+    const lectures = this._getLectureGroups(LectureListCode.SEARCH, lists);
+
+    let offset = 0;
+
+    for (let i = 0; i < lectures.length - 1; i++) {
+      offset += lectures[i].length;
+    }
+
+    const option = {
+      ...lastSearchOption,
+      offset,
+      limit: offset + REFRESH_LIMIT,
+    };
+
+    await axios
+      .get('/api/lectures', {
+        params: {
+          year: year,
+          semester: semester,
+          ...option,
+          order: ['old_code', 'class_no'],
+        },
+        metadata: {
+          gaCategory: 'Timetable',
+          gaVariable: 'POST / List',
+        },
+      })
+      .then((response) => {
+        const newProps = this.props;
+        if (newProps.year !== year || newProps.semester !== semester) {
+          return;
+        }
+        if (response.data.length > 0) {
+          const newLectures = lectures;
+          let spreadedLectures = [];
+
+          for (let i = 0; i < newLectures.length - 1; i++) {
+            spreadedLectures = spreadedLectures.concat(newLectures[i]);
+          }
+
+          spreadedLectures = spreadedLectures.concat(response.data);
+
+          setListLecturesDispatch(LectureListCode.SEARCH, spreadedLectures);
+        }
+      })
+      .catch((error) => {});
+  };
+
   render() {
     const { t } = this.props;
     const { user, lectureFocus, selectedTimetable, selectedListCode, lastSearchOption, lists } =
@@ -376,7 +445,12 @@ class LectureListSection extends Component {
         );
       }
       return (
-        <Scroller onScroll={this.selectWithArrow} key={selectedListCode}>
+        <Scroller
+          onScroll={(e) => {
+            this.selectWithArrow();
+            this.onScrollChange(e);
+          }}
+          key={selectedListCode}>
           <div className={classNames('block-list')}>
             {lectureGroups.map((lg) => (
               <LectureGroupBlock
@@ -467,6 +541,12 @@ const mapDispatchToProps = (dispatch) => ({
   setIsLectureListOpenOnMobileDispatch: (isLectureListOpenOnMobile) => {
     dispatch(setIsLectureListOpenOnMobile(isLectureListOpenOnMobile));
   },
+  setLastSearchOptionDispatch: (lastSearchOption) => {
+    dispatch(setLastSearchOption(lastSearchOption));
+  },
+  setListLecturesDispatch: (code, lectures) => {
+    dispatch(setListLectures(code, lectures));
+  },
 });
 
 LectureListSection.propTypes = {
@@ -485,8 +565,10 @@ LectureListSection.propTypes = {
   clearLectureFocusDispatch: PropTypes.func.isRequired,
   addLectureToTimetableDispatch: PropTypes.func.isRequired,
   addLectureToCartDispatch: PropTypes.func.isRequired,
+  setListLecturesDispatch: PropTypes.func.isRequired,
   deleteLectureFromCartDispatch: PropTypes.func.isRequired,
   setIsLectureListOpenOnMobileDispatch: PropTypes.func.isRequired,
+  setLastSearchOptionDispatch: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(LectureListSection));

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

@@ -55,7 +55,7 @@ class LectureSearchSubSection extends Component {
   };
 
   searchStart = () => {
-    const LIMIT = 300;
+    const LIMIT = 50;
 
     const { t } = this.props;
     const { selectedTypes, selectedDepartments, selectedLevels, keyword } = this.state;
@@ -96,6 +96,8 @@ class LectureSearchSubSection extends Component {
       day: classtimeDay !== null ? classtimeDay : undefined,
       begin: classtimeBegin !== null ? classtimeBegin / 30 - 8 * 2 : undefined,
       end: classtimeEnd !== null ? classtimeEnd / 30 - 8 * 2 : undefined,
+      limit: LIMIT,
+      offset: 0,
     };
 
     this.setState(this.INITIAL_STATE);
@@ -113,7 +115,6 @@ class LectureSearchSubSection extends Component {
           semester: semester,
           ...option,
           order: ['old_code', 'class_no'],
-          limit: LIMIT,
         },
         metadata: {
           gaCategory: 'Timetable',
@@ -125,10 +126,10 @@ class LectureSearchSubSection extends Component {
         if (newProps.year !== year || newProps.semester !== semester) {
           return;
         }
-        if (response.data.length === LIMIT) {
-          // eslint-disable-next-line no-alert
-          alert(t('ui.message.tooManySearchResults', { count: LIMIT }));
-        }
+        // if (response.data.length === LIMIT) {
+        //   // eslint-disable-next-line no-alert
+        //   alert(t('ui.message.tooManySearchResults', { count: LIMIT }));
+        // }
         setListLecturesDispatch(LectureListCode.SEARCH, response.data);
       })
       .catch((error) => {});

src/index.tsx

@@ -38,6 +38,7 @@ import ko from '@/translations/translation.ko.json';
 
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
+import UpdatePage from '@/pages/UpdatePage';
 
 declare global {
   interface Window {
@@ -177,6 +178,7 @@ const router = createBrowserRouter([
       { path: 'error/:message', element: <ErrorPage /> },
       { path: 'login/success', element: <LoginSuccessHandler /> },
       { path: 'developer-login', element: <DeveloperLoginPage /> },
+      { path: 'update', element: <UpdatePage /> },
       { path: '*', element: <Navigate to="/" /> },
     ],
   },

src/pages/UpdatePage.tsx

@@ -0,0 +1,55 @@
+import { NotionRenderer } from 'react-notion';
+
+import { useEffect, useState } from 'react';
+
+import 'react-notion/src/styles.css';
+import 'prismjs/themes/prism-tomorrow.css';
+import { appBoundClassNames as classNames } from '@/common/boundClassNames';
+
+const DEFAULT_PAGE_ID = '23ac25603b0b80f8b343d2324a7e2131';
+const OFFICIAL_SPACE_ID = 'ca8b3bc6-6b17-4a1f-8f57-2dd4b58a84f7';
+
+const UpdatePage = () => {
+  const [blockMap, setBlockMap] = useState(null);
+  const query = new URLSearchParams(window.location.search);
+  const pageId = query.get('pageId') || DEFAULT_PAGE_ID;
+  const [spaceId, setSpaceId] = useState('');
+
+  useEffect(() => {
+    const fetchNotionData = async () => {
+      const res = await fetch(`https://notion-api.splitbee.io/v1/page/${pageId}`);
+      const json = await res.json();
+      Object.keys(json).forEach((key) => {
+        if (json[key].role === 'none') {
+          delete json[key];
+        } else {
+          setSpaceId(json[key].value.space_id);
+        }
+      });
+      setBlockMap(json);
+    };
+    fetchNotionData();
+  }, []);
+  useEffect(() => {
+    if (spaceId !== '' && spaceId !== OFFICIAL_SPACE_ID) {
+      window.location.href = '/update';
+    }
+  }, [spaceId]);
+
+  return (
+    <section className={classNames('content', 'content--no-scroll')}>
+      {blockMap !== null && spaceId === OFFICIAL_SPACE_ID && (
+        <NotionRenderer
+          blockMap={blockMap}
+          fullPage={true}
+          hideHeader={true}
+          mapPageUrl={(pageId) => {
+            return '/update?' + new URLSearchParams({ pageId: pageId });
+          }}
+        />
+      )}
+    </section>
+  );
+};
+
+export default UpdatePage;

yarn.lock

@@ -4202,7 +4202,7 @@ inflight@^1.0.4:
 
 inherits@2:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 inline-style-parser@0.1.1:
@@ -5479,7 +5479,7 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
 
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
-  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
 moment@^2.29.2:
@@ -5639,7 +5639,7 @@ object.values@^1.1.6:
 
 once@^1.3.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
   dependencies:
     wrappy "1"
@@ -5923,6 +5923,11 @@ pretty-format@^29.0.0, pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prismjs@^1.21.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.30.0.tgz#d9709969d9d4e16403f6f348c63553b19f0975a9"
+  integrity sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==
+
 prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz"
@@ -6063,6 +6068,13 @@ react-markdown@^7.1.0:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+react-notion@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/react-notion/-/react-notion-0.10.0.tgz#d30876b681b09d91dc671b04c7f604adb4e2499e"
+  integrity sha512-i5lVAxzSs7GnTpIbKtivPQWxGZiKCO5xmCmMJyn6F91y8X1IIJqnypkK+31F2acb1l1Qd8Yv0ktuvXwz9g49NQ==
+  dependencies:
+    prismjs "^1.21.0"
+
 react-redux@^7.2.1:
   version "7.2.9"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"