Add optional links to edit history components

app/src/frontend/building/edit-history/building-edit-summary.css

@@ -11,4 +11,8 @@
 
 .edit-history-username {
     font-size: 0.9em;
+}
+
+.edit-history-building-id {
+    font-size: 0.9em;
 }

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import './building-edit-summary.css';
 
@@ -10,6 +11,8 @@ import { CategoryEditSummary } from './category-edit-summary';
 
 interface BuildingEditSummaryProps {
     historyEntry: EditHistoryEntry;
+    showBuildingId?: boolean;
+    hyperlinkCategories?: boolean;
 }
 
 function formatDate(dt: Date) {
@@ -23,27 +26,47 @@ function formatDate(dt: Date) {
     });
 }
 
-const BuildingEditSummary: React.FunctionComponent<BuildingEditSummaryProps> = props => {
+const BuildingEditSummary: React.FunctionComponent<BuildingEditSummaryProps> = ({
+    historyEntry,
+    showBuildingId = false,
+    hyperlinkCategories = false
+}) => {
     const entriesWithMetadata = Object
-            .entries(props.historyEntry.forward_patch)
+            .entries(historyEntry.forward_patch)
             .map(([key, value]) => {
                 const info = dataFields[key] || {};
                 return {
                     title: info.title || `Unknown field (${key})`,
-                    category: info.category || 'Unknown category',
+                    category: info.category || 'Unknown',
                     value: value,
-                    oldValue: props.historyEntry.reverse_patch && props.historyEntry.reverse_patch[key]
+                    oldValue: historyEntry.reverse_patch && historyEntry.reverse_patch[key]
                 };
             });
     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(props.historyEntry.date_trunc))}</h2>
-            <h3 className="edit-history-username">By {props.historyEntry.username}</h3>
+            <h2 className="edit-history-timestamp">Edited on {formatDate(parseDate(historyEntry.date_trunc))}</h2>
+            <h3 className="edit-history-username">By {historyEntry.username}</h3>
             {
-                Object.entries(entriesByCategory).map(([category, fields]) => <CategoryEditSummary category={category} fields={fields} />)
+                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
+                        category={category}
+                        fields={fields}
+                        hyperlinkCategory={hyperlinkCategories}
+                        hyperlinkTemplate={categoryHyperlinkTemplate}
+                    />
+                )
             }
         </div>
     );

app/src/frontend/building/edit-history/category-edit-summary.tsx

@@ -1,31 +1,51 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import './category-edit-summary.css';
 
+import { categories, Category } from '../../data_fields';
+
 import { FieldEditSummary } from './field-edit-summary';
 
 interface CategoryEditSummaryProps {
     category: string;
     fields: {
         title: string;
-        value: string;
-        oldValue: string;
+        value: any;
+        oldValue: any;
     }[];
+    hyperlinkCategory: boolean;
+    hyperlinkTemplate?: string;
 }
 
-const CategoryEditSummary : React.FunctionComponent<CategoryEditSummaryProps> = props => (
-    <div className='edit-history-category-summary'>
-        <h3 className='edit-history-category-title'>{props.category}:</h3>
-        <ul>
-        {
-            props.fields.map(x => 
-                <li key={x.title}>
-                    <FieldEditSummary title={x.title} value={x.value} oldValue={x.oldValue} />
-                </li>)
-        }
-        </ul>
-    </div>
-);
+const CategoryEditSummary : React.FunctionComponent<CategoryEditSummaryProps> = props => {
+    const category: Category = Category[props.category];
+    console.log(category);
+    console.log(typeof(category));
+    const categoryInfo = categories[category] || {name: undefined, slug: undefined};
+    const categoryName = categoryInfo.name || 'Unknown category';
+    const categorySlug = categoryInfo.slug || 'categories';
+
+    return (
+        <div className='edit-history-category-summary'>
+            <h3 className='edit-history-category-title'>
+                {
+                    props.hyperlinkCategory && props.hyperlinkTemplate != undefined ?
+                        <Link to={props.hyperlinkTemplate.replace(/\$category/, categorySlug)}>{categoryName}</Link> :
+                        categoryName
+                }:
+            </h3>
+            <ul>
+            {
+                props.fields.map(x => 
+                    <li key={x.title}>
+                        <FieldEditSummary title={x.title} value={x.value} oldValue={x.oldValue} />
+                    </li>)
+            }
+            </ul>
+        </div>
+    );
+};
 
 export {
     CategoryEditSummary

app/src/frontend/data_fields.ts

@@ -1,18 +1,69 @@
 export enum Category {
     Location = 'Location',
-    LandUse = 'Land Use',
+    LandUse = 'LandUse',
     Type = 'Type',
     Age = 'Age',
-    SizeShape = 'Size & Shape',
+    SizeShape = 'SizeShape',
     Construction = 'Construction',
     Streetscape = 'Streetscape',
     Team = 'Team',
     Sustainability = 'Sustainability',
     Community = 'Community',
     Planning = 'Planning',
-    Like = 'Like Me!'
+    Like = 'Like',
 }
 
+export const categories = {
+    [Category.Location]: {
+        slug: 'location',
+        name: 'Location'
+    },
+    [Category.LandUse]: {
+        slug: 'use',
+        name: 'Land Use'
+    },
+    [Category.Type]: {
+        slug: 'type',
+        name: 'Type'
+    },
+    [Category.Age]: {
+        slug: 'age',
+        name: 'Age'
+    },
+    [Category.SizeShape]: {
+        slug: 'size',
+        name: 'Size & Shape'
+    },
+    [Category.Construction]: {
+        slug: 'construction',
+        name: 'Construction'
+    },
+    [Category.Streetscape]: {
+        slug: 'streetscape',
+        name: 'Streetscape'
+    },
+    [Category.Team]: {
+        slug: 'team',
+        name: 'Team'
+    },
+    [Category.Sustainability]: {
+        slug: 'sustainability',
+        name: 'Sustainability'
+    },
+    [Category.Community]: {
+        slug: 'community',
+        name: 'Community'
+    },
+    [Category.Planning]: {
+        slug: 'planning',
+        name: 'Planning'
+    },
+    [Category.Like]: {
+        slug: 'like',
+        name: 'Like Me!'
+    }
+};
+
 export const categoriesOrder: Category[] = [
     Category.Location,
     Category.LandUse,

app/src/frontend/models/edit-history-entry.ts

@@ -4,4 +4,5 @@ export interface EditHistoryEntry {
     revision_id: string;
     forward_patch: object;
     reverse_patch: object;
+    building_id?: number;
 }