[WIP] fix drag ;and drop tree bug

typescript/Frontend/src/components/Context/GroupContextProvider.tsx

@@ -1,3 +1,4 @@
+import { NodeModel } from "@minoru/react-dnd-treeview";
 import { createContext, ReactNode, useCallback, useState } from "react";
 import axiosConfig from "../../config/axiosConfig";
 import { I_Folder, I_Installation } from "../../util/types";
@@ -9,6 +10,8 @@ interface GroupContextProviderProps {
   loading: boolean;
   setLoading: (value: boolean) => void;
   getError: boolean;
+  tree: NodeModel<I_Folder | I_Installation>[];
+  setTree: (value: NodeModel<I_Folder | I_Installation>[]) => void;
 }
 
 export const GroupContext = createContext<GroupContextProviderProps>({
@@ -18,19 +21,39 @@ export const GroupContext = createContext<GroupContextProviderProps>({
   loading: false,
   setLoading: () => {},
   getError: false,
+  tree: [],
+  setTree: () => {},
 });
 
+const getTreeData = (
+  data: (I_Folder | I_Installation)[]
+): NodeModel<I_Folder | I_Installation>[] => {
+  return data.map((element) => {
+    const isFolder = element.type === "Folder";
+    return {
+      id: isFolder ? element.id : "installation-" + element.id,
+      parent: element.parentId,
+      text: element.name,
+      droppable: isFolder,
+      data: element,
+    };
+  });
+};
+
 const GroupContextProvider = ({ children }: { children: ReactNode }) => {
   const [data, setData] = useState<(I_Folder | I_Installation)[]>([]);
   const [loading, setLoading] = useState(false);
   const [getError, setGetError] = useState(false);
+  const [tree, setTree] = useState<NodeModel<I_Folder | I_Installation>[]>([]);
 
   const fetchData = useCallback(async () => {
+    console.log("fetchData");
     setLoading(true);
     return axiosConfig
       .get("/GetAllFoldersAndInstallations")
       .then((res) => {
         setData(res.data);
+        setTree(getTreeData(res.data));
         setLoading(false);
       })
       .catch((err) => {
@@ -41,7 +64,16 @@ const GroupContextProvider = ({ children }: { children: ReactNode }) => {
 
   return (
     <GroupContext.Provider
-      value={{ data, setData, fetchData, loading, setLoading, getError }}
+      value={{
+        data,
+        setData,
+        fetchData,
+        loading,
+        setLoading,
+        getError,
+        tree,
+        setTree,
+      }}
     >
       {children}
     </GroupContext.Provider>

typescript/Frontend/src/components/Groups/FolderForm.tsx

@@ -1,12 +1,13 @@
+import { NodeModel } from "@minoru/react-dnd-treeview";
 import { Button, CircularProgress, Grid } from "@mui/material";
 import { useFormik } from "formik";
 import { useContext, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import axiosConfig from "../../config/axiosConfig";
-import { I_Folder } from "../../util/types";
+import { I_Folder, I_Installation } from "../../util/types";
+import { GroupContext } from "../Context/GroupContextProvider";
 import InnovenergySnackbar from "../InnovenergySnackbar";
 import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
-import { GroupContext } from "../Context/GroupContextProvider";
 
 interface I_CustomerFormProps {
   values: I_Folder;
@@ -16,9 +17,8 @@ interface I_CustomerFormProps {
 const updateFolder = (data: I_Folder) => {
   return axiosConfig.put("/UpdateFolder", data);
 };
-const FolderForm = (props: I_CustomerFormProps) => {
-  const { fetchData } = useContext(GroupContext);
 
+const FolderForm = (props: I_CustomerFormProps) => {
   const { values, id } = props;
   const intl = useIntl();
 
@@ -26,6 +26,19 @@ const FolderForm = (props: I_CustomerFormProps) => {
   const [error, setError] = useState();
   const [loading, setLoading] = useState(false);
 
+  const { setTree, tree } = useContext(GroupContext);
+
+  const updateTree = (newValues: I_Folder) => {
+    const elementToUpdate = tree.find(
+      (element) => element.data?.id.toString() === id
+    );
+    if (elementToUpdate) {
+      elementToUpdate.data = newValues;
+      elementToUpdate.text = newValues.name;
+      setTree([...tree]);
+    }
+  };
+
   const formik = useFormik({
     initialValues: {
       name: values.name,
@@ -40,9 +53,9 @@ const FolderForm = (props: I_CustomerFormProps) => {
         id: idAsNumber,
       })
         .then((res) => {
+          updateTree({ ...values, ...formikValues, id: idAsNumber });
           setSnackbarOpen(true);
           setLoading(false);
-          fetchData();
         })
         .catch((err) => {
           setSnackbarOpen(true);

typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx

@@ -17,23 +17,8 @@ import DragPreview from "./DragPreview";
 import InnovenergySnackbar from "../../InnovenergySnackbar";
 import { GroupContext } from "../../Context/GroupContextProvider";
 
-const getTreeData = (
-  data: (I_Folder | I_Installation)[]
-): NodeModel<I_Folder | I_Installation>[] => {
-  return data.map((element) => {
-    const isFolder = element.type === "Folder";
-    return {
-      id: isFolder ? element.id : "installation-" + element.id,
-      parent: element.parentId,
-      text: element.name,
-      droppable: isFolder,
-      data: element,
-    };
-  });
-};
-
 const GroupTree = () => {
-  const { data, fetchData, loading, setLoading, getError } =
+  const { data, fetchData, loading, setLoading, getError, setTree, tree } =
     useContext(GroupContext);
   const [putError, setPutError] = useState(false);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
@@ -44,18 +29,6 @@ const GroupTree = () => {
     fetchData();
   }, [fetchData]);
 
-  /*   const findParent = (element: I_Folder | I_Installation): any => {
-    if (data) {
-      const parent = data.find(
-        (el) => el.type === "Folder" && el.id === element.parentId
-      );
-      if (parent) {
-        return findParent(parent);
-      }
-      return element.parentId;
-    }
-  }; */
-
   const handleDrop = (
     newTree: NodeModel<I_Folder | I_Installation>[],
     { dropTargetId, dragSource }: DropOptions<I_Folder | I_Installation>
@@ -72,7 +45,7 @@ const GroupTree = () => {
       )
       .then(() => {
         setSnackbarOpen(true);
-        fetchData();
+        setTree(newTree);
       })
       .catch((err) => {
         setPutError(err);
@@ -92,7 +65,7 @@ const GroupTree = () => {
       <DndProvider backend={MultiBackend} options={getBackendOptions()}>
         <ScrollingComponent className={styles.treeContainer}>
           <Tree<I_Installation | I_Folder>
-            tree={getTreeData(data)}
+            tree={tree}
             rootId={0}
             dragPreviewRender={(monitorProps) => (
               <DragPreview monitorProps={monitorProps} />