diff --git a/commafeed-client/src/app/client.ts b/commafeed-client/src/app/client.ts index 4ec112a0..25661e34 100644 --- a/commafeed-client/src/app/client.ts +++ b/commafeed-client/src/app/client.ts @@ -20,6 +20,7 @@ import type { PasswordResetConfirmationRequest, PasswordResetRequest, ProfileModificationRequest, + PushNotificationSettings, RegistrationRequest, ServerInfo, Settings, @@ -101,6 +102,8 @@ export const client = { passwordResetCallback: async (req: PasswordResetConfirmationRequest) => await axiosInstance.post("user/passwordResetCallback", req), getSettings: async () => await axiosInstance.get("user/settings"), saveSettings: async (settings: Settings) => await axiosInstance.post("user/settings", settings), + sendTestPushNotification: async (settings: PushNotificationSettings) => + await axiosInstance.post("user/pushNotificationTest", settings), getProfile: async () => await axiosInstance.get("user/profile"), saveProfile: async (req: ProfileModificationRequest) => await axiosInstance.post("user/profile", req), deleteProfile: async () => await axiosInstance.post("user/profile/deleteAccount"), diff --git a/commafeed-client/src/components/settings/PushNotificationSettings.tsx b/commafeed-client/src/components/settings/PushNotificationSettings.tsx index 2354b1b5..ec5aa599 100644 --- a/commafeed-client/src/components/settings/PushNotificationSettings.tsx +++ b/commafeed-client/src/components/settings/PushNotificationSettings.tsx @@ -1,13 +1,17 @@ +import { msg } from "@lingui/core/macro" import { useLingui } from "@lingui/react" import { Trans } from "@lingui/react/macro" -import { Button, Group, Select, Stack, TextInput } from "@mantine/core" +import { Button, Divider, Group, Select, Stack, TextInput } from "@mantine/core" import { useForm } from "@mantine/form" import { useEffect } from "react" -import { TbDeviceFloppy } from "react-icons/tb" +import { useAsyncCallback } from "react-async-hook" +import { TbDeviceFloppy, TbSend } from "react-icons/tb" +import { client, errorToStrings } from "@/app/client" import { redirectToSelectedSource } from "@/app/redirect/thunks" import { useAppDispatch, useAppSelector } from "@/app/store" import type { PushNotificationSettings as PushNotificationSettingsModel } from "@/app/types" import { changeNotificationSettings } from "@/app/user/thunks" +import { Alert } from "@/components/Alert" export function PushNotificationSettings() { const notificationSettings = useAppSelector(state => state.user.settings?.pushNotificationSettings) @@ -24,6 +28,8 @@ export function PushNotificationSettings() { dispatch(changeNotificationSettings(values)) } + const sendTestPushNotification = useAsyncCallback(client.user.sendTestPushNotification) + const typeInputProps = form.getInputProps("type") if (!pushNotificationsEnabled) { @@ -32,6 +38,14 @@ export function PushNotificationSettings() { return (
+ {sendTestPushNotification.status === "success" && ( + + )} + + {sendTestPushNotification.status === "error" && ( + + )} +