0ct0pu5/runtipi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: remove ToastProvider and toastStore

Browse source
This commit is contained in:
Nicolas Meienberger 2023-04-08 18:34:51 +02:00
parent 9fa8452e24
commit 86061ed7c3
5 changed files with 3 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/client/components/hoc/ToastProvider/ToastProvider.test.tsx
View file

@ -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();
});
});
});

24
src/client/components/hoc/ToastProvider/ToastProvider.tsx
View file

@ -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}
</>
);
};

1
src/client/components/hoc/ToastProvider/index.ts
View file

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

46
src/client/state/toastStore.ts
View file

@ -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: [] }),
}));

9
src/pages/_app.tsx
View file

@ -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>