feedback fixes (#867)

apps/landing/src/app/api/feedback/route.ts

@@ -9,32 +9,48 @@ const feedbackSchema = z.object({
 		required_error: 'Feedback is required',
 		invalid_type_error: 'Feedback must be a string'
 	}),
-	emoji: z.string({
-		required_error: 'Emoji is required',
-		invalid_type_error: 'Emoji must be a string'
-	})
+	emoji: z
+		.string({
+			required_error: 'Emoji is required',
+			invalid_type_error: 'Emoji must be a string'
+		})
+		.emoji()
+		.max(2)
+		.optional()
 });
 
+const CORS_HEADERS = {
+	'Access-Control-Allow-Origin': '*',
+	'Access-Control-Allow-Methods': 'POST, OPTIONS',
+	'Access-Control-Allow-Headers': 'Content-Type, Authorization'
+};
+
 export async function POST(req: NextRequest) {
 	const result = feedbackSchema.safeParse(await req.json());
-	if (!result.success) {
+
+	if (!result.success)
 		return new Response(
 			JSON.stringify({
 				message: result.error.toString()
 			}),
 			{
-				status: 400
+				status: 400,
+				headers: {
+					...CORS_HEADERS
+				}
 			}
 		);
-	}
+
 	try {
+		const { emoji, feedback } = result.data;
+
 		const slackMessage = {
 			blocks: [
 				{
 					type: 'section',
 					text: {
 						type: 'mrkdwn',
-						text: `${result.data.feedback} ${result.data.emoji}`
+						text: `${feedback}${emoji !== undefined && `\n\n${result.data.emoji}`}`
 					}
 				}
 			]
@@ -43,22 +59,37 @@ export async function POST(req: NextRequest) {
 			method: 'POST',
 			body: JSON.stringify(slackMessage)
 		});
+
 		return new Response(undefined, {
-			status: 204
+			status: 204,
+			headers: {
+				...CORS_HEADERS
+			}
 		});
 	} catch (error) {
 		console.error(error);
 		return new Response(
 			JSON.stringify({
-				message: "Something went wrong. Please try again."
+				message: 'Something went wrong. Please try again.'
 			}),
 			{
 				status: 500,
 				headers: {
-					'Content-Type': 'application/json'
+					'Content-Type': 'application/json',
+					...CORS_HEADERS
 				}
 			}
 		);
 	}
-
+}
+
+export async function OPTIONS() {
+	return new Response('', {
+		status: 200,
+		headers: {
+			'Access-Control-Allow-Origin': '*',
+			'Access-Control-Allow-Methods': 'POST, OPTIONS',
+			'Access-Control-Allow-Headers': 'Content-Type, Authorization'
+		}
+	});
 }

interface/app/$libraryId/Layout/Sidebar/FeedbackDialog.tsx

@@ -6,8 +6,9 @@ import { showAlertDialog } from '~/components';
 
 const schema = z.object({
 	feedback: z.string().min(1),
-	emoji: z.string().max(1)
+	emoji: z.string().emoji().max(2).optional()
 });
+
 const EMOJIS = ['🤩', '😀', '🙁', '😭'];
 const FEEDBACK_URL = 'https://spacedrive.com/api/feedback';
 
@@ -42,7 +43,7 @@ export default function FeedbackDialog(props: UseDialogProps) {
 			dialog={useDialog(props)}
 			form={form}
 			onSubmit={formSubmit}
-			submitDisabled={form.formState.isSubmitting || !watchForm.feedback || !watchForm.emoji}
+			submitDisabled={form.formState.isSubmitting || !watchForm.feedback}
 			ctaLabel="Submit"
 			closeLabel="Cancel"
 			buttonsSideContent={
@@ -52,7 +53,7 @@ export default function FeedbackDialog(props: UseDialogProps) {
 							onClick={() => emojiSelectHandler(i)}
 							key={i.toString()}
 							className={clsx(
-								emojiSelected === emoji ? 'bg-green-600' : 'bg-app-input',
+								emojiSelected === emoji ? 'bg-accent' : 'bg-app-input',
 								'flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border border-app-line transition-all duration-200 hover:scale-125'
 							)}
 						>