matrix-art

commit 24e8976578f9beb5a2f2400fce7109da5d5523ba
parent 5218655f369aad6e0932e74a88012a9c43c9df77
Author: MTRNord <mtrnord1@gmail.com>
Date:   Tue,  1 Feb 2022 23:16:41 +0100

Make sure to handle errors everywhere using toasts

Diffstat:
M
components/FrontPageImage.tsx
 | 
13
++++++++++++-
M
components/Header.tsx
 | 
10
++++++++++
M
helpers/matrix_client.ts
 | 
4
++--
M
pages/login.tsx
 | 
10
++++++++++
M
pages/post/[id].tsx
 | 
14
++++++++++++--
M
pages/profile/[userid].tsx
 | 
10
++++++++++
M
pages/submit.tsx
 | 
1
+

7 files changed, 57 insertions(+), 5 deletions(-)
diff --git a/components/FrontPageImage.tsx b/components/FrontPageImage.tsx
@@ -5,6 +5,8 @@ import { ImageEvent, ImageGalleryEvent, MatrixEventBase, MatrixImageEvents } fro
 import { constMatrixArtServer } from "../helpers/matrix_client";
 import { ClientContext } from "./ClientContext";
 import PropTypes from 'prop-types';
+import { toast } from "react-toastify";
+import { i18n } from "next-i18next";
 
 type Props = {
     event: MatrixImageEvents;
@@ -15,7 +17,7 @@ type Props = {
 type State = {
     displayname: string;
     imageHeight?: string;
-    error: any;
+    error?: string;
 };
 
 export default class FrontPageImage extends PureComponent<Props, State> {
@@ -36,6 +38,15 @@ export default class FrontPageImage extends PureComponent<Props, State> {
         show_nsfw: PropTypes.bool
     };
 
+    componentDidUpdate(prevProps: Props, prevState: State) {
+        if (this.state.error && this.state.error !== prevState.error) {
+            toast.dismiss();
+            toast(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{this.state.error}</div>, {
+                autoClose: false
+            });
+        }
+    }
+
     async componentDidMount() {
         // auto-register as a guest if not logged in
         if (!this.context.client?.accessToken) {
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -3,6 +3,7 @@ import { PureComponent } from "react";
 import User from "../helpers/db/Users";
 import { ClientContext } from "./ClientContext";
 import { i18n } from 'next-i18next';
+import { toast } from "react-toastify";
 
 type Props = {
 
@@ -26,6 +27,15 @@ export default class Header extends PureComponent<Props, State> {
         } as State;
     }
 
+    componentDidUpdate(prevProps: Props, prevState: State) {
+        if (this.state.error && this.state.error !== prevState.error) {
+            toast.dismiss();
+            toast(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{this.state.error}</div>, {
+                autoClose: false
+            });
+        }
+    }
+
     async componentDidMount() {
         try {
             const data = await fetch("/api/directory", { method: "GET" });
diff --git a/helpers/matrix_client.ts b/helpers/matrix_client.ts
@@ -186,7 +186,7 @@ export default class MatrixClient {
     }
 
     async setDisplayname(newDisplayname: string) {
-        const data = await this.fetchJson(
+        await this.fetchJson(
             `${this.serverUrl}/r0/profile/${encodeURIComponent(this.userId!)}/displayname`,
             {
                 method: "PUT",
@@ -204,7 +204,7 @@ export default class MatrixClient {
     }
 
     async setAvatarUrl(newAvatarUrl: string) {
-        const data = await this.fetchJson(
+        await this.fetchJson(
             `${this.serverUrl}/r0/profile/${encodeURIComponent(this.userId!)}/avatar_url`,
             {
                 method: "PUT",
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -5,6 +5,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { NextRouter, withRouter } from "next/router";
 import { PureComponent, ReactNode } from "react";
+import { toast } from "react-toastify";
 import { ClientContext } from "../components/ClientContext";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
@@ -42,6 +43,15 @@ class Login extends PureComponent<Props, State> {
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
+    componentDidUpdate(prevProps: Props, prevState: State) {
+        if (this.state.error && this.state.error !== prevState.error) {
+            toast.dismiss();
+            toast(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{this.state.error}</div>, {
+                autoClose: false
+            });
+        }
+    }
+
     handleInputChange(event: { target: any; }) {
         const target = event.target;
         const value = target.type === 'checkbox' ? target.checked : target.value;
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -20,6 +20,7 @@ import { Blurhash } from 'react-blurhash';
 import User from '../../helpers/db/Users';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { i18n } from 'next-i18next';
+import { toast } from 'react-toastify';
 
 type Props = InferGetServerSidePropsType<typeof getServerSideProps> & {
     router: NextRouter;
@@ -30,8 +31,8 @@ type State = {
     hasFullyLoaded: boolean;
     isLoadingImages: boolean;
     image_event?: MatrixImageEvents;
+    error?: string;
     displayname: string;
-    error?: any;
     avatar_url?: string;
 };
 
@@ -50,6 +51,15 @@ class Post extends PureComponent<Props, State> {
         };
     }
 
+    componentDidUpdate(prevProps: Props, prevState: State) {
+        if (this.state.error && this.state.error !== prevState.error) {
+            toast.dismiss();
+            toast(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{this.state.error}</div>, {
+                autoClose: false
+            });
+        }
+    }
+
     async componentDidMount() {
         if (!this.context.client?.accessToken) {
             try {
@@ -165,7 +175,7 @@ class Post extends PureComponent<Props, State> {
     }
 
     render() {
-        const { error, hasFullyLoaded, image_event, displayname, avatar_url } = this.state;
+        const { hasFullyLoaded, image_event, displayname, avatar_url } = this.state;
 
         if (!hasFullyLoaded) {
             return (
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -5,6 +5,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { NextRouter, withRouter } from "next/router";
 import { PureComponent } from "react";
+import { toast } from "react-toastify";
 import { ClientContext } from "../../components/ClientContext";
 import { EditIcon } from "../../components/editIcon";
 import Footer from "../../components/Footer";
@@ -50,6 +51,15 @@ class Profile extends PureComponent<Props, State> {
         } as State;
     }
 
+    componentDidUpdate(prevProps: Props, prevState: State) {
+        if (this.state.error && this.state.error !== prevState.error) {
+            toast.dismiss();
+            toast(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{this.state.error}</div>, {
+                autoClose: false
+            });
+        }
+    }
+
     async componentDidMount() {
         // auto-register as a guest if not logged in
         if (!this.context.client?.accessToken) {
diff --git a/pages/submit.tsx b/pages/submit.tsx
@@ -86,6 +86,7 @@ class Submit extends PureComponent<Props, State> implements DropCallbacks {
     }
     componentDidUpdate(prevProps: Props, prevState: State) {
         if (this.state.error && this.state.error !== prevState.error) {
+            toast.dismiss();
             toast(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{this.state.error}</div>, {
                 autoClose: false
             });