Ivan - Add breadcrumb [skip ci]

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

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;

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;
+    }
+}