change folder structure, add PUT req

frontend/src/App.tsx

@@ -12,7 +12,7 @@ import { Box, SortType } from "./types";
 import Header from "./components/Header";
 import Search from "./components/Search";
 import BoxDetails from "./components/BoxDetails";
-import BoxList from "./components/BoxList";
+import BoxList from "./components/BoxList/BoxList";
 import Sort from "./components/Buttons/Sort";
 import Refresh from "./components/Buttons/Refresh";
 import NewBox from "./components/Buttons/NewBox";

frontend/src/components/BoxDetails.tsx

@@ -3,7 +3,7 @@ import { Box } from "../types";
 import { isValid } from "../misc";
 import ErrorMessage from "./ErrorMessage";
 import { useTranslation } from "react-i18next";
-import { deleteBox } from "../services/boxes";
+import { deleteBox, updateBox } from "../services/boxes";
 import { toast } from "react-toastify";
 
 interface props {
@@ -41,11 +41,34 @@ const BoxDetails = ({ boxes, setBoxes, box }: props) => {
         setBoxes(newBoxes);
         toast.success(t("boxDeleted"));
       } catch (error) {
+        console.log(error);
         toast.error(t("boxDeleteError"));
       }
     }
   };
 
+  const handleUpdate = async () => {
+    try {
+      if (!isValid(width, height, depth)) {
+        console.log("not valid");
+        setError(true);
+        return;
+      }
+
+      // create a new box, overwrite old values
+      const newBox = { ...box, width, height, depth, comment };
+      const res = await updateBox(newBox);
+      // update boxes state
+      const newBoxes = boxes.map((b) => (b.id === box.id ? res : b));
+      setBoxes(newBoxes);
+      setError(false);
+      toast.success(t("boxUpdated"));
+    } catch (error) {
+      console.log(error);
+      toast.error(t("boxUpdateError"));
+    }
+  };
+
   // update values when selected box changes
   useEffect(() => {
     setWidth(box.width);
@@ -54,20 +77,6 @@ const BoxDetails = ({ boxes, setBoxes, box }: props) => {
     setComment(box.comment || "");
   }, [box, reset]);
 
-  const saveChanges = () => {
-    if (!isValid(width, height, depth)) {
-      console.log("not valid");
-      setError(true);
-      return;
-    }
-    try {
-      // db call to update box
-      setError(false);
-    } catch (error) {
-      console.log("save changes");
-    }
-  };
-
   return (
     <div className="rounded-md bg-white">
       <div className="m-5 mb-5 flex flex-col">
@@ -177,7 +186,7 @@ const BoxDetails = ({ boxes, setBoxes, box }: props) => {
             type="button"
             title={t("saveChanges")}
             className="mb-5 inline-flex items-center rounded-lg border border-gray-300 bg-gray-50 px-5 py-2.5 text-center text-sm font-medium hover:bg-green-400"
-            onClick={saveChanges}
+            onClick={handleUpdate}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"

frontend/src/components/BoxList.tsx → frontend/src/components/BoxList/BoxList.tsx

@@ -1,4 +1,4 @@
-import { Box } from "../types";
+import { Box } from "../../types";
 import { Pagination } from "flowbite-react";
 import BoxListHeaders from "./BoxListHeaders";
 import BoxListItem from "./BoxListItem";

frontend/src/components/BoxListItem.tsx → frontend/src/components/BoxList/BoxListItem.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { Box } from "../types";
+import { Box } from "../../types";
 
 interface props {
   box: Box;

frontend/src/i18n/en/translations.json

@@ -57,6 +57,8 @@
     "infoTip": "Make sure backend and database are running, and you have set the .env values to backend and frontend. See GitHub readme for more information",
     "undoWarning": "Are you sure you want to undo changes? All changes will be lost!",
     "deleteWarning": "Are you sure you want to delete this box? This action cannot be undone!",
-    "boxDeleteError": "Error while deleting box"
+    "boxDeleteError": "Error while deleting box",
+    "boxUpdated": "Box updated successfully.",
+    "boxUpdateError": "Error while updating box. Please check your internet connection and try again."
 
 }

frontend/src/i18n/fi/translations.json

@@ -56,6 +56,7 @@
     "infoTip": "Varmista että backend ja tietokanta ovat käynnissä, ja että olet asettanut .env arvot backendiin ja frontendiin. Katso GitHubin readme lisätietoja varten",
     "undoWarning": "Oletko varma että haluat perua muutokset? Kaikki muutokset menetetään!",
     "deleteWarning": "Oletko varma että haluat poistaa tämän laatikon? Tätä toimintoa ei voi perua!",
-    "boxDeleteError": "Virhe laatikkoa poistaessa"
-
+    "boxDeleteError": "Virhe laatikkoa poistaessa",
+    "boxUpdated": "Laatikko päivitetty onnistuneesti.",
+    "boxUpdateError": "Virhe laatikkoa päivitettäessä"
 }