Change toasts

Author: singiamtel

package-lock.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.5",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20.11.30",
     "@types/react": "18.2.67",
@@ -56,7 +57,6 @@
     "react-loader-spinner": "^6.1.6",
     "react-modal": "^3.16.1",
     "react-textarea-autosize": "^8.5.3",
-    "react-toastify": "^10.0.5",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "sanitize-html-react": "^1.13.0",
     "tailwind-merge": "^2.2.2",

package.json

@@ -3,26 +3,25 @@ import { faBarChart, faPieChart } from '@fortawesome/free-solid-svg-icons';
 
 import Sidebar from './components/single/Sidebar';
 import BigPanel from './components/single/BigPanel';
-import ToastProvider from './components/single/ToastProvider';
 import { TrainerCardProvider } from './components/single/TrainerCard/TrainerCardContext';
 import { useClientStore } from '@/client/client';
+import { Toaster } from '@/components/ui/toaster';
 
 library.add(faBarChart, faPieChart);
 
 export default function App() {
     const theme = useClientStore(state => state.theme);
     return (
         <div className={`${theme === 'dark' ? 'dark' : ''}`}>
-            <ToastProvider>
-                <div
-                    className={`grid grid-cols-7 grid-rows-1 md:h-screen text-text dark:text-text-dark dark:bg-gray-300 w-screen dark:[color-scheme:dark]`}
-                >
-                    <TrainerCardProvider>
-                        <Sidebar className="md:col-span-1 col-span-7 hidden md:flex" />
-                        <BigPanel className="md:col-span-6 col-span-7" />
-                    </TrainerCardProvider>
-                </div>
-            </ToastProvider>
+            <div
+                className={`grid grid-cols-7 grid-rows-1 md:h-screen text-text dark:text-text-dark dark:bg-gray-300 w-screen dark:[color-scheme:dark]`}
+            >
+                <TrainerCardProvider>
+                    <Sidebar className="md:col-span-1 col-span-7 hidden md:flex" />
+                    <BigPanel className="md:col-span-6 col-span-7" />
+                </TrainerCardProvider>
+            </div>
+            <Toaster />
         </div>
     );
 }

src/UI/App.tsx

@@ -5,8 +5,7 @@ import { notificationsEngine, RoomNotification } from '../../../client/notificat
 import { Room } from '../../../client/room/room';
 import { loadCustomColors } from '../../../utils/namecolour';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-
-import { toast } from 'react-toastify';
+import { toast } from '@/components/ui/use-toast';
 
 interface ClientContextType {
     client: Client;
@@ -71,7 +70,11 @@ export default function ClientContextProvider(props: Readonly<React.PropsWithChi
         const error = (e as CustomEvent).detail;
         console.warn('Received error from socket', error);
         if (error) {
-            toast.error(error);
+            toast({
+                variant: 'destructive',
+                title: 'Error',
+                description: error,
+            });
         }
     };
 

src/UI/components/single/ClientContext.tsx

@@ -26,7 +26,7 @@ import { useClientStore } from '@/client/client';
 
 export default function Sidebar(props: Readonly<HTMLAttributes<'div'>>) {
     const rooms = useClientStore((state) => state.rooms);
-    const roomsArray = Array.from(rooms.values());
+    const roomsArray = Array.from(rooms.values()).filter(room => room.open);
 
     const mouseSensor = useSensor(MouseSensor, {
     // Require the mouse to move by 10 pixels before activating