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.

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'}>
+          <Link to={`/n/${entry.id}`} className="text-decoration-none flex-fill text-dark">
-            <Card.Title className="m-0 mt-1dot5">{entry.title}</Card.Title>
+            <div className={'d-flex flex-column justify-content-between'}>
-            <div>
+              <Card.Title className="m-0 mt-1dot5">{entry.title}</Card.Title>
-              <div className="text-black-50 mt-2">
+              <div>
-                <ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
+                <div className="text-black-50 mt-2">
-                {formatHistoryDate(entry.lastVisited)}
+                  <ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
-              </div>
+                  {formatHistoryDate(entry.lastVisited)}
-              <div className={'card-footer-min-height p-0'}>
+                </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>)
+                  {
-                }
+                    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}

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>
         {