From b1331ee97d23d2eb6181f6bd51545f4ef747033a Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Sun, 4 Dec 2016 01:56:39 -0300
Subject: [PATCH] Ivan - Add breadcrumb [skip ci]

---
 .../dashboard-article-page.js                 | 34 +++++++++++++++
 client/src/core-components/breadcrumb.js      | 42 +++++++++++++++++++
 client/src/core-components/breadcrumb.scss    | 17 ++++++++
 3 files changed, 93 insertions(+)
 create mode 100644 client/src/core-components/breadcrumb.js
 create mode 100644 client/src/core-components/breadcrumb.scss

diff --git a/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js b/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js
index a43ff5a5..8aeca485 100644
--- a/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js
+++ b/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js
@@ -9,6 +9,7 @@ import DateTransformer from 'lib-core/date-transformer';
 
 import Header from 'core-components/header';
 import Loading from 'core-components/loading';
+import BreadCrumb from 'core-components/breadcrumb';
 
 class DashboardArticlePage extends React.Component {
 
@@ -33,6 +34,9 @@ class DashboardArticlePage extends React.Component {
     render() {
         return (
             <div className="dashboard-article-page">
+                <div className="dashboard-article-page__breadcrumb">
+                    <BreadCrumb items={this.getBreadCrumbItems()}/>
+                </div>
                 {(this.props.loading) ? <Loading /> : this.renderContent()}
             </div>
         );
@@ -70,6 +74,36 @@ class DashboardArticlePage extends React.Component {
 
         return article;
     }
+
+    findTopic() {
+        let topicFound = {};
+
+        _.forEach(this.props.topics, (topic) => {
+            if(_.find(topic.articles, {id: this.props.params.articleId * 1})) {
+                topicFound = topic;
+            }
+        });
+
+        return topicFound;
+    }
+
+    getBreadCrumbItems() {
+        let article = this.findArticle();
+        let topic = this.findTopic();
+        let items = [
+            {content: i18n('ARTICLES'), url: '/dashboard/articles'}
+        ];
+
+        if(topic && topic.name) {
+            items.push({content: topic.name, url: '/dashboard/articles'});
+        }
+
+        if(article && article.title) {
+            items.push({content: article.title});
+        }
+
+        return items;
+    }
 }
 
 export default connect((store) => {
diff --git a/client/src/core-components/breadcrumb.js b/client/src/core-components/breadcrumb.js
new file mode 100644
index 00000000..8f1382e7
--- /dev/null
+++ b/client/src/core-components/breadcrumb.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import {Link} from 'react-router';
+
+class BreadCrumb extends React.Component {
+    static propTypes = {
+        items: React.PropTypes.arrayOf(React.PropTypes.shape({
+            content: React.PropTypes.string.isRequired,
+            url: React.PropTypes.string
+        }))
+    };
+
+    render() {
+        return (
+            <ol className="breadcrumb">
+                {this.props.items.map(this.renderItem.bind(this))}
+            </ol>
+        );
+    }
+
+    renderItem(item, index) {
+        return (
+            <li className="breadcrumb__item" key={index}>
+                {(item.url) ? this.renderItemLink(item) : item.content}
+                {(index < this.props.items.length - 1) ? this.renderArrow() : null}
+            </li>
+        );
+    }
+
+    renderItemLink(item) {
+        return (
+            <Link to={item.url}>{item.content}</Link>
+        );
+    }
+
+    renderArrow() {
+        return (
+            <span className="breadcrumb__arrow">{'>'}</span>
+        );
+    }
+}
+
+export default BreadCrumb;
\ No newline at end of file
diff --git a/client/src/core-components/breadcrumb.scss b/client/src/core-components/breadcrumb.scss
new file mode 100644
index 00000000..fbafdc8e
--- /dev/null
+++ b/client/src/core-components/breadcrumb.scss
@@ -0,0 +1,17 @@
+@import "../scss/vars";
+
+.breadcrumb {
+    padding: 0;
+    text-align: left;
+
+    &__item {
+        color: $grey;
+        display: inline-block;
+        text-decoration: none;
+    }
+
+    &__arrow {
+        color: $grey;
+        margin: 0 5px;
+    }
+}
\ No newline at end of file