#100 - Fixed internal links

.env.example

@@ -1,2 +1,4 @@
 REACT_APP_GOOGLE_TAG_MANAGER_CONTAINER_ID=GTM-XXXXXX
 
+NODE_PATH=src/
+

src/helpers/docLib.js

@@ -0,0 +1,12 @@
+// @flow
+/**
+ * @type {Object}
+ */
+const allSidebarItemType = {
+    INTERNAL: "INTERNAL",
+    EXTERNAL: "EXTERNAL"
+};
+
+export {
+    allSidebarItemType
+}

src/index.js

@@ -6,12 +6,12 @@ import dotenv from "dotenv";
 import {
     BunqLayoutPlugin,
     DisableTryItOutPlugin
-} from "./plugins";
-import initializeCookieConsentBar from "./helpers/tracking";
-import registerServiceWorker from "./helpers/registerServiceWorker";
+} from "plugins";
+import initializeCookieConsentBar from "helpers/tracking";
+import registerServiceWorker from "helpers/registerServiceWorker";
 
 import "swagger-ui/dist/swagger-ui.css";
-import "./scss/index.css";
+import "scss/index.css";
 
 dotenv.config();
 

src/plugins/BunqLayoutPlugin/BunqLayoutPlugin.js

@@ -1,7 +1,7 @@
 // @flow
-import BunqLayout from "./components/BunqLayout/BunqLayout";
-import Sidebar from "./components/Sidebar/Sidebar";
-import SidebarItem from "./components/SidebarItem/SidebarItem";
+import BunqLayout from "plugins/BunqLayoutPlugin/components/BunqLayout/BunqLayout";
+import Sidebar from "plugins/BunqLayoutPlugin/components/Sidebar/Sidebar";
+import SidebarItem from "plugins/BunqLayoutPlugin/components/SidebarItem/SidebarItem";
 
 /**
  * @type {Object}

src/plugins/BunqLayoutPlugin/components/Sidebar/Sidebar.js

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { allSidebarItemType } from "helpers/docLib";
+
 /**
  * @author Nicola Parrello <[email protected]>
  * @since  20181009 Initial creation.
@@ -8,69 +10,87 @@ class Sidebar extends React.Component {
     /**
      * @type {Object[]}
      */
