From be83674e05d6125051fd02a6123d97d1155dd970 Mon Sep 17 00:00:00 2001
From: Julian <noctera.dev@gmail.com>
Date: Fri, 23 Dec 2022 12:24:04 +0100
Subject: [PATCH] Fix/max file upload (#144)

* fix: max file upload error message

* refactor: use max file size from redux store

* fix: disable exhaustive-deps

Co-authored-by: noctera <noctera.dev@proton.me>
---
 .../GroupPreview/GroupPreview.jsx              | 18 ++++++++++++++++--
 .../PackagePreview/PackagePreview.jsx          | 17 +++++++++++++++--
 src/i18n/locales/en/default.json               |  3 ++-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/Forms/ImportPreviewForm/GroupPreview/GroupPreview.jsx b/src/Forms/ImportPreviewForm/GroupPreview/GroupPreview.jsx
index 53e740f9..d62a0c4b 100644
--- a/src/Forms/ImportPreviewForm/GroupPreview/GroupPreview.jsx
+++ b/src/Forms/ImportPreviewForm/GroupPreview/GroupPreview.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
 
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
@@ -29,6 +30,10 @@ const GroupPreview = ({
   const { t } = useTranslation();
   const { showSnack } = useSnack();
 
+  const maxFileSize = useSelector(
+    (state) => state.login.serverInfo.max_file_upload
+  );
+
   const [importedGroup, setImportedGroup] = useState(importedData);
   const [packages, setPackages] = useState([]);
   const [packageItems, setPackageItems] = useState([]);
@@ -90,8 +95,17 @@ const GroupPreview = ({
         await delay(1000);
         onSubmitCallback && onSubmitCallback();
       })
-      .catch((e) => {
-        showSnack("error", t("screens.allGroups.importFailMessage"));
+      .catch((error) => {
+        if (error.response?.status === 413) {
+          showSnack(
+            "error",
+            t("components.importPreviewForm.fileTooLargeFailMessage", {
+              size: maxFileSize,
+            })
+          );
+        } else {
+          showSnack("error", t("screens.allPackages.importFailMessage"));
+        }
       });
   };
 
diff --git a/src/Forms/ImportPreviewForm/PackagePreview/PackagePreview.jsx b/src/Forms/ImportPreviewForm/PackagePreview/PackagePreview.jsx
index 809776a0..8acdd753 100644
--- a/src/Forms/ImportPreviewForm/PackagePreview/PackagePreview.jsx
+++ b/src/Forms/ImportPreviewForm/PackagePreview/PackagePreview.jsx
@@ -29,6 +29,9 @@ const PackagePreview = ({ onSubmitCallback, importedData }) => {
   const { showSnack } = useSnack();
 
   const languages = useSelector((state) => state.language.languages);
+  const maxFileSize = useSelector(
+    (state) => state.login.serverInfo.max_file_upload
+  );
 
   const [languagePackage, setLanguagePackage] = useState(importedData);
   const [importQueryStatus, setImportQueryStatus] = useState(false);
@@ -47,8 +50,18 @@ const PackagePreview = ({ onSubmitCallback, importedData }) => {
         await delay(1000);
         onSubmitCallback && onSubmitCallback();
       })
-      .catch((e) => {
-        showSnack("error", t("screens.allPackages.importFailMessage"));
+      .catch((error) => {
+        console.log(error);
+        if (error.response?.status === 413) {
+          showSnack(
+            "error",
+            t("components.importPreviewForm.fileTooLargeFailMessage", {
+              size: maxFileSize,
+            })
+          );
+        } else {
+          showSnack("error", t("screens.allPackages.importFailMessage"));
+        }
       });
   };
 
diff --git a/src/i18n/locales/en/default.json b/src/i18n/locales/en/default.json
index 45bf2b8e..96f7f42b 100644
--- a/src/i18n/locales/en/default.json
+++ b/src/i18n/locales/en/default.json
@@ -80,7 +80,8 @@
     "importPreviewForm": {
       "vocabsActive": " Put vocabs in daily query",
       "activateVocabs": "Activate vocabs",
-      "importQueryStatus": "Import vocabs with actual query status"
+      "importQueryStatus": "Import vocabs with actual query status",
+      "fileTooLargeFailMessage": "Uploaded file is too large (max {{size}})"
     },
     "vocabForm": {
       "noPackagesMessage": "No packages found",