homeflowjs 0.9.0 → 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.0",
+  "version": "0.9.3",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

package/properties/properties-map/draggable-map.js

@@ -218,7 +218,11 @@ export default class DraggableMap {
       if (!store.getState().app.themePreferences.google_maps_api_key) {
         console.warn('Tried to render a Google map layer without a google maps API key being set in admin.');
       }
-      layer = new L.Google('ROADMAP');
+      layer = new L.TileLayer(
+        'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
+          subdomains: ['mt0','mt1','mt2','mt3'],
+          attribution: '<img src="https://developers.google.com/maps/documentation/images/powered_by_google_on_white.png" alt="Powered by Google" />'
+      });
     }
 
     // if a callback has been passed with a custom layer, invoke it

package/properties/sort-order-select/sort-order-select.component.jsx

@@ -56,7 +56,11 @@ const SortOrderSelect = (props) => {
   };
 
   return (
-    <select value={sorted} onChange={handleChange} className={className}>
+    <select
+      value={sorted || defaultSort}
+      onChange={handleChange}
+      className={className}
+    >
       {children}
     </select>
   );

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;