✨ feat: add test button

Author: m1212e

dev.docker-compose.yml

@@ -57,15 +57,15 @@ services:
     volumes:
       - ./mock-oidc-landingpage.html:/static/mock-oidc-landingpage.html
 
-  ntfy:
-    image: binwiederhier/ntfy
-    command:
-      - serve
-    volumes:
-      - ./ntfy:/etc/ntfy
-    ports:
-      - 80:80
-    restart: unless-stopped
+  # ntfy:
+  #   image: binwiederhier/ntfy
+  #   command:
+  #     - serve
+  #   volumes:
+  #     - ./ntfy:/etc/ntfy
+  #   ports:
+  #     - 80:80
+  #   restart: unless-stopped
 
 volumes:
   project-dev:

messages/de.json

@@ -21,5 +21,9 @@
 	"subscribeToTheTopic": "3. Subscribe to the topic",
 	"subscribeToTheTopicExplaination": "Finally, you have to subcribe to the topic. You can do this on all devices you want to receive notifications on. For instructions on how to do that, see the link below.",
 	"instructions": "Instructions",
-	"differentServerExplaination": "When asked if you would like to configure a different server, do that and fill the below value."
+	"differentServerExplaination": "When asked if you would like to configure a different server, do that and fill the below value.",
+	"sendTest": "4. Send a test notification (optional)",
+	"sendTestExplaination": "Send a test notification to all your devices to make sure everything is working as expected.",
+	"send": "Send",
+	"sent": "Sent!"
 }

messages/en.json

@@ -21,5 +21,9 @@
 	"subscribeToTheTopic": "3. Subscribe to the topic",
 	"subscribeToTheTopicExplaination": "Finally, you have to subcribe to the topic. You can do this on all devices you want to receive notifications on. For instructions on how to do that, see the link below.",
 	"instructions": "Instructions",
-	"differentServerExplaination": "When asked if you would like to configure a different server, do that and fill the below value"
+	"differentServerExplaination": "When asked if you would like to configure a different server, do that and fill the below value",
+	"sendTest": "4. Send a test notification (optional)",
+	"sendTestExplaination": "Send a test notification to all your devices to make sure everything is working as expected.",
+	"send": "Send",
+	"sent": "Sent!"
 }

schema.graphql

@@ -90,6 +90,7 @@ scalar JSON
 type Mutation {
   removeTopic: User
   resetTopic: User
+  sendTest: String
 }
 
 type Query {

src/api/handlers/user.ts

@@ -3,7 +3,10 @@ import { abilityBuilder, schemaBuilder } from '$api/rumble';
 import { configPrivate } from '$config/private';
 import { configPublic } from '$config/public';
 import { nanoid } from '$lib/helpers/nanoid';
+import { assertFindFirstExists } from '@m1212e/rumble';
 import { basics } from './basics';
+import { GraphQLError } from 'graphql';
+import { sendMessage } from '$api/services/sendMessage';
 
 const { arg, ref, pubsub, table } = basics('user');
 
@@ -88,6 +91,32 @@ schemaBuilder.mutationFields((t) => {
 					)
 				);
 			}
+		}),
+		sendTest: t.field({
+			type: 'String',
+			resolve: async (root, args, ctx, info) => {
+				const user = ctx.mustBeLoggedIn();
+
+				const dbUser = await db.query.user
+					.findFirst({
+						where: {
+							id: user.sub
+						}
+					})
+					.then(assertFindFirstExists);
+
+				if (!dbUser.ntfyTopic) {
+					throw new GraphQLError('You need to set a topic first!');
+				}
+
+				await sendMessage({
+					body: 'Test',
+					title: 'Test',
+					targetEmail: dbUser!.email
+				});
+
+				return 'OK';
+			}
 		})
 	};
 });

src/api/services/sendMessage.ts

@@ -40,4 +40,6 @@ export async function sendMessage({
 		topic: foundUser.ntfyTopic,
 		title
 	});
+
+	console.info('Sent notification to', foundUser.email, foundUser.ntfyTopic.slice(0, 5) + '...');
 }

src/routes/app/+page.svelte

@@ -3,7 +3,7 @@
 	import { m } from '$lib/paraglide/messages';
 	import toast from 'svelte-french-toast';
 	import type { PageData } from './$houdini';
-	import { LogOut, Plus, Copy, Undo2, Trash2, SquareArrowOutUpRight } from 'lucide-svelte';
+	import { LogOut, Plus, Copy, Undo2, Trash2, SquareArrowOutUpRight, Send } from 'lucide-svelte';
 	import { Modal } from '@skeletonlabs/skeleton-svelte';
 	import { configPublic } from '$config/public';
 
@@ -30,6 +30,12 @@
 			}
 		}
 	`);
+
+	const SendTestMutation = graphql(`
+		mutation SendTestMutation {
+			sendTest
+		}
+	`);
 </script>
 
 <main class="flex max-w-4xl flex-col justify-between p-2">
@@ -114,6 +120,21 @@
 				>
 			</div>
 		{/if}
+		{#if topic}
+			<h1 class="mt-8 text-3xl font-bold">{m.sendTest()}</h1>
+			<p>{m.sendTestExplaination()}</p>
+			<button
+				type="button"
+				class="btn preset-filled-primary-500 mt-4"
+				onclick={async () => {
+					await SendTestMutation.mutate(null);
+					toast.success(m.sent());
+				}}
+			>
+				<Send />
+				{m.send()}</button
+			>
+		{/if}
 	</div>
 
 	<div>