Refine error handling in UI

Implement SystemEndpoint

frontend/App.tsx

@@ -6,9 +6,12 @@ import {themeNames} from "Frontend/theming/themes";
 import {AuthProvider} from "Frontend/util/auth";
 import {IconContext} from "@phosphor-icons/react";
 import {Toaster} from "Frontend/@/components/ui/sonner";
+import client from "Frontend/generated/connect-client.default";
+import {ErrorHandlingMiddleware} from "Frontend/util/middleware";
 
 export default function App() {
     const navigate = useNavigate();
+    client.middlewares.push(ErrorHandlingMiddleware);
 
     return (
         <NextUIProvider className="size-full" navigate={navigate}>

frontend/util/middleware.ts

@@ -0,0 +1,20 @@
+import {Middleware, MiddlewareContext, MiddlewareNext} from '@hilla/frontend';
+import {toast} from "sonner";
+import {getReasonPhrase} from "http-status-codes";
+
+export const ErrorHandlingMiddleware: Middleware = async function(
+    context: MiddlewareContext,
+    next: MiddlewareNext
+) {
+    const {endpoint, method} = context;
+
+    let response: Response = await next(context);
+    if(!response.ok) {
+        //Ignore calls to UserEndpoint.getUserInfo since they are managed by Hilla and called on initial load
+        if(endpoint == "UserEndpoint" && method == "getUserInfo") return response;
+
+        toast.error(`${getReasonPhrase(response.status)}`, {description: `${endpoint}.${method}`})
+    }
+
+    return response;
+}

frontend/views/SetupView.tsx

@@ -100,7 +100,7 @@ function SetupView() {
                                     password: values.password,
                                     email: values.email
                                 });
-                                toast("Setup finished", {description: "Have fun with Gameyfin!"});
+                                toast.success("Setup finished", {description: "Have fun with Gameyfin!"});
                                 navigate('/login');
                             } catch (e) {
                                 alert("An error occurred while completing the setup. Please try again.")

frontend/views/TestView.tsx

@@ -1,20 +1,40 @@
 import {Link} from "react-router-dom";
 import {Button} from "@nextui-org/react";
 import {toast} from "sonner";
+import {SystemEndpoint} from "Frontend/generated/endpoints";
 
 export default function TestView() {
     return (
-        <div className="flex grow justify-center mt-12">
+        <div className="grow justify-center mt-12">
             <div className="flex flex-col items-center gap-6">
                 <Link to="/setup">Setup</Link>
-                <Button onPress={
-                    () => toast("Setup finished", {
-                        description: "Have fun with Gameyfin!",
-                        action: {
-                            label: "OK",
-                            onClick: () => console.log("Ok"),
-                        }
-                    })}>Toast</Button>
+                <div className="flex flex-row gap-4">
+                    <Button onPress={
+                        () => toast("Normal", {
+                            description: "Description",
+                            action: {
+                                label: "OK",
+                                onClick: () => {},
+                            }
+                        })}>Toast (Normal)</Button>
+                    <Button onPress={
+                        () => toast.success("Success", {
+                            description: "Description",
+                            action: {
+                                label: "OK",
+                                onClick: () => {},
+                            }
+                        })}>Toast (Success)</Button>
+                    <Button onPress={
+                        () => toast.error("Error", {
+                            description: "Description",
+                            action: {
+                                label: "OK",
+                                onClick: () => {},
+                            }
+                        })}>Toast (Error)</Button>
+                </div>
+                <Button onPress={() => SystemEndpoint.restart()}>Restart</Button>
             </div>
         </div>
     );