react: custom toast impl.

Author: Nikituh

react-js/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { useNavigate } from 'react-router-dom';
-import { Alert, Box, List, Snackbar } from "@mui/material";
+import { Box, List } from "@mui/material";
 import {
     Code,
     DirectionsCar,
@@ -21,12 +21,13 @@ import SectionHeader from "./subviews/SectionHeader";
 import { TopBar } from "./subviews/TopBar";
 import SBSDKService from "./service/SBSDKService";
 import ImageUtils, { MimeType } from "./service/ImageUtils";
+import { Toast } from "./subviews/Toast.tsx";
 
 function App() {
 
     const navigate = useNavigate();
 
-    const [toast, setToast] = React.useState<string | null>(null);
+    const [toast, setToast] = React.useState<string | undefined>(undefined);
 
     useEffect(() => {
         SBSDKService.initialize();
@@ -97,16 +98,7 @@ function App() {
                 }} />
             </List>
 
-            <Snackbar open={toast !== null} autoHideDuration={3000} onClose={() => setToast(null)}>
-                <Alert
-                    onClose={() => setToast(null)}
-                    severity="success"
-                    variant="filled"
-                    sx={{ width: '100%' }}
-                >
-                    {toast}
-                </Alert>
-            </Snackbar>
+            <Toast text={toast} />
         </Box>
     )
 }

react-js/src/pages/StoredDataDetailsPage.tsx

@@ -1,19 +1,20 @@
 import React, { useEffect, useState } from "react";
-import { Alert, Box, Button, CircularProgress, Snackbar } from "@mui/material";
+import { Box, Button, CircularProgress } from "@mui/material";
 import { Image, SBStoreCroppedDetectionResult } from "scanbot-web-sdk/@types";
 
 import SBSDKService from "../service/SBSDKService";
 import ImageUtils from "../service/ImageUtils";
 import { TopBar } from "../subviews/TopBar";
 import { TextColor } from "../subviews/FeatureListItem.tsx";
+import { Toast } from "../subviews/Toast.tsx";
 
 export default function StorageDetailsPage() {
 
     const [item, setItem] = useState<SBStoreCroppedDetectionResult | null>(null);
     const [base64Image, setBase64Image] = useState<string | undefined>(undefined);
     const [isLoading, setIsLoading] = useState(false);
     const [rotatedImage, setRotatedImage] = useState<Image | undefined>(undefined);
-    const [toast, setToast] = React.useState<string | null>(null);
+    const [toast, setToast] = React.useState<string | undefined>(undefined);
 
     useEffect(() => {
 
@@ -114,16 +115,7 @@ export default function StorageDetailsPage() {
                 color="primary"
             />
 
-            <Snackbar open={toast !== null} autoHideDuration={3000} onClose={() => setToast(null)}>
-                <Alert
-                    onClose={() => setToast(null)}
-                    severity="success"
-                    variant="filled"
-                    sx={{ width: '100%' }}
-                >
-                    {toast}
-                </Alert>
-            </Snackbar>
+            <Toast text={toast} />
         </Box>
     )
 }

react-js/src/subviews/Toast.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect } from "react";
+import { Alert, Snackbar } from "@mui/material";
+
+export class Props {
+    text?: string;
+}
+
+export function Toast(props: Props) {
+    const [toast, setToast] = React.useState<string | null>(null);
+
+    useEffect(() => {
+        if (props.text) {
+            setToast(props.text);
+        }
+    }, [props.text]);
+
+    return (
+
+        <Snackbar open={toast !== null} autoHideDuration={3000} onClose={() => setToast(null)}>
+            <Alert
+                onClose={() => setToast(null)}
+                severity="success"
+                variant="filled"
+                sx={{ width: '100%' }}
+            >
+                {toast}
+            </Alert>
+        </Snackbar>
+    )
+}