From 2d0b605257682a97b6dfe2f45537cd5aa935a75d Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Sun, 14 Jun 2020 12:25:45 +0200
Subject: [PATCH] Add links from recent note history entries to the actual note
 (#203)

* Added Link objects around history-cards and the title in table-view

This commit adds one Link element wrapping the title of a note in the table view and one Link element wrapping the whole card of a note in cards view.

This behaviour currently doesn't work completely correct as other buttons on the card become unclickable and needs to be fixed in another commit before merging this branch.

* Fixed Link behaviour for card view

The cards aren't wrapped inside a Link element anymore but the middle column of a card (where the title and tags are located) is now wrapped inside the Link element.
With this approach not the whole card is clickable anymore, but it's enough clickable space anyway. The positive aspect is that we don't have to deal with "position: absolute"-elements that may break responsiveness.
---
 .../history/history-card/history-card.tsx     | 27 ++++++++++---------
 .../history-table/history-table-row.tsx       |  7 ++++-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/landing/pages/history/history-card/history-card.tsx b/src/components/landing/pages/history/history-card/history-card.tsx
index 6cfad7555..3f5632ecd 100644
--- a/src/components/landing/pages/history/history-card/history-card.tsx
+++ b/src/components/landing/pages/history/history-card/history-card.tsx
@@ -1,6 +1,7 @@
 import moment from 'moment'
 import React from 'react'
 import { Badge, Card } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
 import { formatHistoryDate } from '../../../../../utils/historyUtils'
 import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
 import { EntryMenu } from '../common/entry-menu'
@@ -16,20 +17,22 @@ export const HistoryCard: React.FC<HistoryEntryProps> = ({ entry, onPinClick, on
           <div className={'d-flex flex-column'}>
             <PinButton isDark={false} isPinned={entry.pinned} onPinClick={() => onPinClick(entry.id, entry.location)}/>
           </div>
-          <div className={'d-flex flex-column justify-content-between'}>
-            <Card.Title className="m-0 mt-1dot5">{entry.title}</Card.Title>
-            <div>
-              <div className="text-black-50 mt-2">
-                <ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
-                {formatHistoryDate(entry.lastVisited)}
-              </div>
-              <div className={'card-footer-min-height p-0'}>
-                {
-                  entry.tags.map((tag) => <Badge variant={'dark'} className={'mr-1 mb-1'} key={tag}>{tag}</Badge>)
-                }
+          <Link to={`/n/${entry.id}`} className="text-decoration-none flex-fill text-dark">
+            <div className={'d-flex flex-column justify-content-between'}>
+              <Card.Title className="m-0 mt-1dot5">{entry.title}</Card.Title>
+              <div>
+                <div className="text-black-50 mt-2">
+                  <ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
+                  {formatHistoryDate(entry.lastVisited)}
+                </div>
+                <div className={'card-footer-min-height p-0'}>
+                  {
+                    entry.tags.map((tag) => <Badge variant={'dark'} className={'mr-1 mb-1'} key={tag}>{tag}</Badge>)
+                  }
+                </div>
               </div>
             </div>
-          </div>
+          </Link>
           <div className={'d-flex flex-column'}>
             <EntryMenu
               id={entry.id}
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 d098f35c8..77bb813da 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
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Badge } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
 import { formatHistoryDate } from '../../../../../utils/historyUtils'
 import { EntryMenu } from '../common/entry-menu'
 import { PinButton } from '../common/pin-button'
@@ -8,7 +9,11 @@ import { HistoryEntryProps } from '../history-content/history-content'
 export const HistoryTableRow: React.FC<HistoryEntryProps> = ({ entry, onPinClick, onRemoveClick }) => {
   return (
     <tr>
-      <td>{entry.title}</td>
+      <td>
+        <Link to={`/n/${entry.id}`} className="text-light">
+          {entry.title}
+        </Link>
+      </td>
       <td>{formatHistoryDate(entry.lastVisited)}</td>
       <td>
         {