remove redundant download table dialog, refactor, use snackbar to show download errors

Author: bygu4

hwproj.front/src/components/Courses/StatsMenu.tsx

@@ -5,8 +5,6 @@ import {
     MenuItem,
     ListItemIcon,
     ListItemText,
-    Dialog,
-    DialogTitle,
 } from "@mui/material";
 import { NestedMenuItem } from "mui-nested-menu";
 import { Download, ShowChart } from "@mui/icons-material";
@@ -40,26 +38,27 @@ interface StatsMenuState {
 }
 
 const StatsMenu: FC<StatsMenuProps> = props => {
+    const {courseId, userId, yandexCode, onActionOpening, onActionClosing} = props
+
     const [menuState, setMenuState] = useState<StatsMenuState>({
         anchorEl: null,
-        saveStatsAction: props.yandexCode !== null ? SaveStatsAction.ShareWithYandex : null,
+        saveStatsAction: yandexCode !== null ? SaveStatsAction.ShareWithYandex : null,
     })
 
     const {anchorEl, saveStatsAction} = menuState
     const showMenu = anchorEl !== null
+    const openAction = saveStatsAction !== null
 
     useEffect(() => {
         if (saveStatsAction !== null)
-            props.onActionOpening()
+            onActionOpening()
         else
-            props.onActionClosing()
+            onActionClosing()
     }, [saveStatsAction]);
 
     const navigate = useNavigate();
 
-    const goToCharts = () => {
-        navigate(`/statistics/${props.courseId}/charts`)
-    }
+    const goToCharts = () => navigate(`/statistics/${courseId}/charts`)
 
     const handleOpen = (event: React.MouseEvent<HTMLElement>) =>
         setMenuState ({
@@ -105,39 +104,27 @@ const StatsMenu: FC<StatsMenuProps> = props => {
         }
     }
 
-    const getActionTitle = (action: SaveStatsAction | null) => {
-        switch (action) {
-            case SaveStatsAction.Download:
-                return "Скачать таблицу со статистикой"
-            case SaveStatsAction.ShareWithGoogle:
-                return "Выгрузить таблицу в Google Docs"
-            case SaveStatsAction.ShareWithYandex:
-                return "Выгрузить таблицу на Яндекс Диск"
-            default:
-                return ""
-        }
-    }
-
     const getActionContent = (action: SaveStatsAction | null) => {
         switch (action) {
             case SaveStatsAction.Download:
                 return <DownloadStats
-                    courseId={props.courseId}
-                    userId={props.userId}
-                    onCancellation={handleClose}
+                    courseId={courseId}
+                    userId={userId}
+                    onClose={handleClose}
                 />
             case SaveStatsAction.ShareWithGoogle:
                 return <ExportToGoogle
-                    courseId={props.courseId}
-                    userId={props.userId}
-                    onCancellation={handleClose}
+                    courseId={courseId}
+                    open={openAction}
+                    onClose={handleClose}
                 />
             case SaveStatsAction.ShareWithYandex:
                 return <ExportToYandex
-                    courseId={props.courseId}
-                    userId={props.userId}
-                    onCancellation={handleClose}
-                    userCode={props.yandexCode}
+                    courseId={courseId}
+                    userId={userId}
+                    userCode={yandexCode}
+                    open={openAction}
+                    onClose={handleClose}
                 />
             default:
                 return null
@@ -194,15 +181,7 @@ const StatsMenu: FC<StatsMenuProps> = props => {
                     )}
                 </NestedMenuItem>
             </Menu>
-            <Dialog
-                open={saveStatsAction !== null}
-                onClose={handleClose}
-            >
-                <DialogTitle>
-                    {getActionTitle(saveStatsAction)}
-                </DialogTitle>
-                {getActionContent(saveStatsAction)}
-            </Dialog>
+            {getActionContent(saveStatsAction)}
         </div>
     )
 }

hwproj.front/src/components/Solutions/DownloadStats.tsx

@@ -1,59 +1,43 @@
-import { FC, useState } from "react";
-import { Button, DialogActions, DialogContent, Grid } from "@mui/material";
+import { FC, useEffect } from "react";
+import { useSnackbar } from "notistack";
 import apiSingleton from "../../api/ApiSingleton";
-import { LoadingButton } from "@mui/lab";
 import Utils from "@/services/Utils";
 
 interface DownloadStatsProps {
     courseId: number | undefined
     userId: string
-    onCancellation: () => void
+    onClose: () => void
 }
 
 const DownloadStats: FC<DownloadStatsProps> = (props: DownloadStatsProps) => {
-    const [loading, setLoading] = useState<boolean>(false)
+    const {courseId, userId, onClose} = props
+    const {enqueueSnackbar} = useSnackbar()
 
-    const handleFileDownloading = () => {
-        const statsDatetime =  Utils.toStringForFileName(new Date())
-        setLoading(true)
-        apiSingleton.statisticsApi.statisticsGetFile(props.courseId, props.userId, "Лист 1")
-        .then((response) => response.blob())
-        .then((blob) => {
-            const fileName = `StatsReport_${statsDatetime}`
-            const url = window.URL.createObjectURL(new Blob([blob]));
-            const link = document.createElement("a");
-            link.href = url;
-            link.setAttribute("download", `${fileName}.xlsx`);
-            document.body.appendChild(link);
-            link.click();
-            link.parentNode!.removeChild(link);
-        })
-        .finally(() => setLoading(false))
-    }
+    useEffect(() => {
+        const downloadStats = async () => {
+            try {
+                const statsDatetime = Utils.toStringForFileName(new Date())
+                const response = await apiSingleton.statisticsApi.statisticsGetFile(courseId, userId, "Лист 1")
+                const blob = await response.blob()
+                const fileName = `StatsReport_${statsDatetime}`
+                const url = window.URL.createObjectURL(new Blob([blob]));
+                const link = document.createElement("a");
+                link.href = url;
+                link.setAttribute("download", `${fileName}.xlsx`);
+                document.body.appendChild(link);
+                link.click();
+                link.parentNode!.removeChild(link);
+            } catch (e) {
+                console.error("Ошибка при загрузке статистики:", e)
+                enqueueSnackbar("Не удалось загрузить файл со статистикой, попробуйте позже", {variant: "error"})
+            }
+        }
 
-    return (
-        <DialogContent>
-            <DialogActions style={{ padding: 0 }}>
-                <Grid item>
-                    <LoadingButton
-                        variant="text"
-                        color="primary"
-                        type="button"
-                        loading={loading}
-                        onClick={handleFileDownloading}
-                    >
-                        Скачать
-                    </LoadingButton>
-                </Grid>
-                <Grid item>
-                    <Button variant="text" color="inherit" type="button"
-                            onClick={props.onCancellation}>
-                        Отмена
-                    </Button>
-                </Grid>
-            </DialogActions>
-        </DialogContent>
-    )
+        downloadStats()
+        onClose()
+    })
+
+    return null
 }
 
 export default DownloadStats;