chore: remove ToastProvider and toastStore

src/client/components/hoc/ToastProvider/ToastProvider.test.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { act, render, renderHook, screen, waitFor } from '../../../../../tests/test-utils';
-import { useToastStore } from '../../../state/toastStore';
-import { ToastProvider } from './ToastProvider';
-
-describe('Test: ToastProvider', () => {
-  it("should render it's children", async () => {
-    render(
-      <ToastProvider>
-        <div>children</div>
-      </ToastProvider>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('children')).toBeInTheDocument();
-    });
-  });
-
-  it('should render Toasts', async () => {
-    render(
-      <ToastProvider>
-        <div>children</div>
-      </ToastProvider>,
-    );
-    const { result } = renderHook(() => useToastStore());
-
-    act(() => {
-      result.current.addToast({
-        status: 'success',
-        title: 'title',
-        description: 'description',
-        id: 'id',
-      });
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('title')).toBeInTheDocument();
-    });
-  });
-
-  it('should remove Toasts when the close button is clicked', async () => {
-    render(
-      <ToastProvider>
-        <div>children</div>
-      </ToastProvider>,
-    );
-    const { result } = renderHook(() => useToastStore());
-
-    act(() => {
-      result.current.addToast({
-        status: 'success',
-        title: 'title',
-        description: 'description',
-        id: 'id',
-      });
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('title')).toBeInTheDocument();
-    });
-
-    act(() => {
-      screen.getByTestId('toast-close-button').click();
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByText('title')).not.toBeInTheDocument();
-    });
-  });
-});

src/client/components/hoc/ToastProvider/ToastProvider.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { IToast, useToastStore } from '../../../state/toastStore';
-import { Toast } from '../../ui/Toast';
-
-export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { toasts, removeToast } = useToastStore();
-
-  const renderToast = (toast: IToast) => {
-    const { status, title, description, id } = toast;
-
-    return <Toast status={status} title={title} message={description} id={id} onClose={() => removeToast(id)} />;
-  };
-
-  return (
-    <>
-      {toasts.map((toast) => (
-        <div key={toast.id} className="position-fixed bottom-0 end-0 p-3" style={{ zIndex: 11 }}>
-          {renderToast(toast)}
-        </div>
-      ))}
-      {children}
-    </>
-  );
-};

src/client/components/hoc/ToastProvider/index.ts

@@ -1 +0,0 @@
-export { ToastProvider } from './ToastProvider';

src/client/state/toastStore.ts

@@ -1,46 +0,0 @@
-import { create } from 'zustand';
-
-export type IToast = {
-  id: string;
-  title: string;
-  description?: string;
-  status: 'error' | 'success' | 'warning' | 'info';
-  position?: 'top';
-  isClosable?: true;
-};
-
-type Store = {
-  toasts: IToast[];
-  addToast: (toast: Omit<IToast, 'id'>) => void;
-  removeToast: (id: string) => void;
-  clearToasts: () => void;
-};
-
-export const useToastStore = create<Store>((set) => ({
-  toasts: [],
-  addToast: (toast: Omit<IToast, 'id'>) => {
-    const { title, description, status, position = 'top', isClosable = true } = toast;
-    const id = Math.random().toString(36).substring(2, 9);
-
-    const toastToAdd = {
-      id,
-      title,
-      description,
-      status,
-      position,
-      isClosable,
-    };
-
-    set((state) => ({
-      toasts: [...state.toasts, { ...toastToAdd, id }],
-    }));
-
-    setTimeout(() => {
-      set((state) => ({
-        toasts: state.toasts.filter((t) => t.id !== id),
-      }));
-    }, 5000);
-  },
-  removeToast: (id: string) => set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) })),
-  clearToasts: () => set({ toasts: [] }),
-}));

src/pages/_app.tsx

@@ -7,7 +7,6 @@ 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';
 import { trpc } from '../client/utils/trpc';
 import { SystemStatus, useSystemStore } from '../client/state/systemStore';
@@ -50,11 +49,9 @@ function MyApp({ Component, pageProps }: AppProps) {
       <Head>
         <title>Tipi</title>
       </Head>
-      <ToastProvider>
-        <StatusProvider>
-          <Component {...pageProps} />
-        </StatusProvider>
-      </ToastProvider>
+      <StatusProvider>
+        <Component {...pageProps} />
+      </StatusProvider>
       <Toaster />
       <ReactQueryDevtools />
     </main>