Fix rendering of file: links (200ok-ch#311)

The new logic for rendering file: links introduced by 200ok-ch#307 had a
number of issues:

- It created links for absolute paths, which does not make sense
  since there is no fully general mapping between the filesystem
  and any of the sync backends.

- It created links for relative paths pointing outside the
  backend (e.g. ../../../../foo.org),

- It used <a href="..."> rather than <Link to=...>, which meant
  the PWA treated them as external links.

So create a <Link> for relative file: paths pointing to .org files,
don't link other file: paths, and render all other links with <a ...>
as before.

Fixes 200ok-ch#311.

src/components/OrgFile/OrgFile.integration.test.js

@@ -462,16 +462,22 @@ describe('Render all views', () => {
           expect(elem[0]).toHaveTextContent('https://foo.bar.baz/xyz?a=b&d#foo');
         });
 
-        test('recognizes file: links', () => {
-          fireEvent.click(
-            queryByText('A header with a link to a local .org file as content')
-          );
-          const elem = getAllByText('a local .org file');
-          // There's exactly one such URL
-          expect(elem.length).toEqual(1);
-          // And it renders as such
-          expect(elem[0]).toHaveAttribute('href', 'schedule_and_timestamps.org');
-          expect(elem[0]).toHaveTextContent('a local .org file');
+        describe('recognizes file: links', () => {
+          beforeEach(() => {
+            fireEvent.click(
+              queryByText('A header with various links as content')
+            );
+          });
+
+          test('relative link to .org file', () => {
+            const elem = getAllByText('an existing .org file in the same directory');
+            // There's exactly one such URL
+            console.log(elem);
+            expect(elem.length).toEqual(1);
+            // And it renders as such
+            expect(elem[0]).toHaveAttribute('href', 'schedule_and_timestamps.org');
+            expect(elem[0]).toHaveTextContent('a local .org file');
+          });
         });
 
         test('recognizes email addresses', () => {

src/components/OrgFile/__snapshots__/OrgFile.integration.test.js.snap

@@ -539,7 +539,7 @@ exports[`Render all views Org Functionality Renders everything starting from an
                 style="word-break: break-word;"
               >
                 <span>
-                  A header with a link to a local .org file as content
+                  A header with various links as content
                 </span>
                 ...
               </span>

src/components/OrgFile/components/AttributedString/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Link, useLocation } from 'react-router-dom';
+
 import './stylesheet.css';
 
 import TablePart from './components/TablePart';
@@ -11,26 +13,46 @@ import classNames from 'classnames';
 export default ({ parts, subPartDataAndHandlers }) => {
   let className;
 
+  let location = useLocation();
+
+  const renderLink = (part) => {
+    const id = part.get('id');
+    const uri = part.getIn(['contents', 'uri']);
+    const title = part.getIn(['contents', 'title']) || uri;
+    if (uri.startsWith("file:")) {
+      const target = uri.substr(5);
+      const isRelativeOrgFileLink =
+        !target.startsWith("/") &&
+        !target.startsWith("~") &&
+        !target.startsWith("../") &&
+        uri.endsWith(".org");
+      if (isRelativeOrgFileLink) {
+        const dir = location.pathname.match(/.*\//);
+        return (
+          <Link key={id} to={dir + target}>
+            {title}
+          </Link>
+        );
+      } else {
+        return title;
+      }
+    } else {
+      return (
+        <a key={id} href={uri} target="_blank" rel="noopener noreferrer">
+          {title}
+        </a>
+      );
+    }
+  };
+
   return (
     <span>
       {parts.map((part) => {
         switch (part.get('type')) {
           case 'text':
             return part.get('contents');
           case 'link':
-            const uri = part.getIn(['contents', 'uri']);
-            const title = part.getIn(['contents', 'title']) || uri;
-            const isFileLink = uri.startsWith("file:");
-            return (
-              <a
-                key={part.get('id')} 
-                href={isFileLink ? uri.substr(5) : uri}
-                target={isFileLink ? "" : "_blank"}
-                rel="noopener noreferrer"
-              >
-                {title}
-              </a>
-            );
+            return renderLink(part);
           case 'percentage-cookie':
             className = classNames('attributed-string__cookie-part', {
               'attributed-string__cookie-part--complete':

src/components/OrgFile/index.js

@@ -114,11 +114,16 @@ class OrgFile extends PureComponent {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     const { headers, pendingCapture } = this.props;
     if (!!pendingCapture && !!headers && headers.size > 0) {
       this.props.org.insertPendingCapture();
     }
+
+    const { path } = this.props;
+    if (!_.isEmpty(path) && path !== prevProps.path) {
+      this.props.syncBackend.downloadFile(path);
+    }
   }
 
   componentDidCatch(error) {

src/reducers/org.unit.test.js

@@ -63,7 +63,7 @@ describe('org reducer', () => {
         ['A repeating todo', 2],
         ['A header with tags                                              ', 1],
         ['A header with [[https://organice.200ok.ch][a link]]', 1],
-        ['A header with a link to a local .org file as content', 1],
+        ['A header with various links as content', 1],
         ['A header with a URL, mail address and phone number as content', 1],
         ['PROJECT Foo', 2],
         ["A headline that's done since a loong time", 3],
@@ -89,7 +89,7 @@ describe('org reducer', () => {
         ['A repeating todo', 2],
         ['A header with tags                                              ', 1],
         ['A header with [[https://organice.200ok.ch][a link]]', 1],
-        ['A header with a link to a local .org file as content', 1],
+        ['A header with various links as content', 1],
         ['A header with a URL, mail address and phone number as content', 1],
         ['A header with a custom todo sequence in DONE state', 1],
       ]);

test_helpers/fixtures/main_test_file.org

@@ -12,9 +12,11 @@ Some description content
 
 * A header with tags                                              :tag1:tag2:
 * A header with [[https://organice.200ok.ch][a link]]
-* A header with a link to a local .org file as content
-
-  [[file:schedule_and_timestamps.org][a local .org file]]
+* A header with various links as content
+  Relative link to [[file:schedule_and_timestamps.org][an existing .org file in the same directory]]
+  Relative link to [[file:subdir/foo.org][a fictitious .org file in a sub-directory]]
+  Absolute link to [[file:/foo/bar/baz.org][a fictitious .org file in home directory]]
+  Absolute link to [[file:/foo/bar/baz.org][a fictitious .org file]]
 * A header with a URL, mail address and phone number as content
 
   This is a URL https://foo.bar.baz/xyz?a=b&d#foo in a line of text.