[Frontend] Make population course amount limiter consistent with debounced state

Author: santeri0200

services/frontend/src/components/CoursePopulation/index.tsx

@@ -1,6 +1,3 @@
-import Stack from '@mui/material/Stack'
-import TextField from '@mui/material/TextField'
-import Typography from '@mui/material/Typography'
 import { useEffect, useMemo, useState } from 'react'
 import { useLocation } from 'react-router'
 
@@ -30,15 +27,16 @@ import { PageLoading } from '@/components/Loading'
 import { PopulationCourseStatsFlat } from '@/components/PopulationCourseStats/PopulationCourseStatsFlat'
 import { PopulationStudents } from '@/components/PopulationStudents'
 import { useFormat as formatGeneralTab } from '@/components/PopulationStudents/StudentTable/GeneralTab/format/index'
+import { useDebouncedState } from '@/hooks/debouncedState'
 import { useTitle } from '@/hooks/title'
 import { useGetPopulationStatisticsByCourseQuery } from '@/redux/populations'
 import { useGetSemestersQuery } from '@/redux/semesters'
 import { useGetSingleCourseStatsQuery } from '@/redux/singleCourseStats'
 import { parseQueryParams } from '@/util/queryparams'
+import { StudentAmountLimiter } from '../common/StudentAmountLimiter'
 import { CoursePopulationCreditGainTable } from './CoursePopulationCreditGainTable'
 import { CoursePopulationGradeDist } from './CoursePopulationGradeDist'
 import { CoursePopulationLanguageDist } from './CoursePopulationLanguageDist'
