homeflowjs 0.9.2 → 0.9.3

package/articles/articles-grid.component.jsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Loader from '../shared/loader.component';
+
+const ArticlesGrid = ({
+  handleIsLoading,
+  pageSize,
+  gridClass,
+  articleItem,
+  loadMoreButtonContainerClass,
+  loadMoreButtonClass,
+  loadMoreButtonText,
+  // eslint-disable-next-line react/prop-types
+  customLoader,
+}) => {
+  const [pagination, setPagination] = useState({});
+  const [articles, setArticles] = useState([]);
+  const [page, setPage] = useState(1);
+  const [showMore, setShowMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const agent = `${window.location.protocol}//${window.location.host}`;
+  const path = window.location.pathname;
+  const topicPath = '/articles/topic-';
+
+  const topic = path.includes(topicPath)
+    ? `&topic=${path.slice(path.indexOf(topicPath) + topicPath.length).replace('#/', '')}`
+    : '';
+  const url = `${agent}/articles.ljson?page=${page}&page_size=${pageSize}${topic}`;
+
+  const loader = () => {
+    if (customLoader) return customLoader;
+    return <Loader containerClass={loadMoreButtonContainerClass} />;
+  };
+
+  const fetchArticles = (firstRender = false) => {
+    fetch(url)
+      .then((response) => response.json())
+      .then((json) => {
+        setArticles((prev) => [...prev, ...json.articles]);
+        setPagination(json.pagination);
+        setShowMore(json.pagination.has_next_page);
+        setPage(json.pagination.current_page + 1);
+        setIsLoading(false);
+        setLoadingMore(false);
+        if (handleIsLoading && firstRender) handleIsLoading(false);
+      })
+      .catch((e) => console.log('error', e));
+  };
+
+  const loadMore = () => {
+    if (pagination.has_next_page) {
+      setLoadingMore(true);
+      fetchArticles();
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    if (handleIsLoading) handleIsLoading(true);
+    fetchArticles(true);
+  }, []);
+
+  return (
+    <>
+      <div className={gridClass}>
+        {articles.map((article) => articleItem(article))}
+      </div>
+      <div className={loadMoreButtonContainerClass}>
+        {(showMore && !isLoading) && (
+          <>
+            {loadingMore ? (
+              loader()
+            ) : (
+              <button
+                type="button"
+                onClick={loadMore}
+                className={loadMoreButtonClass}
+              >
+                {loadMoreButtonText}
+              </button>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+ArticlesGrid.propTypes = {
+  gridClass: PropTypes.string.isRequired,
+  articleItem: PropTypes.elementType.isRequired,
+  handleIsLoading: PropTypes.elementType,
+  loadMoreButtonClass: PropTypes.string,
+  loadMoreButtonText: PropTypes.string,
+  loadMoreButtonContainerClass: PropTypes.string,
+  pageSize: PropTypes.number,
+};
+
+ArticlesGrid.defaultProps = {
+  loadMoreButtonClass: '',
+  loadMoreButtonContainerClass: '',
+  loadMoreButtonText: 'Load more',
+  handleIsLoading: null,
+  pageSize: 12,
+};
+
+export default ArticlesGrid;

package/articles/index.js

@@ -0,0 +1,5 @@
+import ArticlesGrid from './articles-grid.component';
+
+export {
+  ArticlesGrid,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

package/shared/loader.component.jsx

@@ -1,17 +1,30 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import './loader.styles.scss';
 
-const Loader = ({ className, message }) => (
-  <div>
-    <div className={`la-ball-beat la-dark la-2x ${className ? className : ''}`}>
-      <div></div>
-      <div></div>
-      <div></div>
+const Loader = ({ containerClass, className, message }) => (
+  <div className={containerClass}>
+    <div className={`la-ball-beat la-dark la-2x ${className}`}>
+      <div />
+      <div />
+      <div />
     </div>
 
     {message && <p style={{ marginTop: '10px' }}>{message}</p>}
   </div>
 );
 
+Loader.propTypes = {
+  className: PropTypes.string,
+  message: PropTypes.string,
+  containerClass: PropTypes.string,
+};
+
+Loader.defaultProps = {
+  className: '',
+  message: '',
+  containerClass: '',
+};
+
 export default Loader;