feat: add ApiToast for client reject response

arkemishub · Nov 30, 2023 · 5eba82e · 5eba82e
1 parent 6ea9933
commit 5eba82e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 23 deletions.
diff --git a/arke/getClient.ts b/arke/getClient.ts
@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { Client, HTTPStatusCode, TToken } from "@arkejs/client";
+import { Client, TToken } from "@arkejs/client";
 import { GetServerSidePropsContext } from "next";
 import { getSession } from "next-auth/react";
 import { getToken } from "next-auth/jwt";
 import { getCookie } from "cookies-next";
 import { getCookieName } from "@/utils/auth";
-import toast from "react-hot-toast";
 import { NextParsedUrlQuery } from "next/dist/server/request-meta";
 
 const getServerUrl = () => {
@@ -75,21 +74,13 @@ export const getClient = (context?: {
           return config;
         },
         (err) => {
-          if (err.response) {
-            if (err.response.status === HTTPStatusCode.Forbidden) {
-              toast.error(`You've not permission`, {
-                id: "permission_error",
-              });
-            }
-            if (err.response.status === HTTPStatusCode.InternalServerError) {
-              toast.error(
-                `${err.message}: ${err.response.data?.errors?.detail}`
-              );
-            }
-            return Promise.reject(err);
-          } else {
-            toast.error(`Something went wrong. The Server is unreachable.`);
+          if (window) {
+            const event = new CustomEvent("arke_client_reject", {
+              detail: err,
+            });
+            window.dispatchEvent(event);
           }
+          return Promise.reject(err);
         }
       );
       return api;

diff --git a/components/ApiToast/ApiToast.tsx b/components/ApiToast/ApiToast.tsx
@@ -0,0 +1,36 @@
+import { ReactNode, useEffect } from "react";
+import { HTTPStatusCode } from "@arkejs/client";
+import toast from "react-hot-toast";
+
+export default function ApiToast({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    window.addEventListener("arke_client_reject", onReject, false);
+  }, []);
+
+  function onReject(event: any) {
+    const err = event.detail;
+    try {
+      if (err.response) {
+        if (err.response.status === HTTPStatusCode.Forbidden) {
+          toast.error(
+            `You have not access on resource. Check your permissions`,
+            {
+              id: "permission_error",
+            }
+          );
+        }
+        if (err.response.status === HTTPStatusCode.InternalServerError) {
+          toast.error(`${err.message}: ${err.response.data?.errors?.detail}`);
+        }
+        return Promise.reject(err);
+      } else {
+        toast.error(`Something went wrong. The Server is unreachable.`);
+        return Promise.reject(err);
+      }
+    } catch (e) {
+      return Promise.reject(err);
+    }
+  }
+
+  return <div>{children}</div>;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -23,6 +23,7 @@ import { NextPage } from "next";
 import AppFormConfigProvider from "@/components/AppFormConfigProvider/AppFormConfigProvider";
 import dynamic from "next/dynamic";
 import AppTableConfigProvider from "@/components/Table/AppTableConfigProvider";
+import ApiToast from "@/components/ApiToast/ApiToast";
 
 const Toaster = dynamic(
   () => import("react-hot-toast").then((mod) => mod.Toaster),
@@ -61,13 +62,15 @@ export default function App({
           },
         }}
       />
-      <SessionProvider session={session} basePath="/next/api/auth">
-        <AppTableConfigProvider>
-          <AppFormConfigProvider>
-            <Component {...pageProps} />
-          </AppFormConfigProvider>
-        </AppTableConfigProvider>
-      </SessionProvider>
+      <ApiToast>
+        <SessionProvider session={session} basePath="/next/api/auth">
+          <AppTableConfigProvider>
+            <AppFormConfigProvider>
+              <Component {...pageProps} />
+            </AppFormConfigProvider>
+          </AppTableConfigProvider>
+        </SessionProvider>
+      </ApiToast>
     </main>
   );
 }