-    static topics = [
+    static allResourceInternal = [
         {
-            tag: "introduction",
+            destination: "introduction",
             name: "Introduction"
         },
         {
-            tag: "oauth",
+            destination: "oauth",
             name: "OAuth"
         },
         {
-            tag: "authentication",
+            destination: "authentication",
             name: "Authentication"
         },
         {
-            tag: "psd2",
+            destination: "psd2",
             name: "PSD2 service provider"
         },
         {
-            tag: "signing",
+            destination: "signing",
             name: "Signing"
         },
         {
-            tag: "headers",
+            destination: "headers",
             name: "Headers"
         },
         {
-            tag: "errors",
+            destination: "errors",
             name: "Errors"
         },
         {
-            tag: "api-conventions",
-            name: "API Conventions"
+            destination: "api-conventions",
+            name: "API conventions"
         },
         {
-            tag: "callbacks",
+            destination: "callbacks",
             name: "Callbacks"
         },
         {
-            tag: "pagination",
+            destination: "pagination",
             name: "Pagination"
         },
         {
-            tag: "moving-to-production",
-            name: "Moving to Production"
+            destination: "moving-to-production",
+            name: "Moving to production"
         },
         {
-            tag: "android-emulator",
-            name: "Android Emulator"
+            destination: "android-emulator",
+            name: "Android emulator"
         },
         {
-            tag: "quickstart-opening-a-session",
+            destination: "quickstart-opening-a-session",
             name: "Quickstart: Opening a Session"
         },
         {
-            tag: "quickstart-payment-request",
+            destination: "quickstart-payment-request",
             name: "Quickstart: Payment Request"
         },
         {
-            tag: "quickstart-create-a-tab-payment",
+            destination: "quickstart-create-a-tab-payment",
+            name: "Quickstart: Create a Tab payment"
+        },
+        {
+            destination: "quickstart-create-a-tab-payment",
             name: "Quickstart: Create a Tab payment"
         }
     ];
 
+    /**
+     * @type {Object[]}
+     */
+    static allResourceExternal = [
+        {
+            destination: "https://github.com/bunq",
+            name: "GitHub"
+        },
+        {
+            destination: "https://status.bunq.com",
+            name: "bunq status"
+        }
+    ];
+
     /**
      * @returns {Node}
      */
@@ -88,9 +108,20 @@ class Sidebar extends React.Component {
                 <h3 className="sidebar-title">TOPICS</h3>
                 <ul className="sidebar-list">
                     {
-                        Sidebar.topics.map((topic: Object, index: number): Element => {
+                        Sidebar.allResourceInternal.map((topic: Object, index: number): Element => {
+                            return (
+                                <SidebarItem key={ index } destination={ topic.destination } name={ topic.name } type={ allSidebarItemType.INTERNAL } />
+                            );
+                        })
+                    }
+                </ul>
+
+                <h3 className="sidebar-title">LINKS</h3>
+                <ul className="sidebar-list">
+                    {
+                        Sidebar.allResourceExternal.map((topic: Object, index: number): Element => {
                             return (
-                                <SidebarItem key={ index } tag={ topic.tag } name={ topic.name } />
+                                <SidebarItem key={ index } destination={ topic.destination } name={ topic.name } type={ allSidebarItemType.EXTERNAL } />
                             );
                         })
                     }
@@ -99,9 +130,9 @@ class Sidebar extends React.Component {
                 <h3 className="sidebar-title">RESOURCES</h3>
                 <ul className="sidebar-list">
                     {
-                        operationTags.map((tag: string, index: number): Element => {
+                        operationTags.map((destination: string, index: number): Element => {
                             return (
-                                <SidebarItem key={ index } tag={ tag } name={ tag } isApiEndpoint={ true } />
+                                <SidebarItem key={ index } destination={ destination } name={ destination } type={ allSidebarItemType.INTERNAL } isApiEndpoint={ true } />
                             );
                         })
                     }

src/plugins/BunqLayoutPlugin/components/SidebarItem/SidebarItem.js

@@ -1,6 +1,8 @@
 import React from "react";
 import zenscroll from "zenscroll";
 
+import { allSidebarItemType } from "helpers/docLib";
+
 /**
  * @author Nicola Parrello <[email protected]>
  * @since  20181019 Initial creation.
@@ -13,15 +15,17 @@ class SidebarItem extends React.Component {
         super(props);
 
         const {
-            tag,
+            destination,
             name,
+            type,
             isApiEndpoint
         } = props;
 
         this.state = {
-            tag: tag,
-            hash: `#/${tag}`,
+            destination: destination,
+            hash: `#/${destination}`,
             name: name,
+            type: type,
             isApiEndpoint: isApiEndpoint || false
         };
     }
@@ -37,9 +41,9 @@ class SidebarItem extends React.Component {
         window.history.pushState(null, null, this.state.hash);
 
         if (this.state.isApiEndpoint) {
-            elementSelector = `#operations-tag-${this.state.tag}`;
+            elementSelector = `#operations-tag-${this.state.destination}`;
         } else {
-            elementSelector = `#topic-${this.state.tag}`;
+            elementSelector = `#topic-${this.state.destination}`;
         }
 
         window.setTimeout(() => {
@@ -58,18 +62,26 @@ class SidebarItem extends React.Component {
      * @returns {Node}
      */
     render (): Node {
+        const label = this.state.name;
+        let anchor;
+
+        if (allSidebarItemType.EXTERNAL === this.state.type) {
+            anchor = <a href={ this.state.destination } target={ "_blank" }>{ label }</a>;
+        } else {
+            anchor = <a href={ this.state.hash } onClick={ (event) => this.scrollToOperation(event) }>{ label }</a>;
+        }
+
+
         return (
-            <li>
-                <a href={ this.state.hash } onClick={ (event) => this.scrollToOperation(event) }>{ this.state.name }</a>
-            </li>
+            <li>{ anchor }</li>
         );
     }
 
     /**
      */
     componentDidUpdate () {
-        if (!this.state.isApiEndpoint) {
-            this.props.bunqSelectors.initializeScrollToTopic(this.state.tag);
+        if (allSidebarItemType.INTERNAL === this.state.type && !this.state.isApiEndpoint) {
+            this.props.bunqSelectors.initializeScrollToTopic(this.state.destination);
         }
     }
 }

src/plugins/index.js

@@ -1,6 +1,6 @@
 // @flow
-import BunqLayoutPlugin from "./BunqLayoutPlugin/BunqLayoutPlugin";
-import DisableTryItOutPlugin from "./DisableTryItOutPlugin/DisableTryItOutPlugin";
+import BunqLayoutPlugin from "plugins/BunqLayoutPlugin/BunqLayoutPlugin";
+import DisableTryItOutPlugin from "plugins/DisableTryItOutPlugin/DisableTryItOutPlugin";
 
 export {
     BunqLayoutPlugin,