@blocklet/list 0.8.10 → 0.8.13

package/lib/base.js

@@ -58,7 +58,7 @@ const ListBase = () => {
     alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_material.Hidden, {
     mdDown: true
-  }, !!queryParams.developer && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
+  }, !!queryParams.get('developer') && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
     user: developerName,
     deleteUserTag: () => {
       history.push('/');
@@ -93,8 +93,8 @@ const ListBase = () => {
     display: "flex",
     flexWrap: "wrap",
     alignItems: "center",
-    justifyContent: queryParams.developer ? 'space-between' : 'flex-end'
-  }, !!queryParams.developer && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
+    justifyContent: queryParams.get('developer') ? 'space-between' : 'flex-end'
+  }, !!queryParams.get('developer') && /*#__PURE__*/_react.default.createElement(_filterAuthor.default, {
     user: developerName,
     deleteUserTag: () => {
       history.push('/');
@@ -103,10 +103,10 @@ const ListBase = () => {
       marginBottom: '16px'
     }
   }), /*#__PURE__*/_react.default.createElement(_customSelect.default, {
-    value: queryParams.price,
+    value: queryParams.get('price'),
     icon: /*#__PURE__*/_react.default.createElement(_FilterList.default, null),
     options: (0, _utils.getPrices)(t),
-    title: ((_getPrices$find = (0, _utils.getPrices)(t).find(f => f.value === queryParams.price)) === null || _getPrices$find === void 0 ? void 0 : _getPrices$find.name) || t('common.price'),
+    title: ((_getPrices$find = (0, _utils.getPrices)(t).find(f => f.value === queryParams.get('price'))) === null || _getPrices$find === void 0 ? void 0 : _getPrices$find.name) || t('common.price'),
     onChange: v => {
       searchStore.handlePriceFilter(v);
     },

package/lib/components/aside.js

@@ -40,7 +40,7 @@ const Aside = () => {
         handlePriceFilter(item.value);
       },
       size: "small",
-      checked: item.value === queryParams.price
+      checked: item.value === queryParams.get('price')
     }),
     label: item.name
   }))), /*#__PURE__*/_react.default.createElement(_material.List, {

package/lib/components/categories.js

@@ -11,14 +11,14 @@ var _reactRouterDom = require("react-router-dom");
 
 var _material = require("@mui/material");
 
-var _context = require("@arcblock/ux/lib/Locale/context");
-
-var _qs = _interopRequireDefault(require("qs"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
 
 var _store = require("../contexts/store");
 
 var _customSelect = _interopRequireDefault(require("./custom-select"));
 
+var _utils = require("../tools/utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -72,10 +72,6 @@ const CategorySelect = () => {
 exports.CategorySelect = CategorySelect;
 
 const CategoryLinkList = () => {
-  const {
-    t,
-    locale
-  } = (0, _context.useLocaleContext)();
   const searchStore = (0, _store.useSearchContext)();
   const {
     queryParams,
@@ -84,7 +80,9 @@ const CategoryLinkList = () => {
     selectedCategory,
     isPageMode,
     handleCategorySelect,
-    baseUrl
+    baseUrl,
+    locale,
+    t
   } = searchStore;
   let content = null;
 
@@ -97,7 +95,7 @@ const CategoryLinkList = () => {
       selected: !selectedCategory,
       button: true,
       component: _reactRouterDom.Link,
-      to: !isSearchPage ? baseUrl : "".concat(baseUrl, "search?").concat(_qs.default.stringify(_objectSpread(_objectSpread({}, queryParams), {}, {
+      to: !isSearchPage ? baseUrl : "".concat((0, _urlJoin.default)(baseUrl, '/search'), "?").concat((0, _utils.urlStringify)(_objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
         category: undefined
       })))
     }, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
@@ -108,7 +106,7 @@ const CategoryLinkList = () => {
       button: true,
       selected: item.name === selectedCategory,
       component: _reactRouterDom.Link,
-      to: !isSearchPage ? "".concat(baseUrl, "category/").concat(item.name) : "".concat(baseUrl, "search?").concat(_qs.default.stringify(_objectSpread(_objectSpread({}, queryParams), {}, {
+      to: !isSearchPage ? "".concat((0, _urlJoin.default)(baseUrl, '/category', item.name)) : "".concat((0, _urlJoin.default)(baseUrl, '/search'), "?").concat((0, _utils.urlStringify)(_objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
         category: item.name
       })))
     }, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {

package/lib/components/list.js

@@ -51,7 +51,7 @@ function BlockletList(_ref) {
     queryParams,
     t
   } = (0, _store.useSearchContext)();
-  const showFilterTip = !!selectedCategory || !!queryParams.price;
+  const showFilterTip = !!selectedCategory || !!queryParams.get('price');
 
   if (errors.fetchBlockletsError) {
     return /*#__PURE__*/_react.default.createElement(_Alert.default, {
@@ -68,22 +68,22 @@ function BlockletList(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, null));
   }
 
-  if (queryParams.search && showFilterTip && blockletList.length === 0) {
+  if (queryParams.get('search') && showFilterTip && blockletList.length === 0) {
     return /*#__PURE__*/_react.default.createElement(CustomEmpty, null, /*#__PURE__*/_react.default.createElement(_empty.EmptyTitle, {
       primaryStart: t('blocklet.noBlockletPart1'),
       primaryEnd: t('blocklet.noBlockletPart2'),
-      search: queryParams.search
+      search: queryParams.get('search')
     }), /*#__PURE__*/_react.default.createElement(_empty.NoResultsTips, {
       keywordTip: true,
       filterTip: true
     }));
   }
 
-  if (queryParams.search && blockletList.length === 0) {
+  if (queryParams.get('search') && blockletList.length === 0) {
     return /*#__PURE__*/_react.default.createElement(CustomEmpty, null, /*#__PURE__*/_react.default.createElement(_empty.EmptyTitle, {
       primaryStart: t('blocklet.noBlockletPart1'),
       primaryEnd: t('blocklet.noBlockletPart2'),
-      search: queryParams.search
+      search: queryParams.get('search')
     }), /*#__PURE__*/_react.default.createElement(_empty.NoResultsTips, {
       keywordTip: true
     }));
@@ -115,7 +115,10 @@ function BlockletList(_ref) {
     xs: 12,
     key: blocklet.did,
     "data-blocklet-did": blocklet.did
-  }, blockletRender(blocklet))));
+  }, blockletRender({
+    blocklet,
+    blocklets: blockletList
+  }))));
 }
 
 BlockletList.propTypes = {

package/lib/components/search.js

@@ -42,7 +42,7 @@ const Search = _ref => {
     queryParams,
     handleSearchKeyword
   } = searchStore;
-  const [searchStr, setSearchStr] = (0, _react.useState)(queryParams.search || '');
+  const [searchStr, setSearchStr] = (0, _react.useState)(queryParams.get('search') || '');
   const {
     run: handleSearch
   } = (0, _ahooks.useDebounceFn)(handleSearchKeyword, {
@@ -63,6 +63,9 @@ const Search = _ref => {
   };
 
   return /*#__PURE__*/_react.default.createElement(StyledSearch, Object.assign({
+    inputProps: {
+      'data-cy': 'search-blocklet'
+    },
     startAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
       position: "start"
     }, /*#__PURE__*/_react.default.createElement(StyledMagnify, null)),
@@ -70,10 +73,13 @@ const Search = _ref => {
     placeholder: placeholder,
     value: searchStr,
     title: placeholder,
+    "data-cy": "search",
     endAdornment: searchStr && /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
-      onClick: handleClose,
       position: "end"
-    }, /*#__PURE__*/_react.default.createElement(StyledClose, null))
+    }, /*#__PURE__*/_react.default.createElement(StyledClose, {
+      "data-cy": "search-delete",
+      onClick: handleClose
+    }))
   }, rest));
 };
 

package/lib/contexts/store.js

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _qs = _interopRequireDefault(require("qs"));
-
 var _reactRouterDom = require("react-router-dom");
 
 var _ahooks = require("ahooks");
@@ -59,7 +57,9 @@ function SearchProvider(_ref) {
     locale,
     blockletRender
   } = _ref;
-  const location = (0, _reactRouterDom.useLocation)();
+  const {
+    location
+  } = window;
   const history = (0, _reactRouterDom.useHistory)();
   const pathParams = (0, _reactRouterDom.useParams)();
   const isPageMode = type === 'page';
@@ -71,14 +71,16 @@ function SearchProvider(_ref) {
   const {
     data: allBlocklets,
     error: fetchBlockletsError,
-    loading: fetchBlockletsLoading
+    loading: fetchBlockletsLoading,
+    run: fetchBlocklets
   } = (0, _ahooks.useRequest)(async () => {
     const {
       data: list
     } = await axiosInstance.get((0, _urlJoin.default)(endpoint, '/api/blocklets.json'));
     return list;
   }, {
-    initialData: []
+    initialData: [],
+    manual: true
   });
   const {
     data: allCategories,
@@ -99,9 +101,7 @@ function SearchProvider(_ref) {
     sortDirection: 'desc'
   });
   const queryParams = (0, _react.useMemo)(() => {
-    return isPageMode ? _qs.default.parse(location.search, {
-      ignoreQueryPrefix: true
-    }) : memoryParams;
+    return isPageMode ? new URLSearchParams(location.search) : new Map(Object.entries(memoryParams));
   }, [memoryParams, location.search]);
   let sortParams; // 当作页面使用时 sort 数据比较特殊, 默认取 localStorge 中的值，如果 url query 中有sort值则优先使用
 
@@ -111,8 +111,8 @@ function SearchProvider(_ref) {
       direction: 'desc'
     }, baseUrl);
     const urlSortParams = {
-      sort: queryParams.sortBy,
-      direction: queryParams.sortDirection
+      sort: queryParams.get('sortBy'),
+      direction: queryParams.get('sortDirection')
     };
     sortParams = urlSortParams.sort && urlSortParams.direction ? urlSortParams : localSortParams;
   } else {
@@ -124,22 +124,22 @@ function SearchProvider(_ref) {
     }, [memoryParams]);
   }
 
-  const isSearchPage = location.pathname === '/search';
+  const isSearchPage = location.pathname === (0, _urlJoin.default)(baseUrl, '/search');
   const selectedCategory = (0, _react.useMemo)(() => {
     let result = null;
 
     if (isPageMode) {
-      result = !isSearchPage ? pathParams.category : queryParams.category;
+      result = !isSearchPage ? pathParams.category : queryParams.get('category');
     } else {
-      result = queryParams.category;
+      result = queryParams.get('category');
     }
 
     return result;
   }, [isPageMode, pathParams, queryParams]);
-  const hasDeveloperFilter = !!queryParams.developer;
+  const hasDeveloperFilter = !!queryParams.get('developer');
   const categoryState = !hasDeveloperFilter ? {
     data: allCategories
-  } : (0, _utils.getCategories)(allBlocklets, queryParams.developer);
+  } : (0, _utils.getCategories)(allBlocklets, queryParams.get('developer'));
   const blockletList = (0, _react.useMemo)(() => {
     var _queryParams$search;
 
@@ -164,7 +164,7 @@ function SearchProvider(_ref) {
     };
     let result = allBlocklets || []; // 按照付费/免费筛选
 
-    result = (0, _utils.filterBlockletByPrice)(result, queryParams.price); // 按照分类筛选
+    result = (0, _utils.filterBlockletByPrice)(result, queryParams.get('price')); // 按照分类筛选
 
     result = result.filter(item => {
       var _item$category;
@@ -172,7 +172,7 @@ function SearchProvider(_ref) {
       return selectedCategory ? (item === null || item === void 0 ? void 0 : (_item$category = item.category) === null || _item$category === void 0 ? void 0 : _item$category.name) === selectedCategory : true;
     }); // 按照作者筛选
 
-    result = result.filter(item => queryParams !== null && queryParams !== void 0 && queryParams.developer ? item.owner.did === queryParams.developer : true);
+    result = result.filter(item => queryParams !== null && queryParams !== void 0 && queryParams.developer ? item.owner.did === queryParams.get('developer') : true);
     const lowerSearch = (queryParams === null || queryParams === void 0 ? void 0 : (_queryParams$search = queryParams.search) === null || _queryParams$search === void 0 ? void 0 : _queryParams$search.toLocaleLowerCase()) || ''; // 按照搜索筛选
 
     result = result.filter(item => {
@@ -195,7 +195,7 @@ function SearchProvider(_ref) {
       return key;
     }
 
-    return (0, _utils.replace)(_locale.default[locale][key], data);
+    return (0, _utils.replaceTranslate)(_locale.default[locale][key], data);
   };
 
   const searchStore = {
@@ -221,7 +221,7 @@ function SearchProvider(_ref) {
     blockletRender,
     locale,
     handleSort: value => {
-      const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
+      const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
         sortBy: value,
         sortDirection: value === 'nameAsc' ? 'asc' : 'desc'
       });
@@ -229,29 +229,29 @@ function SearchProvider(_ref) {
       if (isPageMode) {
         sortParams.sort = changData.sortBy;
         sortParams.direction = changData.sortDirection;
-        history.push("".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+        history.push("".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
       } else {
         setMemoryParams(changData);
       }
     },
     handleSearchKeyword: value => {
-      const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
+      const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
         search: value || undefined
       });
 
       if (isPageMode) {
-        history.push("".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+        history.push("".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
       } else {
         setMemoryParams(changData);
       }
     },
     handlePriceFilter: value => {
-      const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
-        price: value === queryParams.price ? undefined : value
+      const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
+        price: value === queryParams.get('price') ? undefined : value
       });
 
       if (isPageMode) {
-        history.push("".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+        history.push("".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
       } else {
         setMemoryParams(changData);
       }
@@ -269,22 +269,22 @@ function SearchProvider(_ref) {
     },
     handleCategorySelect: value => {
       if (value === 'all') {
-        const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
+        const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
           category: undefined
         });
 
         if (isPageMode) {
-          history.push(!isSearchPage ? baseUrl : "".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+          history.push(!isSearchPage ? baseUrl : "".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
         } else {
           setMemoryParams(changData);
         }
       } else {
-        const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
+        const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
           category: value
         });
 
         if (isPageMode) {
-          history.push(!isSearchPage ? "".concat(baseUrl, "category/").concat(value) : "".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+          history.push(!isSearchPage ? "".concat((0, _urlJoin.default)(baseUrl, 'category', value)) : "".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
         } else {
           setMemoryParams(changData);
         }
@@ -294,7 +294,7 @@ function SearchProvider(_ref) {
     get developerName() {
       var _allBlocklets$find, _allBlocklets$find$ow;
 
-      return ((_allBlocklets$find = allBlocklets.find(i => i.owner.did === queryParams.developer)) === null || _allBlocklets$find === void 0 ? void 0 : (_allBlocklets$find$ow = _allBlocklets$find.owner) === null || _allBlocklets$find$ow === void 0 ? void 0 : _allBlocklets$find$ow.name) || '';
+      return ((_allBlocklets$find = allBlocklets.find(i => i.owner.did === queryParams.get('developer'))) === null || _allBlocklets$find === void 0 ? void 0 : (_allBlocklets$find$ow = _allBlocklets$find.owner) === null || _allBlocklets$find$ow === void 0 ? void 0 : _allBlocklets$find$ow.name) || '';
     }
 
   };
@@ -303,6 +303,9 @@ function SearchProvider(_ref) {
       fetchCategories();
     }
   }, [!hasDeveloperFilter]);
+  (0, _react.useEffect)(() => {
+    fetchBlocklets();
+  }, [endpoint]);
   return /*#__PURE__*/_react.default.createElement(Provider, {
     value: searchStore
   }, children);

package/lib/tools/utils.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.replace = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
+exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const isFreeBlocklet = meta => {
@@ -119,7 +121,29 @@ const formatLogoPath = function formatLogoPath(did, asset) {
 
 exports.formatLogoPath = formatLogoPath;
 
-const replace = (template, data) => // eslint-disable-next-line no-prototype-builtins
+const replaceTranslate = (template, data) => // eslint-disable-next-line no-prototype-builtins
 template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
 
-exports.replace = replace;
+exports.replaceTranslate = replaceTranslate;
+
+const removeUndefined = obj => {
+  const innerObj = (0, _cloneDeep.default)(obj);
+  Object.keys(innerObj).forEach(key => {
+    if (innerObj[key] === undefined) {
+      delete innerObj[key];
+    }
+  });
+  return innerObj;
+};
+
+exports.removeUndefined = removeUndefined;
+
+const urlStringify = obj => {
+  if (!obj) {
+    throw new Error('obj is required in urlStringify ');
+  }
+
+  return new URLSearchParams(removeUndefined(obj)).toString();
+};
+
+exports.urlStringify = urlStringify;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blocklet/list",
-    "version": "0.8.10",
+    "version": "0.8.13",
     "description": "Common ux components of blocklet",
     "publishConfig": {
         "access": "public"
@@ -35,7 +35,7 @@
         "react": ">=16.12.0"
     },
     "dependencies": {
-        "@arcblock/ux": "^2.1.2",
+        "@arcblock/ux": "^2.1.3",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
         "@mui/icons-material": "^5.6.2",
@@ -62,5 +62,5 @@
         "babel-plugin-inline-react-svg": "^2.0.1",
         "babel-plugin-styled-components": "^1.10.7"
     },
-    "gitHead": "6808074d05a774af33190102bdf18d61194e2f04"
+    "gitHead": "966ec885a8c7a68eb84be25bd138be696f3b09f4"
 }

package/src/base.js

@@ -24,7 +24,7 @@ const ListBase = () => {
       <StyledMin>
         <Box className="marketplace-header" display="flex" alignItems="center">
           <Hidden mdDown>
-            {!!queryParams.developer && (
+            {!!queryParams.get('developer') && (
               <FilterAuthor
                 user={developerName}
                 deleteUserTag={() => {
@@ -58,8 +58,8 @@ const ListBase = () => {
             display="flex"
             flexWrap="wrap"
             alignItems="center"
-            justifyContent={queryParams.developer ? 'space-between' : 'flex-end'}>
-            {!!queryParams.developer && (
+            justifyContent={queryParams.get('developer') ? 'space-between' : 'flex-end'}>
+            {!!queryParams.get('developer') && (
               <FilterAuthor
                 user={developerName}
                 deleteUserTag={() => {
@@ -70,10 +70,10 @@ const ListBase = () => {
             )}
             {/* 筛选付费/免费 */}
             <CustomSelect
-              value={queryParams.price}
+              value={queryParams.get('price')}
               icon={<FilterListIcon />}
               options={getPrices(t)}
-              title={getPrices(t).find((f) => f.value === queryParams.price)?.name || t('common.price')}
+              title={getPrices(t).find((f) => f.value === queryParams.get('price'))?.name || t('common.price')}
               onChange={(v) => {
                 searchStore.handlePriceFilter(v);
               }}

package/src/components/aside.js

@@ -24,7 +24,7 @@ const Aside = () => {
                   handlePriceFilter(item.value);
                 }}
                 size="small"
-                checked={item.value === queryParams.price}
+                checked={item.value === queryParams.get('price')}
               />
             }
             label={item.name}

package/src/components/categories.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { MenuItem, ListItem, ListItemText } from '@mui/material';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import qs from 'qs';
+import joinUrl from 'url-join';
 
 import { useSearchContext } from '../contexts/store';
 import CustomSelect from './custom-select';
+import { urlStringify } from '../tools/utils';
 
 /**
  * 小屏幕下的分类选择器
@@ -47,10 +47,18 @@ const CategorySelect = () => {
  * @returns
  */
 const CategoryLinkList = () => {
-  const { t, locale } = useLocaleContext();
   const searchStore = useSearchContext();
-  const { queryParams, categoryList, isSearchPage, selectedCategory, isPageMode, handleCategorySelect, baseUrl } =
-    searchStore;
+  const {
+    queryParams,
+    categoryList,
+    isSearchPage,
+    selectedCategory,
+    isPageMode,
+    handleCategorySelect,
+    baseUrl,
+    locale,
+    t,
+  } = searchStore;
 
   let content = null;
   if (isPageMode) {
@@ -60,7 +68,14 @@ const CategoryLinkList = () => {
           selected={!selectedCategory}
           button
           component={Link}
-          to={!isSearchPage ? baseUrl : `${baseUrl}search?${qs.stringify({ ...queryParams, category: undefined })}`}>
+          to={
+            !isSearchPage
+              ? baseUrl
+              : `${joinUrl(baseUrl, '/search')}?${urlStringify({
+                  ...Object.fromEntries(queryParams.entries()),
+                  category: undefined,
+                })}`
+          }>
           <ListItemText primary={t('category.all')} />
         </ListItem>
         {categoryList.map((item) => (
@@ -72,8 +87,11 @@ const CategoryLinkList = () => {
             component={Link}
             to={
               !isSearchPage
-                ? `${baseUrl}category/${item.name}`
-                : `${baseUrl}search?${qs.stringify({ ...queryParams, category: item.name })}`
+                ? `${joinUrl(baseUrl, '/category', item.name)}`
+                : `${joinUrl(baseUrl, '/search')}?${urlStringify({
+                    ...Object.fromEntries(queryParams.entries()),
+                    category: item.name,
+                  })}`
             }>
             <ListItemText primary={item.locales[locale]} />
           </ListItem>

package/src/components/list.js

@@ -15,7 +15,7 @@ export default function BlockletList({ blocklets, ...rest }) {
   const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, queryParams, t } =
     useSearchContext();
 
-  const showFilterTip = !!selectedCategory || !!queryParams.price;
+  const showFilterTip = !!selectedCategory || !!queryParams.get('price');
 
   if (errors.fetchBlockletsError) {
     return (
@@ -31,25 +31,25 @@ export default function BlockletList({ blocklets, ...rest }) {
       </Box>
     );
   }
-  if (queryParams.search && showFilterTip && blockletList.length === 0) {
+  if (queryParams.get('search') && showFilterTip && blockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
           primaryStart={t('blocklet.noBlockletPart1')}
           primaryEnd={t('blocklet.noBlockletPart2')}
-          search={queryParams.search}
+          search={queryParams.get('search')}
         />
         <NoResultsTips keywordTip filterTip />
       </CustomEmpty>
     );
   }
-  if (queryParams.search && blockletList.length === 0) {
+  if (queryParams.get('search') && blockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
           primaryStart={t('blocklet.noBlockletPart1')}
           primaryEnd={t('blocklet.noBlockletPart2')}
-          search={queryParams.search}
+          search={queryParams.get('search')}
         />
         <NoResultsTips keywordTip />
       </CustomEmpty>
@@ -84,7 +84,7 @@ export default function BlockletList({ blocklets, ...rest }) {
     <Grid container spacing={4} {...rest}>
       {blocklets.map((blocklet) => (
         <StyledGrid item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
-          {blockletRender(blocklet)}
+          {blockletRender({ blocklet, blocklets: blockletList })}
         </StyledGrid>
       ))}
     </Grid>

package/src/components/search.js

@@ -10,7 +10,7 @@ import { useSearchContext } from '../contexts/store';
 const Search = ({ placeholder, ...rest }) => {
   const searchStore = useSearchContext();
   const { queryParams, handleSearchKeyword } = searchStore;
-  const [searchStr, setSearchStr] = useState(queryParams.search || '');
+  const [searchStr, setSearchStr] = useState(queryParams.get('search') || '');
 
   const { run: handleSearch } = useDebounceFn(handleSearchKeyword, { wait: 300 });
   const handleChange = (event) => {
@@ -24,6 +24,9 @@ const Search = ({ placeholder, ...rest }) => {
   };
   return (
     <StyledSearch
+      inputProps={{
+        'data-cy': 'search-blocklet',
+      }}
       startAdornment={
         <InputAdornment position="start">
           <StyledMagnify />
@@ -33,10 +36,11 @@ const Search = ({ placeholder, ...rest }) => {
       placeholder={placeholder}
       value={searchStr}
       title={placeholder}
+      data-cy="search"
       endAdornment={
         searchStr && (
-          <InputAdornment onClick={handleClose} position="end">
-            <StyledClose />
+          <InputAdornment position="end">
+            <StyledClose data-cy="search-delete" onClick={handleClose} />
           </InputAdornment>
         )
       }

package/src/contexts/store.js

@@ -1,14 +1,13 @@
 import React, { useContext, createContext, useMemo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import qs from 'qs';
-import { useParams, useLocation, useHistory } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import { useRequest } from 'ahooks';
 import orderBy from 'lodash-es/orderBy';
 import axios from 'axios';
 import joinUrl from 'url-join';
 
 import usePageState from '../hooks/page-state';
-import { getCategories, filterBlockletByPrice, replace } from '../tools/utils';
+import { getCategories, filterBlockletByPrice, replaceTranslate, urlStringify } from '../tools/utils';
 import translations from '../assets/locale';
 
 const axiosInstance = axios.create();
@@ -16,7 +15,7 @@ const Search = createContext({});
 const { Provider, Consumer } = Search;
 
 function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRender }) {
-  const location = useLocation();
+  const { location } = window;
   const history = useHistory();
   const pathParams = useParams();
   const isPageMode = type === 'page';
@@ -27,12 +26,13 @@ function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRen
     data: allBlocklets,
     error: fetchBlockletsError,
     loading: fetchBlockletsLoading,
+    run: fetchBlocklets,
   } = useRequest(
     async () => {
       const { data: list } = await axiosInstance.get(joinUrl(endpoint, '/api/blocklets.json'));
       return list;
     },
-    { initialData: [] }
+    { initialData: [], manual: true }
   );
 
   const {
@@ -54,7 +54,7 @@ function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRen
   });
 
   const queryParams = useMemo(() => {
-    return isPageMode ? qs.parse(location.search, { ignoreQueryPrefix: true }) : memoryParams;
+    return isPageMode ? new URLSearchParams(location.search) : new Map(Object.entries(memoryParams));
   }, [memoryParams, location.search]);
 
   let sortParams;
@@ -68,8 +68,8 @@ function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRen
       baseUrl
     );
     const urlSortParams = {
-      sort: queryParams.sortBy,
-      direction: queryParams.sortDirection,
+      sort: queryParams.get('sortBy'),
+      direction: queryParams.get('sortDirection'),
     };
     sortParams = urlSortParams.sort && urlSortParams.direction ? urlSortParams : localSortParams;
   } else {
@@ -81,21 +81,21 @@ function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRen
     }, [memoryParams]);
   }
 
-  const isSearchPage = location.pathname === '/search';
+  const isSearchPage = location.pathname === joinUrl(baseUrl, '/search');
   const selectedCategory = useMemo(() => {
     let result = null;
     if (isPageMode) {
-      result = !isSearchPage ? pathParams.category : queryParams.category;
+      result = !isSearchPage ? pathParams.category : queryParams.get('category');
     } else {
-      result = queryParams.category;
+      result = queryParams.get('category');
     }
     return result;
   }, [isPageMode, pathParams, queryParams]);
 
-  const hasDeveloperFilter = !!queryParams.developer;
+  const hasDeveloperFilter = !!queryParams.get('developer');
   const categoryState = !hasDeveloperFilter
     ? { data: allCategories }
-    : getCategories(allBlocklets, queryParams.developer);
+    : getCategories(allBlocklets, queryParams.get('developer'));
 
   const blockletList = useMemo(() => {
     const sortByName = (x) => x?.title?.toLocaleLowerCase() || x?.name?.toLocaleLowerCase(); // 按名称排序
@@ -110,11 +110,11 @@ function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRen
 
     let result = allBlocklets || [];
     // 按照付费/免费筛选
-    result = filterBlockletByPrice(result, queryParams.price);
+    result = filterBlockletByPrice(result, queryParams.get('price'));
     // 按照分类筛选
     result = result.filter((item) => (selectedCategory ? item?.category?.name === selectedCategory : true));
     // 按照作者筛选
-    result = result.filter((item) => (queryParams?.developer ? item.owner.did === queryParams.developer : true));
+    result = result.filter((item) => (queryParams?.developer ? item.owner.did === queryParams.get('developer') : true));
     const lowerSearch = queryParams?.search?.toLocaleLowerCase() || '';
     // 按照搜索筛选
     result = result.filter((item) => {
@@ -140,7 +140,7 @@ function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRen
       return key;
     }
 
-    return replace(translations[locale][key], data);
+    return replaceTranslate(translations[locale][key], data);
   };
 
   const searchStore = {
@@ -160,27 +160,34 @@ function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRen
     blockletRender,
     locale,
     handleSort: (value) => {
-      const changData = { ...queryParams, sortBy: value, sortDirection: value === 'nameAsc' ? 'asc' : 'desc' };
+      const changData = {
+        ...Object.fromEntries(queryParams.entries()),
+        sortBy: value,
+        sortDirection: value === 'nameAsc' ? 'asc' : 'desc',
+      };
       if (isPageMode) {
         sortParams.sort = changData.sortBy;
         sortParams.direction = changData.sortDirection;
-        history.push(`${baseUrl}search?${qs.stringify(changData)}`);
+        history.push(`${joinUrl(baseUrl, 'search')}?${urlStringify(changData)}`);
       } else {
         setMemoryParams(changData);
       }
     },
     handleSearchKeyword: (value) => {
-      const changData = { ...queryParams, search: value || undefined };
+      const changData = { ...Object.fromEntries(queryParams.entries()), search: value || undefined };
       if (isPageMode) {
-        history.push(`${baseUrl}search?${qs.stringify(changData)}`);
+        history.push(`${joinUrl(baseUrl, 'search')}?${urlStringify(changData)}`);
       } else {
         setMemoryParams(changData);
       }
     },
     handlePriceFilter: (value) => {
-      const changData = { ...queryParams, price: value === queryParams.price ? undefined : value };
+      const changData = {
+        ...Object.fromEntries(queryParams.entries()),
+        price: value === queryParams.get('price') ? undefined : value,
+      };
       if (isPageMode) {
-        history.push(`${baseUrl}search?${qs.stringify(changData)}`);
+        history.push(`${joinUrl(baseUrl, 'search')}?${urlStringify(changData)}`);
       } else {
         setMemoryParams(changData);
       }
@@ -196,23 +203,27 @@ function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRen
     },
     handleCategorySelect: (value) => {
       if (value === 'all') {
-        const changData = { ...queryParams, category: undefined };
+        const changData = { ...Object.fromEntries(queryParams.entries()), category: undefined };
         if (isPageMode) {
-          history.push(!isSearchPage ? baseUrl : `${baseUrl}search?${qs.stringify(changData)}`);
+          history.push(!isSearchPage ? baseUrl : `${joinUrl(baseUrl, 'search')}?${urlStringify(changData)}`);
         } else {
           setMemoryParams(changData);
         }
       } else {
-        const changData = { ...queryParams, category: value };
+        const changData = { ...Object.fromEntries(queryParams.entries()), category: value };
         if (isPageMode) {
-          history.push(!isSearchPage ? `${baseUrl}category/${value}` : `${baseUrl}search?${qs.stringify(changData)}`);
+          history.push(
+            !isSearchPage
+              ? `${joinUrl(baseUrl, 'category', value)}`
+              : `${joinUrl(baseUrl, 'search')}?${urlStringify(changData)}`
+          );
         } else {
           setMemoryParams(changData);
         }
       }
     },
     get developerName() {
-      return allBlocklets.find((i) => i.owner.did === queryParams.developer)?.owner?.name || '';
+      return allBlocklets.find((i) => i.owner.did === queryParams.get('developer'))?.owner?.name || '';
     },
   };
 
@@ -221,6 +232,11 @@ function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRen
       fetchCategories();
     }
   }, [!hasDeveloperFilter]);
+
+  useEffect(() => {
+    fetchBlocklets();
+  }, [endpoint]);
+
   return <Provider value={searchStore}>{children}</Provider>;
 }
 

package/src/tools/utils.js

@@ -1,4 +1,5 @@
 import joinURL from 'url-join';
+import cloneDeep from 'lodash-es/cloneDeep';
 
 const isFreeBlocklet = (meta) => {
   if (!meta.payment) {
@@ -81,10 +82,27 @@ const formatLogoPath = (did, asset, target = 'assets') => {
   }
   return `${target}/${did}/${asset}`;
 };
-const replace = (template, data) =>
+const replaceTranslate = (template, data) =>
   // eslint-disable-next-line no-prototype-builtins
   template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
 
+const removeUndefined = (obj) => {
+  const innerObj = cloneDeep(obj);
+  Object.keys(innerObj).forEach((key) => {
+    if (innerObj[key] === undefined) {
+      delete innerObj[key];
+    }
+  });
+  return innerObj;
+};
+
+const urlStringify = (obj) => {
+  if (!obj) {
+    throw new Error('obj is required in urlStringify ');
+  }
+  return new URLSearchParams(removeUndefined(obj)).toString();
+};
+
 export {
   getSortOptions,
   getPrices,
@@ -92,6 +110,8 @@ export {
   filterBlockletByPrice,
   getStoreDetail,
   formatLogoPath,
-  replace,
+  replaceTranslate,
   formatError,
+  removeUndefined,
+  urlStringify,
 };