feat: add error boundary and snackbar store (keep-starknet-strange#15)

* feat: add error boundary and snackbar store

* chore: add placeholder for logging service

* chore: make toast styles constant

* chore: shift toast options to global level

src/renderer/components/ErrorBoundary.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { toast } from 'react-toastify';
+import defaultToastStyleOptions from 'shared/constants';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+interface State {
+  error: boolean | Error;
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { error: false };
+  }
+
+  static getDerivedStateFromError(error: Error): object {
+    return { error };
+  }
+
+  // componentDidCatch(error: Error, errorInfo: any): void {
+  //   // add our error logging service here
+  //   // errorLoggingService(error,errorInfo)
+  // }
+
+  render(): React.ReactNode {
+    const { children } = this.props;
+    const { error } = this.state;
+    if (error) {
+      toast('Something went wrong', defaultToastStyleOptions);
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;

src/renderer/index.tsx

@@ -2,8 +2,11 @@ import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { MemoryRouter as Router } from 'react-router-dom';
 import { PersistGate } from 'redux-persist/integration/react';
+import { ToastContainer } from 'react-toastify';
 import App from './App';
 import store, { persistor } from './store/store';
+import ErrorBoundary from './components/ErrorBoundary';
+import 'react-toastify/dist/ReactToastify.css';
 
 declare global {
   interface Window {
@@ -14,11 +17,14 @@ declare global {
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
 root.render(
-  <Provider store={store}>
-    <PersistGate persistor={persistor}>
-      <Router>
-        <App />
-      </Router>
-    </PersistGate>
-  </Provider>
+  <ErrorBoundary>
+    <Provider store={store}>
+      <PersistGate persistor={persistor}>
+        <Router>
+          <App />
+        </Router>
+      </PersistGate>
+      <ToastContainer />
+    </Provider>
+  </ErrorBoundary>
 );

src/renderer/pages/Apps.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { Id, ToastContainer, ToastOptions, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Button from 'renderer/components/Button';
+import defaultToastStyleOptions from 'shared/constants';
 import {
   selectInstalledApps,
   selectRunningApps,
@@ -121,12 +122,8 @@ export default function Apps() {
       data: { appId: string; progress: Progress; filename: string }
     ) => {
       const TOAST_STYLE: ToastOptions = {
-        position: 'bottom-center',
+        ...defaultToastStyleOptions,
         hideProgressBar: false,
-        closeOnClick: false,
-        pauseOnHover: false,
-        draggable: false,
-        theme: 'dark',
         progressClassName: 'toast-progress-bar',
         autoClose: false,
       };

src/renderer/pages/Navigation.tsx

@@ -10,6 +10,7 @@ import {
   startNode,
   stopNode,
 } from 'renderer/features/nodeSlice';
+import { showSnackbar } from 'renderer/store/snackbar';
 import { useAppDispatch, useAppSelector } from 'renderer/utils/hooks';
 import { styled } from 'styled-components';
 import Spinner from 'renderer/components/Spinner';
@@ -133,9 +134,14 @@ export default function Navigtion() {
   const runningApps = useAppSelector(selectRunningApps);
 
   const handleScreenshot = async () => {
-    setShowSpinner(true);
-    await window.electron.ipcRenderer.madara.sendTweet();
-    setShowSpinner(false);
+    try {
+      setShowSpinner(true);
+      await window.electron.ipcRenderer.madara.sendTweet();
+      setShowSpinner(false);
+    } catch (err) {
+      dispatch(showSnackbar());
+      setShowSpinner(false);
+    }
   };
 
   return (

src/renderer/store/snackbar.ts

@@ -0,0 +1,39 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { toast, ToastOptions } from 'react-toastify';
+import defaultToastStyleOptions from 'shared/constants';
+
+const initialState = {
+  isVisible: false,
+};
+
+const snackbarSlice = createSlice({
+  name: 'snackbar',
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: {
+    showToast: (state) => {
+      state.isVisible = true;
+    },
+    hideToast: (state) => {
+      state.isVisible = false;
+    },
+  },
+});
+
+const { showToast, hideToast } = snackbarSlice.actions;
+
+export const showSnackbar = (message?: string) => (dispatch: any) => {
+  dispatch(showToast());
+  const TOAST_STYLE: ToastOptions = {
+    ...defaultToastStyleOptions,
+    autoClose: 2000,
+  };
+  toast(message ?? 'Something went wrong', { ...TOAST_STYLE });
+};
+
+export const hideSnackbar = () => (dispatch: any) => {
+  dispatch(hideToast());
+  toast.dismiss();
+};
+
+export default snackbarSlice.reducer;

src/renderer/store/store.ts

@@ -4,6 +4,7 @@ import storage from 'redux-persist/lib/storage';
 import appsReducer from '../features/appsSlice';
 import nodeReducer from '../features/nodeSlice';
 import walletReducer from '../features/walletSlice';
+import snackbarReducer from './snackbar';
 
 const persistConfig = {
   key: 'root',
@@ -16,6 +17,7 @@ const rootReducer = combineReducers({
   node: nodeReducer,
   wallet: walletReducer,
   apps: appsReducer,
+  snackbar: snackbarReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

src/shared/constants.ts

@@ -0,0 +1,12 @@
+import { ToastOptions } from 'react-toastify';
+
+const defaultToastStyleOptions: ToastOptions = {
+  position: 'bottom-center',
+  hideProgressBar: true,
+  closeOnClick: false,
+  pauseOnHover: false,
+  draggable: false,
+  theme: 'dark',
+};
+
+export default defaultToastStyleOptions;