From 8b54d502f26b88916fff609314783693223a460a Mon Sep 17 00:00:00 2001 From: John Costa Date: Sat, 30 Aug 2025 11:15:17 +0100 Subject: [PATCH] feat: showing limits error on frontend --- frontend/src/App.tsx | 76 +++++++++++++++++------------ frontend/src/contexts/send-image.ts | 48 ++++++++++-------- frontend/src/network/index.ts | 13 ++++- frontend/src/utils/show-toast.tsx | 37 ++++++++++++++ 4 files changed, 123 insertions(+), 51 deletions(-) create mode 100644 frontend/src/utils/show-toast.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index aad3bf1..84de5ad 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,13 +1,13 @@ import { Navigate, Route, Router } from "@solidjs/router"; import { onAndroidMount } from "./mobile"; import { - FrontPage, - ImagePage, - Login, - Settings, - SearchPage, - AllImages, - List, + FrontPage, + ImagePage, + Login, + Settings, + SearchPage, + AllImages, + List, } from "./pages"; import { SearchImageContextProvider } from "@contexts/SearchImageContext"; import { WithNotifications } from "@contexts/Notifications"; @@ -15,32 +15,46 @@ import { ProtectedRoute } from "@components/protected-route"; import { AppWrapper } from "@components/app-wrapper"; import { WithTopbarAndDock } from "@components/app-wrapper/with-topbar-and-dock"; import { onSendImage } from "@contexts/send-image"; +import { Toast } from "@kobalte/core/toast"; +import { Portal } from "solid-js/web"; export const App = () => { - onAndroidMount(); - onSendImage(); + onAndroidMount(); + onSendImage(); - return ( - - - - + return ( + + + + - - - - - - - - - - - - - - } /> - - - ); + + + + + + + + + + + + + + } /> + + + + + + + + + ); }; diff --git a/frontend/src/contexts/send-image.ts b/frontend/src/contexts/send-image.ts index e6f083e..1d9a23e 100644 --- a/frontend/src/contexts/send-image.ts +++ b/frontend/src/contexts/send-image.ts @@ -1,32 +1,42 @@ import { createEffect } from "solid-js"; import { listen } from "@tauri-apps/api/event"; import { getCurrentWindow } from "@tauri-apps/api/window"; -import { sendImage } from "@network/index"; +import { ImageLimitReached, sendImage } from "@network/index"; +import { createToast } from "../utils/show-toast"; export const onSendImage = () => { - let sentImage = ""; + let sentImage = ""; - createEffect(async () => { - // Listen for PNG processing events - const unlisten = listen("png-processed", async (event) => { - const base64Data = event.payload as string; + createEffect(async () => { + // Listen for PNG processing events + const unlisten = listen("png-processed", async (event) => { + const base64Data = event.payload as string; - if (base64Data === sentImage) { - return; - } + if (base64Data === sentImage) { + return; + } - sentImage = base64Data; + sentImage = base64Data; - const appWindow = getCurrentWindow(); + const appWindow = getCurrentWindow(); - appWindow.show(); - appWindow.setFocus(); + appWindow.show(); + appWindow.setFocus(); - await sendImage("test-image.png", base64Data); - }); + try { + await sendImage("test-image.png", base64Data); + } catch (e) { + if (e instanceof ImageLimitReached) { + createToast("Limits reached!", "You've reached your image limit") + console.log("Reached image limits!"); + } else { + throw e + } + } + }); - return () => { - unlisten.then((fn) => fn()); // Cleanup listener - }; - }); + return () => { + unlisten.then((fn) => fn()); // Cleanup listener + }; + }); }; diff --git a/frontend/src/network/index.ts b/frontend/src/network/index.ts index 530e139..3104092 100644 --- a/frontend/src/network/index.ts +++ b/frontend/src/network/index.ts @@ -68,6 +68,12 @@ export const sendImageFile = async ( return parse(sendImageResponseValidator, res); }; +export class ImageLimitReached extends Error { + constructor() { + super(); + } +} + export const sendImage = async ( imageName: string, base64Image: string, @@ -80,7 +86,12 @@ export const sendImage = async ( request.headers.set("Content-Type", "application/base64"); - const res = await fetch(request).then((res) => res.json()); + const rawRes = await fetch(request); + if (!rawRes.ok && rawRes.status == 429) { + throw new ImageLimitReached() + } + + const res = await rawRes.json(); return parse(sendImageResponseValidator, res); }; diff --git a/frontend/src/utils/show-toast.tsx b/frontend/src/utils/show-toast.tsx new file mode 100644 index 0000000..1a79aac --- /dev/null +++ b/frontend/src/utils/show-toast.tsx @@ -0,0 +1,37 @@ +import { Toast, toaster } from "@kobalte/core/toast"; +import { IconCircleDashedX } from "@tabler/icons-solidjs"; + +export const createToast = (title: string, text: string) => { + console.log("creating toast") + toaster.show((props) => ( + +
+
+
+ +
+
+ + {title} + + + {text} + +
+
+
+
+ + Close + +
+ + + + + )); +};