Refactor toast

package-lock.json

@@ -19,8 +19,7 @@
         "next": "^14.0.4",
         "qrcode.react": "^3.1.0",
         "react": "^18",
-        "react-dom": "^18",
-        "react-hot-toast": "^2.4.1"
+        "react-dom": "^18"
       },
       "devDependencies": {
         "@types/js-yaml": "^4.0.9",
@@ -2008,7 +2007,8 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -3073,14 +3073,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/goober": {
-      "version": "2.1.14",
-      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
-      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
-      "peerDependencies": {
-        "csstype": "^3.0.10"
-      }
-    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -4609,21 +4601,6 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-hot-toast": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
-      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
-      "dependencies": {
-        "goober": "^2.1.10"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -20,8 +20,7 @@
     "next": "^14.0.4",
     "qrcode.react": "^3.1.0",
     "react": "^18",
-    "react-dom": "^18",
-    "react-hot-toast": "^2.4.1"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",

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,16 +34,19 @@ export const ConnectionProvider = ({
     shouldConnect: boolean;
   }>({ wsUrl: "", token: "", shouldConnect: false, mode: "manual" });
 
-  const connect = useCallback(async (mode: ConnectionMode) => {
+  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."
-        );
+          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") {
@@ -50,19 +54,24 @@ export const ConnectionProvider = ({
           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());
+        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,
-  ]);
+      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 (
+    <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>