-
 import { useColumns as columnsGeneralTab } from './studentColumns'
 
 export const CoursePopulation = () => {
@@ -234,7 +232,7 @@ export const CoursePopulation = () => {
 }
 
 const CustomPopulationCoursesWrapper = ({ filteredCourses, filteredStudents }) => {
-  const [studentAmountLimit, setStudentAmountLimit] = useState(0)
+  const [studentAmountLimit, setStudentAmountLimit] = useDebouncedState(0, 1000)
 
   useEffect(() => setStudentAmountLimit(Math.round(filteredStudents.length * 0.3)), [filteredStudents.length])
 
@@ -245,20 +243,10 @@ const CustomPopulationCoursesWrapper = ({ filteredCourses, filteredStudents }) =
   return (
     <>
       <InfoBox content={populationStatisticsToolTips.coursesOfPopulation} />
-      {/* FIXME:TODO: This is ripped off from CourseTableModeSelector */}
-      <Stack direction="row" sx={{ alignItems: 'center', mt: '0.5em' }}>
-        <Typography fontWeight={500}>Select all courses with at least</Typography>
-        <TextField
-          onChange={({ target }) => onStudentAmountLimitChange(target.value)}
-          size="small"
-          sx={{ maxWidth: '6em' }}
-          type="number"
-          value={studentAmountLimit}
-        />
-        <Typography fontWeight={500} sx={{ ml: '1em' }}>
-          total students
-        </Typography>
-      </Stack>
+      <StudentAmountLimiter
+        onStudentAmountLimitChange={onStudentAmountLimitChange}
+        studentAmountLimit={studentAmountLimit}
+      />
       <PopulationCourseStatsFlat filteredCourses={filteredCourses} studentAmountLimit={studentAmountLimit} />
     </>
   )

services/frontend/src/components/CustomPopulation/CustomPopulationContent.tsx

@@ -4,11 +4,9 @@ import Box from '@mui/material/Box'
 
 import Button from '@mui/material/Button'
 import Chip from '@mui/material/Chip'
-import Stack from '@mui/material/Stack'
-import TextField from '@mui/material/TextField'
 import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 import { populationStatisticsToolTips } from '@/common/InfoToolTips'
 import { PanelView } from '@/components/common/PanelView'
@@ -20,11 +18,12 @@ import { PopulationStudents } from '@/components/PopulationStudents'
 import { useFormat as formatGeneralTab } from '@/components/PopulationStudents/StudentTable/GeneralTab/format/index'
 import { ProgressBar } from '@/components/ProgressBar'
 import { RightsNotification } from '@/components/RightsNotification'
+import { useDebouncedState } from '@/hooks/debouncedState'
 import { useProgress } from '@/hooks/progress'
 import { useFilteredAndFormattedStudyProgrammes } from '@/redux/studyProgramme'
 import { FormattedCourse, FormattedStudent } from '@oodikone/shared/types'
-
 import { PageTitle } from '../common/PageTitle'
+import { StudentAmountLimiter } from '../common/StudentAmountLimiter'
 import { CustomPopulationProgrammeDist } from './CustomPopulationProgrammeDist'
 import { useColumns as columnsGeneralTab } from './studentColumns'
 import { UnihowDataExport } from './UnihowDataExport'
@@ -49,7 +48,7 @@ export const CustomPopulationContent = ({
   resetState: () => void
 }) => {
   const studyProgrammes = useFilteredAndFormattedStudyProgrammes()
-  const [studentAmountLimit, setStudentAmountLimit] = useState(0)
+  const [studentAmountLimit, setStudentAmountLimit] = useDebouncedState(0, 1000)
 
   useEffect(() => {
     setStudentAmountLimit(Math.round(filteredStudents.length ? filteredStudents.length * 0.3 : 0))
@@ -95,20 +94,10 @@ export const CustomPopulationContent = ({
       content: (
         <>
           <InfoBox content={populationStatisticsToolTips.coursesOfPopulation} />
-          {/* FIXME:TODO: This is ripped off from CourseTableModeSelector */}
-          <Stack direction="row" sx={{ alignItems: 'center', mt: '0.5em' }}>
-            <Typography fontWeight={500}>Select all courses with at least</Typography>
-            <TextField
-              onChange={({ target }) => onStudentAmountLimitChange(target.value)}
-              size="small"
-              sx={{ maxWidth: '6em' }}
-              type="number"
-              value={studentAmountLimit}
-            />
-            <Typography fontWeight={500} sx={{ ml: '1em' }}>
-              total students
-            </Typography>
-          </Stack>
+          <StudentAmountLimiter
+            onStudentAmountLimitChange={onStudentAmountLimitChange}
+            studentAmountLimit={studentAmountLimit}
+          />
           <PopulationCourseStatsFlat filteredCourses={filteredCourses} studentAmountLimit={studentAmountLimit} />
         </>
       ),

services/frontend/src/components/StudyGuidanceGroups/StudyGuidanceGroupPopulationCourses.jsx

@@ -1,12 +1,11 @@
 import Paper from '@mui/material/Paper'
-import Stack from '@mui/material/Stack'
-import TextField from '@mui/material/TextField'
-import Typography from '@mui/material/Typography'
 import { useState } from 'react'
 
 import { PopulationCourseStats } from '@/components/PopulationCourseStats'
 import { PopulationCourseStatsFlat } from '@/components/PopulationCourseStats/PopulationCourseStatsFlat'
 import { CourseTableModeSelector } from '@/components/PopulationDetails/CourseTableModeSelector'
+import { useDebouncedState } from '@/hooks/debouncedState'
+import { StudentAmountLimiter } from '../common/StudentAmountLimiter'
 
 export const StudyGuidanceGroupPopulationCourses = ({
   filteredCourses,
@@ -17,7 +16,7 @@ export const StudyGuidanceGroupPopulationCourses = ({
   curriculumList,
   setCurriculum,
 }) => {
-  const [studentAmountLimit, setStudentAmountLimit] = useState(0)
+  const [studentAmountLimit, setStudentAmountLimit] = useDebouncedState(0, 1000)
   const curriculumsAvailable = studyProgramme && year
   const [courseTableMode, setCourseTableMode] = useState(curriculumsAvailable ? 'curriculum' : 'all')
   const onStudentAmountLimitChange = value => {
@@ -38,20 +37,10 @@ export const StudyGuidanceGroupPopulationCourses = ({
           studentAmountLimit={studentAmountLimit}
         />
       ) : (
-        // FIXME:TODO: This is ripped off from CourseTableModeSelector
-        <Stack direction="row" sx={{ alignItems: 'center', mt: '0.5em' }}>
-          <Typography fontWeight={500}>Select all courses with at least</Typography>
-          <TextField
-            onChange={({ target }) => onStudentAmountLimitChange(target.value)}
-            size="small"
-            sx={{ maxWidth: '6em' }}
-            type="number"
-            value={studentAmountLimit}
-          />
-          <Typography fontWeight={500} sx={{ ml: '1em' }}>
-            total students
-          </Typography>
-        </Stack>
+        <StudentAmountLimiter
+          onStudentAmountLimitChange={onStudentAmountLimitChange}
+          studentAmountLimit={studentAmountLimit}
+        />
       )}
       {courseTableMode === 'curriculum' ? (
         <PopulationCourseStats curriculum={curriculum} filteredCourses={filteredCourses} />

services/frontend/src/components/common/StudentAmountLimiter.tsx

@@ -0,0 +1,19 @@
+import Stack from '@mui/material/Stack'
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+
+export const StudentAmountLimiter = ({ onStudentAmountLimitChange, studentAmountLimit }) => (
+  <Stack direction="row" sx={{ alignItems: 'center', mt: '0.5em' }}>
+    <Typography fontWeight={500}>Select all courses with at least</Typography>
+    <TextField
+      onChange={({ target }) => onStudentAmountLimitChange(target.value)}
+      size="small"
+      sx={{ maxWidth: '6em' }}
+      type="number"
+      value={studentAmountLimit}
+    />
+    <Typography fontWeight={500} sx={{ ml: '1em' }}>
+      total students
+    </Typography>
+  </Stack>
+)