homeflowjs 0.9.21 → 0.9.24

package/actions/articles.actions.js

@@ -0,0 +1,52 @@
+import ArticlesActionTypes from './articles.types';
+import { setLoading } from './app.actions';
+
+export const setArticles = (payload) => ({
+  type: ArticlesActionTypes.SET_ARTICLES,
+  payload,
+});
+
+export const loadNextPage = () => (dispatch, getState) => {
+  if (!getState().articles.pagination.has_next_page) return null;
+
+  dispatch(setLoading({ articles: true }));
+
+  const currentArticles = [...getState().articles.articles];
+  const page = getState().articles.pagination.current_page + 1;
+  const currentTopic = getState().articles.topics.current_topic;
+  let url = `/articles.ljson?page=${page}`;
+  if (currentTopic) url = `${url}&topic=${currentTopic}`;
+
+  return fetch(url)
+    .then((response) => {
+      if (response.ok) return response.json();
+
+      throw Object.assign(
+        new Error('There\'s been an error fetching articles'),
+        { code: 404 },
+      );
+    })
+    .then((json) => {
+      if (json.articles.length > 0) {
+        const updateArticlesStore = {
+          articles: [...currentArticles, ...json.articles],
+          pagination: json.pagination,
+          topics: json.topics,
+        };
+        dispatch(setArticles(updateArticlesStore));
+        dispatch(setLoading({ articles: false }));
+
+        return true;
+      }
+
+      throw Object.assign(
+        new Error('No more articles found'),
+        { code: 404 },
+      );
+    }).catch((error) => {
+      console.error(error);
+      dispatch(setLoading({ articles: false }));
+
+      return false;
+    });
+};

package/actions/articles.types.js

@@ -0,0 +1,5 @@
+const ArticlesActionTypes = {
+  SET_ARTICLES: 'SET_ARTICLES',
+};
+
+export default ArticlesActionTypes;

package/articles/articles-grid.component.jsx

@@ -1,88 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Loader from '../shared/loader.component';
+import { useSelector } from 'react-redux';
 
 const ArticlesGrid = ({
-  handleIsLoading,
-  pageSize,
   gridClass,
-  articleItem,
-  loadMoreButtonContainerClass,
-  loadMoreButtonClass,
-  loadMoreButtonText,
-  // eslint-disable-next-line react/prop-types
-  customLoader,
+  ArticleItem,
+  noArticlesClass,
 }) => {
-  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 storeArticles = useSelector((state) => state.articles.articles) || [];
 
-  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);
-  }, []);
+  if (!storeArticles.length) {
+    return (
+      <div className={noArticlesClass}>No articles found...</div>
+    );
+  }
 
   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>
-            )}
-          </>
-        )}
+        {storeArticles.map((article) => <ArticleItem key={article.id} article={article} />)}
       </div>
     </>
   );
