add EditHistoryLatest

app/src/frontend/building/data-containers/age.tsx

@@ -8,7 +8,7 @@ import TextboxDataEntry from '../data-components/textbox-data-entry';
 import Verification from '../data-components/verification';
 import YearDataEntry from '../data-components/year-data-entry';
 import withCopyEdit from '../data-container';
-import { EditHistory } from '../edit-history/edit-history';
+import { EditHistoryLatest } from '../edit-history/edit-history';
 
 import { CategoryViewProps } from './category-view-props';
 
@@ -23,7 +23,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
        ){
       return (
           <Fragment>
-              <EditHistory
+              <EditHistoryLatest
                   building={props.building}
               />
               <YearDataEntry
@@ -97,7 +97,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
       };
     return (
         <Fragment>
-            <EditHistory
+            <EditHistoryLatest
                 building={props.building}
             />
             <YearDataEntry

app/src/frontend/building/edit-history/building-edit-latest.tsx

@@ -0,0 +1,69 @@
+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 BuildingEditLatestProps {
+    historyEntry: EditHistoryEntry;
+    showBuildingId?: boolean;
+    hyperlinkCategories?: boolean;
+}
+
+function formatDate(dt: Date) {
+    return dt.toLocaleString(undefined, {
+        weekday: 'short',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}
+
+function enrichHistoryEntries(forwardPatch: object, reversePatch: object) {
+    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 BuildingEditLatest: React.FunctionComponent<BuildingEditLatestProps> = ({
+    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>
+        </div>
+    );
+};
+
+export {
+    BuildingEditLatest
+};

app/src/frontend/building/edit-history/edit-history-latest.tsx

@@ -0,0 +1,48 @@
+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 { BuildingEditLatest } from './building-edit-latest';
+
+interface EditHistoryLatestProps {
+    building: Building;
+}
+
+const EditHistory: React.FunctionComponent<EditHistoryLatestProps> = (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) { // only call fn if there is a building provided
+            fetchData(); // define and call, because effect cannot return anything and an async fn always returns a Promise
+        }
+    }, [props.building]); // only re-run effect on building prop change
+    
+    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">
+                        <BuildingEditLatest historyEntry={entry} />
+                    </li>
+                ))}
+            </ul>
+        </>
+    );
+};
+
+export {
+    EditHistoryLatest
+};