sending menu playlist to api

src/views/menupages/mainpages/card/index.js

@@ -363,11 +363,7 @@ return (
                   )
                 }
                 <TabPane tabId={dataElement ? dataElement.menu_page_layouts.length : 0}>
-                  <div 
-                  // selectedUser={store.selectedUser} 
-                    >
-                       
-                      </div>
+                  <div></div>
                 </TabPane>
             </TabContent>  
           </CardBody>  

src/views/menupages/mainpages/card/manageplaylist.js

@@ -27,25 +27,31 @@ const serverSideColumns = [
   ]
    
 
-const ManagePlaylist = (dataElement) => { 
+const ManagePlaylist = ({dataElement, selectedDataElement, handleChange}) => { 
     const store = useSelector(state => state.playlists),
+    storeMenuPages = useSelector(state => state.menupages),
+    [selectedPlaylists, setSelectedPlaylists] = useState(null),
     [avaliablePlaylists, setavaliablePlaylists] = useState([]),
-    [selectedPlaylists, setSelectedPlaylists] = useState([]),
     dispatch = useDispatch()
 
 
     const handleAdd = (value) => {
         const newValue = selectedPlaylists.concat(value)
         setSelectedPlaylists(newValue)
+      
+       handleChange(newValue)
+  
         }
+
     const handleRemove = (value) => {
         const newValue = selectedPlaylists.filter(element => element.id !== value.id)
         setSelectedPlaylists(newValue)
+        handleChange(newValue)
         } 
     const getData_selectedPlaylists = (params) => {
         return (dispatch) => {
             if (params.q === null || params.q === '') {
-                setSelectedPlaylists(dataElement.dataElement) 
+                setSelectedPlaylists(dataElement) 
                 return
             }
             const newValue = dataElement.dataElement.filter(element => element.title.includes(params.q))
@@ -54,6 +60,7 @@ const ManagePlaylist = (dataElement) => {
     }    
     const getData_avaliablePlaylists = (params) => {
         return (dispatch) => {
+            if (selectedPlaylists === null) return
             const Ids = selectedPlaylists.map(elem => elem.id),
             tabPlaylists =  store.allDataPlaylists.filter(element => !Ids.includes(element.id))
             
@@ -68,20 +75,21 @@ const ManagePlaylist = (dataElement) => {
     }   
         
     useEffect(() => {
+        if (typeof selectedPlaylists === 'undefined' || selectedPlaylists === null) return
         const Ids = selectedPlaylists.map(elem => elem.id)
         const filtered = store.allDataPlaylists.filter(element => !Ids.includes(element.id))
         setavaliablePlaylists(filtered)
       }, [store.allDataPlaylists])    
     useEffect(() => {
-       if (selectedPlaylists === null) return
+       if (typeof selectedPlaylists === 'undefined' || selectedPlaylists === null) return
         const Ids = selectedPlaylists.map(elem => elem.id) 
         const filtered = store.allDataPlaylists.filter(element => !Ids.includes(element.id))
         setavaliablePlaylists(filtered)
       }, [selectedPlaylists])
 
     useEffect(() => {
-          if (dataElement !== null  && dataElement.dataElement !== null) {
-             setSelectedPlaylists(dataElement.dataElement)   
+          if (dataElement !== null  && dataElement !== null) {
+             setSelectedPlaylists(dataElement)   
           } 
 
     }, [dataElement])

src/views/menupages/mainpages/card/tablayoutplaylists.js

@@ -25,10 +25,23 @@ const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
                     mpagelayout[field] = value
                 }
             })
+            
+        setElementData(
+            {
+                ...selectedDataElement
+            })
+        },
+    handlePLLChange = (value) => {
+        const newData = selectedDataElement.menu_page_layouts.map((mpagelayout) => {
+            if (mpagelayout.id === block.id) {
+                mpagelayout.playlists = value 
+            }
+        })
         setElementData(
             {
                 ...selectedDataElement
             })
+        // handleDetailChange(value, 'playlists') 
     }   
 
     useEffect(() => {
@@ -112,7 +125,11 @@ const TabLayoutPlaylist = ({block, selectedDataElement, setElementData}) => {
                </div>
             </div>
 
-            <ManagePlaylist dataElement={dataElement && dataElement.playlists}  />  
+            <ManagePlaylist 
+                dataElement={dataElement && dataElement.playlists} 
+                selectedDataElement={dataElement}  
+                handleChange={handlePLLChange} 
+                />  
 
           </Col>