import React , { useState } from 'react' ; import AtomComponentVisual from './AtomComponentVisual' ; import { filteredSnapshot , atom , selector , } from '../../../types' ; import { useAppSelector } from '../../state-management/hooks' ; const AtomComponentVisualContainer = ( ) => { const snapshotHistory = useAppSelector ( state => state . snapshot . snapshotHistory ) ; const renderIndex = useAppSelector ( state => state . snapshot . renderIndex ) ; const cleanedComponentAtomTree = useAppSelector ( state => state . snapshot . cleanComponentAtomTree ) ; const filteredCurSnap = snapshotHistory [ renderIndex ] . filteredSnapshot ; const componentAtomTree = snapshotHistory [ renderIndex ] . componentAtomTree ; const [ selectedRecoilValue , setSelectedRecoilValue ] = useState < string [ ] > ( [ ] ) ; const [ str , setStr ] = useState < string [ ] > ( [ ] ) ; const atoms = { } ; const selectors = { } ; if ( filteredCurSnap ) { for ( let [ recoilValueName , object ] of Object . entries ( filteredCurSnap ) ) { if ( ! object . nodeDeps . length ) { atoms [ recoilValueName ] = object . contents ; } else { selectors [ recoilValueName ] = object . contents ; } } } return ( < div className = "Component" > < AtomComponentVisual componentAtomTree = { componentAtomTree } cleanedComponentAtomTree = { cleanedComponentAtomTree } selectedRecoilValue = { selectedRecoilValue } setSelectedRecoilValue = { setSelectedRecoilValue } atoms = { atoms } selectors = { selectors } setStr = { setStr } / > < /div>); } ; export default AtomComponentVisualContainer ;