From 89dcbd5a201f830812e49ed5d8e37c00d16b838b Mon Sep 17 00:00:00 2001
From: f0x52 <f0x@cthu.lu>
Date: Sat, 13 May 2023 12:17:22 +0200
Subject: [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 | 72 +++++++++++++++++++++--
 1 file changed, 67 insertions(+), 5 deletions(-)

(limited to 'web/source/settings/lib/navigation/components.jsx')

diff --git a/web/source/settings/lib/navigation/components.jsx b/web/source/settings/lib/navigation/components.jsx
index 18e0cd76c..365ebff89 100644
--- a/web/source/settings/lib/navigation/components.jsx
+++ b/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,
-- 
cgit v1.2.3