Slack通知基盤の作成 (#135)

close #133

.github/workflows/firebase-hosting-merge.yml

@@ -24,6 +24,8 @@ jobs:
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: bun install --frozen-lockfile
       - run: bun run build
+        env:
+          VITE_WEBHOOK_URL: ${{ secrets.WEBHOOK_URL }}
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/firebase-hosting-pull-request.yml

@@ -26,6 +26,8 @@ jobs:
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: bun install --frozen-lockfile
       - run: bun run build
+        env:
+          VITE_WEBHOOK_URL: ${{ secrets.WEBHOOK_URL }}
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -3,7 +3,8 @@ node_modules
 /.cache
 /build
 /public/build
-.env
+.env*
+!.env.example
 
 .firebase
 .firebaserc

app/lib/webhook.ts

@@ -0,0 +1,17 @@
+export const sendSlackMessage = async (message: string) => {
+  const webhookUrl = import.meta.env.VITE_WEBHOOK_URL;
+
+  if (!webhookUrl) {
+    throw new Error("WEBHOOK_URL is not defined");
+  }
+
+  const response = await fetch(webhookUrl, {
+    method: "POST",
+    body: JSON.stringify({ text: message }),
+  });
+
+  if (!response.ok) {
+    console.log(response);
+    throw new Error("Failed to send message");
+  }
+};

app/routes/items/actions/addItem.ts

@@ -1,5 +1,6 @@
 import { parseWithZod } from "@conform-to/zod";
 import { type ClientActionFunction, json } from "@remix-run/react";
+import { sendSlackMessage } from "~/lib/webhook";
 import { ItemEntity, itemSchema } from "~/models/item";
 import { itemRepository } from "~/repositories/item";
 
@@ -14,7 +15,11 @@ export const addItem: ClientActionFunction = async ({ request }) => {
   }
 
   const newItem = ItemEntity.createNew(submission.value);
-  const savedItem = await itemRepository.save(newItem);
+  const itemSavePromise = itemRepository.save(newItem);
+  const webhookSendPromise = sendSlackMessage(
+    `新しいアイテムが追加されました！\n${newItem.name}`,
+  );
+  const [savedItem] = await Promise.all([itemSavePromise, webhookSendPromise]);
 
   console.log("Document written with ID: ", savedItem.id);
   return json(submission.reply({ resetForm: true }), { status: 200 });

app/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_WEBHOOK_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}