Better Feedback API
This commit is contained in:
parent
d58d95b768
commit
fb4646500c
@ -1,10 +1,5 @@
|
|||||||
import { fetcher } from "itty-fetcher";
|
import { fetcher } from "itty-fetcher";
|
||||||
|
import { FeedbackSchema } from "../types/Feedback";
|
||||||
interface Feedback {
|
|
||||||
message: string;
|
|
||||||
feedbackType?: string;
|
|
||||||
contactEmail?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const feedbackOptions = [
|
const feedbackOptions = [
|
||||||
{ label: "🐞 Bug", value: "bug" },
|
{ label: "🐞 Bug", value: "bug" },
|
||||||
@ -24,12 +19,15 @@ function getFeedbackOption(value: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async (event) => {
|
||||||
const { message, contactEmail, feedbackType } = await readBody<Feedback>(event);
|
const { message, page, contact, type } = await readValidatedBody(event, FeedbackSchema.parse);
|
||||||
const env = useRuntimeConfig(event);
|
const env = useRuntimeConfig(event);
|
||||||
|
|
||||||
if (!["bug", "suggestion", "other", "appreciate"].includes(feedbackType!) || !message) {
|
if (!["bug", "suggestion", "other", "appreciate"].includes(type!) || !message)
|
||||||
throw new Error("Invalid input.");
|
throw new Error("Invalid input.");
|
||||||
}
|
|
||||||
|
let description = `${message}\n\n`;
|
||||||
|
if (contact) description += `**Contact:** ${contact}`;
|
||||||
|
if (page) description += `**Page:** \`${page}\``;
|
||||||
|
|
||||||
await fetcher()
|
await fetcher()
|
||||||
.post(env.WEBHOOK_URL, {
|
.post(env.WEBHOOK_URL, {
|
||||||
@ -38,8 +36,8 @@ export default defineEventHandler(async (event) => {
|
|||||||
embeds: [
|
embeds: [
|
||||||
{
|
{
|
||||||
color: 3447003,
|
color: 3447003,
|
||||||
title: getFeedbackOption(feedbackType).label,
|
title: getFeedbackOption(type).label,
|
||||||
description: contactEmail ? `${message}\n\n**Contact:** ${contactEmail}` : message,
|
description: description,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
@ -47,5 +45,5 @@ export default defineEventHandler(async (event) => {
|
|||||||
throw new Error(error);
|
throw new Error(error);
|
||||||
});
|
});
|
||||||
|
|
||||||
return { status: "success" };
|
return { status: "ok" };
|
||||||
});
|
});
|
||||||
|
@ -1,18 +1,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref } from "vue";
|
import { reactive, ref } from "vue";
|
||||||
|
import { useRoute } from "vitepress";
|
||||||
|
import type { FeedbackType } from "../../types/Feedback";
|
||||||
|
|
||||||
interface Feedback {
|
const loading = ref<boolean>(false);
|
||||||
message: string;
|
|
||||||
feedbackType?: string;
|
|
||||||
contactEmail?: string;
|
|
||||||
anonymous: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const loading = ref(false);
|
|
||||||
const error = ref<unknown>(null);
|
const error = ref<unknown>(null);
|
||||||
const success = ref(false);
|
const success = ref<boolean>(false);
|
||||||
|
const { path } = useRoute();
|
||||||
|
|
||||||
const feedback = reactive<Feedback>({ message: "", anonymous: false, contactEmail: "" });
|
const feedback = reactive<FeedbackType>({ message: "", contact: "" });
|
||||||
|
|
||||||
const feedbackOptions = [
|
const feedbackOptions = [
|
||||||
{ label: "🐞 Bug", value: "bug" },
|
{ label: "🐞 Bug", value: "bug" },
|
||||||
@ -31,18 +27,17 @@ function getFeedbackOption(value: string) {
|
|||||||
return feedbackOptions.find((option) => option.value === value);
|
return feedbackOptions.find((option) => option.value === value);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleSubmit(type?: string) {
|
async function handleSubmit(type?: FeedbackType["type"]) {
|
||||||
if (type) feedback.feedbackType = type as string;
|
if (type) feedback.type = type;
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
|
|
||||||
const body: Feedback = {
|
const body: FeedbackType = {
|
||||||
message: feedback.message,
|
message: feedback.message,
|
||||||
feedbackType: feedback.feedbackType,
|
type: feedback.type,
|
||||||
anonymous: feedback.anonymous,
|
contact: feedback.contact,
|
||||||
contactEmail: feedback.contactEmail,
|
page: path,
|
||||||
};
|
};
|
||||||
|
|
||||||
// TODO: fix this horror?
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch("https://feedback.tasky.workers.dev", {
|
const response = await fetch("https://feedback.tasky.workers.dev", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
@ -72,42 +67,33 @@ async function handleSubmit(type?: string) {
|
|||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<Transition name="fade" mode="out-in">
|
<Transition name="fade" mode="out-in">
|
||||||
<div v-if="!feedback.feedbackType" class="step">
|
<div v-if="!feedback.type" class="step">
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<p class="heading">Feedback</p>
|
<p class="heading">Feedback</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<button
|
<button v-for="item in feedbackOptions" :key="item.value" class="btn"
|
||||||
v-for="item in feedbackOptions"
|
@click="handleSubmit(item.value as FeedbackType['type'])">
|
||||||
:key="item.value"
|
|
||||||
class="btn"
|
|
||||||
@click="handleSubmit(item.value)">
|
|
||||||
<span>{{ item.label }}</span>
|
<span>{{ item.label }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="feedback.feedbackType && !success" class="step">
|
<div v-else-if="feedback.type && !success" class="step">
|
||||||
<div>
|
<div>
|
||||||
<p class="desc">The wiki is...</p>
|
<p class="desc">The wiki is... • {{ path }}</p>
|
||||||
<div>
|
<div>
|
||||||
<span>{{ getFeedbackOption(feedback.feedbackType)?.label }}</span>
|
<span>{{ getFeedbackOption(feedback.type)?.label }}</span>
|
||||||
<button
|
<button style="margin-left: 0.5rem" class="btn" @click="feedback.type = undefined">
|
||||||
style="margin-left: 0.5rem"
|
|
||||||
class="btn"
|
|
||||||
@click="feedback.feedbackType = undefined">
|
|
||||||
<span class="i-carbon-close-large">close</span>
|
<span class="i-carbon-close-large">close</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<textarea v-model="feedback.message" autofocus class="input" />
|
<textarea v-model="feedback.message" autofocus class="input" />
|
||||||
<p class="desc">Contacts, so we can get back to you. (Optional)</p>
|
<p class="desc">Contacts, so we can get back to you. (Optional)</p>
|
||||||
<textarea v-model="feedback.contactEmail" class="contact-input" />
|
<textarea v-model="feedback.contact" class="contact-input" />
|
||||||
<button
|
<button type="submit" class="btn btn-primary" :disabled="feedback.message.length > 10" @click="handleSubmit()">
|
||||||
class="btn btn-primary"
|
|
||||||
:disabled="feedback.message.length > 10"
|
|
||||||
@click="handleSubmit()">
|
|
||||||
Submit
|
Submit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
10
.vitepress/types/Feedback.ts
Normal file
10
.vitepress/types/Feedback.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import z from "zod";
|
||||||
|
|
||||||
|
export const FeedbackSchema = z.object({
|
||||||
|
message: z.string().min(5).max(1000),
|
||||||
|
type: z.enum(["bug", "suggestion", "appreciate", "other"]),
|
||||||
|
contact: z.string().min(5).max(20).optional(),
|
||||||
|
page: z.string().min(3).max(10),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type FeedbackType = z.infer<typeof FeedbackSchema>;
|
@ -25,7 +25,8 @@
|
|||||||
"vitepress": "1.0.0-rc.25",
|
"vitepress": "1.0.0-rc.25",
|
||||||
"vue": "^3.3.7",
|
"vue": "^3.3.7",
|
||||||
"workbox-window": "^7.0.0",
|
"workbox-window": "^7.0.0",
|
||||||
"x-satori": "^0.1.5"
|
"x-satori": "^0.1.5",
|
||||||
|
"zod": "^3.22.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-json/carbon": "^1.1.21",
|
"@iconify-json/carbon": "^1.1.21",
|
||||||
|
7
pnpm-lock.yaml
generated
7
pnpm-lock.yaml
generated
@ -43,6 +43,9 @@ dependencies:
|
|||||||
x-satori:
|
x-satori:
|
||||||
specifier: ^0.1.5
|
specifier: ^0.1.5
|
||||||
version: 0.1.5
|
version: 0.1.5
|
||||||
|
zod:
|
||||||
|
specifier: ^3.22.4
|
||||||
|
version: 3.22.4
|
||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@iconify-json/carbon':
|
'@iconify-json/carbon':
|
||||||
@ -6619,3 +6622,7 @@ packages:
|
|||||||
compress-commons: 5.0.1
|
compress-commons: 5.0.1
|
||||||
readable-stream: 3.6.2
|
readable-stream: 3.6.2
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/zod@3.22.4:
|
||||||
|
resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
|
||||||
|
dev: false
|
||||||
|
Loading…
Reference in New Issue
Block a user