From 70ab02431cdea0976af3b7dd44d5f0aca97ef4ab Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Date: Sun, 24 May 2020 13:26:52 +0200
Subject: [PATCH] Add tags to history table

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
---
 public/locales/en.json                                     | 1 +
 .../pages/history/history-table/history-table-row.tsx      | 7 +++++++
 .../landing/pages/history/history-table/history-table.tsx  | 1 +
 3 files changed, 9 insertions(+)

diff --git a/public/locales/en.json b/public/locales/en.json
index b744948a5..a1ab6d697 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -16,6 +16,7 @@
   "signOut": "Sign Out",
   "exploreFeatures": "Explore all features",
   "selectTags": "Select tags…",
+  "tags": "Tags",
   "searchKeywords": "Search keyword…",
   "sortByTitle": "Sort by title",
   "title": "Title",
diff --git a/src/components/landing/pages/history/history-table/history-table-row.tsx b/src/components/landing/pages/history/history-table/history-table-row.tsx
index 389953ceb..75cc1f4a3 100644
--- a/src/components/landing/pages/history/history-table/history-table-row.tsx
+++ b/src/components/landing/pages/history/history-table/history-table-row.tsx
@@ -4,6 +4,7 @@ import {CloseButton} from "../common/close-button";
 import {useTranslation} from "react-i18next";
 import {HistoryEntryProps} from "../history-content/history-content";
 import {formatHistoryDate} from "../../../../../utils/historyUtils";
+import {Badge} from "react-bootstrap";
 
 export const HistoryTableRow: React.FC<HistoryEntryProps> = ({entry, onPinClick}) => {
     useTranslation()
@@ -11,6 +12,12 @@ export const HistoryTableRow: React.FC<HistoryEntryProps> = ({entry, onPinClick}
         <tr>
             <td>{entry.title}</td>
             <td>{formatHistoryDate(entry.lastVisited)}</td>
+            <td>
+                {
+                    entry.tags.map((tag) => <Badge variant={"dark"} className={"mr-1 mb-1"}
+                                                   key={tag}>{tag}</Badge>)
+                }
+            </td>
             <td>
                 <PinButton isDark={true} isPinned={entry.pinned} onPinClick={() => {
                     onPinClick(entry.id)
diff --git a/src/components/landing/pages/history/history-table/history-table.tsx b/src/components/landing/pages/history/history-table/history-table.tsx
index a193e2d98..6eb2d63f1 100644
--- a/src/components/landing/pages/history/history-table/history-table.tsx
+++ b/src/components/landing/pages/history/history-table/history-table.tsx
@@ -11,6 +11,7 @@ const HistoryTable: React.FC<HistoryEntriesProps> = ({entries, onPinClick}) => {
             <tr>
                 <th><Trans i18nKey={"title"}/></th>
                 <th><Trans i18nKey={"lastVisit"}/></th>
+                <th><Trans i18nKey={"tags"}/></th>
                 <th><Trans i18nKey={"actions"}/></th>
             </tr>
             </thead>