[PopulationLink] Add option for a link with tags

services/frontend/src/components/material/PopulationLink.tsx

@@ -1,7 +1,12 @@
+// TODO: This file contains copy-paste, consider refactoring
+
 import { NorthEast as NorthEastIcon } from '@mui/icons-material'
+import { IconButton } from '@mui/material'
 import moment from 'moment'
 import { Link } from 'react-router'
 
+import { Tag } from '@/shared/types'
+
 const getMonths = (year: number) => {
   const end = moment()
   const lastDayOfMonth = moment(end).endOf('month')
@@ -9,6 +14,16 @@ const getMonths = (year: number) => {
   return Math.round(moment.duration(moment(lastDayOfMonth).diff(moment(start))).asMonths())
 }
 
+const PopulationLinkButton = ({ title, to }: { title: string; to: string }) => {
+  return (
+    <Link title={title} to={to}>
+      <IconButton color="primary">
+        <NorthEastIcon fontSize="small" />
+      </IconButton>
+    </Link>
+  )
+}
+
 const getTotalPopulationLink = (
   combinedProgramme: string | undefined,
   months: number,
@@ -76,19 +91,31 @@ export const PopulationLink = ({
     const yearsString = years.join('&years=')
     const months = getMonths(Math.min(...years.map(year => Number(year))))
     const href = getTotalPopulationLink(combinedProgramme, months, studyProgramme, studyTrack, yearsString)
-    return (
-      <Link title="Population statistics of all years" to={href}>
-        <NorthEastIcon fontSize="small" />
-      </Link>
-    )
+    return <PopulationLinkButton title="Population statistics of all years" to={href} />
   }
 
   const startYear = Number(year.slice(0, 4))
   const months = Math.ceil(moment.duration(moment().diff(`${startYear}-08-01`)).asMonths())
   const href = getPopulationLink(combinedProgramme, months, startYear, studyProgramme, studyTrack)
-  return (
-    <Link title={`Population statistics of class ${year}`} to={href}>
-      <NorthEastIcon fontSize="small" />
-    </Link>
-  )
+  return <PopulationLinkButton title={`Population statistics of class ${year}`} to={href} />
+}
+
+export const PopulationLinkWithTag = ({
+  combinedProgramme,
+  studyProgramme,
+  tag,
+}: {
+  combinedProgramme: string
+  studyProgramme: string
+  tag: Tag
+}) => {
+  const year = tag.year ?? new Date().getFullYear()
+  const months = Math.ceil(moment.duration(moment().diff(`${year}-08-01`)).asMonths())
+  const href = combinedProgramme
+    ? `/populations?months=${months}&semesters=FALL&semesters=` +
+      `SPRING&studyRights=%7B"programme"%3A"${studyProgramme}"%2C"combinedProgramme"%3A"${combinedProgramme}"%7D&year=${year}&tag=${tag.id}`
+    : `/populations?months=${months}&semesters=FALL&semesters=` +
+      `SPRING&studyRights=%7B"programme"%3A"${studyProgramme}"%7D&year=${year}&tag=${tag.id}`
+
+  return <PopulationLinkButton title={`Population statistics of class ${year} with tag ${tag.name}`} to={href} />
 }