@@ -90,20 +26,12 @@ const ArticlesGrid = ({
 
 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,
+  ArticleItem: PropTypes.elementType.isRequired,
+  noArticlesClass: PropTypes.string,
 };
 
 ArticlesGrid.defaultProps = {
-  loadMoreButtonClass: '',
-  loadMoreButtonContainerClass: '',
-  loadMoreButtonText: 'Load more',
-  handleIsLoading: null,
-  pageSize: 12,
+  noArticlesClass: '',
 };
 
 export default ArticlesGrid;

package/articles/articles-topic-selector.component.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+const TopicSelector = ({
+  containerClass,
+  children,
+  buttonClassShowTopics,
+  buttonClassHideTopics,
+  listWrapperClass,
+  ulClass,
+  listAnchorTagClass,
+}) => {
+  const [showTopics, setShowTopics] = useState(false);
+  const storeTopics = useSelector((state) => state.articles.topics.topics_list) || [];
+  const iterableTopics = [...storeTopics, 'all topics'];
+
+  const toggleTopics = (e) => {
+    e.preventDefault();
+    setShowTopics((prev) => !prev);
+  };
+
+  return (
+    <div className={containerClass}>
+      <button
+        type="button"
+        className={` ${showTopics ? buttonClassShowTopics : buttonClassHideTopics}`}
+        onClick={(e) => toggleTopics(e)}
+      >
+        {children}
+      </button>
+      <div
+        className={listWrapperClass}
+        style={{ display: showTopics ? 'block' : 'none' }}
+      >
+        <ul tabIndex={-1} className={ulClass}>
+          {iterableTopics.map((topic) => (
+            <li key={topic}>
+              <a
+                className={listAnchorTagClass}
+                href={
+                  topic === 'all topics'
+                    ? '/articles'
+                    : `/articles/topic-${topic}`
+                }
+              >
+                {topic}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+TopicSelector.propTypes = {
+  containerClass: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  buttonClassShowTopics: PropTypes.string,
+  buttonClassHideTopics: PropTypes.string,
+  listWrapperClass: PropTypes.string,
+  ulClass: PropTypes.string,
+  listAnchorTagClass: PropTypes.string,
+};
+
+TopicSelector.defaultProps = {
+  containerClass: '',
+  buttonClassShowTopics: '',
+  buttonClassHideTopics: '',
+  listWrapperClass: '',
+  ulClass: '',
+  listAnchorTagClass: '',
+};
+
+export default TopicSelector;

package/articles/index.js

@@ -1,5 +1,9 @@
 import ArticlesGrid from './articles-grid.component';
+import LoadMoreButton from './load-more-button.component';
+import TopicSelector from './articles-topic-selector.component';
 
 export {
   ArticlesGrid,
+  LoadMoreButton,
+  TopicSelector,
 };

package/articles/load-more-button.component.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import Loader from '../shared/loader.component';
+import { loadNextPage } from '../actions/articles.actions';
+
+const LoadMoreButton = ({
+  CustomLoader, loadMoreButtonContainerClass, children, loadMoreButtonClass, ...otherProps
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const hasNextPage = useSelector((state) => state.articles?.pagination?.has_next_page);
+  const storeArticles = useSelector((state) => state.articles.articles) || [];
+  const dispatch = useDispatch();
+  const loadNextArticlesPage = () => dispatch(loadNextPage());
+
+  const loadMore = (e) => {
+    e.currentTarget.blur();
+    setLoading(true);
+    loadNextArticlesPage()
+      .then((didLoadNextPage) => {
+        // if there's an error fetching articles, the load more button won't render (line 33)
+        if (!didLoadNextPage) setError(true);
+        setLoading(false);
+      });
+  };
+
+  if (loading) {
+    if (CustomLoader) return <CustomLoader />;
+    return <Loader height="24px" />;
+  }
+
+  if (!hasNextPage || !storeArticles.length || error) return null;
+
+  return (
+    <div className={loadMoreButtonContainerClass}>
+      <button
+        type="button"
+        onClick={(e) => loadMore(e)}
+        className={loadMoreButtonClass}
+        {...otherProps}
+      >
+        {children}
+      </button>
+    </div>
+  );
+};
+
+LoadMoreButton.propTypes = {
+  CustomLoader: PropTypes.elementType,
+  loadMoreButtonContainerClass: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  loadMoreButtonClass: PropTypes.string,
+};
+
+LoadMoreButton.defaultProps = {
+  CustomLoader: null,
+  loadMoreButtonContainerClass: '',
+  loadMoreButtonClass: '',
+};
+
+export default LoadMoreButton;

package/package.json

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

package/reducers/app.reducer.js

@@ -12,6 +12,7 @@ const INITIAL_STATE = {
     properties: false,
     propertiesMap: true,
     googleMaps: true,
+    articles: false,
   },
   themePreferences: {},
   themeSettings: Homeflow.get('theme_settings_defaults') || {},
@@ -45,6 +46,6 @@ const appReducer = (state = INITIAL_STATE, action) => {
     default:
       return state;
   }
-}
+};
 
 export default appReducer;

package/reducers/articles.reducer.js

@@ -0,0 +1,23 @@
+import ArticlesActionTypes from '../actions/articles.types';
+
+const INITIAL_STATE = {
+  articles: [],
+  pagination: {},
+  topics: {},
+};
+
+const articlesReducer = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case ArticlesActionTypes.SET_ARTICLES:
+      return {
+        ...state,
+        articles: action.payload.articles,
+        pagination: action.payload.pagination,
+        topics: action.payload.topics,
+      };
+    default:
+      return state;
+  }
+};
+
+export default articlesReducer;

package/reducers/index.js

@@ -6,6 +6,7 @@ import appReducer from './app.reducer';
 // import companyPreferencesReducer from './company-preferences.reducer';
 import propertiesReducer from './properties.reducer';
 import branchesReducer from './branches.reducer';
+import articlesReducer from './articles.reducer';
 
 const combined = combineReducers({
   app: appReducer,
@@ -14,12 +15,13 @@ const combined = combineReducers({
   // companyPreferences: companyPreferencesReducer,
   properties: propertiesReducer,
   branches: branchesReducer,
+  articles: articlesReducer,
 });
 
 export default (state, action) => {
-  if (action.type == 'RESET_STORE') {
+  if (action.type === 'RESET_STORE') {
     return combined(undefined, action);
-  } else {
-    return combined(state, action);
   }
+
+  return combined(state, action);
 };

package/reducers/properties.reducer.js

@@ -27,7 +27,7 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
       return {
         ...state,
         properties: state.properties ? [...state.properties, ...action.payload] : action.payload,
-      }
+      };
     case PropertiesActionTypes.SET_PAGINATION:
       return {
         ...state,
@@ -47,7 +47,8 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
       const propertyId = parseInt(action.payload.propertyId, 10);
       const newSavedProperties = [...state.savedProperties];
 
-      const index = newSavedProperties.findIndex(({ property_id: searchId }) => searchId === propertyId);
+      const index = newSavedProperties
+        .findIndex(({ property_id: searchId }) => searchId === propertyId);
 
       if (index > -1) {
         newSavedProperties.splice(index, 1);
@@ -63,7 +64,8 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
       }
 
       // need to find the property from the propertiesReducer and add it here
-      const property = state.properties.find(({ property_id: searchId }) => searchId === propertyId);
+      const property = state
+        .properties.find(({ property_id: searchId }) => searchId === propertyId);
 
       newSavedProperties.push(property || state.property);
 
@@ -84,6 +86,6 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
     default:
       return state;
   }
-}
+};
 
 export default propertiesReducer;

package/search/generic-search-field/generic-search-field.component.jsx

@@ -5,11 +5,12 @@ import { setSearchField } from '../../actions/search.actions';
 
 // GenericSearchField for anything not already available as a component
 
-const GenericSelect = ({ name, value, children, setSearchField }) => (
+const GenericSelect = ({ name, value, children, setSearchField, ...otherProps }) => (
   <select
     name={name}
     value={value}
     onChange={e => setSearchField({ [e.target.name]: e.target.value })}
+    {...otherProps}
   >
     {children}
   </select>

package/search/price-select/price-select.component.jsx

@@ -108,11 +108,11 @@ const PriceSelect = (props) => {
   const selectedPrice = type === 'min' ? minPrice : maxPrice;
 
   if (type === 'max' && minPrice) {
-    prices = prices.filter(price => price >= minPrice);
+    prices = prices.filter(price => price > minPrice);
   }
 
   if (type === 'min' && maxPrice) {
-    prices = prices.filter(price => price <= maxPrice);
+    prices = prices.filter(price => price < maxPrice);
   }
 
   if (reactSelect) {

package/search/price-select/price-select.test.js

@@ -44,7 +44,7 @@ describe('PriceSelect', () => {
     const wrapper = mount(<PriceSelect {...testProps} />);
 
     // includes the default unselected option
-    expect(wrapper.find('option').length).toEqual(3);
+    expect(wrapper.find('option').length).toEqual(2);
   });
 
   it('removes higher prices for min when selected for max', () => {
@@ -60,7 +60,7 @@ describe('PriceSelect', () => {
     const wrapper = mount(<PriceSelect {...testProps} />);
 
     // includes the default unselected option
-    expect(wrapper.find('option').length).toEqual(4);
+    expect(wrapper.find('option').length).toEqual(3);
   });
 
   it('calls the setSearchField prop on change', () => {

package/store.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
@@ -5,7 +6,10 @@ import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
 import rootReducer from './reducers';
 import { setThemePreferences, setThemeSettings, setAuthenticityToken } from './actions/app.actions';
 import { fetchUser } from './actions/user.actions';
-import { setProperties, setPagination, setProperty, setPropertyLinksAsync } from './actions/properties.actions';
+import {
+  setProperties, setPagination, setProperty, setPropertyLinksAsync,
+} from './actions/properties.actions';
+import { setArticles } from './actions/articles.actions';
 // import { fetchCompanyPreferences } from './actions/company-preferences.actions';
 // import { fetchCompanyPreferences } from './actions/company-preferences.actions';
 
@@ -42,4 +46,9 @@ if (Homeflow.get('property')) {
   store.dispatch(setPropertyLinksAsync());
 }
 
+// setting articles, pagination and topics on articles index page
+if (Homeflow.get('articles')) {
+  store.dispatch(setArticles(Homeflow.get('articles')));
+}
+
 export default store;