[YearFilter] Convert to TypeScript

services/frontend/src/components/CourseStatistics/SearchForm/YearFilter/index.jsx → services/frontend/src/components/CourseStatistics/SingleCourseStats/YearFilter.tsx

@@ -1,7 +1,13 @@
-import { arrayOf, func, shape } from 'prop-types'
-import { Form } from 'semantic-ui-react'
+import { DropdownProps, Form } from 'semantic-ui-react'
 
-export const YearFilter = ({ years, fromYear, toYear, handleChange }) => (
+interface YearFilterProps {
+  years: Array<{ key: number; text: string; value: number }>
+  fromYear: number
+  toYear: number
+  handleChange: (event: React.SyntheticEvent, data: DropdownProps) => void
+}
+
+export const YearFilter = ({ years, fromYear, toYear, handleChange }: YearFilterProps) => (
   <Form>
     <Form.Group inline>
       <Form.Dropdown
@@ -31,8 +37,3 @@ export const YearFilter = ({ years, fromYear, toYear, handleChange }) => (
     </Form.Group>
   </Form>
 )
-
-YearFilter.propTypes = {
-  years: arrayOf(shape({})).isRequired,
-  handleChange: func.isRequired,
-}

services/frontend/src/components/CourseStatistics/SingleCourseStats/index.jsx

@@ -7,13 +7,13 @@ import { Button, Form, Grid, Header, Popup, Segment } from 'semantic-ui-react'
 
 import { ProgrammeDropdown } from '@/components/CourseStatistics/ProgrammeDropdown'
 import { ResultTabs } from '@/components/CourseStatistics/ResultTabs'
-import { YearFilter } from '@/components/CourseStatistics/SearchForm/YearFilter'
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
 import { useGetMaxYearsToCreatePopulationFromQuery } from '@/redux/populations'
 import { useGetSemestersQuery } from '@/redux/semesters'
 import { setSelectedCourse, clearSelectedCourse } from '@/redux/singleCourseStats'
 import { ALL, getAllStudyProgrammes } from '@/selectors/courseStats'
 import { countTotalStats } from './countTotalStats'
+import { YearFilter } from './YearFilter'
 
 const countFilteredStudents = (stat, filter) => {
   if (!stat) {