Merge pull request #1096 from UniversityOfHelsinkiCS/trunk

only the most epic of loading bars and possibly fixing shit
UniversityOfHelsinkiCS · Jul 10, 2019 · a37571a · a37571a
2 parents 22ea735 + 108e756
commit a37571a
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 106 deletions.
diff --git a/services/oodikone2-frontend/src/components/CourseStatistics/SearchForm/index.jsx b/services/oodikone2-frontend/src/components/CourseStatistics/SearchForm/index.jsx
@@ -9,6 +9,7 @@ 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 { getStartAndEndYearValues } from '../courseStatisticsUtils'
 import YearFilter from './YearFilter'
@@ -155,75 +156,78 @@ class SearchForm extends Component {
     const noQueryStrings = !coursename && !coursecode
 
     return (
-      <Segment loading={isLoading}>
-        <Form>
-          <Header content="Search for courses" />
-          <div style={{ marginBottom: '15px' }}>
-            <Form.Group widths="equal">
-              <Form.Field>
-                <label>Name:</label>
-                <AutoSubmitSearchInput
-                  doSearch={this.fetchCourses}
-                  placeholder="Search by entering a course name"
-                  value={coursename}
-                  onChange={cn => this.setState({ coursename: cn })}
-                  loading={this.props.coursesLoading}
-                  minSearchLength={0}
-                />
-              </Form.Field>
-              <Form.Field>
-                <label>Code:</label>
-                <AutoSubmitSearchInput
-                  doSearch={this.fetchCourses}
-                  placeholder="Search by entering a course code"
-                  value={coursecode}
-                  onChange={cc => this.setState({ coursecode: cc })}
-                  loading={this.props.coursesLoading}
-                  minSearchLength={0}
-                />
-              </Form.Field>
-            </Form.Group>
-            <CourseTable
-              title="Selected courses"
-              hidden={noSelectedCourses}
-              courses={selected}
-              onSelectCourse={this.onSelectCourse}
-              controlIcon="remove"
-            />
-            {!noSelectedCourses &&
-              <Fragment>
-                <YearFilter
-                  fromYear={fromYear}
-                  toYear={toYear}
-                  years={years}
-                  separate={separate}
-                  handleChange={this.handleChange}
-                  onToggleCheckbox={this.onToggleCheckbox}
-                  showCheckbox
-                />
-                <Form.Button
-                  type="button"
-                  disabled={disabled}
-                  fluid
-                  size="huge"
-                  primary
-                  basic
-                  positive
-                  content="Fetch statistics"
-                  onClick={this.onSubmitFormClick}
-                />
-              </Fragment>
-            }
-            <CourseTable
-              hidden={noQueryStrings || isLoading}
-              courses={courses}
-              title="Searched courses"
-              onSelectCourse={this.onSelectCourse}
-              controlIcon="plus"
-            />
-          </div>
-        </Form>
-      </Segment>
+      <React.Fragment>
+        <Segment loading={isLoading}>
+          <Form>
+            <Header content="Search for courses" />
+            <div style={{ marginBottom: '15px' }}>
+              <Form.Group widths="equal">
+                <Form.Field>
+                  <label>Name:</label>
+                  <AutoSubmitSearchInput
+                    doSearch={this.fetchCourses}
+                    placeholder="Search by entering a course name"
+                    value={coursename}
+                    onChange={cn => this.setState({ coursename: cn })}
+                    loading={this.props.coursesLoading}
+                    minSearchLength={0}
+                  />
+                </Form.Field>
+                <Form.Field>
+                  <label>Code:</label>
+                  <AutoSubmitSearchInput
+                    doSearch={this.fetchCourses}
+                    placeholder="Search by entering a course code"
+                    value={coursecode}
+                    onChange={cc => this.setState({ coursecode: cc })}
+                    loading={this.props.coursesLoading}
+                    minSearchLength={0}
+                  />
+                </Form.Field>
+              </Form.Group>
+              <CourseTable
+                title="Selected courses"
+                hidden={noSelectedCourses}
+                courses={selected}
+                onSelectCourse={this.onSelectCourse}
+                controlIcon="remove"
+              />
+              {!noSelectedCourses &&
+                <Fragment>
+                  <YearFilter
+                    fromYear={fromYear}
+                    toYear={toYear}
+                    years={years}
+                    separate={separate}
+                    handleChange={this.handleChange}
+                    onToggleCheckbox={this.onToggleCheckbox}
+                    showCheckbox
+                  />
+                  <Form.Button
+                    type="button"
+                    disabled={disabled}
+                    fluid
+                    size="huge"
+                    primary
+                    basic
+                    positive
+                    content="Fetch statistics"
+                    onClick={this.onSubmitFormClick}
+                  />
+                </Fragment>
+              }
+              <CourseTable
+                hidden={noQueryStrings || isLoading}
+                courses={courses}
+                title="Searched courses"
+                onSelectCourse={this.onSelectCourse}
+                controlIcon="plus"
+              />
+            </div>
+          </Form>
+        </Segment>
+        {isLoading ? <Progressbar time={100} pending={isLoading} /> : null}
+      </React.Fragment>
     )
   }
 }

diff --git a/services/oodikone2-frontend/src/components/Faculty/FacultySelector/index.jsx b/services/oodikone2-frontend/src/components/Faculty/FacultySelector/index.jsx
@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react'
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
-import { string, func, arrayOf, shape } from 'prop-types'
+import { func, arrayOf, shape } from 'prop-types'
 import { getFaculties } from '../../../redux/faculties'
