homeflowjs 0.8.7 → 0.8.8

package/package.json

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

package/search/status-checkbox/status-checkbox.component.jsx

@@ -1,58 +1,75 @@
-import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
+import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { Checkbox } from 'pretty-checkbox-react';
 
 import { setSearchField } from '../../actions/search.actions';
 
-const PrettyCheckBox = ({ checked, value, setSearchField, children }) => {
-  return (
-    <Checkbox
-      name="status"
-      checked={checked}
-      onChange={() => setSearchField({ status: checked ? '' : value })}
-    >
-      {children}
-    </Checkbox>
-  );
-};
+const PrettyCheckBox = ({ checked, value, handleChange, children }) => (
+  <Checkbox
+    name="status"
+    checked={checked}
+    onChange={handleChange}
+    value={value}
+  >
+    {children}
+  </Checkbox>
+);
 
-const NormalCheckBox = ({ value, uncheckedValue, checked, defaultChecked, setSearchField, ...otherProps }) => {
-  const [initialized, setInitialized] = useState(false);
-
-  useEffect(() => {
-    setSearchField({ status: defaultChecked ? value : (uncheckedValue || '') });
-    return () => setInitialized(true);
-  }, [initialized]);
+const NormalCheckBox = ({
+  value,
+  uncheckedValue,
+  checked,
+  status,
+  handleChange,
+  ...otherProps
+  }) => {
 
   return (
     <input
       type="checkbox"
       name="status"
-      value={defaultChecked ? uncheckedValue : value}
-      defaultChecked={defaultChecked || checked}
-      onChange={() => setSearchField({ status: checked ? (uncheckedValue || '') : value })}
+      value={value}
+      checked={checked}
+      onChange={handleChange}
       {...otherProps}
     />
   );
 };
 
 const StatusCheckbox = (props) => {
-  const { pretty } = props;
+  const { pretty, value, uncheckedValue } = props;
 
-  if (pretty) return <PrettyCheckBox {...props} />;
+  const dispatch = useDispatch();
 
-  return <NormalCheckBox {...props} />;
-};
+  const defaultSearchStatus = useSelector((state) => state.app.themePreferences.defaultSearchStatus || 'all');
+  const currentSearchStatus = useSelector((state) => state.search.currentSearch.status);
+
+  const calculateChecked = () => {
+    // if no current status then checked if value matches default
+    if (currentSearchStatus && currentSearchStatus === value) return true;
+
+    if (currentSearchStatus) return false;
+
+    // when there is no status set
+    return value === defaultSearchStatus;
+  };
+
+  const [checked, setChecked] = useState(calculateChecked());
+
+  useEffect(() => {
+    setChecked(calculateChecked());
+  }, [defaultSearchStatus, currentSearchStatus]);
+
+  const handleChange = (e) => {
+    const newValue = checked ? (uncheckedValue || '') : value;
+
+    dispatch(setSearchField({ status: newValue === defaultSearchStatus ? '' : newValue }));
+    setChecked(calculateChecked());
+  };
 
-const mapStateToProps = (state, ownProps) => ({
-  checked: state.search.currentSearch.status === ownProps.value,
-});
+  if (pretty) return <PrettyCheckBox {...props} handleChange={handleChange} checked={checked} />;
 
-const mapDispatchToProps = {
-  setSearchField,
+  return <NormalCheckBox {...props} handleChange={handleChange} checked={checked} />;
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(StatusCheckbox);
+export default StatusCheckbox;