import React , { useState } from 'react' ; import { diff , formatters } from 'jsondiffpatch' ; import ReactHtmlParser from 'react-html-parser' ; import { useAppSelector } from '../../state-management/hooks' ; const Diff = ( ) => { const snapshotHistory = useAppSelector ( state => state . snapshot . snapshotHistory ) ; const renderIndex = useAppSelector ( state => state . snapshot . renderIndex ) ; const filteredPrevSnap = renderIndex > 0 ? snapshotHistory [ renderIndex - 1 ] . filteredSnapshot : undefined ; const filteredCurSnap = snapshotHistory [ renderIndex ] ? snapshotHistory [ renderIndex ] . filteredSnapshot : snapshotHistory [ 0 ] . filteredSnapshot ; const [ rawToggle , setRawToggle ] = useState ( false ) ; const delta = diff ( filteredPrevSnap , filteredCurSnap ) ; const html = formatters . html . format ( delta , filteredPrevSnap ) ; formatters . html . showUnchanged ( rawToggle ) ; return ( < div className = "Diff" > < div className = "toggleDiv" > < button id = "raw" className = "rawToggle" style = { { color : rawToggle ? '#E6E6E6' : '#989898' } } onClick = { ( ) => { setRawToggle ( ! rawToggle ) ; } } > Raw < /button> < /div> { ReactHtmlParser ( html ) } < /div>); } ; export default Diff ;