Merge pull request #1230 from UniversityOfHelsinkiCS/trunk

Added loading bar to population and course statistics & some bug fixes

cypress/integration/Teachers.js

@@ -58,14 +58,14 @@ describe('Teachers page tests', () => {
   it("Check leaderboad works", () => {
     cy.get('.borderless > :nth-child(2)').click()
     cy.get(':nth-child(1) > .ui > .search').click()
-    cy.contains('2018-19').click()
+    cy.contains('2017-18').click()
     cy.contains("Recalculate this year").click()
     cy.wait(5000)
     cy.reload()
     cy.get(':nth-child(1) > .ui > .search').click()
-    cy.contains('2018-19').click()
+    cy.contains('2017-18').click()
     cy.contains("Passed")
-    cy.contains("Auvinen")
-    cy.contains("Ulfvens")
+    cy.contains("Valtonen")
+    cy.contains("Wahlström")
   })
 })

docker-compose.yml

@@ -152,7 +152,7 @@ services:
       - WAIT_HOSTS=nats:4222
       - NATS_URI=nats://nats:4222
       - OODI_ADDR=https://oodikone.cs.helsinki.fi/oodi
-      - TOKEN=M1kkoVanh4LonkeroM0n5teri
+      - TOKEN=jotaindiibadaabaa
     #container_name: updater_api
 
   updater_writer:

services/backend/oodikone2-backend/src/routes/users.js

@@ -8,11 +8,6 @@ router.get('/', async (req, res) => {
   res.json(results)
 })
 
