error report link

src/components/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import NotificationsProvider from '../state/Notifications/NotificationsProvider';
 import AuthenticationContext from './Authentication/AuthenticationContext';
 import EasterEgg from './EasterEgg';
+import ErrorReport from './ErrorReport';
 import Footer from './Footer';
 import Header from './Header/Header';
 import {
@@ -49,7 +50,7 @@ export default function App() {
 		<div
 			style={{
 				padding: '1rem',
-				maxWidth: '100vw',
+				maxWidth: 'calc(100vw - 0.75rem)',
 				minHeight: 'calc(100vh - 2rem)',
 				position: 'relative',
 			}}
@@ -77,6 +78,7 @@ export default function App() {
 					) : (
 						<BrowserRouter>
 							<WheelShareLoggedOut />
+							<Route component={ErrorReport} path="/error-report" />
 							<Route
 								component={Authenticator}
 								path="/auth/:provider/callback"

src/components/ErrorReport.tsx

@@ -0,0 +1,34 @@
+import { useCallback, useRef, useState } from 'react';
+import { sendErrorReport } from './api';
+import UIButton from './UI/UIButton';
+
+export default function ErrorReport() {
+	const ref = useRef<HTMLTextAreaElement>(null);
+	const [status, setStatus] =
+		useState<null | 'pending' | 'resolved' | 'rejected'>(null);
+	const submit = useCallback(() => {
+		const text = ref.current?.value ?? '';
+		if (text.length > 0) {
+			setStatus('pending');
+			sendErrorReport(text)
+				.then(() => setStatus('resolved'))
+				.catch(() => setStatus('rejected'));
+		}
+	}, []);
+	return (
+		<div>
+			<h1>Error Report</h1>
+			<textarea ref={ref} cols={80} rows={5} />
+			{status === 'pending' ? (
+				<>Submitting...</>
+			) : status === 'resolved' ? (
+				<>Submitted!</>
+			) : (
+				<>
+					{status === 'rejected' && <>Failed to submit.</>}
+					<UIButton onClick={submit}>Submit</UIButton>
+				</>
+			)}
+		</div>
+	);
+}

src/components/Footer.tsx

@@ -6,7 +6,8 @@ export default function Footer() {
 				bottom: '0.5rem',
 				fontSize: '0.75rem',
 				textAlign: 'center',
-				width: '100%',
+				left: 0,
+				right: 0,
 			}}
 		>
 			Made by <a href="https://linkedin.com/in/michaelfatemi">Michael Fatemi</a>
@@ -19,6 +20,7 @@ export default function Footer() {
 			Code:{' '}
 			<a href="https://github.com/myfatemi04/wheelshare-frontend">frontend</a>,{' '}
 			<a href="https://github.com/myfatemi04/wheelshare-altbackend">backend</a>{' '}
+			<a href="/error-report">Report an error</a>{' '}
 			<a
 				href="https://ko-fi.com/michaelfatemi"
 				target="_blank"
@@ -31,6 +33,7 @@ export default function Footer() {
 					padding: '0.5em',
 					color: 'white',
 					textDecoration: 'none',
+					marginTop: '0.5rem',
 				}}
 			>
 				<img

src/components/api.ts

@@ -298,3 +298,17 @@ export async function getPotentialInvitees(
 ): Promise<PotentialInvitee[]> {
 	return await get(`/carpools/${carpoolId}/potential_invitees`);
 }
+
+export async function sendErrorReport(error: string) {
+	const response = await fetch(`${domain}user_reported_error`, {
+		method: 'post',
+		body: JSON.stringify({ error }),
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	});
+
+	if (response.status !== 200) {
+		throw new Error(response.statusText);
+	}
+}