[frontend] Basic user moderation actions (#1728)

* remove info banner

* update swagger definition for AccountAction

* basic user view, suspend action

* clean up suspended user display

* basic user searching

* rename User -> Account for clarity

* refactor error boundary component to give better info

* appease the linter

web/source/settings/lib/navigation/components.jsx

@@ -21,11 +21,8 @@
 
 const React = require("react");
 const { Link, Route, Redirect, Switch, useLocation, useRouter } = require("wouter");
-const { ErrorBoundary } = require("react-error-boundary");
 const syncpipe = require("syncpipe");
 
-const { ErrorFallback } = require("../../components/error");
-
 const {
 	RoleContext,
 	useHasPermission,
@@ -72,8 +69,8 @@ function ViewRouter(routing, defaultRoute) {
 				(_) => _.map((route) => {
 					return (
 						<Route path={route.routingUrl} key={route.key}>
-							<ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => { }}>
-								{/* FIXME: implement onReset */}
+							<ErrorBoundary>
+								{/* FIXME: implement reset */}
 								<BaseUrlContext.Provider value={route.url}>
 									{route.view}
 								</BaseUrlContext.Provider>
@@ -134,6 +131,71 @@ function MenuComponent({ type, name, url, icon, permissions, links, level, child
 	);
 }
 
+class ErrorBoundary extends React.Component {
+
+	constructor() {
+		super();
+		this.state = {};
+
+		this.resetErrorBoundary = () => {
+			this.setState({});
+		};
+	}
+
+	static getDerivedStateFromError(error) {
+		return { hadError: true, error };
+	}
+
+	componentDidCatch(_e, info) {
+		this.setState({
+			...this.state,
+			componentStack: info.componentStack
+		});
+	}
+
+	render() {
+		if (this.state.hadError) {
+			return (
+				<ErrorFallback
+					error={this.state.error}
+					componentStack={this.state.componentStack}
+					resetErrorBoundary={this.resetErrorBoundary}
+				/>
+			);
+		} else {
+			return this.props.children;
+		}
+	}
+}
+
+function ErrorFallback({ error, componentStack, resetErrorBoundary }) {
+	return (
+		<div className="error">
+			<p>
+				{"An error occured, please report this on the "}
+				<a href="https://github.com/superseriousbusiness/gotosocial/issues">GoToSocial issue tracker</a>
+				{" or "}
+				<a href="https://matrix.to/#/#gotosocial-help:superseriousbusiness.org">Matrix support room</a>.
+				<br />Include the details below:
+			</p>
+			<div className="details">
+				<pre>
+					{error.name}: {error.message}
+
+					{componentStack && [
+						"\n\nComponent trace:",
+						componentStack
+					]}
+					{["\n\nError trace: ", error.stack]}
+				</pre>
+			</div>
+			<p>
+				<button onClick={resetErrorBoundary}>Try again</button> or <a href="">refresh the page</a>
+			</p>
+		</div>
+	);
+}
+
 module.exports = {
 	Sidebar,
 	ViewRouter,