some S3 compatible storage systems have a region parameter (#524)

* some S3 compatible storage systems have a region parameter

* wip

* wip

* replace current toastMethod by new toastProvider

* wip

* fix failing testcase

* wip

src/components/clipboard/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Icons } from "src/components/icons";
-import { toastError, toastSuccess } from "src/store";
+import { useToast } from "../toast/toast-provider";
 
 type ClipBoardProps = {
   id?: string;
@@ -13,6 +13,7 @@ type ClipBoardProps = {
 const hasClipboard = typeof navigator.clipboard !== "undefined";
 
 export const ClipBoard = ({ text, id = "", name = "" }: ClipBoardProps) => {
+  const { toastSuccess, toastError } = useToast();
   const handleClick = () => {
     navigator.clipboard
       .writeText(text)

src/components/require-auth.cy.tsx

@@ -2,15 +2,18 @@ import React from "react";
 import { H1 } from "@jambonz/ui-kit";
 
 import { RequireAuth } from "./require-auth";
+import { ToastProvider } from "./toast/toast-provider";
 
 /** Wrapper to pass different auth contexts */
 const RequireAuthTestWrapper = () => {
   return (
-    <RequireAuth>
-      <div className="auth-div">
-        <H1>Protected Route</H1>
-      </div>
-    </RequireAuth>
+    <ToastProvider>
+      <RequireAuth>
+        <div className="auth-div">
+          <H1>Protected Route</H1>
+        </div>
+      </RequireAuth>
+    </ToastProvider>
   );
 };
 

src/components/require-auth.tsx

@@ -2,14 +2,15 @@ import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useAuth } from "src/router/auth";
-import { toastError } from "src/store";
 import { ROUTE_LOGIN } from "src/router/routes";
 import { MSG_MUST_LOGIN } from "src/constants";
+import { useToast } from "./toast/toast-provider";
 
 /**
  * Wrapper component that enforces valid authorization to the app
  */
 export const RequireAuth = ({ children }: { children: React.ReactNode }) => {
+  const { toastError } = useToast();
   const { authorized } = useAuth();
   const navigate = useNavigate();
 

src/components/toast/toast-provider.tsx

@@ -0,0 +1,96 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
+import { Toast } from "./index";
+import type { IMessage, Toast as ToastProps } from "src/store/types";
+import { TOAST_TIME } from "src/constants";
+
+// Define the context type
+interface ToastContextType {
+  toastSuccess: (message: IMessage) => void;
+  toastError: (message: IMessage) => void;
+}
+
+// Create the context with a default value
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+/**
+ * Provider component that makes toast functionality available to any
+ * nested components that call useToast().
+ */
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [toast, setToast] = useState<ToastProps | null>(null);
+  const timeoutRef = useRef<number | null>(null);
+
+  // Clear any existing toasts and timeouts
+  const clearToast = useCallback(() => {
+    setToast(null);
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  // Show a toast with the specified type and message
+  const showToast = useCallback(
+    (type: "success" | "error", message: IMessage) => {
+      clearToast();
+
+      setToast({ type, message });
+
+      // Auto-hide after specified time
+      timeoutRef.current = window.setTimeout(() => {
+        setToast(null);
+      }, TOAST_TIME);
+    },
+    [clearToast],
+  );
+
+  // Exposed methods
+  const toastSuccess = useCallback(
+    (message: IMessage) => {
+      showToast("success", message);
+    },
+    [showToast],
+  );
+
+  const toastError = useCallback(
+    (message: IMessage) => {
+      showToast("error", message);
+    },
+    [showToast],
+  );
+
+  // Context value
+  const contextValue = useMemo(
+    () => ({
+      toastSuccess,
+      toastError,
+    }),
+    [toastSuccess, toastError],
+  );
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      {toast && <Toast type={toast.type} message={toast.message} />}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+
+  if (context === undefined) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+
+  return context;
+};