Ivan - Add articles in user dashboard [skip ci]

client/src/app-components/articles-list.js

@@ -16,6 +16,7 @@ class ArticlesList extends React.Component {
 
     static propTypes = {
         editable: React.PropTypes.bool,
+        articlePath: React.PropTypes.string,
         loading: React.PropTypes.bool,
         topics: React.PropTypes.array
     };
@@ -47,7 +48,11 @@ class ArticlesList extends React.Component {
                 {this.props.topics.map((topic, index) => {
                     return (
                         <div key={index}>
-                            <TopicViewer {...topic} editable={this.props.editable} onChange={this.retrieveArticles.bind(this)}/>
+                            <TopicViewer
+                                {...topic}
+                                editable={this.props.editable}
+                                onChange={this.retrieveArticles.bind(this)}
+                                articlePath={this.props.articlePath} />
                             <span className="articles-list__topic-separator" />
                         </div>
                     );

client/src/app-components/topic-viewer.js

@@ -45,11 +45,7 @@ class TopicViewer extends React.Component {
                 </div>
                 <ul className="topic-viewer__list">
                     {this.state.articles.map(this.renderArticleItem.bind(this))}
-                    <li className="topic-viewer__list-item">
-                        <Button type="link" className="topic-viewer__add-item" onClick={() => ModalContainer.openModal(this.renderAddNewArticle())}>
-                            {i18n('ADD_NEW_ARTICLE')}
-                        </Button>
-                    </li>
+                    {(this.props.editable) ? this.renderAddNewArticle() : null}
                 </ul>
             </div>
         );
@@ -81,6 +77,16 @@ class TopicViewer extends React.Component {
         );
     }
 
+    renderAddNewArticle() {
+        return (
+            <li className="topic-viewer__list-item">
+                <Button type="link" className="topic-viewer__add-item" onClick={() => ModalContainer.openModal(this.renderAddNewArticleModal())}>
+                    {i18n('ADD_NEW_ARTICLE')}
+                </Button>
+            </li>
+        );
+    }
+
     renderEditModal() {
         let props = {
             topicId: this.props.id,
@@ -96,7 +102,7 @@ class TopicViewer extends React.Component {
         );
     }
 
-    renderAddNewArticle() {
+    renderAddNewArticleModal() {
         let props = {
             topicId: this.props.id,
             position: this.props.articles.length,

client/src/app/Routes.js

@@ -66,7 +66,7 @@ export default (
                     <Route path='create-ticket' component={DashboardCreateTicketPage}/>
                     <Route path='edit-profile' component={DashboardEditProfilePage}/>
 
-                    <Route path='article' component={DashboardArticlePage}/>
+                    <Route path='article/:articleId' component={DashboardArticlePage}/>
                     <Route path='ticket/:ticketNumber' component={DashboardTicketPage}/>
                 </Route>
             </Route>

client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js

@@ -1,14 +1,80 @@
 import React from 'react';
+import _ from 'lodash';
+import {connect}  from 'react-redux';
+
+import ArticlesActions from 'actions/articles-actions';
+import SessionStore from 'lib-app/session-store';
+import i18n from 'lib-app/i18n';
+import DateTransformer from 'lib-core/date-transformer';
+
+import Header from 'core-components/header';
+import Loading from 'core-components/loading';
 
 class DashboardArticlePage extends React.Component {
 
+    static propTypes = {
+        topics: React.PropTypes.array,
+        loading: React.PropTypes.bool
+    };
+
+    static defaultProps = {
+        topics: [],
+        loading: true
+    };
+
+    componentDidMount() {
+        if(SessionStore.getItem('topics')) {
+            this.props.dispatch(ArticlesActions.initArticles());
+        } else {
+            this.props.dispatch(ArticlesActions.retrieveArticles());
+        }
+    }
+
     render() {
         return (
-            <div>
-                DASHBOARD ARTICLE
+            <div className="dashboard-article-page">
+                {(this.props.loading) ? <Loading /> : this.renderContent()}
             </div>
         );
     }
+
+    renderContent() {
+        let article = this.findArticle();
+
+        return (article) ? this.renderArticlePreview(article) : i18n('ARTICLE_NOT_FOUND');
+    }
+
+    renderArticlePreview(article) {
+        return (
+            <div className="dashboard-article-page__article">
+                <Header title={article.title}/>
+
+                <div className="dashboard-article-page__article-content">
+                    <div dangerouslySetInnerHTML={{__html: article.content}}/>
+                </div>
+                <div className="dashboard-article-page__last-edited">
+                    {i18n('LAST_EDITED_IN', {date: DateTransformer.transformToString(article.lastEdited)})}
+                </div>
+            </div>
+        );
+    }
+
+    findArticle() {
+        let article = null;
+
+        _.forEach(this.props.topics, (topic) => {
+            if(!article) {
+                article = _.find(topic.articles, {id: this.props.params.articleId * 1});
+            }
+        });
+
+        return article;
+    }
 }
 
-export default DashboardArticlePage;
+export default connect((store) => {
+    return {
+        topics: store.articles.topics,
+        loading: store.articles.loading
+    };
+})(DashboardArticlePage);

client/src/app/main/dashboard/dashboard-article/dashboard-article-page.scss

@@ -0,0 +1,8 @@
+.dashboard-article-page {
+
+    &__last-edited {
+        font-style: italic;
+        text-align: right;
+        margin-top: 20px;
+    }
+}

client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js

@@ -1,11 +1,16 @@
 import React from 'react';
 
+import i18n from 'lib-app/i18n';
+import ArticlesList from 'app-components/articles-list';
+import Header from 'core-components/header';
+
 class DashboardListArticlesPage extends React.Component {
 
     render() {
         return (
             <div>
-                DASHBOARD ARTICLES LIST
+                <Header title={i18n('LIST_ARTICLES')} description={i18n('LIST_ARTICLES_DESCRIPTION')}/>
+                <ArticlesList editable={false} articlePath="/dashboard/article/"/>
             </div>
         );
     }

client/src/data/languages/en.js

@@ -42,7 +42,7 @@ export default {
     'CUSTOM_RESPONSES': 'Custom Responses',
     'LIST_USERS': 'List Users',
     'BAN_USERS': 'Ban Users',
-    'LIST_ARTICLES': 'List Articles',
+    'LIST_ARTICLES': 'Article List',
     'STAFF_MEMBERS': 'Staff Members',
     'DEPARTMENTS': 'Departments',
     'SYSTEM_PREFERENCES': 'System Preferences',