feat(web-ui): add error messages to chat creation (#840)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>

services/web-ui/public/locales/en/chat-create.json

@@ -0,0 +1,7 @@
+{
+  "create": {
+    "button": "Create",
+    "error": "There was an error when creating the chat",
+    "success": "Chat created"
+  }
+}

services/web-ui/public/locales/sv/chat-create.json

@@ -0,0 +1,7 @@
+{
+  "create": {
+    "button": "Skapa chat",
+    "error": "Något gick fel när din chat skulle skapas",
+    "success": "Chat skapad"
+  }
+}

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.container.tsx

@@ -1,10 +1,13 @@
 import { ReactElement, useState } from "react";
+import { useNavigate } from "react-router";
 
 import { Autocomplete, TextField } from "@mui/material";
 
-import { chatsApi, organizationsApi } from "src/apis";
+import { chatsApi, organizationsApi, profileApi } from "src/apis";
 import { Button } from "src/components/ui";
-import { useMutation, useQuery } from "src/core/query";
+import { useTranslation } from "src/core/i18n";
+import { CacheKeysConstants, useMutation, useQuery } from "src/core/query";
+import { useSnackbar } from "src/core/snackbar";
 import { ErrorView } from "src/views/ErrorView";
 
 import { CreateChatPageNav } from "./CreateChatPage.nav";
@@ -16,14 +19,28 @@ interface Option {
 }
 
 export function CreateChatPageContainer(): ReactElement {
+  const navigate = useNavigate();
+  const snackbar = useSnackbar();
+  const { t } = useTranslation("chat-create");
+
   const { error, data, isPending } = useQuery({
     queryKey: ["members"],
     queryFn: () => organizationsApi.getCurrentOrganizationMembers(),
   });
 
+  const currentProfileQuery = useQuery({
+    queryKey: [CacheKeysConstants.CurrentProfile],
+    queryFn: () => profileApi.getCurrentProfile(),
+  });
+
   const [members, setMembers] = useState<Option[]>([]);
 
   const createChatMutation = useMutation({
+    onError: () => snackbar.error(t("create.error")),
+    onSuccess: () => {
+      snackbar.success(t("create.success"));
+      navigate("/chat");
+    },
     mutationFn: () =>
       chatsApi.createConversation({
         createChatCommand: {
@@ -32,23 +49,25 @@ export function CreateChatPageContainer(): ReactElement {
       }),
   });
 
-  if (error) {
+  if (error || currentProfileQuery.error) {
     return (
       <CreateChatPageNav>
         <ErrorView />
       </CreateChatPageNav>
     );
   }
 
-  if (isPending) {
+  if (isPending || currentProfileQuery.isPending) {
     return (
       <CreateChatPageNav>
         <CreateChatPageSkeleton />
       </CreateChatPageNav>
     );
   }
 
-  const options = data.map((x) => ({ id: x.profileId, label: x.name }));
+  const options = data
+    .map((x) => ({ id: x.profileId, label: x.name }))
+    .filter((x) => x.id !== currentProfileQuery.data.id);
 
   return (
     <CreateChatPageNav>
@@ -67,7 +86,7 @@ export function CreateChatPageContainer(): ReactElement {
         sx={{ mt: 2 }}
         variant="contained"
       >
-        Create
+        {t("create.button")}
       </Button>
     </CreateChatPageNav>
   );