add home, blog and details pages in web module

Author: moeen-basra

resources/assets/js/common/articles/listing/components/Article.js

@@ -26,7 +26,7 @@ function render ({ article }) {
         <h4 className="card-title">{article.title}</h4>
         <h6 className="card-subtitle mb-2 text-muted">{renderPublishedAt(article)}</h6>
         <p className="card-text">{ article.description }</p>
-        <Link to={`articles/${article.slug}`} className="card-link">Read More</Link>
+        <Link to={`blog/${article.slug}`} className="card-link">Read More</Link>
       </div>
     </div>
   </div>

resources/assets/js/modules/web/pages/blog/details/Page.js

@@ -0,0 +1,82 @@
+// import libs
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import DocumentTitle from 'react-document-title';
+import {articleFetchRequest} from '../../../../../store/services/article'
+import {APP_TITLE} from '../../../../../values/index'
+
+class Page extends Component {
+  static displayName = 'ArticleShowPage'
+  static propTypes = {
+    match: PropTypes.object.isRequired,
+    article: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      //
+    }
+  }
+
+  componentWillMount() {
+    this.loadArticle()
+  }
+
+  loadArticle() {
+    const {match, article, dispatch} = this.props
+
+    if (!article.slug) {
+      dispatch(articleFetchRequest(match.params.slug))
+    }
+  }
+
+  renderPublishedDate() {
+    const {publishedAt} = this.props.article
+
+    if (publishedAt) {
+      return `at ${publishedAt.format('MMMM d, YYYY')}`
+    }
+  }
+
+  renderAuthor() {
+    const {user} = this.props.article
+
+    if (user) {
+      return `by ${user.name}`
+    }
+
+  }
+
+  createMarkup() {
+    return {__html: this.props.article.content};
+  }
+
+  renderArticle() {
+    const {article} = this.props
+    return (<div className="col-12 col-sm-9 mb-5 mx-auto">
+      <h2>{article.title}</h2>
+      <small className="text-muted mb-5">{this.renderPublishedDate()} {this.renderAuthor()}</small>
+      <p className="text-muted mb-5">{article.description}</p>
+      <div dangerouslySetInnerHTML={this.createMarkup()}/>
+    </div>)
+  }
+
+  render() {
+    return (
+      <DocumentTitle title={`${this.props.article.title} - ${APP_TITLE}`}>
+        <section id="components-articles">
+          <div className="container">
+            <div className="row">
+              {this.renderArticle()}
+            </div>
+          </div>
+        </section>
+      </DocumentTitle>
+    )
+  }
+}
+
+export default Page

resources/assets/js/pages/articles/show/index.js renamed to resources/assets/js/modules/web/pages/blog/details/index.js

@@ -1,12 +1,12 @@
 import { connect } from 'react-redux'
-import Article from '../../../models/Article'
+import Article from '../../../../../models/Article'
 
 // import components
 import Page from './Page'
 
 const mapStateToProps = (state, router) => {
   const { params } = router.match
-  
+
   const article = state.articles.data.find(article => article.slug === params.slug)
   return {
     article: article ? new Article(article) : new Article({})

resources/assets/js/modules/web/pages/blog/list/Page.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+// import components
+import Articles from "../../../../../common/articles/listing/index"
+
+// import services
+import { articleListRequest } from "../../../../../store/services/article"
+
+class Page extends Component {
+  static displayName = "HomePage"
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+  }
+
+  componentDidMount() {
+    this.props.dispatch(articleListRequest({ url: '/articles/published' }))
+  }
+
+  render() {
+    return <div>
+      <Articles/>
+    </div>
+  }
+}
+
+export default Page

resources/assets/js/pages/home/index.js renamed to resources/assets/js/modules/web/pages/blog/list/index.js

@@ -1,7 +1,7 @@
 // import libs
-import { connect } from 'react-redux'
+import { connect } from "react-redux"
 
 // import components
-import Page from './Page'
+import Page from "./Page"
 
 export default connect()(Page)

resources/assets/js/modules/web/pages/home/Page.js

@@ -0,0 +1,29 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+// import components
+import Header from "./components/Header"
+import Articles from "../../../../common/articles/listing"
+
+// import services
+import { articleListRequest } from "../../../../store/services/article"
+
+class Page extends Component {
+  static displayName = "HomePage"
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+  }
+
+  componentDidMount() {
+    this.props.dispatch(articleListRequest({ url: '/articles/published' }))
+  }
+
+  render() {
+    return <div>
+      <Header/>
+      <Articles/>
+    </div>
+  }
+}
+
+export default Page

resources/assets/js/modules/web/pages/home/components/Header.js

@@ -0,0 +1,23 @@
+import React from "react"
+
+const displayName = "HomePageHeader"
+
+function Header() {
+  return <header className="bg-primary text-white">
+    <div className="container text-center">
+      <img width="125" height="125" src="/img/moeen.jpg" alt="..." className="rounded-circle" />
+      <h1>Moeen Farooq Basra</h1>
+      <p className="lead">Master in Information Technology</p>
+      <p className="lead">Fullstack Developer at&nbsp;
+        <a className="text-white"
+           href="http://awok.com"
+           target="_blank"
+           rel="noreferrer noopener">Awok.com</a>
+      </p>
+      <p className="lead"><i className="fa fa-heart text-danger" />{`{ PHP, JavaScript, Python, MySQL, MongoDB }`}</p>
+    </div>
+  </header>
+}
+Header.displayName = displayName
+
+export default Header

resources/assets/js/modules/web/pages/home/index.js

@@ -0,0 +1,7 @@
+// import libs
+import { connect } from "react-redux"
+
+// import components
+import Page from "./Page"
+
+export default connect()(Page)

resources/assets/js/modules/web/routes.js

@@ -0,0 +1,23 @@
+import Home from "./pages/home"
+import Blog from "./pages/blog/list"
+import BlogDetails from "./pages/blog/details"
+
+const routes = [
+  {
+    path: '/',
+    exact: true,
+    component: Home,
+  },
+  {
+    path: '/blog',
+    exact: true,
+    component: Blog,
+  },
+  {
+    path: '/blog/:slug',
+    exact: true,
+    component: BlogDetails,
+  },
+]
+
+export default routes