[Study programme] Add status messages for Tabs tag functionality

services/frontend/src/pages/StudyProgramme/TagsTab/CreateNewTagSection/index.tsx

@@ -2,10 +2,11 @@ import { Add as AddIcon } from '@mui/icons-material'
 import { Button, FormControlLabel, Stack, Switch, TextField } from '@mui/material'
 import { DatePicker } from '@mui/x-date-pickers'
 import { Moment } from 'moment'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { studyProgrammeToolTips } from '@/common/InfoToolTips'
 import { Section } from '@/components/material/Section'
+import { useStatusNotification } from '@/components/material/StatusNotificationContext'
 import { YEAR_DATE_FORMAT } from '@/constants/date'
 import { useGetAuthorizedUserQuery } from '@/redux/auth'
 import { useCreateTagMutation } from '@/redux/tags'
@@ -16,8 +17,9 @@ export const CreateNewTagSection = ({ studyTrack, tags }: { studyTrack: string;
   const [tagName, setTagName] = useState<string>('')
   const [year, setYear] = useState<Moment | null>(null)
   const [personal, setPersonal] = useState(false)
+  const { setStatusNotification } = useStatusNotification()
   const { id: userId } = useGetAuthorizedUserQuery()
-  const [createTag] = useCreateTagMutation()
+  const [createTag, { isError, isSuccess }] = useCreateTagMutation()
 
   const handleSubmit = event => {
     event.preventDefault()
@@ -37,6 +39,18 @@ export const CreateNewTagSection = ({ studyTrack, tags }: { studyTrack: string;
     setTagName(target.value)
   }
 
+  useEffect(() => {
+    if (isError) {
+      setStatusNotification('Failed to create new tag', 'error')
+    }
+  }, [isError])
+
+  useEffect(() => {
+    if (isSuccess) {
+      setStatusNotification('New tag created', 'success')
+    }
+  }, [isSuccess])
+
   return (
     <Section cypress="create-new-tag" infoBoxContent={studyProgrammeToolTips.tags} title="Create new tag">
       <Stack direction="column">

services/frontend/src/pages/StudyProgramme/TagsTab/TagsSection/TagItem/AddStudentsDialog.tsx

@@ -11,6 +11,7 @@ import {
 import { useEffect, useState } from 'react'
 
 import { extractItems } from '@/common'
+import { useStatusNotification } from '@/components/material/StatusNotificationContext'
 import { useCreateStudentTagsMutation } from '@/redux/tags'
 import { Tag } from '@/shared/types'
 
@@ -27,18 +28,25 @@ export const AddStudentsDialog = ({
   studyTrack: string
   tag: Tag
 }) => {
+  const { setStatusNotification } = useStatusNotification()
   const [input, setInput] = useState('')
   const parsedStudentNumbers = extractItems(input)
   const [createStudentTags, { isError, isLoading, isSuccess }] = useCreateStudentTagsMutation()
 
   useEffect(() => {
-    if (!isLoading) {
-      if (isSuccess) {
-        setInput('')
-        setTimeout(() => setOpen(false), 2000)
-      }
+    if (isError) {
+      setStatusNotification(
+        `Failed to add students to tag ${tag.name}. Did you enter correct student numbers?`,
+        'error'
+      )
     }
-  }, [isLoading, isSuccess, setOpen])
+  }, [isError, tag])
+
+  useEffect(() => {
+    if (isSuccess) {
+      setStatusNotification(`Students added to tag ${tag.name}`, 'success')
+    }
+  }, [isSuccess, tag])
 
   const handleClick = async event => {
     event.preventDefault()
@@ -76,7 +84,7 @@ export const AddStudentsDialog = ({
         </Button>
         <Button
           color="success"
-          disabled={isError || isLoading || !parsedStudentNumbers.length}
+          disabled={isLoading || !parsedStudentNumbers.length}
           onClick={handleClick}
           variant="contained"
         >

services/frontend/src/pages/StudyProgramme/TagsTab/TagsSection/TagItem/DeleteTagDialog.tsx

@@ -1,5 +1,7 @@
 import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material'
+import { useEffect } from 'react'
 
+import { useStatusNotification } from '@/components/material/StatusNotificationContext'
 import { useDeleteTagMutation } from '@/redux/tags'
 import { Tag } from '@/shared/types'
 
@@ -12,7 +14,8 @@ export const DeleteTagDialog = ({
   tag: Tag
   tagToDelete: Tag | null
 }) => {
-  const [deleteTag] = useDeleteTagMutation()
+  const { setStatusNotification } = useStatusNotification()
+  const [deleteTag, { isError, isSuccess }] = useDeleteTagMutation()
 
   const handleDeleteTag = (event, tag: Tag) => {
     event.preventDefault()
@@ -20,6 +23,18 @@ export const DeleteTagDialog = ({
     setTagToDelete(null)
   }
 
+  useEffect(() => {
+    if (isError) {
+      setStatusNotification(`Failed to delete tag ${tag.name}`, 'error')
+    }
+  }, [isError, tag])
+
+  useEffect(() => {
+    if (isSuccess) {
+      setStatusNotification(`Tag ${tag.name} deleted successfully`, 'success')
+    }
+  }, [isSuccess, tag])
+
   return (
     <Dialog open={tagToDelete?.id === tag.id}>
       <DialogTitle>Delete tag</DialogTitle>