import React , { useEffect } from 'react' ; const { Multiselect } = require ( 'multiselect-react-dropdown' ) ; import { selectedTypes } from '../../../types' ; import { useAppSelector , useAppDispatch } from '../../state-management/hooks' ; import { setSelected } from '../../state-management/slices/SelectedSlice' ; const AtomSettings = ( ) => { const dispatch = useAppDispatch ( ) ; const snapshotHistory = useAppSelector ( state => state . snapshot . snapshotHistory ) ; const renderIndex = useAppSelector ( state => state . snapshot . renderIndex ) ; const selected = useAppSelector ( state => state . selected . selectedData ) ; const options = [ ] ; for ( let key in snapshotHistory [ renderIndex ] . filteredSnapshot ) { const obj = { name : key } ; options . push ( obj ) ; } const selected2 = [ ] ; for ( let i = 0 ; i < selected . length ; i ++ ) { selected2 . push ( { name : selected [ i ] . name } ) ; } const onSelect = ( selectedList ) : void => { dispatch ( setSelected ( selectedList ) ) ; } ; const onRemove = ( selectedList ) : void => { dispatch ( setSelected ( selectedList ) ) ; } ; return ( < div > < h2 > Atom and Selector Filter < /h2> < Multiselect options = { options } selectedValues = { selected2 } onSelect = { onSelect } onRemove = { onRemove } displayValue = "name" / > < /div>); } ; export default AtomSettings ;