-import { getTextIn } from '../../../common'
+// import { getTextIn } from '../../../common'
 import SortableTable from '../../SortableTable'
 
-const FacultySelector = ({ language, handleSelect, dispatchGetFaculties, faculties }) => {
+const FacultySelector = ({ handleSelect, dispatchGetFaculties, faculties }) => {
   const fetchFaculties = async () => {
     await dispatchGetFaculties()
   }
@@ -19,7 +19,7 @@ const FacultySelector = ({ language, handleSelect, dispatchGetFaculties, faculti
     {
       key: 'name',
       title: 'name',
-      getRowVal: faculty => getTextIn(faculty.name, language)
+      getRowVal: faculty => faculty.name.fi // getTextIn(faculty.name, language) temp fix maybe
     },
     {
       key: 'code',
@@ -38,15 +38,15 @@ const FacultySelector = ({ language, handleSelect, dispatchGetFaculties, faculti
   )
 }
 FacultySelector.propTypes = {
-  language: string.isRequired,
+  // language: string.isRequired,
   handleSelect: func.isRequired,
   dispatchGetFaculties: func.isRequired,
   faculties: arrayOf(shape({})).isRequired
 }
 
-const mapStateToProps = ({ faculties, settings }) => ({
-  faculties: faculties.data,
-  language: settings.language
+const mapStateToProps = ({ faculties }) => ({
+  faculties: faculties.data
+  // language: settings.language
 })
 
 export default connect(mapStateToProps, { dispatchGetFaculties: getFaculties })(withRouter(FacultySelector))
diff --git a/services/oodikone2-frontend/src/components/PopulationCourses/index.jsx b/services/oodikone2-frontend/src/components/PopulationCourses/index.jsx
@@ -6,6 +6,7 @@ import { getTranslate } from 'react-localize-redux'
 import uuidv4 from 'uuid/v4'
 
 import SegmentDimmer from '../SegmentDimmer'
+import Progressbar from '../Progressbar'
 import PopulationCourseStats from '../PopulationCourseStats'
 import InfoBox from '../InfoBox'
 import infotooltips from '../../common/InfoToolTips'
@@ -28,37 +29,40 @@ const PopulationCourses = ({
   }
 
   return (
-    <Segment>
-      <Header size="medium" dividing >
-        <Popup
-          trigger={<Header.Content>{translate('populationCourses.header')}</Header.Content>}
-          content="Sort by clicking columns. Click course name to limit observed population to students who
-          participated to the course."
-          wide
-          position="top left"
+    <React.Fragment>
+      <Progressbar time={140} pending={pending} />
+      <Segment>
+        <Header size="medium" dividing >
+          <Popup
+            trigger={<Header.Content>{translate('populationCourses.header')}</Header.Content>}
+            content="Sort by clicking columns. Click course name to limit observed population to students who
+            participated to the course."
+            wide
+            position="top left"
+          />
+          <InfoBox content={CoursesOf} />
+        </Header>
+        <Button
+          key="refreshCourses"
+          content="Recalculate"
+          labelPosition="right"
+          primary
+          onClick={reloadCourses}
+          icon="refresh"
+          compact
+          disabled={!refreshNeeded}
         />
-        <InfoBox content={CoursesOf} />
-      </Header>
-      <Button
-        key="refreshCourses"
-        content="Recalculate"
-        labelPosition="right"
-        primary
-        onClick={reloadCourses}
-        icon="refresh"
-        compact
-        disabled={!refreshNeeded}
-      />
 
-      <SegmentDimmer translate={translate} isLoading={pending} />
-      <PopulationCourseStats
-        key={populationCourses.query.uuid}
-        courses={populationCourses.data}
-        query={populationCourses.query}
-        pending={populationCourses.pending}
-        selectedStudents={selectedStudents}
-      />
-    </Segment>
+        <SegmentDimmer translate={translate} isLoading={pending} />
+        <PopulationCourseStats
+          key={populationCourses.query.uuid}
+          courses={populationCourses.data}
+          query={populationCourses.query}
+          pending={populationCourses.pending}
+          selectedStudents={selectedStudents}
+        />
+      </Segment>
+    </React.Fragment>
   )
 }
 

diff --git a/services/oodikone2-frontend/src/components/Progressbar/index.jsx b/services/oodikone2-frontend/src/components/Progressbar/index.jsx
@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react'
+import { Progress } from 'semantic-ui-react'
+import { number, bool } from 'prop-types'
+
+const Progressbar = ({ time, pending }) => {
+  const [percentage, setPercentage] = useState(0)
+  const [complete, setComplete] = useState(false)
+  const [timerId, setTimerId] = useState(null)
+
+  const startTimer = () => {
+    let amount = 0
+    const id = setInterval(() => {
+      amount += 1
+      setPercentage(amount)
+    }, time)
+    setTimerId(id)
+  }
+
+  useEffect(() => {
+    if (pending) startTimer()
+  }, [])
+
+  if (percentage === 96) clearInterval(timerId)
+
+  if (!pending && !complete) {
+    setPercentage(100)
+    clearInterval(timerId)
+    setTimeout(setComplete(true), 1000)
+  }
+
+  if (pending && complete) {
+    setPercentage(0)
+    setComplete(false)
+    startTimer()
+  }
+
+  return (
+    <Progress
+      percent={percentage}
+      disabled={complete}
+      progress
+      color="blue"
+    />
+  )
+}
+
+Progressbar.propTypes = {
+  time: number.isRequired,
+  pending: bool.isRequired
+}
+
+export default Progressbar