Replace uses of alert with SnackBar(toast)

package.json

@@ -45,6 +45,7 @@
     "@microsoft/signalr": "^6.0.7",
     "@segment/analytics-next": "^1.40.0",
     "axios": "^0.27.2",
+    "crypto-js": "^4.1.1",
     "http-status-codes": "^2.1.4",
     "i18next": "^21.6.16",
     "i18next-browser-languagedetector": "^6.1.4",
@@ -53,6 +54,7 @@
     "make-dir": "^3.1.0",
     "motion": "^10.15.5",
     "mui-language-picker": "^1.1.15",
+    "notistack": "^2.0.8",
     "nspell": "^2.1.5",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.0.0",
@@ -67,7 +69,6 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.0",
-    "crypto-js": "^4.1.1",
     "sweetalert2": "^11.7.1",
     "ts-key-enum": "^2.0.12",
     "uuid": "^8.3.2",
@@ -78,6 +79,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^14.1.1",
+    "@types/crypto-js": "^4.1.1",
     "@types/jest": "^29.4.0",
     "@types/loadable__component": "^5.13.4",
     "@types/nspell": "^2.1.1",
@@ -90,7 +92,6 @@
     "@types/react-test-renderer": "^17.0.0",
     "@types/redux-mock-store": "^1.0.3",
     "@types/segment-analytics": "^0.0.34",
-    "@types/crypto-js": "^4.1.1",
     "@types/uuid": "^8.3.1",
     "@types/validator": "^13.7.11",
     "@typescript-eslint/eslint-plugin": "^5.51.0",

src/components/ProjectExport/ExportButton.tsx

@@ -1,4 +1,5 @@
 import { ButtonProps } from "@material-ui/core/Button";
+import { useSnackbar } from "notistack";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -17,13 +18,14 @@ interface ExportButtonProps {
 export default function ExportButton(props: ExportButtonProps) {
   const dispatch = useDispatch();
   const { t } = useTranslation();
+  const { enqueueSnackbar } = useSnackbar();
 
   function exportProj() {
     isFrontierNonempty(props.projectId).then((isNonempty) => {
       if (isNonempty) {
         dispatch(asyncExportProject(props.projectId));
       } else {
-        alert(t("projectExport.cannotExportEmpty"));
+        enqueueSnackbar(t("projectExport.cannotExportEmpty"));
       }
     });
   }

src/goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTable.tsx

@@ -1,5 +1,6 @@
 import MaterialTable from "@material-table/core";
 import { Typography } from "@material-ui/core";
+import { useSnackbar } from "notistack";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
@@ -37,6 +38,7 @@ export default function ReviewEntriesTable(
     (state: StoreState) => state.currentProjectState.project.definitionsEnabled
   );
   const { t } = useTranslation();
+  const { enqueueSnackbar } = useSnackbar();
 
   return (
     <MaterialTable<any>
@@ -59,7 +61,7 @@ export default function ReviewEntriesTable(
               .onRowUpdate(newData, oldData)
               .then(resolve)
               .catch((reason) => {
-                alert(t(reason));
+                enqueueSnackbar(t(reason));
                 reject(reason);
               });
           }),

src/goals/ReviewEntries/ReviewEntriesComponent/tests/ReviewEntriesComponent.test.tsx

@@ -14,6 +14,7 @@ const mockGetFrontierWords = jest.fn();
 const mockMaterialTable = jest.fn();
 const mockUpdateAllWords = jest.fn();
 const mockUuid = jest.fn();
+const mockEnqueue = jest.fn();
 
 // To deal with the table not wanting to behave in testing.
 jest.mock("@material-table/core", () => ({
@@ -28,6 +29,15 @@ jest.mock("@material-ui/core", () => {
     Dialog: material.Container,
   };
 });
+
+jest.mock("notistack", () => ({
+  ...jest.requireActual("notistack"),
+  useSnackbar: () => {
+    return {
+      enqueueSnackbar: mockEnqueue,
+    };
+  },
+}));
 jest.mock("uuid", () => ({ v4: () => mockUuid() }));
 jest.mock("backend", () => ({
   getFrontierWords: () => mockGetFrontierWords(),

src/index.tsx

@@ -1,4 +1,5 @@
 import ThemeProvider from "@material-ui/styles/ThemeProvider";
+import { SnackbarProvider } from "notistack";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { Router } from "react-router-dom";
@@ -13,13 +14,15 @@ import theme from "types/theme";
 //Provider connects store to component containers
 ReactDOM.render(
   <ThemeProvider theme={theme}>
-    <Provider store={store}>
-      <Router history={history}>
-        <PersistGate persistor={persistor}>
-          <App />
-        </PersistGate>
-      </Router>
-    </Provider>
+    <SnackbarProvider maxSnack={3} autoHideDuration={5000}>
+      <Provider store={store}>
+        <Router history={history}>
+          <PersistGate persistor={persistor}>
+            <App />
+          </PersistGate>
+        </Router>
+      </Provider>
+    </SnackbarProvider>
   </ThemeProvider>,
   document.getElementById("root")
 );