[University] Extract tabs to a new hook

services/frontend/src/common/hooks.js

@@ -24,6 +24,7 @@ export const useTabChangeAnalytics = () => {
   return { handleTabChange }
 }
 
+// Use @/hooks/tabs for MUI components instead
 export const useTabs = (id, initialTab, { location, replace }) => {
   const [tab, setTab] = useState(-1)
   const [didMount, setDidMount] = useState(false)

services/frontend/src/components/material/Footer/index.tsx

@@ -27,7 +27,7 @@ export const Footer = () => {
           gap={3}
           justifyContent="space-between"
         >
-          <Stack direction={{ sm: 'column', md: 'row' }} gap={{ sm: 3, md: 4 }}>
+          <Stack direction={{ sm: 'column', md: 'row' }} gap={{ xs: 3, md: 4 }}>
             <Stack>
               <Typography variant="subtitle1">Oodikone</Typography>
               {isDefaultServiceProvider() && <ExternalLink href={dataProtectionUrl} text="Data protection" />}

services/frontend/src/hooks/tabs.ts

@@ -0,0 +1,46 @@
+import qs from 'query-string'
+import { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+
+export const useTabs = (totalTabs: number) => {
+  const history = useHistory()
+  const location = useLocation()
+
+  const id = 'tab'
+  const initialTab = 0
+
+  const normalizeTab = (tab: unknown) => {
+    const tabIndex = parseInt(tab as string, 10)
+    return Number.isNaN(tabIndex) || tabIndex < 0 || tabIndex >= totalTabs ? initialTab : tabIndex
+  }
+
+  const [tab, setTab] = useState<number>(() => {
+    const params = qs.parse(location.search)
+    return normalizeTab(params[id])
+  })
+
+  const pushToUrl = (newTab: number) => {
+    history.replace({
+      pathname: location.pathname,
+      search: qs.stringify({ ...qs.parse(location.search), [id]: newTab }),
+    })
+  }
+
+  useEffect(() => {
+    const params = qs.parse(location.search)
+    const queryTab = normalizeTab(params[id])
+    if (queryTab !== tab) {
+      setTab(queryTab)
+    }
+  }, [id, location.search])
+
+  useEffect(() => {
+    pushToUrl(tab)
+  }, [tab])
+
+  const handleChange = (_event: React.SyntheticEvent, { activeIndex }: { activeIndex: number }) => {
+    setTab(activeIndex)
+  }
+
+  return [tab, handleChange] as const
+}

services/frontend/src/pages/University/index.tsx

@@ -1,42 +1,29 @@
 import { Container, Tab, Tabs } from '@mui/material'
-import { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
 
 import { useTitle } from '@/common/hooks'
 import { PageTitle } from '@/components/material/PageTitle'
+import { useTabs } from '@/hooks/tabs'
 import { FacultyGraduationsTab } from './FacultyGraduationsTab'
 import { FacultyProgressTab } from './FacultyProgressTab'
 
 export const University = () => {
   useTitle('University')
 
-  const history = useHistory()
-  const location = useLocation()
-
-  const query = new URLSearchParams(location.search)
-  const tabFromQuery = parseInt(query.get('tab') ?? '')
-  const initialTab = [0, 1].includes(tabFromQuery) ? tabFromQuery : 0
-  const [activeTab, setActiveTab] = useState(initialTab)
-
-  const handleTabChange = (_event, newValue: number) => {
-    setActiveTab(newValue)
-    query.set('tab', newValue.toString())
-    history.push({ search: query.toString() })
-  }
-
-  useEffect(() => {
-    setActiveTab(initialTab)
-  }, [initialTab])
+  const [tab, handleTabChange] = useTabs(2)
 
   return (
     <Container maxWidth="lg">
       <PageTitle title="University" />
-      <Tabs onChange={handleTabChange} sx={{ marginBottom: 2 }} value={activeTab}>
+      <Tabs
+        onChange={(event, newValue) => handleTabChange(event, { activeIndex: newValue })}
+        sx={{ marginBottom: 2 }}
+        value={tab}
+      >
         <Tab data-cy="FacultyProgressTab" label="Faculty progress" />
         <Tab data-cy="FacultyGraduationsTab" label="Faculty graduations" />
       </Tabs>
-      {activeTab === 0 && <FacultyProgressTab />}
-      {activeTab === 1 && <FacultyGraduationsTab />}
+      {tab === 0 && <FacultyProgressTab />}
+      {tab === 1 && <FacultyGraduationsTab />}
     </Container>
   )
 }