edit package

src/Components/Button/Button.scss

@@ -112,6 +112,38 @@
     }
   }
 
+  &.btn-link {
+    background-color: transparent;
+    padding: 0;
+
+    &.btn-primary {
+      color: $color-primary;
+
+      &:hover {
+        color: $color-primary-dark;
+        cursor: pointer;
+      }
+    }
+
+    &.btn-red {
+      color: $color-red;
+
+      &:hover {
+        color: $color-red-dark;
+        cursor: pointer;
+      }
+    }
+
+    &.btn-green {
+      color: $color-green;
+
+      &:hover {
+        color: $color-green-dark;
+        cursor: pointer;
+      }
+    }
+  }
+
   &.btn-block {
     width: 100%;
   }

src/Forms/PackageForm/PackageForm.jsx

@@ -1,49 +1,110 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import Button from "../../Components/Button/Button.jsx";
 import Select from "../../Components/Form/Select/Select.jsx";
 import TextInput from "../../Components/Form/TextInput/TextInput.jsx";
+import SnackbarContext from "../../context/SnackbarContext.jsx";
 
-import { createPackage } from "../../utils/api.js";
+import { createPackage, modifyPackage } from "../../utils/api.js";
 import { languages } from "../../utils/constants.js";
 
 import "./PackageForm.scss";
 
