From e54330f7c3db6d6540d9c54fed8f02643ccee3a3 Mon Sep 17 00:00:00 2001
From: salam dalloul <salamdalloul93@gmail.com>
Date: Thu, 18 Jan 2024 15:51:54 +0100
Subject: [PATCH] #22 connect settings panel with redux store

---
 .../NodeDetailView/settings/Settings.js       | 46 +++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/NodeDetailView/settings/Settings.js b/src/components/NodeDetailView/settings/Settings.js
index b3d13ae..1969477 100644
--- a/src/components/NodeDetailView/settings/Settings.js
+++ b/src/components/NodeDetailView/settings/Settings.js
@@ -3,36 +3,44 @@ import SettingsGroup from "./SettingsGroup";
 import FolderIcon from "@material-ui/icons/Folder";
 import { useSelector, useDispatch } from 'react-redux'
 import { toggleSettingsPanelVisibility } from '../../../redux/actions';
+import React, {useEffect, useState} from "react";
+import {DragDropContext, Droppable} from "react-beautiful-dnd";
+import SettingsListItems from "./SettingsListItems";
 
 
 const Settings = props => {
   const dispatch = useDispatch();
   const showSettingsContent = useSelector(state => state.sdsState.settings_panel_visible);
-
+  const metaDataPropertiesModel = useSelector(state => state.sdsState.metadata_model);
+  const [data, setData] = useState([])
   const save = () => {
     dispatch(toggleSettingsPanelVisibility(!showSettingsContent));
   };
 
+  useEffect(() => {
+      setData(metaDataPropertiesModel)
+  }, [metaDataPropertiesModel])
   return (
     <Box style={{ position: "relative", maxHeight: "84vh", overflow: "auto" }}>
-      <Box
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          flexDirection: "column",
-          padding: "0rem 1.5rem 2.25rem 1.5rem",
-          boxShadow: "0px 2px 0px 0px #E5E5E5",
-          gap: ".75rem"
-        }}
-      >
-        <FolderIcon style={{ color: "#3779E1" }} />
-        <Typography variant="h3" style={{ color: "#3779E1" }}>
-          First List Title
-        </Typography>
-      </Box>
-      <SettingsGroup />
-      <SettingsGroup />
+      {/*<Box*/}
+      {/*  style={{*/}
+      {/*    display: "flex",*/}
+      {/*    justifyContent: "center",*/}
+      {/*    alignItems: "center",*/}
+      {/*    flexDirection: "column",*/}
+      {/*    padding: "0rem 1.5rem 2.25rem 1.5rem",*/}
+      {/*    boxShadow: "0px 2px 0px 0px #E5E5E5",*/}
+      {/*    gap: ".75rem"*/}
+      {/*  }}*/}
+      {/*>*/}
+      {/*  <FolderIcon style={{ color: "#3779E1" }} />*/}
+      {/*  <Typography variant="h3" style={{ color: "#3779E1" }}>*/}
+      {/*    First List Title*/}
+      {/*  </Typography>*/}
+      {/*</Box>*/}
+        {
+            Object.keys(data).map(group => <SettingsGroup title={group} group={data[group]} />)
+        }
       <Box
         style={{
           background: