@bento-core/facet-filter 1.0.1-ccdihub.26 → 1.0.1-ccdihub.27

package/dist/FacetFilterView.js

@@ -19,7 +19,8 @@ const BentoFacetFilter = _ref => {
   let {
     sideBarSections,
     CustomFacetSection,
-    CustomFacetView
+    CustomFacetView,
+    queryParams
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sideBarSections.map((section, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Divider, {
     variant: "middle",
@@ -31,11 +32,13 @@ const BentoFacetFilter = _ref => {
     if (facet.search) {
       return /*#__PURE__*/_react.default.createElement(_ReduxSearchFacetView.default, {
         facet: facet,
+        queryParams: queryParams,
         CustomView: CustomFacetView
       });
     }
     return /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
       facet: facet,
+      queryParams: queryParams,
       CustomView: CustomFacetView
     }, /*#__PURE__*/_react.default.createElement(_core.List, {
       className: "List_".concat(facet.label)

package/dist/components/facet/FacetModal.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
 var _core = require("@material-ui/core");
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _styles = require("@material-ui/core/styles");
@@ -26,9 +28,19 @@ const ModalView = _ref => {
     onClose,
     onClearFacetSection,
     onSearchTextChange,
-    onSortChange
+    onSortChange,
+    queryParams
   } = _ref;
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr), {
+      replace: true
+    });
     onSortChange(null);
     onClearFacetSection(facet);
   };
@@ -81,7 +93,8 @@ const ModalView = _ref => {
     facet: facet,
     sortBy: sortBy,
     onClearSection: onClearSection,
-    onSortChange: onSortChange
+    onSortChange: onSortChange,
+    queryParams: queryParams
   }))));
 };
 var _default = (0, _styles.withStyles)(_ModalStyle.default)(ModalView);

package/dist/components/facet/FacetView.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
@@ -27,10 +29,13 @@ const FacetView = _ref => {
     facet,
     onClearFacetSection,
     onClearSliderSection,
-    CustomView
+    CustomView,
+    queryParams
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
 
   /**
   * expand section incase of active local search
@@ -47,6 +52,13 @@ const FacetView = _ref => {
     setSortBy(type);
   };
   const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr), {
+      replace: true
+    });
     setSortBy(null);
     if (facet.type === _Types.InputTypes.SLIDER) {
       onClearSliderSection(facet);
@@ -116,11 +128,13 @@ const FacetView = _ref => {
     }
   }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
+    queryParams: queryParams,
     sortBy: sortBy
   })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
     id: "filter_Items"
   }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
-    facet: displayFacet
+    facet: displayFacet,
+    queryParams: queryParams
   }))), !expand && selectedItems.length > limitCheckBoxCount && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.showMore,
     onClick: onExpandFacet

package/dist/components/facet/SearchFacetView.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
@@ -31,11 +33,21 @@ const SearchFacetView = _ref => {
     onClearFacetSection,
     onSearchTextChange,
     onSortChange,
-    CustomView
+    CustomView,
+    queryParams
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr), {
+      replace: true
+    });
     onSortChange(facet.datafield, null);
     onClearFacetSection(facet);
   };
@@ -111,11 +123,13 @@ const SearchFacetView = _ref => {
   }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
     searchText: searchText,
     facet: facet,
+    queryParams: queryParams,
     sortBy: sortBy
   })), !expand && type === _Types.InputTypes.CHECKBOX && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.List, {
     id: "filter_Items"
   }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
-    facet: displayFacet
+    facet: displayFacet,
+    queryParams: queryParams
   }))), !expand && selectedItems.length > limitCheckBoxCount && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.showMore,
     onClick: onExpandFacet

package/dist/components/inputs/FilterItems.js

@@ -18,6 +18,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 const FilterItems = _ref => {
   let {
     facet,
+    queryParams,
     sortBy
   } = _ref;
   const {
@@ -37,11 +38,13 @@ const FilterItems = _ref => {
             section
           }),
           datafield: datafield,
-          facet: facet
+          facet: facet,
+          queryParams: queryParams
         }));
       case _Types.InputTypes.SLIDER:
         return /*#__PURE__*/_react.default.createElement(_ReduxSlider.default, {
-          facet: facet
+          facet: facet,
+          queryParams: queryParams
         });
       default:
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);

package/dist/components/inputs/ModalFilterItems.js

@@ -23,6 +23,7 @@ const ModalFilterItems = _ref => {
   let {
     facet,
     searchText,
+    queryParams,
     sortBy,
     onClearSection,
     onSortChange,
@@ -47,7 +48,8 @@ const ModalFilterItems = _ref => {
       section
     }),
     datafield: datafield,
-    facet: facet
+    facet: facet,
+    queryParams: queryParams
   }));
   const makeupItemsLen = 3 - checkedItems.length % 3;
   const makeupItems = [];
@@ -64,7 +66,8 @@ const ModalFilterItems = _ref => {
       section
     }),
     datafield: datafield,
-    facet: facet
+    facet: facet,
+    queryParams: queryParams
   }));
   const makeupUncheckedItemsLen = 3 - uncheckedItems.length % 3;
   const makeupUncheckedItems = [];

package/dist/components/inputs/SearchFilterItems.js

@@ -21,6 +21,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 const SearchFilterItems = _ref => {
   let {
     facet,
+    queryParams,
     sortBy,
     searchText,
     classes
@@ -43,7 +44,8 @@ const SearchFilterItems = _ref => {
       section
     }),
     datafield: datafield,
-    facet: facet
+    facet: facet,
+    queryParams: queryParams
   }));
   const uncheckedItems = sortFilters.filter(item => !item.isChecked).filter(item => item.name.toLowerCase().includes(searchText.toLowerCase())).slice(0, displayCount).map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxSearchCheckbox.default, {
     checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
@@ -51,7 +53,8 @@ const SearchFilterItems = _ref => {
       section
     }),
     datafield: datafield,
-    facet: facet
+    facet: facet,
+    queryParams: queryParams
   }));
   (0, _react.useEffect)(() => {
     scrollableRef.current.scrollTo(0, 0);
@@ -74,6 +77,7 @@ const SearchFilterItems = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReduxFacetModal.default, {
     facet: facet,
+    queryParams: queryParams,
     open: open,
     onClose: () => setOpen(false)
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/inputs/checkbox/CheckboxView.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
 var _styles = require("@material-ui/core/styles");
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -21,7 +23,8 @@ const CheckBoxView = _ref => {
     checkboxItem,
     datafield,
     onToggle,
-    facet
+    facet,
+    queryParams
   } = _ref;
   const {
     name,
@@ -32,6 +35,8 @@ const CheckBoxView = _ref => {
     tooltip,
     label
   } = checkboxItem;
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
   const labelCheckbox = {
@@ -45,6 +50,28 @@ const CheckBoxView = _ref => {
       datafield: datafield,
       isChecked: !isChecked
     };
+    const checkedValues = query.get(datafield);
+    const paramValue = {};
+    if (toggleCheckBoxItem.isChecked) {
+      if (checkedValues) {
+        const newValues = checkedValues.split('|');
+        newValues.push(name);
+        paramValue[datafield] = newValues.join('|');
+      } else {
+        paramValue[datafield] = name;
+      }
+    } else if (checkedValues) {
+      const newValues = checkedValues.split('|');
+      const idx = newValues.indexOf(name);
+      if (idx > -1) {
+        newValues.splice(idx, 1);
+      }
+      paramValue[datafield] = newValues.length > 0 ? newValues.join('|') : '';
+    } else {
+      paramValue[datafield] = '';
+    }
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr));
     onToggle(toggleCheckBoxItem);
   };
   const LabelComponent = () => /*#__PURE__*/_react.default.createElement(_core.Box, {

package/dist/components/inputs/checkbox/ModalCheckboxView.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
 var _styles = require("@material-ui/core/styles");
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -21,7 +23,8 @@ const CheckBoxView = _ref => {
     checkboxItem,
     datafield,
     onToggle,
-    facet
+    facet,
+    queryParams
   } = _ref;
   const {
     name,
@@ -32,6 +35,8 @@ const CheckBoxView = _ref => {
     tooltip,
     label
   } = checkboxItem;
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
   const labelCheckbox = {
@@ -45,6 +50,28 @@ const CheckBoxView = _ref => {
       datafield: datafield,
       isChecked: !isChecked
     };
+    const checkedValues = query.get(datafield);
+    const paramValue = {};
+    if (toggleCheckBoxItem.isChecked) {
+      if (checkedValues) {
+        const newValues = checkedValues.split('|');
+        newValues.push(name);
+        paramValue[datafield] = newValues.join('|');
+      } else {
+        paramValue[datafield] = name;
+      }
+    } else if (checkedValues) {
+      const newValues = checkedValues.split('|');
+      const idx = newValues.indexOf(name);
+      if (idx > -1) {
+        newValues.splice(idx, 1);
+      }
+      paramValue[datafield] = newValues.length > 0 ? newValues.join('|') : '';
+    } else {
+      paramValue[datafield] = '';
+    }
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr));
     onToggle(toggleCheckBoxItem);
   };
   const LabelComponent = () => /*#__PURE__*/_react.default.createElement(_core.Box, {

package/dist/components/inputs/checkbox/SearchCheckboxView.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
 var _styles = require("@material-ui/core/styles");
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -21,7 +23,8 @@ const CheckBoxView = _ref => {
     checkboxItem,
     datafield,
     onToggle,
-    facet
+    facet,
+    queryParams
   } = _ref;
   const {
     name,
@@ -32,6 +35,8 @@ const CheckBoxView = _ref => {
     tooltip,
     label
   } = checkboxItem;
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
   const labelCheckbox = {
@@ -45,6 +50,28 @@ const CheckBoxView = _ref => {
       datafield: datafield,
       isChecked: !isChecked
     };
+    const checkedValues = query.get(datafield);
+    const paramValue = {};
+    if (toggleCheckBoxItem.isChecked) {
+      if (checkedValues) {
+        const newValues = checkedValues.split('|');
+        newValues.push(name);
+        paramValue[datafield] = newValues.join('|');
+      } else {
+        paramValue[datafield] = name;
+      }
+    } else if (checkedValues) {
+      const newValues = checkedValues.split('|');
+      const idx = newValues.indexOf(name);
+      if (idx > -1) {
+        newValues.splice(idx, 1);
+      }
+      paramValue[datafield] = newValues.length > 0 ? newValues.join('|') : '';
+    } else {
+      paramValue[datafield] = '';
+    }
+    const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+    navigate("/explore".concat(queryStr));
     onToggle(toggleCheckBoxItem);
   };
   const LabelComponent = () => /*#__PURE__*/_react.default.createElement(_core.Box, {

package/dist/components/inputs/slider/SliderView.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _util = require("@bento-core/util");
 var _core = require("@material-ui/core");
 var _Types = require("../Types");
 var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
@@ -21,7 +23,8 @@ const SliderView = _ref => {
     classes,
     facet,
     onSliderToggle,
-    filterState
+    filterState,
+    queryParams
   } = _ref;
   const {
     minLowerBound,
@@ -32,6 +35,8 @@ const SliderView = _ref => {
   } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
+  const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
+  const navigate = (0, _reactRouterDom.useNavigate)();
 
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
@@ -40,6 +45,10 @@ const SliderView = _ref => {
   };
   const handleChangeCommittedSlider = value => {
     if (!value.includes('')) {
+      const paramValue = {};
+      paramValue[datafield] = value;
+      const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+      navigate("/explore".concat(queryStr));
       onSliderToggle(_objectSpread({
         sliderValue: value
       }, facet));

package/dist/index.js

@@ -117,6 +117,12 @@ Object.defineProperty(exports, "toggleSilder", {
     return _Actions.toggleSilder;
   }
 });
+Object.defineProperty(exports, "updateFilterState", {
+  enumerable: true,
+  get: function get() {
+    return _Actions.updateFilterState;
+  }
+});
 Object.defineProperty(exports, "updateSiderValue", {
   enumerable: true,
   get: function get() {

package/dist/store/actions/ActionTypes.js

@@ -12,7 +12,8 @@ const sideBarActionTypes = {
   CLEAR_SLIDER_SECTION: 'CLEAR_SLIDER_SECTION',
   CLEAR_AND_SELECT_FACET_VALUE: 'CLEAR_AND_SELECT_FACET_VALUE',
   SEARCH_TEXT_CHANGED: 'SEARCH_TEXT_CHANGED',
-  SORT_CHANGED: 'SORT_CHANGED'
+  SORT_CHANGED: 'SORT_CHANGED',
+  UPDATE_FILTER_STATE: 'UPDATE_FILTER_STATE'
 };
 exports.sideBarActionTypes = sideBarActionTypes;
 const Actions = '';

package/dist/store/actions/Actions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleSilder = exports.toggleCheckBox = exports.sortChange = exports.searchTextChange = exports.clearSliderSection = exports.clearFacetSection = exports.clearAllFilters = exports.clearAllAndSelectFacet = void 0;
+exports.updateFilterState = exports.toggleSilder = exports.toggleCheckBox = exports.sortChange = exports.searchTextChange = exports.clearSliderSection = exports.clearFacetSection = exports.clearAllFilters = exports.clearAllAndSelectFacet = void 0;
 var _ActionTypes = require("./ActionTypes");
 const toggleCheckBox = toggleCheckBoxItem => ({
   type: _ActionTypes.sideBarActionTypes.FACET_VALUE_CHANGED,
@@ -53,4 +53,9 @@ const sortChange = (datafield, sortBy) => ({
     sortBy
   }
 });
-exports.sortChange = sortChange;
+exports.sortChange = sortChange;
+const updateFilterState = filterState => ({
+  type: _ActionTypes.sideBarActionTypes.UPDATE_FILTER_STATE,
+  payload: filterState
+});
+exports.updateFilterState = updateFilterState;

package/dist/store/reducers/SideBarReducer.js

@@ -148,6 +148,10 @@ function sideBarReducerGenerator() {
           return _objectSpread(_objectSpread({}, state), {}, {
             sortState: _objectSpread({}, updateState)
           });
+        case _ActionTypes.sideBarActionTypes.UPDATE_FILTER_STATE:
+          return _objectSpread(_objectSpread({}, state), {}, {
+            filterState: payload
+          });
         default:
           return state;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-ccdihub.26",
+  "version": "1.0.1-ccdihub.27",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {
@@ -16,6 +16,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@bento-core/util": "1.0.1-ccdihub.1",
     "lodash": "^4.17.20"
   },
   "peerDependencies": {
@@ -24,7 +25,8 @@
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
-    "react-redux": "^7.2.1"
+    "react-redux": "^7.2.1",
+    "react-router-dom": "^5.1.2"
   },
   "author": "CTOS Bento Team",
   "license": "ISC",

package/src/FacetFilterView.js

@@ -16,6 +16,7 @@ const BentoFacetFilter = ({
   sideBarSections,
   CustomFacetSection,
   CustomFacetView,
+  queryParams,
 }) => {
   return (
     <>
@@ -35,6 +36,7 @@ const BentoFacetFilter = ({
                   return (
                     <SearchFacetView
                       facet={facet}
+                      queryParams={queryParams}
                       CustomView={CustomFacetView}
                     />
                   );
@@ -42,6 +44,7 @@ const BentoFacetFilter = ({
                 return (
                   <FacetView
                     facet={facet}
+                    queryParams={queryParams}
                     CustomView={CustomFacetView}
                   >
                     <List className={`List_${facet.label}`}>

package/src/components/facet/FacetModal.js

@@ -1,4 +1,9 @@
 import React from 'react';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import {
   Modal,
   Box,
@@ -27,8 +32,17 @@ const ModalView = ({
   onClearFacetSection,
   onSearchTextChange,
   onSortChange,
+  queryParams,
 }) => {
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
+
   const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = generateQueryStr(query, queryParams, paramValue);
+    navigate(`/explore${queryStr}`, { replace: true });
     onSortChange(null);
     onClearFacetSection(facet);
   };
@@ -81,6 +95,7 @@ const ModalView = ({
             sortBy={sortBy}
             onClearSection={onClearSection}
             onSortChange={onSortChange}
+            queryParams={queryParams}
           />
         </div>
       </Box>

package/src/components/facet/FacetView.js

@@ -1,4 +1,9 @@
 import React, { useState } from 'react';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import {
   Accordion,
   List,
@@ -19,9 +24,12 @@ const FacetView = ({
   onClearFacetSection,
   onClearSliderSection,
   CustomView,
+  queryParams,
 }) => {
   const [expand, setExpand] = useState(false);
   const onExpandFacet = () => setExpand(!expand);
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
 
   /**
   * expand section incase of active local search
@@ -39,6 +47,11 @@ const FacetView = ({
   };
 
   const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = generateQueryStr(query, queryParams, paramValue);
+    navigate(`/explore${queryStr}`, { replace: true });
     setSortBy(null);
     if (facet.type === InputTypes.SLIDER) {
       onClearSliderSection(facet);
@@ -152,6 +165,7 @@ const FacetView = ({
 }
         <FilterItems
           facet={facet}
+          queryParams={queryParams}
           sortBy={sortBy}
         />
       </Accordion>
@@ -161,6 +175,7 @@ const FacetView = ({
             <List id="filter_Items">
               <FilterItems
                 facet={displayFacet}
+                queryParams={queryParams}
               />
             </List>
           </>

package/src/components/facet/SearchFacetView.js

@@ -1,4 +1,9 @@
 import React, { useState } from 'react';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import {
   Accordion,
   List,
@@ -23,11 +28,19 @@ const SearchFacetView = ({
   onSearchTextChange,
   onSortChange,
   CustomView,
+  queryParams,
 }) => {
   const [expand, setExpand] = useState(false);
   const onExpandFacet = () => setExpand(!expand);
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
 
   const onClearSection = () => {
+    const field = facet.datafield;
+    const paramValue = {};
+    paramValue[field] = '';
+    const queryStr = generateQueryStr(query, queryParams, paramValue);
+    navigate(`/explore${queryStr}`, { replace: true });
     onSortChange(facet.datafield, null);
     onClearFacetSection(facet);
   };
@@ -139,6 +152,7 @@ const SearchFacetView = ({
         <SearchFilterItems
           searchText={searchText}
           facet={facet}
+          queryParams={queryParams}
           sortBy={sortBy}
         />
       </Accordion>
@@ -148,6 +162,7 @@ const SearchFacetView = ({
             <List id="filter_Items">
               <FilterItems
                 facet={displayFacet}
+                queryParams={queryParams}
               />
             </List>
           </>

package/src/components/inputs/FilterItems.js

@@ -8,6 +8,7 @@ import { sortBySection } from '../../utils/Sort';
 
 const FilterItems = ({
   facet,
+  queryParams,
   sortBy,
 }) => {
   const {
@@ -22,10 +23,11 @@ const FilterItems = ({
             checkboxItem={{ ...item, index, section }}
             datafield={datafield}
             facet={facet}
+            queryParams={queryParams}
           />
         ));
       case InputTypes.SLIDER:
-        return (<ReduxSlider facet={facet} />);
+        return (<ReduxSlider facet={facet} queryParams={queryParams} />);
       default:
         return (<></>);
     }

package/src/components/inputs/ModalFilterItems.js

@@ -14,6 +14,7 @@ import clearIcon from '../facet/assets/clearIcon.svg';
 const ModalFilterItems = ({
   facet,
   searchText,
+  queryParams,
   sortBy,
   onClearSection,
   onSortChange,
@@ -35,6 +36,7 @@ const ModalFilterItems = ({
       checkboxItem={{ ...item, index, section }}
       datafield={datafield}
       facet={facet}
+      queryParams={queryParams}
     />));
   const makeupItemsLen = 3 - (checkedItems.length % 3);
   const makeupItems = [];
@@ -50,6 +52,7 @@ const ModalFilterItems = ({
       checkboxItem={{ ...item, index, section }}
       datafield={datafield}
       facet={facet}
+      queryParams={queryParams}
     />));
   const makeupUncheckedItemsLen = 3 - (uncheckedItems.length % 3);
   const makeupUncheckedItems = [];

package/src/components/inputs/SearchFilterItems.js

@@ -12,6 +12,7 @@ import ReduxFacetModal from '../facet/ReduxFacetModal';
 
 const SearchFilterItems = ({
   facet,
+  queryParams,
   sortBy,
   searchText,
   classes,
@@ -31,6 +32,7 @@ const SearchFilterItems = ({
       checkboxItem={{ ...item, index, section }}
       datafield={datafield}
       facet={facet}
+      queryParams={queryParams}
     />));
 
   const uncheckedItems = sortFilters.filter((item) => !item.isChecked)
@@ -39,6 +41,7 @@ const SearchFilterItems = ({
       checkboxItem={{ ...item, index, section }}
       datafield={datafield}
       facet={facet}
+      queryParams={queryParams}
     />));
 
   useEffect(() => {
@@ -63,6 +66,7 @@ const SearchFilterItems = ({
     <>
       <ReduxFacetModal
         facet={facet}
+        queryParams={queryParams}
         open={open}
         onClose={() => setOpen(false)}
       />

package/src/components/inputs/checkbox/CheckboxView.js

@@ -6,6 +6,11 @@
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
 import React from 'react';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import { withStyles } from '@material-ui/core/styles';
 import {
   Checkbox,
@@ -33,6 +38,7 @@ const CheckBoxView = ({
   datafield,
   onToggle,
   facet,
+  queryParams,
 }) => {
   const {
     name,
@@ -43,6 +49,8 @@ const CheckBoxView = ({
     tooltip,
     label,
   } = checkboxItem;
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
 
@@ -54,6 +62,28 @@ const CheckBoxView = ({
       datafield: datafield,
       isChecked: !isChecked,
     };
+    const checkedValues = query.get(datafield);
+    const paramValue = {};
+    if (toggleCheckBoxItem.isChecked) {
+      if (checkedValues) {
+        const newValues = checkedValues.split('|');
+        newValues.push(name);
+        paramValue[datafield] = newValues.join('|');
+      } else {
+        paramValue[datafield] = name;
+      }
+    } else if (checkedValues) {
+      const newValues = checkedValues.split('|');
+      const idx = newValues.indexOf(name);
+      if (idx > -1) {
+        newValues.splice(idx, 1);
+      }
+      paramValue[datafield] = newValues.length > 0 ? newValues.join('|') : '';
+    } else {
+      paramValue[datafield] = '';
+    }
+    const queryStr = generateQueryStr(query, queryParams, paramValue);
+    navigate(`/explore${queryStr}`);
     onToggle(toggleCheckBoxItem);
   };
 

package/src/components/inputs/checkbox/ModalCheckboxView.js

@@ -6,6 +6,11 @@
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
 import React from 'react';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import { withStyles } from '@material-ui/core/styles';
 import {
   Checkbox,
@@ -33,6 +38,7 @@ const CheckBoxView = ({
   datafield,
   onToggle,
   facet,
+  queryParams,
 }) => {
   const {
     name,
@@ -43,6 +49,8 @@ const CheckBoxView = ({
     tooltip,
     label,
   } = checkboxItem;
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
 
@@ -54,6 +62,28 @@ const CheckBoxView = ({
       datafield: datafield,
       isChecked: !isChecked,
     };
+    const checkedValues = query.get(datafield);
+    const paramValue = {};
+    if (toggleCheckBoxItem.isChecked) {
+      if (checkedValues) {
+        const newValues = checkedValues.split('|');
+        newValues.push(name);
+        paramValue[datafield] = newValues.join('|');
+      } else {
+        paramValue[datafield] = name;
+      }
+    } else if (checkedValues) {
+      const newValues = checkedValues.split('|');
+      const idx = newValues.indexOf(name);
+      if (idx > -1) {
+        newValues.splice(idx, 1);
+      }
+      paramValue[datafield] = newValues.length > 0 ? newValues.join('|') : '';
+    } else {
+      paramValue[datafield] = '';
+    }
+    const queryStr = generateQueryStr(query, queryParams, paramValue);
+    navigate(`/explore${queryStr}`);
     onToggle(toggleCheckBoxItem);
   };
 

package/src/components/inputs/checkbox/SearchCheckboxView.js

@@ -6,6 +6,11 @@
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
 import React from 'react';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import { withStyles } from '@material-ui/core/styles';
 import {
   Checkbox,
@@ -33,6 +38,7 @@ const CheckBoxView = ({
   datafield,
   onToggle,
   facet,
+  queryParams,
 }) => {
   const {
     name,
@@ -43,6 +49,8 @@ const CheckBoxView = ({
     tooltip,
     label,
   } = checkboxItem;
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
 
@@ -54,6 +62,28 @@ const CheckBoxView = ({
       datafield: datafield,
       isChecked: !isChecked,
     };
+    const checkedValues = query.get(datafield);
+    const paramValue = {};
+    if (toggleCheckBoxItem.isChecked) {
+      if (checkedValues) {
+        const newValues = checkedValues.split('|');
+        newValues.push(name);
+        paramValue[datafield] = newValues.join('|');
+      } else {
+        paramValue[datafield] = name;
+      }
+    } else if (checkedValues) {
+      const newValues = checkedValues.split('|');
+      const idx = newValues.indexOf(name);
+      if (idx > -1) {
+        newValues.splice(idx, 1);
+      }
+      paramValue[datafield] = newValues.length > 0 ? newValues.join('|') : '';
+    } else {
+      paramValue[datafield] = '';
+    }
+    const queryStr = generateQueryStr(query, queryParams, paramValue);
+    navigate(`/explore${queryStr}`);
     onToggle(toggleCheckBoxItem);
   };
 

package/src/components/inputs/slider/SliderView.js

@@ -3,6 +3,11 @@
 /* eslint-disable react/jsx-indent */
 /* eslint-disable object-curly-newline */
 import React, { useEffect, useState } from 'react';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import { withStyles, Slider, Typography, Box } from '@material-ui/core';
 // import styles from './SliderStyle';
 import { silderTypes } from '../Types';
@@ -13,10 +18,13 @@ const SliderView = ({
   facet,
   onSliderToggle,
   filterState,
+  queryParams,
 }) => {
   const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
 
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
@@ -30,6 +38,10 @@ const SliderView = ({
   };
   const handleChangeCommittedSlider = (value) => {
     if (!value.includes('')) {
+      const paramValue = {};
+      paramValue[datafield] = value;
+      const queryStr = generateQueryStr(query, queryParams, paramValue);
+      navigate(`/explore${queryStr}`);
       onSliderToggle({ sliderValue: value, ...facet });
     }
   };

package/src/index.js

@@ -22,6 +22,7 @@ export {
   clearFacetSection,
   clearSliderSection,
   clearAllAndSelectFacet,
+  updateFilterState,
 } from './store/actions/Actions';
 export {
   generateFacetSectionView,

package/src/store/actions/ActionTypes.js

@@ -7,6 +7,7 @@ export const sideBarActionTypes = {
   CLEAR_AND_SELECT_FACET_VALUE: 'CLEAR_AND_SELECT_FACET_VALUE',
   SEARCH_TEXT_CHANGED: 'SEARCH_TEXT_CHANGED',
   SORT_CHANGED: 'SORT_CHANGED',
+  UPDATE_FILTER_STATE: 'UPDATE_FILTER_STATE',
 };
 
 export const Actions = '';

package/src/store/actions/Actions.js

@@ -46,3 +46,8 @@ export const sortChange = (datafield, sortBy) => ({
     sortBy,
   },
 });
+
+export const updateFilterState = (filterState) => ({
+  type: sideBarActionTypes.UPDATE_FILTER_STATE,
+  payload: filterState,
+});

package/src/store/reducers/SideBarReducer.js

@@ -130,6 +130,11 @@ export function sideBarReducerGenerator() {
             ...state,
             sortState: { ...updateState },
           };
+        case sideBarActionTypes.UPDATE_FILTER_STATE:
+          return {
+            ...state,
+            filterState: payload,
+          };
         default:
           return state;
       }