import React from 'react' ; import { Link } from 'react-router-dom' ; import './building-edit-summary.css' ; import { Category } from '../../config/categories-config' ; import { DataFieldDefinition , dataFields } from '../../config/data-fields-config' ; import { arrayToDictionary , parseDate } from '../../helpers' ; import { EditHistoryEntry } from '../../models/edit-history-entry' ; import { CategoryEditSummary } from './category-edit-summary' ; interface BuildingEditSummaryProps { historyEntry : EditHistoryEntry ; showBuildingId ? : boolean ; hyperlinkCategories ? : boolean ; } function formatDate ( dt ) { return dt . toLocaleString ( undefined , { weekday : 'short' , year : 'numeric' , month : 'short' , day : 'numeric' , hour : '2-digit' , minute : '2-digit' } ) ; } function enrichHistoryEntries ( forwardPatch , reversePatch ) { return Object . entries ( forwardPatch ) . map ( ( [ key , value ] ) => { const { title = `Unknown field (${ key })` , category = undefined } = dataFields [ key ] as DataFieldDefinition ?? { } ; return { title , category , value , oldValue : reversePatch && reversePatch [ key ] } ; } ) ; } const BuildingEditSummary = ( { historyEntry , showBuildingId = false , hyperlinkCategories = false } ) => { const entriesWithMetadata = enrichHistoryEntries ( historyEntry . forward_patch , historyEntry . reverse_patch ) ; const entriesByCategory = arrayToDictionary ( entriesWithMetadata , x => x . category ) ; const categoryHyperlinkTemplate = hyperlinkCategories && historyEntry . building_id != undefined ? `/edit/$category/${ historyEntry . building_id }` : undefined ; return ( < div className = "edit-history-entry" > < h2 className = "edit-history-timestamp" > Edited on { formatDate ( parseDate ( historyEntry . revision_timestamp ) ) } < /h2> < h3 className = "edit-history-username" > By { historyEntry . username } < /h3> { showBuildingId && historyEntry . building_id != undefined && < h3 className = "edit-history-building-id" > Building < Link to = { `/edit/categories/${ historyEntry . building_id }` } > { historyEntry . building_id } < /Link> < /h3>} { Object . entries ( entriesByCategory ) . map ( ( [ category , fields ] ) => < CategoryEditSummary key = { category } category = { category as keyof typeof Category } fields = { fields } hyperlinkCategory = { hyperlinkCategories } hyperlinkTemplate = { categoryHyperlinkTemplate } / > ) } < /div>); } ; export { BuildingEditSummary } ;