add steps

mitodl · Feb 7, 2024 · 0b1e3da · 0b1e3da
1 parent 421d4fc
commit 0b1e3da
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 135 deletions.
diff --git a/frontend/public/package.json b/frontend/public/package.json
@@ -107,6 +107,7 @@
     "redux-query": "3.3.1",
     "redux-query-interface-superagent": "3.3.1",
     "redux-query-react": "3.3.1",
+    "redux-thunk": "^3.1.0",
     "reselect": "4.1.5",
     "sanctuary": "0.13.2",
     "sass": "1.49.11",

diff --git a/frontend/public/src/containers/pages/CatalogPage.js b/frontend/public/src/containers/pages/CatalogPage.js
@@ -88,36 +88,32 @@ export class CatalogPage extends React.Component<Props> {
     super(props)
   }
 
-  componentDidMount() {}
-
+  async componentDidMount() {
+    const { forceRequest } = this.props
+    await forceRequest()
+  }
   /**
    * Updates the filteredCourses state variable
    * once coursesIsLoading is false..  Adds an observer to detect when
    * the learner has scrolled to the bottom of the visible catalog items.
    * Updates the filteredDepartments state variable once departmentsIsLoading
    * is false.
    */
-  componentDidUpdate = prevProps => {
+  async componentDidUpdate(prevProps, prevState)  {
     const {
       courses,
-      coursesCount,
       coursesIsLoading,
-      departmentsCount,
-      departmentsIsLoading,
       programsIsLoading,
       programs,
-      programsCount
     } = this.props
-    if (this.state.moreCoursesToRetrieve) {
-      if (prevProps.coursesIsLoading !== coursesIsLoading) {
-        if (coursesCount <= PAGE_SIZE) {
-          this.setState({ moreCoursesToRetrieve: false })
-        } else if (!this.state.isLoadingMoreItems) {
-          this.loadMoreCourses().then(() => {
-            console.log("loaded more courses")
-          })
-        }
+    console.log("gets here")
+    if (!coursesIsLoading) {
+      if (this.props.courses.length < this.props.coursesCount) {
+        const response = await getNextCoursePage(this.state.courseQueryPage + 1)
+        console.log(response)
+        this.setState({courseQueryPage: this.state.courseQueryPage + 1})
       }
+      this.setState({ isLoadingMoreItems: false })
     }
     if (!coursesIsLoading && !this.state.isLoadingMoreItems) {
       if (!this.state.filterCoursesCalled) {
@@ -130,17 +126,6 @@ export class CatalogPage extends React.Component<Props> {
         this.setState({ filteredCourses: filteredCourses })
       }
     }
-    if (this.state.moreDepartmentsToRetrieve) {
-      if (prevProps.departmentsIsLoading !== departmentsIsLoading) {
-        if (departmentsCount <= PAGE_SIZE) {
-          this.setState({ moreDepartmentsToRetrieve: false })
-        } else if (!this.state.isLoadingMoreItems) {
-          this.loadMoreDepartments().then(() => {
-            console.log("loaded more departments")
-          })
-        }
-      }
-    }
     if (
       !this.props.departmentsIsLoading &&
       !this.state.filterDepartmentsCalled
@@ -152,17 +137,6 @@ export class CatalogPage extends React.Component<Props> {
         )
       })
     }
-    if (this.state.moreProgramsToRetrieve) {
-      if (prevProps.programsIsLoading !== programsIsLoading) {
-        if (programsCount <= PAGE_SIZE) {
-          this.setState({ moreProgramsToRetrieve: false })
-        } else if (!this.state.isLoadingMoreItems) {
-          this.loadMorePrograms().then(() => {
-            console.log("loaded more programs")
-          })
-        }
-      }
-    }
     if (!programsIsLoading && !this.state.filterProgramsCalled) {
       this.setState({ filterProgramsCalled: true })
       this.setState({ allProgramsRetrieved: programs })
@@ -435,99 +409,8 @@ export class CatalogPage extends React.Component<Props> {
     )
   }
 
-  /**
-   * Loads more items into the catalog before render to ensure we have all available.
-   */
-  async loadMoreCourses() {
-    console.log("1", this.props.coursesIsLoading)
-    this.setState({ isLoadingMoreItems: true })
-    this.setState({ courseQueryPage: this.state.courseQueryPage + 1 })
-    console.log("2", this.props.coursesIsLoading)
-    const response = await getNextCoursePage(this.state.courseQueryPage)
-    console.log("3", this.props.coursesIsLoading)
-    if (!this.props.coursesIsLoading) {
-      console.log("4", this.props.coursesIsLoading)
-      if (response.body.results) {
-        const filteredCourses = this.filteredCoursesBasedOnCourseRunCriteria(
-          this.state.selectedDepartment,
-          [...this.state.allCoursesRetrieved, ...response.body.results]
-        )
-        this.setState({ filteredCourses: filteredCourses })
-        this.setState({
-          allCoursesRetrieved: [
-            ...this.state.allCoursesRetrieved,
-            ...response.body.results
-          ]
-        })
-        if (!response.body.next) {
-          this.setState({ moreCoursesToRetrieve: false })
-        }
-      }
-      this.setState({ isLoadingMoreItems: false })
-    }
-  }
-
-  async loadMoreDepartments() {
-    if (this.props.departments.length <= PAGE_SIZE) {
-      this.setState({ moreDepartmentsToRetrieve: false })
-    } else {
-      while (this.state.moreDepartmentsToRetrieve) {
-        this.setState({ isLoadingMoreItems: true })
-        this.setState({
-          departmentQueryPage: this.state.departmentQueryPage + 1
-        })
-        const response = await getNextDepartmentPage(
-          this.state.departmentQueryPage
-        )
-        this.setState({ isLoadingMoreItems: false })
-        if (response.body.results) {
-          const filteredDepartments = this.filterDepartmentsByTabName(
-            this.state.tabSelected
-          )
-          this.setState({ filteredDepartments: filteredDepartments })
-          this.setState({
-            allDepartmentsRetrieved: [
-              ...this.state.allDepartmentsRetrieved,
-              ...response.body.results
-            ]
-          })
-          if (response.body.next === null) {
-            this.setState({ moreDepartmentsToRetrieve: false })
-          }
-        }
-      }
-    }
-  }
-
   async loadMorePrograms() {
-    if (this.props.programsCount <= PAGE_SIZE) {
-      this.setState({ moreProgramsToRetrieve: false })
-    } else {
-      while (this.state.moreProgramsToRetrieve) {
-        this.setState({ isLoadingMoreItems: true })
-        this.setState({ programQueryPage: this.state.programQueryPage + 1 })
-        const [response] = await Promise.all([
-          getNextProgramPage(this.state.programQueryPage)
-        ])
-        this.setState({ isLoadingMoreItems: false })
-        if (response.body.results) {
-          const filteredPrograms = this.filteredProgramsByDepartmentAndCriteria(
-            this.state.selectedDepartment,
-            [...this.state.allProgramsRetrieved, ...response.body.results]
-          )
-          this.setState({ filteredPrograms: filteredPrograms })
-          this.setState({
-            allProgramsRetrieved: [
-              ...this.state.allProgramsRetrieved,
-              ...response.body.results
-            ]
-          })
-          if (response.body.next === null) {
-            this.setState({ moreProgramsToRetrieve: false })
-          }
-        }
-      }
-    }
+
   }
 
   /**
@@ -762,8 +645,9 @@ const mapPropsToConfig = () => [
 ]
 
 const mapDispatchToProps = {
-  getNextCoursePage:  getNextCoursePage,
-  getNextProgramPage: getNextProgramPage
+  getNextCoursePage:     getNextCoursePage,
+  getNextProgramPage:    getNextProgramPage,
+  getNextDepartmentPage: getNextDepartmentPage,
 }
 
 const mapStateToProps = createStructuredSelector({

diff --git a/frontend/public/src/lib/queries/catalogCourses.js b/frontend/public/src/lib/queries/catalogCourses.js
@@ -26,6 +26,7 @@ export const coursesQuery = page => ({
     courses: json
   }),
   update: {
-    courses: nextState
-  }
+    courses: (prev, next) => ({...prev, ...next})
+  },
+  force: true,
 })
diff --git a/frontend/public/src/store/configureStore.js b/frontend/public/src/store/configureStore.js
@@ -1,5 +1,6 @@
 import { compose, createStore, applyMiddleware } from "redux"
 import { createLogger } from "redux-logger"
+import { thunk } from "redux-thunk"
 import { queryMiddleware } from "redux-query"
 
 import { makeRequest } from "./network_interface"
@@ -9,7 +10,7 @@ import { getEntities, getQueries } from "../lib/queries/util"
 // Setup middleware
 export default function configureStore(initialState: Object) {
   const COMMON_MIDDLEWARE = [
-    queryMiddleware(makeRequest, getQueries, getEntities)
+    queryMiddleware(makeRequest, getQueries, getEntities), thunk
   ]
 
   // Store factory configuration

diff --git a/yarn.lock b/yarn.lock
@@ -13971,6 +13971,7 @@ __metadata:
     redux-query: 3.3.1
     redux-query-interface-superagent: 3.3.1
     redux-query-react: 3.3.1
+    redux-thunk: ^3.1.0
     reselect: 4.1.5
     sanctuary: 0.13.2
     sass: 1.49.11
@@ -18103,6 +18104,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"redux-thunk@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "redux-thunk@npm:3.1.0"
+  peerDependencies:
+    redux: ^5.0.0
+  checksum: bea96f8233975aad4c9f24ca1ffd08ac7ec91eaefc26e7ba9935544dc55d7f09ba2aa726676dab53dc79d0c91e8071f9729cddfea927f4c41839757d2ade0f50
+  languageName: node
+  linkType: hard
+
 "redux@npm:4.0.0":
   version: 4.0.0
   resolution: "redux@npm:4.0.0"