-const PackageForm = ({ onSubmitCallback = null }) => {
+const PackageForm = ({ defaultData = null, onSubmitCallback = null }) => {
   const { t } = useTranslation();
+  const { showSnack } = useContext(SnackbarContext);
 
-  const [name, setName] = useState("");
-  const [foreignLanguage, setForeignLanguage] = useState("");
-  const [translatedLanguage, setTranslatedLanguage] = useState("");
-  const [vocabsPerDay, setVocabsPerDay] = useState(100);
-  const [rightTranslations, setRightTranslations] = useState(2);
+  const [name, setName] = useState(defaultData ? defaultData.name : "");
+  const [foreignLanguage, setForeignLanguage] = useState(
+    defaultData
+      ? {
+          value: defaultData.foreignWordLanguage,
+          label:
+            languages.find((ele) => ele.name === "Deutsch").icon +
+            " " +
+            defaultData.foreignWordLanguage,
+        }
+      : ""
+  );
+  const [translatedLanguage, setTranslatedLanguage] = useState(
+    defaultData
+      ? {
+          value: defaultData.translatedWordLanguage,
+          label:
+            languages.find((ele) => ele.name === "Deutsch").icon +
+            " " +
+            defaultData.translatedWordLanguage,
+        }
+      : ""
+  );
+  const [vocabsPerDay, setVocabsPerDay] = useState(
+    defaultData ? defaultData.vocabsPerDay : 100
+  );
+  const [rightTranslations, setRightTranslations] = useState(
+    defaultData ? defaultData.rightWords : 2
+  );
   const [canSubmit, setCanSubmit] = useState(false);
 
   //make api call to add vocab package
   const submitHandler = useCallback(async () => {
-    const newPackage = {
+    const packageToSave = {
       name: name,
       foreignWordLanguage: foreignLanguage.value,
       translatedWordLanguage: translatedLanguage.value,
       vocabsPerDay: vocabsPerDay,
       rightWords: rightTranslations,
     };
 
-    createPackage(newPackage)
+    if (defaultData?.id) {
+      packageToSave.id = defaultData.id;
+
+      modifyPackage(packageToSave)
+        .then(({ data }) => {
+          onSubmitCallback && onSubmitCallback(data);
+          showSnack(
+            "success",
+            t("components.packageForm.modifyPackageSuccessMessage")
+          );
+        })
+        .catch((error) => {
+          if (error?.response?.status === 401) {
+            console.log("jwt expired");
+            showSnack(
+              "error",
+              t("components.packageForm.modifyPackageFailedMessage")
+            );
+          }
+        });
+
+      return;
+    }
+
+    createPackage(packageToSave)
       .then(({ data }) => {
         onSubmitCallback && onSubmitCallback(data);
+        showSnack(
+          "success",
+          t("components.packageForm.savePackageSuccessMessage")
+        );
       })
       .catch((error) => {
         if (error?.response?.status === 401) {
           console.log("jwt expired");
         }
+        showSnack(
+          "success",
+          t("components.packageForm.savePackageFailMessage")
+        );
       });
   }, [
+    defaultData?.id,
     foreignLanguage.value,
     name,
     onSubmitCallback,
     rightTranslations,
+    showSnack,
+    t,
     translatedLanguage.value,
     vocabsPerDay,
   ]);

src/Forms/VocabForm/VocabForm.jsx

@@ -94,9 +94,8 @@ const VocabForm = () => {
       setSelectedPackage({ value: newPackage.id, label: newPackage.name });
       closePackageModal();
       fetchPackages();
-      showSnack("success", t("screens.addVocab.savePackageSuccessMessage"));
     },
-    [closePackageModal, fetchPackages, t, showSnack]
+    [closePackageModal, fetchPackages]
   );
 
   const groupAdded = useCallback(

src/i18n/locales/en.json

@@ -33,7 +33,11 @@
       "foreignLanguage": "Foreign language",
       "translatedLanguage": "Translated language",
       "vocabsPerDay": "Vocabs per day",
-      "correctTranslationsGoal": "Correct translations to have successful vocabulary pairs"
+      "correctTranslationsGoal": "Correct translations to have successful vocabulary pairs",
+      "savePackageSuccessMessage": "New package added",
+      "savePackageFailMessage": "Could not add package",
+      "modifyPackageSuccessMessage": "Package saved",
+      "modifyPackageFailedMessage": "Could not save package"
     }
   },
   "screens": {
@@ -75,7 +79,11 @@
       },
       "vocascanServer": {
         "heading": "Vocascan server",
-        "pro": ["sync every device", "Use your own Server", "Full control over the settings"],
+        "pro": [
+          "sync every device",
+          "Use your own Server",
+          "Full control over the settings"
+        ],
         "contra": ["You need a own server"],
         "button": "Start for free"
       }

src/screens/AllPackages/AllPackages.jsx

@@ -1,36 +1,74 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
 
+import { languages } from "../../utils/constants.js";
+
 import "./AllPackages.scss";
 
+import Button from "../../Components/Button/Button";
+import Modal from "../../Components/Modal/Modal";
 import Table from "../../Components/Table/Table";
+import PackageForm from "../../Forms/PackageForm/PackageForm";
 import { getPackages } from "../../utils/api";
 
 const AllPackages = () => {
   const { t } = useTranslation();
   const [data, setData] = useState([]);
 
+  const [currentPackage, setCurrentPackage] = useState(null);
+  const [showPackageModal, setShowPackageModal] = useState(false);
+
+  const editPackage = useCallback((pack) => {
+    setCurrentPackage(pack);
+    setShowPackageModal(true);
+  }, []);
+
+  const packageSubmitted = useCallback(() => {
+    getPackages().then((response) => {
+      setShowPackageModal(false);
+      setData(response.data);
+    });
+  }, []);
+
   const columns = useMemo(
     () => [
       {
         Header: t("screens.allPackages.packageName"),
         accessor: "name",
         Cell: ({ row }) => (
-          <Link to={`/editPackage/${row.original.id}`}>
+          <Button variant="link" onClick={() => editPackage(row.original)}>
             {row.original.name}
-          </Link>
+          </Button>
         ),
       },
       {
         Header: t("screens.allPackages.foreignLanguage"),
         accessor: "foreignWordLanguage",
+        Cell: ({ row }) => (
+          <span>
+            {languages.find(
+              (ele) => ele.name === row.original.foreignWordLanguage
+            )?.icon +
+              " " +
+              row.original.foreignWordLanguage}
+          </span>
+        ),
       },
       {
         Header: t("screens.allPackages.translatedLanguage"),
         accessor: "translatedWordLanguage",
+        Cell: ({ row }) => (
+          <span>
+            {languages.find(
+              (ele) => ele.name === row.original.translatedWordLanguage
+            )?.icon +
+              " " +
+              row.original.translatedWordLanguage}
+          </span>
+        ),
       },
       {
         Header: "",
@@ -44,7 +82,7 @@ const AllPackages = () => {
         ),
       },
     ],
-    [t]
+    [editPackage, t]
   );
 
   useEffect(() => {
@@ -54,14 +92,27 @@ const AllPackages = () => {
   }, []);
 
   return (
-    <div className="all-packages-wrapper">
-      <div className="header-wrapper">
-        <h1 className="heading">{t("screens.allPackages.title")}</h1>
-      </div>
-      <div>
-        <Table columns={columns} data={data} />
+    <>
+      <div className="all-packages-wrapper">
+        <div className="header-wrapper">
+          <h1 className="heading">{t("screens.allPackages.title")}</h1>
+        </div>
+        <div>
+          <Table columns={columns} data={data} />
+        </div>
       </div>
-    </div>
+
+      <Modal
+        title={"Edit Package"}
+        open={showPackageModal}
+        onClose={() => setShowPackageModal(false)}
+      >
+        <PackageForm
+          defaultData={currentPackage}
+          onSubmitCallback={packageSubmitted}
+        />
+      </Modal>
+    </>
   );
 };