Refactor toast

src/components/toast/PlaygroundToast.tsx

@@ -1,3 +1,5 @@
+import { useToast } from "./ToasterProvider";
+
 export type ToastType = "error" | "success" | "info";
 export type ToastProps = {
   message: string;
@@ -5,16 +7,24 @@ export type ToastProps = {
   onDismiss: () => void;
 };
 
-export const PlaygroundToast = ({ message, type, onDismiss }: ToastProps) => {
+export const PlaygroundToast = () => {
+  const { toastMessage, setToastMessage } = useToast();
   const color =
-    type === "error" ? "red" : type === "success" ? "green" : "amber";
+    toastMessage?.type === "error"
+      ? "red"
+      : toastMessage?.type === "success"
+      ? "green"
+      : "amber";
+
   return (
     <div
       className={`absolute text-sm break-words px-4 pr-12 py-2 bg-${color}-950 rounded-sm border border-${color}-800 text-${color}-400 top-4 left-4 right-4`}
     >
       <button
         className={`absolute right-2 border border-transparent rounded-md px-2 hover:bg-${color}-900 hover:text-${color}-300`}
-        onClick={onDismiss}
+        onClick={() => {
+          setToastMessage(null);
+        }}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -31,7 +41,7 @@ export const PlaygroundToast = ({ message, type, onDismiss }: ToastProps) => {
           />
         </svg>
       </button>
-      {message}
+      {toastMessage?.message}
     </div>
   );
 };

src/components/toast/ToasterProvider.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import React, { createContext, useState } from "react";
+import { ToastType } from "./PlaygroundToast";
+
+type ToastProviderData = {
+  setToastMessage: (
+    message: { message: string; type: ToastType } | null
+  ) => void;
+  toastMessage: { message: string; type: ToastType } | null;
+};
+
+const ToastContext = createContext<ToastProviderData | undefined>(undefined);
+
+export const ToastProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [toastMessage, setToastMessage] = useState<{message: string, type: ToastType} | null>(null);
+
+  return (
+    <ToastContext.Provider
+      value={{
+        toastMessage,
+        setToastMessage
+      }}
+    >
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = React.useContext(ToastContext);
+  if (context === undefined) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}

src/hooks/useConnection.tsx

@@ -4,7 +4,7 @@ import { useCloud } from "@/cloud/useCloud";
 import React, { createContext, useState } from "react";
 import { useCallback } from "react";
 import { useConfig } from "./useConfig";
-import toast from "react-hot-toast";
+import { useToast } from "@/components/toast/ToasterProvider";
 
 export type ConnectionMode = "cloud" | "manual" | "env"
 
@@ -25,6 +25,7 @@ export const ConnectionProvider = ({
   children: React.ReactNode;
 }) => {
   const { generateToken, wsUrl: cloudWSUrl } = useCloud();
+  const { setToastMessage } = useToast();
   const { config } = useConfig();
   const [connectionDetails, setConnectionDetails] = useState<{
     wsUrl: string;
@@ -33,36 +34,44 @@ export const ConnectionProvider = ({
     shouldConnect: boolean;
   }>({ wsUrl: "", token: "", shouldConnect: false, mode: "manual" });
 
-  const connect = useCallback(async (mode: ConnectionMode) => {
-    let token = "";
-    let url = "";
-    if (mode === "cloud") {
-      try {
-        token = await generateToken();
-      } catch (error) {
-        toast.error(
-          "Failed to generate token, you may need to increase your role in this LiveKit Cloud project."
+  const connect = useCallback(
+    async (mode: ConnectionMode) => {
+      let token = "";
+      let url = "";
+      if (mode === "cloud") {
+        try {
+          token = await generateToken();
+        } catch (error) {
+          setToastMessage({
+            type: "error",
+            message:
+              "Failed to generate token, you may need to increase your role in this LiveKit Cloud project.",
+          });
+        }
+        url = cloudWSUrl;
+      } else if (mode === "env") {
+        if (!process.env.NEXT_PUBLIC_LIVEKIT_URL) {
+          throw new Error("NEXT_PUBLIC_LIVEKIT_URL is not set");
+        }
+        url = process.env.NEXT_PUBLIC_LIVEKIT_URL;
+        const { accessToken } = await fetch("/api/token").then((res) =>
+          res.json()
         );
+        token = accessToken;
+      } else {
+        token = config.settings.token;
+        url = config.settings.ws_url;
       }
-      url = cloudWSUrl;
-    } else if (mode === "env") {
-      if(!process.env.NEXT_PUBLIC_LIVEKIT_URL) {
-        throw new Error("NEXT_PUBLIC_LIVEKIT_URL is not set");
-      }
-      url = process.env.NEXT_PUBLIC_LIVEKIT_URL;
-      const {accessToken} = await fetch("/api/token").then((res) => res.json());
-      token = accessToken;
-    } else {
-      token = config.settings.token;
-      url = config.settings.ws_url;
-    }
-    setConnectionDetails({ wsUrl: url, token, shouldConnect: true, mode });
-  }, [
-    cloudWSUrl,
-    config.settings.token,
-    config.settings.ws_url,
-    generateToken,
-  ]);
+      setConnectionDetails({ wsUrl: url, token, shouldConnect: true, mode });
+    },
+    [
+      cloudWSUrl,
+      config.settings.token,
+      config.settings.ws_url,
+      generateToken,
+      setToastMessage,
+    ]
+  );
 
   const disconnect = useCallback(async () => {
     setConnectionDetails((prev) => ({ ...prev, shouldConnect: false }));

src/pages/_app.tsx

@@ -1,12 +1,10 @@
 import { CloudProvider } from "@/cloud/useCloud";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
-import { Toaster } from "react-hot-toast";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <CloudProvider>
-      <Toaster />
       <Component {...pageProps} />
     </CloudProvider>
   );}

src/pages/index.tsx

@@ -14,6 +14,7 @@ import { PlaygroundToast, ToastType } from "@/components/toast/PlaygroundToast";
 import { ConfigProvider, useConfig } from "@/hooks/useConfig";
 import { ConnectionMode, ConnectionProvider, useConnection } from "@/hooks/useConnection";
 import { useMemo } from "react";
+import { ToastProvider, useToast } from "@/components/toast/ToasterProvider";
 
 const themeColors = [
   "cyan",
@@ -30,23 +31,22 @@ const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
-    <ConfigProvider>
-      <ConnectionProvider>
-        <HomeInner />
-      </ConnectionProvider>
-    </ConfigProvider>
+    <ToastProvider>
+      <ConfigProvider>
+        <ConnectionProvider>
+          <HomeInner />
+        </ConnectionProvider>
+      </ConfigProvider>
+    </ToastProvider>
   );
 }
 
 export function HomeInner() {
-  const [toastMessage, setToastMessage] = useState<{
-    message: string;
-    type: ToastType;
-  } | null>(null);
   const { shouldConnect, wsUrl, token, mode, connect, disconnect } =
     useConnection();
   
   const {config} = useConfig();
+  const { toastMessage, setToastMessage } = useToast();
 
   const handleConnect = useCallback(
     async (c: boolean, mode: ConnectionMode) => {
@@ -93,13 +93,7 @@ export function HomeInner() {
               animate={{ opacity: 1, translateY: 0 }}
               exit={{ opacity: 0, translateY: -50 }}
             >
-              <PlaygroundToast
-                message={toastMessage.message}
-                type={toastMessage.type}
-                onDismiss={() => {
-                  setToastMessage(null);
-                }}
-              />
+              <PlaygroundToast />
             </motion.div>
           )}
         </AnimatePresence>