From 70fa8725b4c4c6afc9d5854453b8b5697f06ba8c Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Thu, 14 Nov 2019 15:28:12 +0000
Subject: [PATCH] Add global edit history page

---
 .../api/controllers/editHistoryController.ts  |  4 +-
 app/src/frontend/app.tsx                      |  2 +
 app/src/frontend/pages/changes.tsx            | 41 +++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 app/src/frontend/pages/changes.tsx

diff --git a/app/src/api/controllers/editHistoryController.ts b/app/src/api/controllers/editHistoryController.ts
index 27d6a2a9..c266e7f5 100644
--- a/app/src/api/controllers/editHistoryController.ts
+++ b/app/src/api/controllers/editHistoryController.ts
@@ -6,7 +6,9 @@ import * as editHistoryService from '../services/editHistory';
 const getGlobalEditHistory = asyncController(async (req: express.Request, res: express.Response) => {
     try {
         const result = await editHistoryService.getGlobalEditHistory();
-        res.send(result);
+        res.send({
+            history: result
+        });
     } catch(error) {
         console.error(error);
         res.send({ error: 'Database error' });
diff --git a/app/src/frontend/app.tsx b/app/src/frontend/app.tsx
index 684e9617..6d39803d 100644
--- a/app/src/frontend/app.tsx
+++ b/app/src/frontend/app.tsx
@@ -9,6 +9,7 @@ import MapApp from './map-app';
 import { Building } from './models/building';
 import { User } from './models/user';
 import AboutPage from './pages/about';
+import ChangesPage from './pages/changes';
 import ContactPage from './pages/contact';
 import ContributorAgreementPage from './pages/contributor-agreement';
 import DataAccuracyPage from './pages/data-accuracy';
@@ -112,6 +113,7 @@ class App extends React.Component<AppProps, AppState> {
                 <Route exact path="/data-accuracy.html" component={DataAccuracyPage} />
                 <Route exact path="/data-extracts.html" component={DataExtracts} />
                 <Route exact path="/contact.html" component={ContactPage} />
+                <Route exact path="/history.html" component={ChangesPage} />
                 <Route exact path={App.mapAppPaths} render={(props) => (
                     <MapApp
                         {...props}
diff --git a/app/src/frontend/pages/changes.tsx b/app/src/frontend/pages/changes.tsx
new file mode 100644
index 00000000..b605e5c1
--- /dev/null
+++ b/app/src/frontend/pages/changes.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+
+import { BuildingEditSummary } from '../building/edit-history/building-edit-summary';
+import { EditHistoryEntry } from '../models/edit-history-entry';
+
+const ChangesPage = () => {
+    const [history, setHistory] = useState<EditHistoryEntry[]>(undefined);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const res = await fetch(`/api/history`);
+            const data = await res.json();
+
+            setHistory(data.history);
+        };
+
+        fetchData();
+    }, []);
+    
+    return (
+        <article>
+            <section className="main-col">
+                <h1>Global edit history</h1>
+
+                <ul className="edit-history-list">
+                    {history && history.map(entry => (
+                        <li key={`${entry.revision_id}`} className="edit-history-list-element">
+                            <BuildingEditSummary
+                                historyEntry={entry}
+                                showBuildingId={true}
+                                hyperlinkCategories={true}
+                            />
+                        </li>
+                    ))}
+                </ul>
+            </section>
+        </article>
+    );
+};
+
+export default ChangesPage;