Reskinning stuck to bug reporting (hackclub#1649)

* Reskinning stuck to bug reporting

* rename stuck to bug report

* Do away w/ stuckcategory

* revert

* Switch to bug category

* typo

* ...

* add debug logging on failure to update airtable

* Update navbar-editor.tsx

forcing recompile

src/components/navbar-editor.tsx

@@ -54,8 +54,7 @@ interface EditorNavbarProps {
 	persistenceState: Signal<PersistenceState>
 }
 
-type StuckCategory = "Logic Error" | "Syntax Error" | "Other";
-
+type StuckCategory = "Logic Error" | "Syntax Error" | "Other" | "UI" | "Code Compilation" | "Bitmap Editor" | "Tune Editor" | "Help/Tutorial Window" | "AI Chat" | "Website";
 type StuckData = {
 	category: StuckCategory
 	description: string
@@ -212,7 +211,7 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 
 			<li>
 				<Button class={styles.stuckBtn} onClick={() => showStuckPopup.value = !showStuckPopup.value} disabled={!isLoggedIn}>
-					I'm stuck
+					Report a bug
 				</Button>
 			</li>
 
@@ -298,13 +297,13 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 					};
 
 					try {
-						const response = await fetch("/api/stuck-request", {
+						const response = await fetch("/api/bug-report", {
 							method: "POST",
 							body: JSON.stringify(payload)
 						})
 						// Let the user know we'll get back to them after we've receive their complaint
 						if (response.ok) {
-							alert("We received your request and will get back to you via email.")
+							alert("We received your bug report!  Thanks!")
 						} else alert("We couldn't send your request. Please make sure you're connected and try again.")
 
 					} catch (err) {
@@ -317,9 +316,14 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 					<select value={stuckData.value.category} onChange={(event) => {
 						stuckData.value = { ...stuckData.value, category: (event.target! as HTMLSelectElement).value as StuckCategory }
 					}} name="" id="">
-						<option value={"Logic Error"}>Logic Error</option>
-						<option value={"Syntax Error"}>Syntax Error</option>
 						<option value={"Other"}>Other</option>
+						<option value={"UI"}>UI</option>
+						<option value={"Code Compilation"}>Code Compilation</option>
+						<option value={"Bitmap Editor"}>Bitmap Editor</option>
+						<option value={"Tune Editor"}>Tune Editor</option>
+						<option value={"Help/Tutorial Window"}>Help/Tutorial Window</option>
+						<option value={"AI Chat"}>AI Chat</option>
+						<option value={"Website"}>Website</option>
 					</select>
 					<label htmlFor="Description">Please describe the issue you're facing below</label>
 					<Textarea required value={stuckData.value.description} onChange={event => {

src/pages/api/stuck-request.ts → src/pages/api/bug-report.ts

@@ -18,20 +18,24 @@ export const post: APIRoute = async ({ request }) => {
 			records: [
 				{
 					fields: {
-					  Selection: payload.selection,
+						Selection: payload.selection,
 						Email: payload.email,
 						"Error Log": JSON.stringify(payload.error),
 						"Session Length": payload.sessionLength,
 						Code: payload.code,
-						Category: payload.category,
-						Description: payload.description,
-						"Fixed Code": ""
+						"Bug category": payload.category,
+						Description: payload.description
 					}
 				}
 			]
 		})
 	});
 
+	if (response.status != 200) {
+		console.log(response)
+		console.log("Failed uploading to bug airtable db!")
+	}
 	const data = await response.json();
-	return new Response(JSON.stringify(data), { status: response.status })
+	const resp = new Response(JSON.stringify(data), { status: response.status })
+	return resp
 }