diff --git a/services/web-ui/public/locales/en/chat-create.json b/services/web-ui/public/locales/en/chat-create.json new file mode 100644 index 00000000..b5b53079 --- /dev/null +++ b/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" + } +} diff --git a/services/web-ui/public/locales/sv/chat-create.json b/services/web-ui/public/locales/sv/chat-create.json new file mode 100644 index 00000000..cb37f79b --- /dev/null +++ b/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" + } +} diff --git a/services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.container.tsx b/services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.container.tsx index 9ddd27ff..10fdc7ce 100644 --- a/services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.container.tsx +++ b/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([]); const createChatMutation = useMutation({ + onError: () => snackbar.error(t("create.error")), + onSuccess: () => { + snackbar.success(t("create.success")); + navigate("/chat"); + }, mutationFn: () => chatsApi.createConversation({ createChatCommand: { @@ -32,7 +49,7 @@ export function CreateChatPageContainer(): ReactElement { }), }); - if (error) { + if (error || currentProfileQuery.error) { return ( @@ -40,7 +57,7 @@ export function CreateChatPageContainer(): ReactElement { ); } - if (isPending) { + if (isPending || currentProfileQuery.isPending) { return ( @@ -48,7 +65,9 @@ export function CreateChatPageContainer(): ReactElement { ); } - 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 ( @@ -67,7 +86,7 @@ export function CreateChatPageContainer(): ReactElement { sx={{ mt: 2 }} variant="contained" > - Create + {t("create.button")} );