feat: introduce success notifications

Author: stampaaaron

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx

@@ -1,4 +1,15 @@
-import { Button, formatDate, getDateFromTimeAndWeekday, Group, Stack, useMantineTheme, useDisclosure, Modal, getTime } from "@quassel/ui";
+import {
+  Button,
+  formatDate,
+  getDateFromTimeAndWeekday,
+  Group,
+  Stack,
+  useMantineTheme,
+  useDisclosure,
+  Modal,
+  getTime,
+  notifications,
+} from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
@@ -31,6 +42,8 @@ const messages = i18n("questionnaireEntries", {
   formAction: "Continue",
   backAction: "Back",
   addEntityLabel: "Add",
+  notificationSuccessCreateLanguage: "Successfully add a new language.",
+  notificationSuccessCreateCarer: "Successfully add a new carer.",
 });
 
 function QuestionnaireEntries() {
@@ -58,13 +71,15 @@ function QuestionnaireEntries() {
   const { data: languages } = $api.useQuery("get", "/languages", { params: { query: { participantId } } });
   const createLanguageMutation = $api.useMutation("post", "/languages", {
     onSuccess() {
+      notifications.show({ message: t.notificationSuccessCreateLanguage, color: "uzhGreen" });
       c.refetchQueries($api.queryOptions("get", "/languages", { params: { query: { participantId } } }));
     },
   });
 
   const { data: carers } = $api.useQuery("get", "/carers", { params: { query: { participantId } } });
   const createCarerMutation = $api.useMutation("post", "/carers", {
     onSuccess() {
+      notifications.show({ message: t.notificationSuccessCreateCarer, color: "uzhGreen" });
       c.refetchQueries($api.queryOptions("get", "/carers", { params: { query: { participantId } } }));
     },
   });

libs/ui/package.json

@@ -29,6 +29,7 @@
     "@mantine/core": "^7.14.3",
     "@mantine/dates": "^7.14.3",
     "@mantine/hooks": "^7.14.3",
+    "@mantine/notifications": "^7.15.1",
     "@tabler/icons-react": "3.17.0",
     "dayjs": "^1.11.13",
     "react": "^18.3.1",

libs/ui/src/index.ts

@@ -1,4 +1,5 @@
 // Theme
+import "@mantine/core/styles.css";
 import "@mantine/core/styles/global.css";
 import "@mantine/core/styles/ScrollArea.css";
 import "@mantine/core/styles/UnstyledButton.css";
@@ -28,8 +29,11 @@ import "@mantine/core/styles/Title.css";
 import "@mantine/core/styles/ActionIcon.css";
 import "@mantine/core/styles/Combobox.css";
 import "@mantine/core/styles/Stack.css";
+
 import "@mantine/dates/styles.css";
 
+import "@mantine/notifications/styles.css";
+
 export { ThemeProvider } from "./theme/ThemeProvider";
 
 // custom components
@@ -70,6 +74,8 @@ export { TimeInput } from "@mantine/dates";
 
 export { useDisclosure } from "@mantine/hooks";
 
+export { notifications } from "@mantine/notifications";
+
 export {
   IconLogout,
   IconUsers,

libs/ui/src/theme/ThemeProvider.tsx

@@ -5,13 +5,13 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import de from "dayjs/locale/de";
+import { DefaultMantineColor, MantineColorsTuple } from "@mantine/core";
+import { Notifications } from "@mantine/notifications";
 
 dayjs.extend(utc);
 dayjs.extend(customParseFormat);
 dayjs.locale(de);
 
-import { DefaultMantineColor, MantineColorsTuple } from "@mantine/core";
-
 type ExtendedCustomColors =
   | "uzhBlue"
   | "uzhCyan"
@@ -53,10 +53,13 @@ export const theme: MantineThemeOverride = {
   primaryColor: "uzhBlue",
 };
 
-export function ThemeProvider(args: ThemeProviderProps) {
+export function ThemeProvider({ children, ...args }: ThemeProviderProps) {
   return (
     <DatesProvider settings={{ timezone: "UTC" }}>
-      <MantineProvider {...args} theme={theme} />
+      <MantineProvider {...args} theme={theme}>
+        <Notifications />
+        {children}
+      </MantineProvider>
     </DatesProvider>
   );
 }