From 83369773cd8f49811969a684d7f1715c983fa5b1 Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Sun, 25 Nov 2018 18:38:42 +1100 Subject: [PATCH] Finished building blog overview page. --- package.json | 4 + private/app/App.js | 1 - private/blog/Articles.js | 6 ++ private/database/queries/blog/addArticle.sql | 4 +- .../api/methods/blog/GetBlogArticles.js | 5 +- private/webpack/WebpackCompiler.js | 8 +- public/api/api.js | 57 +++++++++++ public/blog/Blog.jsx | 64 ++++++++++++ public/components/App.jsx | 3 +- public/components/page/route/Routes.jsx | 12 +-- public/index.jsx | 2 + .../objects/blog/article/ArticleThumbnail.jsx | 2 +- public/objects/pagination/Pagination.jsx | 97 +++++++++++++++++++ public/objects/pagination/Pagination.scss | 36 +++++++ public/pages/blog/BlogPage.jsx | 51 ++++++---- 15 files changed, 312 insertions(+), 40 deletions(-) create mode 100644 public/api/api.js create mode 100644 public/blog/Blog.jsx create mode 100644 public/objects/pagination/Pagination.jsx create mode 100644 public/objects/pagination/Pagination.scss diff --git a/package.json b/package.json index 551c959..9dfcd04 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "nodemailer": "^4.6.8", "optimize-css-assets-webpack-plugin": "^5.0.1", "pg-promise": "^8.5.1", + "query-string": "^6.2.0", "react": "^16.5.2", "react-dom": "^16.5.2", "react-helmet": "^5.2.0", @@ -56,11 +57,14 @@ "react-transition-group": "^2.5.0", "redux": "^4.0.1", "redux-logger": "^3.0.6", + "redux-promise-middleware": "^5.1.1", + "redux-promise-middleware-actions": "^2.1.0", "responsive-loader": "^1.1.0", "sanitize-html": "^1.19.1", "sass-loader": "^7.1.0", "sharp": "^0.21.0", "style-loader": "^0.23.1", + "terser-webpack-plugin": "^1.1.0", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.2", "webpack": "^4.22.0" diff --git a/private/app/App.js b/private/app/App.js index fb4150a..dca2cc6 100644 --- a/private/app/App.js +++ b/private/app/App.js @@ -94,7 +94,6 @@ class App { } this.log('App ready'); - console.log(await this.articles.getArticlesByPage(2, 20)); } // Common Functions // diff --git a/private/blog/Articles.js b/private/blog/Articles.js index c997ec2..9fad0f8 100644 --- a/private/blog/Articles.js +++ b/private/blog/Articles.js @@ -46,6 +46,12 @@ module.exports = class Articles extends DatabaseInterface { ); } + async getArticlesPageCount(perPage) { + if(!perPage) perPage = 10; + let count = await this.getArticlesCount(perPage); + return Math.ceil(count/perPage); + } + async getArticlesByPage(page, perPage) { if(!page) page = 1; if(!perPage) perPage = 10; diff --git a/private/database/queries/blog/addArticle.sql b/private/database/queries/blog/addArticle.sql index b64734c..41508a3 100644 --- a/private/database/queries/blog/addArticle.sql +++ b/private/database/queries/blog/addArticle.sql @@ -1,5 +1,5 @@ INSERT INTO "BlogArticles" ( - "handle", "image", "shortDescription", "description", "date" + "handle", "title", "image", "shortDescription", "description", "date" ) VALUES ( - ${handle}, ${image}, ${shortDescription}, ${description}, ${date} + ${handle}, ${title}, ${image}, ${shortDescription}, ${description}, ${date} ) RETURNING *; diff --git a/private/server/api/methods/blog/GetBlogArticles.js b/private/server/api/methods/blog/GetBlogArticles.js index 947c0df..4bddc4f 100644 --- a/private/server/api/methods/blog/GetBlogArticles.js +++ b/private/server/api/methods/blog/GetBlogArticles.js @@ -44,7 +44,10 @@ module.exports = class GetBlogArticles extends APIHandler { return { ok: true, - data: await request.getApp().getArticles().getArticlesByPage(page, perPage) + data: { + pages: await request.getApp().getArticles().getArticlesPageCount(perPage), + articles: await request.getApp().getArticles().getArticlesByPage(page, perPage) + } }; } } diff --git a/private/webpack/WebpackCompiler.js b/private/webpack/WebpackCompiler.js index 343038c..171b861 100644 --- a/private/webpack/WebpackCompiler.js +++ b/private/webpack/WebpackCompiler.js @@ -29,7 +29,7 @@ const SharpLoader = require('responsive-loader/sharp'), HtmlWebpackPlugin = require('html-webpack-plugin'), CompressionPlugin = require("compression-webpack-plugin"), - UglifyJsPlugin = require('uglifyjs-webpack-plugin'), + TerserPlugin = require('terser-webpack-plugin'), MiniCssExtractPlugin = require("mini-css-extract-plugin"), OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") ; @@ -44,7 +44,7 @@ module.exports = (isDev) => { let config = { devtool: 'source-map', entry: [ `${base}/public/index.jsx` ], - output: { path: `${base}/dist`, filename: "app.js" }, + output: { path: `${base}/dist`, filename: "app.js", publicPath: '/' }, mode: isDev ? 'development' : 'production', resolve: { modules: [`${base}/node_modules`, `${base}/public`], @@ -153,7 +153,7 @@ module.exports = (isDev) => { ] }; } else { - let UglifyPluginConfig = new UglifyJsPlugin({ + let TerserPluginConfig = new TerserPlugin({ test: /\.js($|\?)/i }); @@ -172,7 +172,7 @@ module.exports = (isDev) => { optimization: { minimize: true, minimizer: [ - UglifyPluginConfig, + TerserPluginConfig, MiniCssExtractConfig, new OptimizeCSSAssetsPlugin({}), ] diff --git a/public/api/api.js b/public/api/api.js new file mode 100644 index 0000000..4b740f6 --- /dev/null +++ b/public/api/api.js @@ -0,0 +1,57 @@ +// Copyright (c) 2018 Dominic Masters +// +// MIT License +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +import queryString from 'query-string'; + +export const getUrl = request => { + request = request || ""; + request = request.split('#'); + + let r = ""; + if(request.length) r = request[0].toLowerCase(); + + let slash = '/'; + if(r.startsWith('/')) slash = ''; + + return `/api${slash}${r}`; +} + +export const get = async (url, params) => { + url = url || ""; + + //Generate URL from query string + let paramString = queryString.stringify(params); + url = getUrl(url); + if(url.indexOf('?') !== -1) { + url += `&${paramString}`; + } else { + url += `?${paramString}`; + } + + //Now make our fetch request. + let res = await fetch(url, { + crossDomain:true + }); + if(res.status >= 400) throw new Error(`Server Responded with ${res.status}`); + return await res.json(); +}; diff --git a/public/blog/Blog.jsx b/public/blog/Blog.jsx new file mode 100644 index 0000000..f733296 --- /dev/null +++ b/public/blog/Blog.jsx @@ -0,0 +1,64 @@ +// Copyright (c) 2018 Dominic Masters +// +// MIT License +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +import React from 'react'; +import { get } from '@public/api/api'; + +export const withBlogTemplate = WrappedComponent => { + return class extends React.Component { + constructor(props) { + super(props); + + this.state = { + pending: false, + error: undefined, + pages: undefined, + articles: undefined + }; + } + + componentDidMount() { + let { page, perPage } = this.props.match.params; + page = page || 1; + perPage = perPage || 7; + + this.setState({ pending: true, page, perPage }); + get('blog', { page, perPage }).then(blog => { + let { articles, pages } = blog; + + articles.forEach(article => { + article.url = `/blogs/articles/${article.handle}` + article.image = require(`@assets/images/${article.image}`); + }); + + this.setState({ pending: undefined, error: undefined, articles, pages }); + }).catch(e => { + this.setState({ pending: undefined, error: e }); + }); + } + + render() { + return ; + } + } +}; diff --git a/public/components/App.jsx b/public/components/App.jsx index b1cc141..a0a9eb2 100644 --- a/public/components/App.jsx +++ b/public/components/App.jsx @@ -39,7 +39,8 @@ const AppRoutes = (props) => { import('@pages/home/HomePage') } /> import ('@pages/contact/ContactPage') } /> import('@pages/legal/privacy/PrivacyPolicyPage') } /> - import('@pages/blog/BlogPage') } /> + + import('@pages/blog/BlogPage') } /> ); }; diff --git a/public/components/page/route/Routes.jsx b/public/components/page/route/Routes.jsx index b88192d..6e03542 100644 --- a/public/components/page/route/Routes.jsx +++ b/public/components/page/route/Routes.jsx @@ -39,12 +39,12 @@ const PageLoading = (props) => { }; export const RouteWrapper = (props) => { - let render = () => { + let render = subProps => { let CustomLoadable = Loadable({ loader: props.page, loading: PageLoading }); - return + return }; return ; @@ -53,11 +53,5 @@ export const RouteWrapper = (props) => { export default withRouter((props) => { const { match, location, history, children } = props; - return ( - - - { children } - - - ); + return ; }); diff --git a/public/index.jsx b/public/index.jsx index 1cf3c1e..38f090f 100644 --- a/public/index.jsx +++ b/public/index.jsx @@ -30,6 +30,7 @@ import { createStore, applyMiddleware } from 'redux'; import { createLogger } from 'redux-logger'; import { Provider } from 'react-redux'; import RootReducer from './reducers/RootReducer'; +import promiseMiddleware from 'redux-promise-middleware'; import Keyboard from './keyboard/Keyboard'; @@ -41,6 +42,7 @@ import App from './components/App'; //Create our redux middleware const store = createStore(RootReducer, applyMiddleware( + promiseMiddleware(), createLogger({ collapsed: true }) )); diff --git a/public/objects/blog/article/ArticleThumbnail.jsx b/public/objects/blog/article/ArticleThumbnail.jsx index 982d640..6a3dd04 100644 --- a/public/objects/blog/article/ArticleThumbnail.jsx +++ b/public/objects/blog/article/ArticleThumbnail.jsx @@ -73,7 +73,7 @@ export default withLanguage(props => { { article.shortDescription } - + { lang.blog.article.readMore } diff --git a/public/objects/pagination/Pagination.jsx b/public/objects/pagination/Pagination.jsx new file mode 100644 index 0000000..519c0ea --- /dev/null +++ b/public/objects/pagination/Pagination.jsx @@ -0,0 +1,97 @@ +// Copyright (c) 2018 Dominic Masters +// +// MIT License +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +import React from 'react'; +import { NavLink } from 'react-router-dom'; + +import PageBoundary from '@components/page/boundary/PageBoundary'; + +import Styles from './Pagination.scss'; + + +const PaginationLink = props => { + let { to, page, children, current } = props; + + let url = to; + if(url.indexOf('$page') !== -1) { + url = url.replace('$page', page); + } else { + if(!url.endsWith("/")) url += '/'; + url += page; + } + + let className = `o-pagination__link`; + if(current && current == page) className += ` is-active`; + + return ( + + { children } + + ); +}; + + +export default props => { + //Where Page = current page, + //pages = total pages and + //to = url, with $page + let { page, pages, to, className } = props; + page = parseInt(page) || 1; + pages = parseInt(pages) || 1; + + let inners = []; + + //Internal Numbers + let numbers = [1, pages];//Always start with page 1 and pages + //Now add numbers page-2, page-1,page(active),page+1, page+2 + for(let i = page-2; i <= page+2; i++) { + if(i < 1) continue;//Don't add -2, -1, 0 etc + if(i > pages) continue;//Don't go pages+1 for example 22 pages, 23 + numbers.push(i); + } + + //Uniqify and then sort. + numbers = [...new Set(numbers)].sort((a,b) => a-b); + + + + //Prev Button + if(page > 1) { + inners.push(); + } + + numbers.forEach(i => { + inners.push(); + }); + + //Next Button + if(page < pages-1) { + inners.push(); + } + + return ( + + ); +}; diff --git a/public/objects/pagination/Pagination.scss b/public/objects/pagination/Pagination.scss new file mode 100644 index 0000000..cf97da2 --- /dev/null +++ b/public/objects/pagination/Pagination.scss @@ -0,0 +1,36 @@ +@import '~@styles/global'; + +$o-pagination--text: black; +$o-pagination--background: white; + +.o-pagination { + display: flex; + justify-content: center; + width: 100%; + + &__link { + display: inline-flex; + align-items: center; + justify-content: center; + + padding: 0.5em; + min-width: 2.5em; + min-height: 2.5em; + border: 1px solid $o-pagination--text; + + color: $o-pagination--text; + background: $o-pagination--background; + transition: transform 0.2s $s-animation--ease-out; + + &:hover { + color: $o-pagination--background; + background: $o-pagination--text; + transform: translateY(-0.1em); + } + + &.is-active { + color: $o-pagination--background; + background: $o-pagination--text; + } + } +} diff --git a/public/pages/blog/BlogPage.jsx b/public/pages/blog/BlogPage.jsx index 0f9a100..29c485c 100644 --- a/public/pages/blog/BlogPage.jsx +++ b/public/pages/blog/BlogPage.jsx @@ -24,32 +24,40 @@ import React from 'react'; import { withLanguage } from '@public/language/Language'; +import { withBlogTemplate} from '@public/blog/Blog'; import Page, { PageBoundary } from '@components/page/Page'; import FeaturedArticleSection from '@sections/blog/article/FeaturedArticleSection'; import ArticleGridSection from '@sections/blog/article/ArticleGridSection'; import ClearSection from '@sections/layout/ClearSection'; +import Loader from '@objects/loading/Loader'; +import Pagination from '@objects/pagination/Pagination'; + import Styles from './BlogPage.scss'; -const TestBlogData = { - handle: "test-blog", - title: "Test Blog Article", - url: '/', - image: require('@assets/images/photo.jpg'), - shortDescription: `Read how the latest lorem ipsum is dolor sit amet for business owners...`, - description: `Est magna esse amet admodum est ex noster elit quem probant, id qui minim - possumus, ut esse enim esse senserit. Ullamco quae quis incurreret dolore. - Laborum est ingeniis, quibusdam fugiat non deserunt adipisicing.Nam quid velit - aut litteris, laborum export incididunt admodum et nam fabulas instituendarum, - id nam praesentibus. Aliquip anim consequat, est export commodo praetermissum, e - ab multos ingeniis ut ipsum ab laborum de tamen. Sed quem proident fidelissimae, - quae te singulis o ita sint culpa qui ingeniis, e export officia. Quem vidisse - ut quis aliqua.` -}; +export default withBlogTemplate(withLanguage(props => { + let { lang, articles, page, pages, pending, error } = props; -export default withLanguage(props => { - let { lang } = props; + console.log(props); + + let children; + + if(error) error = "An error occured"; + if(pending) pending = ; + + if(articles && articles.length) { + children = ( + + + + + + ); + } + + /* + */ return ( { background={require('@assets/images/banners/sunset.svg')} > - {/* First (Featured) Blog */} - - + { error } + { pending } + { children } + ); -}); +}));