import React , { useEffect , useState } from 'react' ; import './edit-history.css' ; import { apiGet } from '../../apiHelpers' ; import { Building } from '../../models/building' ; import { EditHistoryEntry } from '../../models/edit-history-entry' ; import ContainerHeader from '../container-header' ; import { BuildingEditSummary } from './building-edit-summary' ; interface EditHistoryProps { building : Building ; } const EditHistory = ( props ) => { const [ history , setHistory ] = useState < EditHistoryEntry [ ] > ( undefined ) ; useEffect ( ( ) => { const fetchData = async ( ) => { const { history } = await apiGet ( `/api/buildings/${ props . building . building_id }/history.json` ) ; setHistory ( history ) ; } ; if ( props . building != undefined ) { fetchData ( ) ; } } , [ props . building ] ) ; return ( < > < ContainerHeader title = "Edit history" backLink = '.' cat = 'edit-history' / > < ul className = "edit-history-list" > { history && history . map ( entry => ( < li key = { `${ entry . revision_id }` } className = "edit-history-list-element" > < BuildingEditSummary historyEntry = { entry } /> < /li>))} < /ul> < />); } ; export { EditHistory } ;