From b46d41cba3608c6915168f0fc7eb5c3230f235fd Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 23:58:03 +0200
Subject: [PATCH] positie jaarkiezer verandert

---
 .../frontend/src/components/TabSwitcher.tsx   | 75 +++++++++++++++----
 .../src/pages/mainPage/ArchivedView.tsx       |  2 +-
 .../src/pages/mainPage/CoursesView.tsx        |  2 +-
 .../frontend/src/pages/mainPage/MainPage.tsx  | 44 ++---------
 4 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/frontend/frontend/src/components/TabSwitcher.tsx b/frontend/frontend/src/components/TabSwitcher.tsx
index 9c213db8..591416fa 100644
--- a/frontend/frontend/src/components/TabSwitcher.tsx
+++ b/frontend/frontend/src/components/TabSwitcher.tsx
@@ -8,8 +8,11 @@ import { ReactNode } from 'react'
 import { t } from 'i18next'
 import theme from '../Theme.ts'
 import { grey } from '@mui/material/colors'
+import { Box, MenuItem, Select } from '@mui/material'
 
 interface TabSwitcherProps {
+    selectedYear: number
+    setSelectedYear: (year: number) => void
     titles: string[]
     nodes: ReactNode[]
 }
@@ -22,25 +25,69 @@ interface TabSwitcherProps {
  * the number of titles and nodes should be the same
  */
 
-export default function TabSwitcher({ titles, nodes }: TabSwitcherProps) {
+export default function TabSwitcher({
+    selectedYear,
+    setSelectedYear,
+    titles,
+    nodes,
+}: TabSwitcherProps) {
     titles.length !== nodes.length &&
         console.error('The number of titles and nodes should be the same')
 
     return (
-        <Tabs defaultValue={0} color={'background.default'}>
-            <TabsList>
-                {titles.map((title, index) => (
-                    <Tab id={`tab${index}`} key={index} value={index}>
-                        {t(title)}
-                    </Tab>
+        <>
+            <Tabs defaultValue={0} color={'background.default'}>
+                <Box
+                    display={'flex'}
+                    flexDirection={'row'}
+                    justifyContent={'space-between'}
+                >
+                    <TabsList>
+                        {titles.map((title, index) => (
+                            <Tab id={`tab${index}`} key={index} value={index}>
+                                {t(title)}
+                            </Tab>
+                        ))}
+                    </TabsList>
+                    <Box
+                        height={'100%'}
+                        display={'flex'}
+                        flexDirection={'column'}
+                        justifyContent={'center'}
+                        alignItems={'flex-start'}
+                        mb={2}
+                    >
+                        <Select
+                            variant={'outlined'}
+                            color={'primary'}
+                            value={selectedYear}
+                            onChange={(e) =>
+                                setSelectedYear(e.target.value as number)
+                            }
+                            label="Select Academic Year"
+                            sx={{
+                                minWidth: 150,
+                                '& .MuiSelect-outlined': {
+                                    border: 1.5,
+                                    borderColor: 'primary.main',
+                                },
+                            }}
+                        >
+                            {[2022, 2023, 2024, 2025].map((year) => (
+                                <MenuItem key={year} value={year}>
+                                    {year}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </Box>
+                </Box>
+                {nodes.map((node, index) => (
+                    <TabPanel id={`node${index}`} key={index} value={index}>
+                        {node}
+                    </TabPanel>
                 ))}
-            </TabsList>
-            {nodes.map((node, index) => (
-                <TabPanel id={`node${index}`} key={index} value={index}>
-                    {node}
-                </TabPanel>
-            ))}
-        </Tabs>
+            </Tabs>
+        </>
     )
 }
 
diff --git a/frontend/frontend/src/pages/mainPage/ArchivedView.tsx b/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
index 5dec46d6..d128b0bb 100644
--- a/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
+++ b/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
@@ -21,7 +21,7 @@ export function ArchivedView({
         <>
             <Stack
                 flexDirection={{ xs: 'column-reverse', md: 'row' }}
-                minWidth={{ md: '47svw', lg: '68svw' }}
+                minWidth={{ md: '57svw', lg: '78svw' }}
             >
                 <Stack
                     direction={'column'}
diff --git a/frontend/frontend/src/pages/mainPage/CoursesView.tsx b/frontend/frontend/src/pages/mainPage/CoursesView.tsx
index d89dbd5e..cbf24c91 100644
--- a/frontend/frontend/src/pages/mainPage/CoursesView.tsx
+++ b/frontend/frontend/src/pages/mainPage/CoursesView.tsx
@@ -27,7 +27,7 @@ export function CoursesView({
         <>
             <Stack
                 flexDirection={{ xs: 'column-reverse', md: 'row' }}
-                minWidth={{ md: '47svw', lg: '68svw' }}
+                minWidth={{ md: '57svw', lg: '78svw' }}
             >
                 <Stack
                     direction={'column'}
diff --git a/frontend/frontend/src/pages/mainPage/MainPage.tsx b/frontend/frontend/src/pages/mainPage/MainPage.tsx
index 52a9b7f5..b71a6a90 100644
--- a/frontend/frontend/src/pages/mainPage/MainPage.tsx
+++ b/frontend/frontend/src/pages/mainPage/MainPage.tsx
@@ -1,6 +1,6 @@
 import { Header } from '../../components/Header.tsx'
 import { Button } from '../../components/CustomComponents.tsx'
-import { Box, MenuItem, Select, Stack } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import TabSwitcher from '../../components/TabSwitcher.tsx'
 import { ArchivedView } from './ArchivedView.tsx'
 import { CoursesView } from './CoursesView.tsx'
@@ -192,6 +192,8 @@ export default function MainPage() {
                     CoursesView is a scroll-box with the current courses, 
                     ArchivedView is the same but for the archived courses.  */}
                     <TabSwitcher
+                        selectedYear={selectedYear}
+                        setSelectedYear={setSelectedYear}
                         titles={['current_courses', 'archived']}
                         nodes={
                             loading
@@ -202,8 +204,8 @@ export default function MainPage() {
                                               md: 'row',
                                           }}
                                           minWidth={{
-                                              md: '40svw',
-                                              lg: '49svw',
+                                              md: '57svw',
+                                              lg: '78svw',
                                           }}
                                       >
                                           {[...Array(3)].map((_, index) => (
@@ -216,8 +218,8 @@ export default function MainPage() {
                                               md: 'row',
                                           }}
                                           minWidth={{
-                                              md: '40svw',
-                                              lg: '49svw',
+                                              md: '57svw',
+                                              lg: '78svw',
                                           }}
                                       >
                                           {[...Array(3)].map((_, index) => (
@@ -322,37 +324,7 @@ export default function MainPage() {
                                   ]
                         }
                     />
-                    <Box
-                        height={'100%'}
-                        display={'flex'}
-                        flexDirection={'column'}
-                        justifyContent={'center'}
-                        alignItems={'flex-start'}
-                        mb={2}
-                    >
-                        <Select
-                            variant={'outlined'}
-                            color={'primary'}
-                            value={selectedYear}
-                            onChange={(e) =>
-                                setSelectedYear(e.target.value as number)
-                            }
-                            label="Select Academic Year"
-                            sx={{
-                                minWidth: 150,
-                                '& .MuiSelect-outlined': {
-                                    border: 1.5,
-                                    borderColor: 'primary.main',
-                                },
-                            }}
-                        >
-                            {[2022, 2023, 2024, 2025].map((year) => (
-                                <MenuItem key={year} value={year}>
-                                    {year}
-                                </MenuItem>
-                            ))}
-                        </Select>
-                    </Box>
+
                     {/* Add a calendar to the right of the mainpage. */}
                     <Box
                         aria-label={'calendarView'}