-router.get('/enabled', async (req, res) => {
-  const results = await userService.findAllEnabled()
-  res.json(results)
-})
-
 router.get('/access_groups', async (req, res) => {
   const result = await userService.getAccessGroups()
   res.json(result)

services/backend/oodikone2-backend/src/services/userService.js

@@ -16,11 +16,6 @@ const findAll = async () => {
   return response.data
 }
 
-const findAllEnabled = async () => {
-  const response = await client.get('/findallenabled')
-  return response.data
-}
-
 const login = async (uid, full_name, hyGroups, affiliations, email) => {
   const response = await client.post('/login', {
     uid, full_name, hyGroups, affiliations, email,
@@ -127,7 +122,6 @@ module.exports = {
   enableElementDetails,
   removeElementDetails,
   findAll,
-  findAllEnabled,
   modifyAccess,
   getAccessGroups,
   getAccessGroupCodesFor,

services/oodikone2-frontend/src/apiConnection/index.js

@@ -78,7 +78,7 @@ export const returnToSelf = async () => {
   await setToken(token)
 }
 
-export const callApi = async (url, method = 'get', data, params, timeout = 0) => {
+export const callApi = async (url, method = 'get', data, params, timeout = 0, progressCallback = null) => {
   let options = { headers: {}, timeout }
   if (isDevEnv) {
     options = devOptions
@@ -87,9 +87,13 @@ export const callApi = async (url, method = 'get', data, params, timeout = 0) =>
     options = testOptions
   }
 
+  const onDownloadProgress = ({ loaded, total }) => {
+    if (progressCallback) progressCallback(Math.round((loaded / total) * 100))
+  }
+
   switch (method) {
     case 'get':
-      return api.get(url, { ...options, params })
+      return api.get(url, { ...options, params, onDownloadProgress })
     case 'post':
       return api.post(url, data, options)
     case 'put':
@@ -109,14 +113,15 @@ export const superLogin = async (uid) => {
   return token
 }
 
-export const callController = (route, prefix, data, method = 'get', query, params) => {
+export const callController = (route, prefix, data, method = 'get', query, params, onProgress = null) => {
   const requestSettings = {
     route,
     method,
     data,
     prefix,
     query,
-    params
+    params,
+    onProgress
   }
   return { type: `${prefix}ATTEMPT`, requestSettings }
 }
@@ -126,10 +131,17 @@ export const handleRequest = store => next => async (action) => {
   const { requestSettings } = action
   if (requestSettings) {
     const {
-      route, method, data, prefix, query, params
+      route, method, data, prefix, query, params, onProgress
     } = requestSettings
     try {
-      const res = await callApi(route, method, data, params)
+      const res = await callApi(
+        route,
+        method,
+        data,
+        params,
+        0,
+        onProgress
+      )
       store.dispatch({ type: `${prefix}SUCCESS`, response: res.data, query })
     } catch (e) {
       // Something failed. Assume it's the token and try again.
@@ -151,7 +163,7 @@ export const handleAuth = store => next => async (action) => {
   next(action)
   const { type, force = false, retryRequestSettings, uid, refresh } = action
   const {
-    route, method, data, prefix, query, params
+    route, method, data, prefix, query, params, onProgress
   } = retryRequestSettings || {}
   if (type === 'LOGIN_SUCCESS' && refresh) window.location.reload()
   if (type === 'LOGIN_ATTEMPT') {
@@ -169,7 +181,7 @@ export const handleAuth = store => next => async (action) => {
       store.dispatch({ type: 'LOGIN_SUCCESS', token, refresh: uid })
       try {
         if (retryRequestSettings) {
-          const res = await callApi(route, method, data, params)
+          const res = await callApi(route, method, data, params, 0, onProgress)
           store.dispatch({ type: `${prefix}SUCCESS`, response: res.data, query })
         }
       } catch (err) {

services/oodikone2-frontend/src/common/index.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import moment from 'moment'
 import jwtDecode from 'jwt-decode'
 import Datetime from 'react-datetime'
@@ -311,3 +311,80 @@ export const flattenStudyrights = (studyrights) => {
   })
   return studyrightcodes
 }
+
+export const useInterval = (callback, delay) => {
+  const savedCallback = useRef()
+  const savedId = useRef()
+
+  const clear = () => {
+    if (savedId.current) {
+      clearInterval(savedId.current)
+    }
+  }
+
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  useEffect(() => {
+    const tick = () => savedCallback.current()
+    clear()
+    if (delay !== null) {
+      savedId.current = setInterval(tick, delay)
+    }
+    return clear
+  }, [delay])
+}
+
+export const useDidMount = () => {
+  const [didMount, setDidMount] = useState(false)
+  useEffect(() => {
+    setDidMount(true)
+  }, [])
+  return didMount
+}
+
+export const useProgress = (loading) => {
+  const didMount = useDidMount()
+  const [progress, setProgress] = useState(100)
+  const [delay, setDelay] = useState(null)
+  const amountToProgress = delay ? Math.ceil(Math.random() * 4) : 0
+
+  useInterval(() => {
+    setProgress(progress + amountToProgress > 50 ?
+      50 :
+      progress + amountToProgress)
+  }, delay)
+
+  useEffect(() => {
+    if (delay && progress >= 50) {
+      setDelay(null)
+    }
+  }, [progress])
+
+  const restartProgress = () => {
+    setProgress(0)
+    setDelay(500)
+  }
+
+  const finishProgress = () => {
+    setDelay(null)
+    setImmediate(() => setProgress(100))
+  }
+
+  useEffect(() => {
+    if (loading) restartProgress()
+    else if (didMount) finishProgress()
+  }, [loading])
+
+  const onProgress = (p) => {
+    if (p > 0) {
+      setProgress(50 + Math.floor(p / 2))
+    }
+  }
+
+  return {
+    progress,
+    onProgress
+  }
+}

services/oodikone2-frontend/src/components/CourseStatistics/SearchForm/index.jsx

@@ -9,7 +9,6 @@ import { clearCourses, findCoursesV2 } from '../../../redux/coursesearch'
 import { getCourseStats, clearCourseStats } from '../../../redux/coursestats'
 import AutoSubmitSearchInput from '../../AutoSubmitSearchInput'
 import CourseTable from '../CourseTable'
-import Progressbar from '../../Progressbar'
 import { getCourseSearchResults } from '../../../selectors/courses'
 import { useSearchHistory } from '../../../common'
 import SearchHistory from '../../SearchHistory'
@@ -57,7 +56,7 @@ const SearchForm = (props) => {
   const fetchStatisticsFromUrlParams = () => {
     const query = parseQueryFromUrl()
     setState({ ...state, ...query, selectedCourses: query.courseCodes })
-    props.getCourseStats(query)
+    props.getCourseStats(query, props.onProgress)
   }
 
   useEffect(() => {
@@ -230,11 +229,14 @@ const SearchForm = (props) => {
         handleSearch={pushQueryToUrl}
         items={searchHistory}
       />
-      {isLoading ? <Progressbar time={100} pending={isLoading} /> : null}
     </React.Fragment>
   )
 }
 
+SearchForm.defaultProps = {
+  onProgress: null
+}
+
 SearchForm.propTypes = {
   findCoursesV2: func.isRequired,
   getSemesters: func.isRequired,
@@ -246,7 +248,8 @@ SearchForm.propTypes = {
   isLoading: bool.isRequired,
   coursesLoading: bool.isRequired,
   history: shape({}).isRequired,
-  location: shape({}).isRequired
+  location: shape({}).isRequired,
+  onProgress: func
 }
 
 const mapStateToProps = (state) => {