import React , { useEffect } from 'react' ; import MainContainer from '../Containers/MainContainer' ; import { selectedTypes } from '../../types' ; import { diff } from 'jsondiffpatch' ; import { useAppSelector , useAppDispatch } from '../state-management/hooks' ; import { setSnapshotHistory , setRenderIndex , setCleanComponentAtomTree , } from '../state-management/slices/SnapshotSlice' ; import { addSelected , setSelected , } from '../state-management/slices/SelectedSlice' ; import { updateFilter , selectFilterState , } from '../state-management/slices/FilterSlice' ; const LOGO_URL = './assets/Recoilize.png' ; const App = ( ) => { 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 filterData = useAppSelector ( selectFilterState ) ; useEffect ( ( ) => { dispatch ( setRenderIndex ( snapshotHistory . length - 1 ) ) ; let last ; if ( snapshotHistory [ renderIndex ] ) { last = snapshotHistory [ renderIndex ] . filteredSnapshot ; } for ( let key in last ) { if ( ! snapshotHistory [ 0 ] . filteredSnapshot [ key ] ) { const check = ( ) => { for ( let i = 0 ; i < selected . length ; i ++ ) { if ( selected [ i ] . name === key ) { return true ; } } return false ; } ; if ( ! check ( ) ) { console . log ( "after Check" ) ; dispatch ( addSelected ( { name : key } ) ) ; } } } } , [ snapshotHistory ] ) ; useEffect ( ( ) => { if ( snapshotHistory . length === 0 ) return ; dispatch ( setCleanComponentAtomTree ( snapshotHistory [ renderIndex ] . componentAtomTree ) ) ; } , [ renderIndex ] ) ; useEffect ( ( ) => { const backgroundConnection = chrome . runtime . connect ( ) ; backgroundConnection . postMessage ( { action : 'devToolInitialized' , tabId : chrome . devtools . inspectedWindow . tabId , } ) ; backgroundConnection . onMessage . addListener ( msg => { if ( msg . action === 'recordSnapshot' ) { if ( ! msg . payload [ 1 ] ) { const arr = [ ] ; for ( let key in msg . payload [ 0 ] . filteredSnapshot ) { arr . push ( { name : key } ) ; } dispatch ( setSelected ( arr ) ) ; } dispatch ( setSnapshotHistory ( msg . payload [ msg . payload . length - 1 ] ) ) ; if ( ! msg . payload [ 1 ] && filterData . length === 0 ) { dispatch ( updateFilter ( msg . payload ) ) ; } else { const delta = diff ( msg . payload [ msg . payload . length - 2 ] , msg . payload [ msg . payload . length - 1 ] ) ; if ( filterData . length < msg . payload . length ) { dispatch ( updateFilter ( [ delta ] ) ) ; } } } } ) ; } , [ ] ) ; const renderMainContainer = < MainContainer />; const renderModuleNotFoundContainer = ( < div className = "notFoundContainer" > < img className = "logo" src = { LOGO_URL } / > < p > Supported only with Recoil apps with the Recoilize NPM module . Follow the installation instructions at < br / > < a target = "_blank" href = "https://github.com/open-source-labs/Recoilize" > Recoilize < /a> < /p> < /div>); return ( < div className = "App" key = "App" > { snapshotHistory . length ? renderMainContainer : renderModuleNotFoundContainer } < /div>); } ; export default App ;