[Study programme] Extract BySemesterTab

services/frontend/src/pages/StudyProgramme/ProgrammeCoursesTab/BySemesterTab/index.jsx

@@ -0,0 +1,12 @@
+import { ColorizedCoursesTable } from '@/components/ColorizedCoursesTable'
+import { useGetColorizedTableCourseStatsQuery } from '@/redux/studyProgramme'
+
+export const BySemesterTab = ({ studyProgramme }) => {
+  return (
+    <ColorizedCoursesTable
+      fetchDataHook={useGetColorizedTableCourseStatsQuery}
+      panes={['Semesters']}
+      studyProgramme={studyProgramme}
+    />
+  )
+}

services/frontend/src/pages/StudyProgramme/ProgrammeCoursesTab/index.tsx

@@ -1,10 +1,9 @@
 import { CalendarMonth as CalendarMonthIcon, School as SchoolIcon } from '@mui/icons-material'
 import { Stack, Tab, Tabs } from '@mui/material'
 
-import { ColorizedCoursesTable } from '@/components/ColorizedCoursesTable'
 import { useTabs } from '@/hooks/tabs'
-import { useGetColorizedTableCourseStatsQuery } from '@/redux/studyProgramme'
 import { ByCreditTypeTab } from './ByCreditTypeTab'
+import { BySemesterTab } from './BySemesterTab'
 
 export const ProgrammeCoursesTab = ({
   academicYear,
@@ -39,13 +38,7 @@ export const ProgrammeCoursesTab = ({
       cypress: 'by-semester-tab',
       label: 'By semester',
       icon: <CalendarMonthIcon />,
-      component: (
-        <ColorizedCoursesTable
-          fetchDataHook={useGetColorizedTableCourseStatsQuery}
-          panes={['Semesters']}
-          studyProgramme={studyProgramme}
-        />
-      ),
+      component: <BySemesterTab studyProgramme={studyProgramme} />,
     },
   ]