chore: install react-hot-toast and setup global Toaster

package.json

@@ -60,6 +60,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.7",
+    "react-hot-toast": "^2.4.0",
     "react-markdown": "^8.0.3",
     "react-select": "^5.6.1",
     "react-tooltip": "^5.10.5",

pnpm-lock.yaml

@@ -94,6 +94,9 @@ dependencies:
   react-hook-form:
     specifier: ^7.43.7
     version: 7.43.7(react@18.2.0)
+  react-hot-toast:
+    specifier: ^2.4.0
+    version: 2.4.0(csstype@3.1.1)(react-dom@18.2.0)(react@18.2.0)
   react-markdown:
     specifier: ^8.0.3
     version: 8.0.5(@types/react@18.0.28)(react@18.2.0)
@@ -4690,6 +4693,14 @@ packages:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
     dev: true
 
+  /goober@2.1.12(csstype@3.1.1):
+    resolution: {integrity: sha512-yXHAvO08FU1JgTXX6Zn6sYCUFfB/OJSX8HHjDSgerZHZmFKAb08cykp5LBw5QnmyMcZyPRMqkdyHUSSzge788Q==}
+    peerDependencies:
+      csstype: ^3.0.10
+    dependencies:
+      csstype: 3.1.1
+    dev: false
+
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
@@ -7216,6 +7227,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-hot-toast@2.4.0(csstype@3.1.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      goober: 2.1.12(csstype@3.1.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - csstype
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import Head from 'next/head';
 import '../client/styles/global.css';
 import '../client/styles/global.scss';
 import 'react-tooltip/dist/react-tooltip.css';
+import { Toaster } from 'react-hot-toast';
 import { useUIStore } from '../client/state/uiStore';
 import { ToastProvider } from '../client/components/hoc/ToastProvider';
 import { StatusProvider } from '../client/components/hoc/StatusProvider';
@@ -54,6 +55,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           <Component {...pageProps} />
         </StatusProvider>
       </ToastProvider>
+      <Toaster />
       <ReactQueryDevtools />
     </main>
   );

tests/client/jest.setup.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import { server } from '../../src/client/mocks/server';
-import { useToastStore } from '../../src/client/state/toastStore';
 
 // Mock next/router
 // eslint-disable-next-line global-require
@@ -42,15 +41,22 @@ const localStorageMock = (() => {
 
 Object.defineProperty(window, 'localStorage', { value: localStorageMock });
 Object.defineProperty(window, 'ResizeObserver', { value: ResizeObserver });
+Object.defineProperty(window, 'matchMedia', {
+  value: () => {
+    return {
+      matches: false,
+      addListener: () => {},
+      removeListener: () => {},
+    };
+  },
+});
 
 beforeAll(() => {
   // Enable the mocking in tests.
   server.listen();
 });
 
-beforeEach(async () => {
-  useToastStore.getState().clearToasts();
-});
+beforeEach(async () => {});
 
 afterEach(() => {
   // Reset any runtime handlers tests may use.

tests/test-utils.tsx

@@ -1,8 +1,14 @@
 import React, { FC, ReactElement } from 'react';
 import { render, RenderOptions, renderHook } from '@testing-library/react';
+import { Toaster } from 'react-hot-toast';
 import { TRPCTestClientProvider } from './TRPCTestClientProvider';
 
-const AllTheProviders: FC<{ children: React.ReactNode }> = ({ children }) => <TRPCTestClientProvider>{children}</TRPCTestClientProvider>;
+const AllTheProviders: FC<{ children: React.ReactNode }> = ({ children }) => (
+  <TRPCTestClientProvider>
+    {children}
+    <Toaster />
+  </TRPCTestClientProvider>
+);
 
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) => render(ui, { wrapper: AllTheProviders, ...options });
 const customRenderHook = (callback: () => any, options?: Omit<RenderOptions, 'wrapper'>) => renderHook(callback, { wrapper: AllTheProviders, ...options });