Consolidate toast container (#2283)

sillsdev · Jun 16, 2023 · 7f8b3b0 · 7f8b3b0
1 parent a85b6be
commit 7f8b3b0
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 19 deletions.
diff --git a/src/components/App/component.tsx b/src/components/App/component.tsx
@@ -12,6 +12,7 @@ import PasswordRequest from "components/PasswordReset/Request";
 import PasswordReset from "components/PasswordReset/ResetPage";
 import ProjectInvite from "components/ProjectInvite/ProjectInvite";
 import RequireAuth from "components/RequireAuth";
+import UpperRightToastContainer from "components/Toast/UpperRightToastContainer";
 
 const AppWithBar = loadable(() => import("components/App/AppLoggedIn"));
 
@@ -23,6 +24,7 @@ export default function App(): ReactElement {
     <div className="App">
       <Suspense fallback={<div />}>
         <AnnouncementBanner />
+        <UpperRightToastContainer />
         <Switch>
           <Route exact path={Path.Root}>
             <LandingPage />

diff --git a/src/components/ProjectSettings/ProjectLanguages.tsx b/src/components/ProjectSettings/ProjectLanguages.tsx
@@ -23,7 +23,6 @@ import { WritingSystem } from "api/models";
 import { getFrontierWords } from "backend";
 import { IconButtonWithTooltip } from "components/Buttons";
 import { ProjectSettingPropsWithUpdate } from "components/ProjectSettings/ProjectSettingsTypes";
-import { UpperRightToastContainer } from "components/Toast/UpperRightToastContainer";
 import theme from "types/theme";
 import { newWritingSystem, semDomWritingSystems } from "types/writingSystem";
 import { getAnalysisLangsFromWords } from "utilities/wordUtilities";
@@ -142,7 +141,6 @@ export default function ProjectLanguages(
 
   return (
     <>
-      <UpperRightToastContainer />
       <Typography>
         {t("projectSettings.language.vernacular")}
         {": "}

diff --git a/src/components/ProjectSettings/ProjectUsers/AddProjectUsers.tsx b/src/components/ProjectSettings/ProjectUsers/AddProjectUsers.tsx
@@ -9,7 +9,6 @@ import * as backend from "backend";
 import { asyncRefreshCurrentProjectUsers } from "components/Project/ProjectActions";
 import EmailInvite from "components/ProjectSettings/ProjectUsers/EmailInvite";
 import UserList from "components/ProjectSettings/ProjectUsers/UserList";
-import { UpperRightToastContainer } from "components/Toast/UpperRightToastContainer";
 import { StoreState } from "types";
 import { useAppDispatch, useAppSelector } from "types/hooks";
 import { RuntimeConfig } from "types/runtimeConfig";
@@ -59,7 +58,6 @@ export default function AddProjectUsers(): ReactElement {
     <>
       <Grid container spacing={1}>
         <UserList projectUsers={projectUsers} addToProject={addToProject} />
-        <UpperRightToastContainer />
       </Grid>
 
       {RuntimeConfig.getInstance().emailServicesEnabled() && (

diff --git a/src/components/Pronunciations/AudioRecorder.tsx b/src/components/Pronunciations/AudioRecorder.tsx
@@ -4,7 +4,6 @@ import { toast } from "react-toastify";
 
 import Recorder from "components/Pronunciations/Recorder";
 import RecorderIcon from "components/Pronunciations/RecorderIcon";
-import { UpperRightToastContainer } from "components/Toast/UpperRightToastContainer";
 
 interface RecorderProps {
   wordId: string;
@@ -49,13 +48,10 @@ export default function AudioRecorder(props: RecorderProps): ReactElement {
   }
 
   return (
-    <>
-      <UpperRightToastContainer />
-      <RecorderIcon
-        wordId={props.wordId}
-        startRecording={startRecording}
-        stopRecording={stopRecording}
-      />
-    </>
+    <RecorderIcon
+      wordId={props.wordId}
+      startRecording={startRecording}
+      stopRecording={stopRecording}
+    />
   );
 }
diff --git a/src/components/Pronunciations/tests/__snapshots__/Pronunciations.test.tsx.snap b/src/components/Pronunciations/tests/__snapshots__/Pronunciations.test.tsx.snap
@@ -2,9 +2,6 @@
 
 exports[`Pronunciations displays buttons 1`] = `
 Array [
-  <div
-    className="Toastify"
-  />,
   <button
     aria-label="record"
     aria-labelledby={null}

diff --git a/src/components/SiteSettings/UserManagement/UserManagement.tsx b/src/components/SiteSettings/UserManagement/UserManagement.tsx
@@ -8,7 +8,6 @@ import { User } from "api/models";
 import { deleteUser, getAllUsers } from "backend";
 import ConfirmDeletion from "components/SiteSettings/UserManagement/ConfirmDeletion";
 import UserList from "components/SiteSettings/UserManagement/UserList";
-import { UpperRightToastContainer } from "components/Toast/UpperRightToastContainer";
 
 const customStyles = {
   content: {
@@ -70,7 +69,6 @@ export default function UserManagement(): ReactElement {
     <>
       <Grid container spacing={1}>
         <UserList allUsers={allUsers} handleOpenModal={handleOpenModal} />
-        <UpperRightToastContainer />
       </Grid>
 
       <Modal

diff --git a/src/components/Toast/UpperRightToastContainer.tsx b/src/components/Toast/UpperRightToastContainer.tsx
@@ -5,7 +5,7 @@ import "react-toastify/dist/ReactToastify.min.css";
 
 /** A pre-configured ToastContainer to consistently display toasts in the
  * upper right corner of the screen. */
-export function UpperRightToastContainer(): ReactElement {
+export default function UpperRightToastContainer(): ReactElement {
   return (
     <ToastContainer
       position="top-right"