@blocklet/list 0.8.64 → 0.9.0

package/lib/base.js

@@ -40,7 +40,7 @@ function ListBase() {
 
   const {
     handleDeveloper,
-    finalBlockletList,
+    blockletList,
     filters,
     developerName,
     handleSort,
@@ -62,52 +62,54 @@ function ListBase() {
       mdDown: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_aside.default, {})
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMin, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        className: "filter-bar",
-        display: "flex",
-        alignItems: "center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearch, {
-          className: "search-container",
-          placeholder: t('common.searchStore')
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          className: "filter-bar",
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearch, {
+            className: "search-container",
+            placeholder: t('common.searchStore')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            mt: 0,
+            ml: "16px",
+            className: "filter-container",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Hidden, {
+              mdUp: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.FilterIcon, {})
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelect.default, {
+              value: filters.sortBy,
+              options: sortOptions,
+              title: sortLocale,
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sort.default, {}),
+              onChange: v => {
+                handleSort(v);
+              }
+            })]
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          mt: 0,
-          ml: "16px",
-          className: "filter-container",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Hidden, {
-            mdUp: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.FilterIcon, {})
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelect.default, {
-            value: filters.sortBy,
-            options: sortOptions,
-            title: sortLocale,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sort.default, {}),
-            onChange: v => {
-              handleSort(v);
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          mb: "16px",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
+            label: developerName,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Face.default, {}),
+            onDelete: () => {
+              handleDeveloper(null);
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
+            label: categoryLocale,
+            onDelete: () => {
+              handleCategory(null);
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
+            label: priceLocale,
+            onDelete: () => {
+              handlePrice(null);
             }
           })]
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        flexWrap: "wrap",
-        alignItems: "center",
-        mb: "16px",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
-          label: developerName,
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Face.default, {}),
-          onDelete: () => {
-            handleDeveloper(null);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
-          label: categoryLocale,
-          onDelete: () => {
-            handleCategory(null);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
-          label: priceLocale,
-          onDelete: () => {
-            handlePrice(null);
-          }
-        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
         FallbackComponent: _ErrorBoundary.ErrorFallback,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -117,7 +119,7 @@ function ListBase() {
             overflow: 'auto'
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
-            blocklets: finalBlockletList
+            blocklets: blockletList
           })
         })
       })]
@@ -134,5 +136,11 @@ const StyledSearch = (0, _styledComponents.default)(_search.default).withConfig(
   displayName: "base__StyledSearch",
   componentId: "sc-wumzlv-1"
 })(["background-color:", ";"], props => props.theme.palette.grey[50]);
+
+const FilterContainer = _styledComponents.default.div.withConfig({
+  displayName: "base__FilterContainer",
+  componentId: "sc-wumzlv-2"
+})(["position:sticky;top:0;z-index:999;background-color:white;"]);
+
 var _default = ListBase;
 exports.default = _default;

package/lib/components/aside.js

@@ -50,7 +50,7 @@ function Aside() {
 const StyledAside = _styledComponents.default.aside.withConfig({
   displayName: "aside__StyledAside",
   componentId: "sc-1wkvsv6-0"
-})(["width:220px;margin-right:", ";height:100%;overflow-y:auto;"], props => props.theme.spacing(2));
+})(["width:220px;margin-right:", ";height:100%;position:sticky;top:0;overflow-y:auto;z-index:999;"], props => props.theme.spacing(2));
 
 Aside.propTypes = {};
 Aside.defaultProps = {};

package/lib/components/filter/custom-chip.js

@@ -43,6 +43,7 @@ function FilterChip(_ref) {
   if (!label) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleDiv, _objectSpread(_objectSpread({}, containerProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+      color: "primary",
       "data-cy": "filter-tag",
       icon: icon,
       label: label,

package/lib/components/list/index.js

@@ -54,7 +54,6 @@ function BlockletList(_ref) {
     errors,
     loadings,
     selectedCategory,
-    finalBlockletList,
     getCategoryLocale,
     filters,
     t,
@@ -62,9 +61,10 @@ function BlockletList(_ref) {
     loadMore,
     endpoint
   } = (0, _filter.useFilterContext)();
-  const showFilterTip = !!selectedCategory || !!filters.price;
+  const showFilterTip = !!selectedCategory || !!filters.price; // eslint-disable-next-line no-unused-vars
+
   const [sentryRef] = (0, _reactInfiniteScrollHook.default)({
-    loading: loadings.fetchBlockletsLoading,
+    loading: loadings.fetchBlockletsLoading || loadings.loadingMore,
     hasNextPage,
     onLoadMore: loadMore
   });
@@ -85,7 +85,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (filters.keyword && showFilterTip && finalBlockletList.length === 0) {
+  if (filters.keyword && showFilterTip && blocklets.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
         primaryStart: t('blocklet.noBlockletPart1'),
@@ -98,7 +98,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (filters.keyword && finalBlockletList.length === 0) {
+  if (filters.keyword && blocklets.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
         primaryStart: t('blocklet.noBlockletPart1'),
@@ -110,7 +110,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (showFilterTip && finalBlockletList.length === 0) {
+  if (showFilterTip && blocklets.length === 0) {
     const categoryLocale = getCategoryLocale(selectedCategory);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
       children: [categoryLocale ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
@@ -123,7 +123,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (finalBlockletList.length === 0) {
+  if (blocklets.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomEmpty, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResults, {})
     });
@@ -141,7 +141,7 @@ function BlockletList(_ref) {
       "data-blocklet-did": blocklet.did,
       children: blockletRender({
         blocklet,
-        blocklets: finalBlockletList
+        blocklets
       })
     }, blocklet.did)), hasNextPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
       item: true,

package/lib/contexts/filter.js

@@ -17,14 +17,14 @@ var _orderBy = _interopRequireDefault(require("lodash/orderBy"));
 
 var _axios = _interopRequireDefault(require("axios"));
 
-var _isArray = _interopRequireDefault(require("lodash/isArray"));
-
 var _utils = require("../libs/utils");
 
 var _locale = _interopRequireDefault(require("../assets/locale"));
 
 var _propTypes2 = require("../libs/prop-types");
 
+var _constant = _interopRequireDefault(require("../libs/constant"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,118 +57,72 @@ function FilterProvider(_ref) {
     baseURL: endpoint
   });
 
+  const finalFilters = (0, _react.useMemo)(() => {
+    return _objectSpread({
+      sortBy: 'popularity',
+      sortDirection: 'desc'
+    }, filters);
+  }, [filters]);
+  const selectedCategory = finalFilters.category;
+  const paginateState = (0, _ahooks.useReactive)({
+    currentPage: _constant.default.currentPage,
+    pageSize: (0, _utils.isMobileScreen)() ? _constant.default.mobilePageSize : _constant.default.pageSize,
+    defaultCurrentPage: _constant.default.defaultCurrentPage
+  });
   const {
-    data: allBlocklets,
+    data: blockletsState,
     error: fetchBlockletsError,
     loading: fetchBlockletsLoading,
-    run: fetchBlocklets
-  } = (0, _ahooks.useRequest)(async () => {
-    const {
-      data
-    } = await storeApi.get('/api/blocklets.json');
+    loadMore: _loadMore,
+    loadingMore
+  } = (0, _ahooks.useRequest)(async d => {
+    var _d$list;
 
-    if (!(0, _isArray.default)(data)) {
-      throw new Error('/api/blocklets.json response is not array');
-    }
+    const params = _objectSpread(_objectSpread({}, finalFilters), {}, {
+      sortBy: _constant.default[finalFilters.sortBy],
+      page: (0, _utils.getCurrentPage)((d === null || d === void 0 ? void 0 : (_d$list = d.list) === null || _d$list === void 0 ? void 0 : _d$list.length) || 0, paginateState.pageSize),
+      pageSize: paginateState.pageSize
+    });
 
+    const {
+      data = {}
+    } = await storeApi.get('/api/v2/blocklets.json', {
+      params
+    });
     return data;
   }, {
-    initialData: [],
-    manual: true
+    initialData: {
+      list: [],
+      total: 0
+    },
+    loadMore: true,
+    isNoMore: d => d ? d.list.length >= d.total : false,
+    // eslint-disable-next-line no-console
+    formatResult: response => {
+      return {
+        list: response === null || response === void 0 ? void 0 : response.dataList,
+        total: response.total
+      };
+    },
+    refreshDeps: [endpoint, filters]
   });
   const {
     data: allCategories,
     error: fetchCategoriesError,
-    loading: fetchCategoriesLoading,
-    run: fetchCategories
+    loading: fetchCategoriesLoading
   } = (0, _ahooks.useRequest)(async () => {
     const {
       data
     } = await storeApi.get('/api/blocklets/categories');
-
-    if (!(0, _isArray.default)(data)) {
-      throw new Error('/api/blocklets/categories response is not array');
-    }
-
     return data;
   }, {
-    initialData: [],
-    manual: true
+    initialData: []
   });
-  const paginateState = (0, _ahooks.useReactive)({
-    currentPage: 1,
-    pageSize: (0, _utils.isMobileScreen)() ? 10 : 18,
-    defaultCurrentPage: 1
-  }); // TODO: 这里如果用 useMemo 包裹，滚动分页会异常
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  const finalFilters = _objectSpread({
-    sortBy: 'popularity',
-    sortDirection: 'desc'
-  }, filters);
-
-  const selectedCategory = finalFilters.category;
-  const hasDeveloperFilter = !!finalFilters.developer;
-  const categoryState = (0, _react.useMemo)(() => {
-    // 当按作者过滤时，需要从所有blocklets中找出属于作者的分类
-    return !hasDeveloperFilter ? {
-      data: allCategories
-    } : (0, _utils.getCategoriesByAuthor)(allBlocklets, finalFilters.developer);
-  }, [hasDeveloperFilter, allCategories, allBlocklets, finalFilters.developer]);
-  const blockletList = (0, _react.useMemo)(() => {
-    var _finalFilters$keyword;
-
-    const sortByName = x => {
-      var _x$title, _x$name;
-
-      return (x === null || x === void 0 ? void 0 : (_x$title = x.title) === null || _x$title === void 0 ? void 0 : _x$title.toLocaleLowerCase()) || (x === null || x === void 0 ? void 0 : (_x$name = x.name) === null || _x$name === void 0 ? void 0 : _x$name.toLocaleLowerCase());
-    }; // 按名称排序
-
-
-    const sortByPopularity = x => x.stats.downloads; // 按下载量排序
-
-
-    const sortByPublish = x => x.lastPublishedAt; // 按发布时间
-
-
-    const sortMap = {
-      nameAsc: sortByName,
-      nameDesc: sortByName,
-      popularity: sortByPopularity,
-      publishAt: sortByPublish
-    };
-    let blocklets = allBlocklets || []; // 按照付费/免费筛选
-
-    blocklets = (0, _utils.filterBlockletByPrice)(blocklets, finalFilters.price); // 按照分类筛选
-
-    blocklets = blocklets.filter(item => {
-      var _item$category;
-
-      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;
-    }); // 按照作者筛选
-
-    blocklets = blocklets.filter(item => finalFilters !== null && finalFilters !== void 0 && finalFilters.developer ? item.owner.did === finalFilters.developer : true);
-    const lowerSearch = (finalFilters === null || finalFilters === void 0 ? void 0 : (_finalFilters$keyword = finalFilters.keyword) === null || _finalFilters$keyword === void 0 ? void 0 : _finalFilters$keyword.toLocaleLowerCase()) || ''; // 按照搜索筛选
-
-    blocklets = blocklets.filter(item => {
-      var _ref2, _item$description, _item$version;
-
-      return ((_ref2 = (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.name)) === null || _ref2 === void 0 ? void 0 : _ref2.toLocaleLowerCase().includes(lowerSearch)) || ((_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.toLocaleLowerCase().includes(lowerSearch)) || (item === null || item === void 0 ? void 0 : (_item$version = item.version) === null || _item$version === void 0 ? void 0 : _item$version.toLocaleLowerCase().includes(lowerSearch));
-    }); // 用户传入的过滤函数
-
-    blocklets = extraFilter(blocklets); // 排序
-
-    return (0, _orderBy.default)(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
-  }, [allBlocklets, finalFilters, selectedCategory, extraFilter]);
-  const finalBlockletList = (0, _react.useMemo)(() => {
-    // 前端分页 currentPage 当前页数  pageSize 每页条数
-    return blockletList.slice((paginateState.defaultCurrentPage - 1) * paginateState.pageSize, paginateState.currentPage * paginateState.pageSize);
-  }, [blockletList, paginateState]);
   const categoryList = (0, _react.useMemo)(() => {
-    const list = categoryState.data || []; // 分类按照名称排序
+    const list = allCategories || []; // 分类按照名称排序
 
     return (0, _orderBy.default)(list, [i => i.name], ['asc']);
-  }, [categoryState.data]);
+  }, [allCategories]);
 
   const translate = (key, data) => {
     if (!_locale.default[locale] || !_locale.default[locale][key]) {
@@ -179,6 +133,12 @@ function FilterProvider(_ref) {
     return (0, _utils.replaceTranslate)(_locale.default[locale][key], data);
   };
 
+  const blockletList = (0, _react.useMemo)(() => {
+    let blocklets = blockletsState.list || []; // 用户传入的过滤函数
+
+    blocklets = extraFilter(blocklets);
+    return blocklets; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [blockletsState, extraFilter]);
   const categoryOptions = (0, _react.useMemo)(() => (0, _utils.getCategoryOptions)(categoryList, locale), [categoryList, locale]);
   const priceOptions = (0, _utils.getPrices)(translate);
   const filterStore = {
@@ -188,10 +148,11 @@ function FilterProvider(_ref) {
     },
     loadings: {
       fetchBlockletsLoading,
-      fetchCategoriesLoading
+      fetchCategoriesLoading,
+      loadingMore
     },
     endpoint,
-    finalBlockletList,
+    blockletList,
     t: translate,
     filters: finalFilters,
     selectedCategory,
@@ -200,7 +161,7 @@ function FilterProvider(_ref) {
     locale,
     categoryOptions,
     priceOptions,
-    hasNextPage: blockletList.length >= paginateState.pageSize * paginateState.currentPage,
+    hasNextPage: blockletsState.list.length < blockletsState.total,
     handleSort: sort => {
       const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
         sortBy: sort,
@@ -236,9 +197,9 @@ function FilterProvider(_ref) {
 
       onFilterChange(changeData);
     },
-    handleDeveloper: developer => {
+    handleDeveloper: owner => {
       const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
-        developer: developer || undefined
+        owner: owner || undefined
       });
 
       onFilterChange(changeData);
@@ -252,13 +213,13 @@ function FilterProvider(_ref) {
     },
     loadMore: () => {
       setTimeout(() => {
-        paginateState.currentPage += 1;
+        _loadMore();
       }, 1000);
     },
     getCategoryLocale: category => {
       if (!category) return null;
       let result = null;
-      const find = categoryState.data.find(item => item.name === category);
+      const find = allCategories.find(item => item._id === category);
 
       if (find) {
         result = find.locales[locale];
@@ -267,28 +228,18 @@ function FilterProvider(_ref) {
       return result;
     },
 
-    get allBlocklets() {
-      return allBlocklets || [];
-    },
-
     get developerName() {
       var _blocklets$find, _blocklets$find$owner;
 
-      const blocklets = allBlocklets || [];
-      return ((_blocklets$find = blocklets.find(blocklet => blocklet.owner.did === finalFilters.developer)) === null || _blocklets$find === void 0 ? void 0 : (_blocklets$find$owner = _blocklets$find.owner) === null || _blocklets$find$owner === void 0 ? void 0 : _blocklets$find$owner.name) || '';
+      const blocklets = blockletList;
+      return ((_blocklets$find = blocklets.find(blocklet => {
+        var _blocklet$owner;
+
+        return (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$owner = blocklet.owner) === null || _blocklet$owner === void 0 ? void 0 : _blocklet$owner.did) === finalFilters.owner;
+      })) === null || _blocklets$find === void 0 ? void 0 : (_blocklets$find$owner = _blocklets$find.owner) === null || _blocklets$find$owner === void 0 ? void 0 : _blocklets$find$owner.name) || '';
     }
 
   };
-  (0, _react.useEffect)(() => {
-    if (!hasDeveloperFilter) {
-      fetchCategories();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [hasDeveloperFilter]);
-  (0, _react.useEffect)(() => {
-    fetchBlocklets();
-    fetchCategories(); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [endpoint]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
     value: filterStore,
     children: children

package/lib/libs/constant.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const constant = {
+  nameAsc: 'title',
+  nameDesc: 'title',
+  popularity: 'stats.downloads',
+  publishAt: 'lastPublishedAt',
+  mobilePageSize: 10,
+  pageSize: 18,
+  defaultCurrentPage: 1
+};
+var _default = constant;
+exports.default = _default;

package/lib/libs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.isMobileScreen = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategoryOptions = exports.getCategoriesByAuthor = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
+exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.isMobileScreen = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCurrentPage = exports.getCategoryOptions = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
@@ -11,12 +11,12 @@ var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const isFreeBlocklet = meta => {
-  if (!meta.payment) {
+const isFreeBlocklet = blocklet => {
+  if (!blocklet.payment) {
     return true;
   }
 
-  const priceList = (meta.payment.price || []).map(x => x.value || 0);
+  const priceList = (blocklet.payment.price || []).map(x => x.value || 0);
   return priceList.every(x => x === 0);
 };
 
@@ -55,30 +55,9 @@ const getCategoryOptions = function getCategoryOptions() {
   let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
   return list.map(item => ({
     name: item.locales[locale],
-    value: item.name
+    value: item._id
   }));
 };
-/**
- * 从 blocklets 中的得到属于作者的 Categories
- * @param {*} list
- * @param {*} developerDid
- * @returns
- */
-
-
-exports.getCategoryOptions = getCategoryOptions;
-
-const getCategoriesByAuthor = function getCategoriesByAuthor() {
-  let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let developerDid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  const filterList = list.filter(item => developerDid ? item.owner.did === developerDid : true);
-  const Categories = filterList.map(item => item.category);
-  const res = new Map();
-  const result = Categories.filter(i => !!i).filter(a => !res.has(a._id) && res.set(a._id, 1));
-  return {
-    data: result
-  };
-};
 /**
  * 根据 是否付费 过滤 blocklet list
  * @param {*} list
@@ -87,7 +66,7 @@ const getCategoriesByAuthor = function getCategoriesByAuthor() {
  */
 
 
-exports.getCategoriesByAuthor = getCategoriesByAuthor;
+exports.getCategoryOptions = getCategoryOptions;
 
 const filterBlockletByPrice = function filterBlockletByPrice() {
   let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -165,4 +144,12 @@ const isMobileScreen = () => {
   return window.innerWidth <= 600;
 };
 
-exports.isMobileScreen = isMobileScreen;
+exports.isMobileScreen = isMobileScreen;
+
+const getCurrentPage = (length, pageSize) => {
+  const page = (length + pageSize) / pageSize;
+  if (page > 1) return page.toFixed();
+  return 1;
+};
+
+exports.getCurrentPage = getCurrentPage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.64",
+  "version": "0.9.0",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -38,15 +38,15 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.63",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.6.2",
-    "ahooks": "^2.10.12",
+    "@arcblock/ux": "^2.2.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@mui/icons-material": "^5.8.4",
+    "ahooks": "^2.10.14",
     "axios": "^0.27.2",
     "flat": "^5.0.2",
     "lodash": "^4.17.21",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
     "react-infinite-scroll-hook": "^4.0.3",
     "styled-components": "5.3.5",
@@ -54,15 +54,15 @@
   },
   "devDependencies": {
     "@arcblock/eslint-config": "0.2.2",
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "@emotion/babel-plugin": "^11.9.2",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/babel-plugin": "^11.10.0",
     "babel-plugin-inline-react-svg": "^2.0.1",
-    "babel-plugin-styled-components": "^1.10.7",
-    "eslint": "^8.16.0",
-    "prettier": "^2.6.2"
+    "babel-plugin-styled-components": "^1.13.3",
+    "eslint": "^8.21.0",
+    "prettier": "^2.7.1"
   },
-  "gitHead": "1f20a221cf88da47a2c8eb93dfd58c08357cdc97"
+  "gitHead": "3292764e5d1ab3a7197491a5dcc17a99192fae5b"
 }

package/src/base.js

@@ -16,7 +16,7 @@ import Search from './components/search';
 function ListBase() {
   const {
     handleDeveloper,
-    finalBlockletList,
+    blockletList,
     filters,
     developerName,
     handleSort,
@@ -37,49 +37,51 @@ function ListBase() {
         <Aside />
       </Hidden>
       <StyledMin>
-        <Box className="filter-bar" display="flex" alignItems="center">
-          <StyledSearch className="search-container" placeholder={t('common.searchStore')} />
-          <Box mt={0} ml="16px" className="filter-container">
-            <Hidden mdUp>
-              {/* 小屏幕下类别 */}
-              <FilterIcon />
-            </Hidden>
-            {/* 排序选择器 */}
-            <CustomSelect
-              value={filters.sortBy}
-              options={sortOptions}
-              title={sortLocale}
-              icon={<SortIcon />}
-              onChange={(v) => {
-                handleSort(v);
+        <FilterContainer>
+          <Box className="filter-bar" display="flex" alignItems="center">
+            <StyledSearch className="search-container" placeholder={t('common.searchStore')} />
+            <Box mt={0} ml="16px" className="filter-container">
+              <Hidden mdUp>
+                {/* 小屏幕下类别 */}
+                <FilterIcon />
+              </Hidden>
+              {/* 排序选择器 */}
+              <CustomSelect
+                value={filters.sortBy}
+                options={sortOptions}
+                title={sortLocale}
+                icon={<SortIcon />}
+                onChange={(v) => {
+                  handleSort(v);
+                }}
+              />
+            </Box>
+          </Box>
+          <Box display="flex" flexWrap="wrap" alignItems="center" mb="16px">
+            <CustomChip
+              label={developerName}
+              icon={<FaceIcon />}
+              onDelete={() => {
+                handleDeveloper(null);
+              }}
+            />
+            <CustomChip
+              label={categoryLocale}
+              onDelete={() => {
+                handleCategory(null);
+              }}
+            />
+            <CustomChip
+              label={priceLocale}
+              onDelete={() => {
+                handlePrice(null);
               }}
             />
           </Box>
-        </Box>
-        <Box display="flex" flexWrap="wrap" alignItems="center" mb="16px">
-          <CustomChip
-            label={developerName}
-            icon={<FaceIcon />}
-            onDelete={() => {
-              handleDeveloper(null);
-            }}
-          />
-          <CustomChip
-            label={categoryLocale}
-            onDelete={() => {
-              handleCategory(null);
-            }}
-          />
-          <CustomChip
-            label={priceLocale}
-            onDelete={() => {
-              handlePrice(null);
-            }}
-          />
-        </Box>
+        </FilterContainer>
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <div style={{ position: 'relative', flex: 1, overflow: 'auto' }}>
-            <BlockletList blocklets={finalBlockletList} />
+            <BlockletList blocklets={blockletList} />
           </div>
         </ErrorBoundary>
       </StyledMin>
@@ -137,4 +139,11 @@ const StyledSearch = styled(Search)`
   background-color: ${(props) => props.theme.palette.grey[50]};
 `;
 
+const FilterContainer = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  background-color: white;
+`;
+
 export default ListBase;

package/src/components/aside.js

@@ -30,7 +30,10 @@ const StyledAside = styled.aside`
   width: 220px;
   margin-right: ${(props) => props.theme.spacing(2)};
   height: 100%;
+  position: sticky;
+  top: 0;
   overflow-y: auto;
+  z-index: 999;
 `;
 
 Aside.propTypes = {};

package/src/components/filter/custom-chip.js

@@ -15,7 +15,7 @@ function FilterChip({ label, icon, onDelete, ...containerProps }) {
   if (!label) return null;
   return (
     <StyleDiv {...containerProps}>
-      <Chip data-cy="filter-tag" icon={icon} label={label} onDelete={onDelete} />
+      <Chip color="primary" data-cy="filter-tag" icon={icon} label={label} onDelete={onDelete} />
     </StyleDiv>
   );
 }

package/src/components/list/index.js

@@ -17,7 +17,6 @@ export default function BlockletList({ blocklets, ...rest }) {
     errors,
     loadings,
     selectedCategory,
-    finalBlockletList,
     getCategoryLocale,
     filters,
     t,
@@ -28,8 +27,9 @@ export default function BlockletList({ blocklets, ...rest }) {
 
   const showFilterTip = !!selectedCategory || !!filters.price;
 
+  // eslint-disable-next-line no-unused-vars
   const [sentryRef] = useInfiniteScroll({
-    loading: loadings.fetchBlockletsLoading,
+    loading: loadings.fetchBlockletsLoading || loadings.loadingMore,
     hasNextPage,
     onLoadMore: loadMore,
   });
@@ -48,7 +48,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </Box>
     );
   }
-  if (filters.keyword && showFilterTip && finalBlockletList.length === 0) {
+  if (filters.keyword && showFilterTip && blocklets.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
@@ -60,7 +60,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </CustomEmpty>
     );
   }
-  if (filters.keyword && finalBlockletList.length === 0) {
+  if (filters.keyword && blocklets.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
@@ -72,7 +72,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </CustomEmpty>
     );
   }
-  if (showFilterTip && finalBlockletList.length === 0) {
+  if (showFilterTip && blocklets.length === 0) {
     const categoryLocale = getCategoryLocale(selectedCategory);
     return (
       <CustomEmpty>
@@ -89,7 +89,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </CustomEmpty>
     );
   }
-  if (finalBlockletList.length === 0) {
+  if (blocklets.length === 0) {
     return (
       <CustomEmpty>
         <NoResults />
@@ -101,7 +101,7 @@ export default function BlockletList({ blocklets, ...rest }) {
     <StyledGrid container {...rest}>
       {blocklets.map((blocklet) => (
         <StyledGridItem item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
-          {blockletRender({ blocklet, blocklets: finalBlockletList })}
+          {blockletRender({ blocklet, blocklets })}
         </StyledGridItem>
       ))}
       {hasNextPage && (

package/src/contexts/filter.js

@@ -1,19 +1,12 @@
-import { useContext, createContext, useMemo, useEffect } from 'react';
+import { useContext, createContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useRequest, useReactive } from 'ahooks';
 import orderBy from 'lodash/orderBy';
 import axios from 'axios';
-import isArray from 'lodash/isArray';
-import {
-  getCategoriesByAuthor,
-  filterBlockletByPrice,
-  replaceTranslate,
-  getPrices,
-  getCategoryOptions,
-  isMobileScreen,
-} from '../libs/utils';
+import { replaceTranslate, getPrices, getCategoryOptions, isMobileScreen, getCurrentPage } from '../libs/utils';
 import translations from '../assets/locale';
 import { propTypes, defaultProps } from '../libs/prop-types';
+import constant from '../libs/constant';
 
 const Filter = createContext({});
 const { Provider, Consumer } = Filter;
@@ -22,97 +15,65 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
   const storeApi = axios.create({
     baseURL: endpoint,
   });
+
+  const finalFilters = useMemo(() => {
+    return { sortBy: 'popularity', sortDirection: 'desc', ...filters };
+  }, [filters]);
+
+  const selectedCategory = finalFilters.category;
+
+  const paginateState = useReactive({
+    currentPage: constant.currentPage,
+    pageSize: isMobileScreen() ? constant.mobilePageSize : constant.pageSize,
+    defaultCurrentPage: constant.defaultCurrentPage,
+  });
+
   const {
-    data: allBlocklets,
+    data: blockletsState,
     error: fetchBlockletsError,
     loading: fetchBlockletsLoading,
-    run: fetchBlocklets,
+    loadMore,
+    loadingMore,
   } = useRequest(
-    async () => {
-      const { data } = await storeApi.get('/api/blocklets.json');
-      if (!isArray(data)) {
-        throw new Error('/api/blocklets.json response is not array');
-      }
+    async (d) => {
+      const params = {
+        ...finalFilters,
+        sortBy: constant[finalFilters.sortBy],
+        page: getCurrentPage(d?.list?.length || 0, paginateState.pageSize),
+        pageSize: paginateState.pageSize,
+      };
+      const { data = {} } = await storeApi.get('/api/v2/blocklets.json', { params });
       return data;
     },
-    { initialData: [], manual: true }
+    {
+      initialData: { list: [], total: 0 },
+      loadMore: true,
+      isNoMore: (d) => (d ? d.list.length >= d.total : false),
+      // eslint-disable-next-line no-console
+      formatResult: (response) => {
+        return { list: response?.dataList, total: response.total };
+      },
+      refreshDeps: [endpoint, filters],
+    }
   );
 
   const {
     data: allCategories,
     error: fetchCategoriesError,
     loading: fetchCategoriesLoading,
-    run: fetchCategories,
   } = useRequest(
     async () => {
       const { data } = await storeApi.get('/api/blocklets/categories');
-      if (!isArray(data)) {
-        throw new Error('/api/blocklets/categories response is not array');
-      }
       return data;
     },
-    { initialData: [], manual: true }
+    { initialData: [] }
   );
 
-  const paginateState = useReactive({ currentPage: 1, pageSize: isMobileScreen() ? 10 : 18, defaultCurrentPage: 1 });
-  // TODO: 这里如果用 useMemo 包裹，滚动分页会异常
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const finalFilters = { sortBy: 'popularity', sortDirection: 'desc', ...filters };
-
-  const selectedCategory = finalFilters.category;
-  const hasDeveloperFilter = !!finalFilters.developer;
-  const categoryState = useMemo(() => {
-    // 当按作者过滤时，需要从所有blocklets中找出属于作者的分类
-    return !hasDeveloperFilter ? { data: allCategories } : getCategoriesByAuthor(allBlocklets, finalFilters.developer);
-  }, [hasDeveloperFilter, allCategories, allBlocklets, finalFilters.developer]);
-
-  const blockletList = useMemo(() => {
-    const sortByName = (x) => x?.title?.toLocaleLowerCase() || x?.name?.toLocaleLowerCase(); // 按名称排序
-    const sortByPopularity = (x) => x.stats.downloads; // 按下载量排序
-    const sortByPublish = (x) => x.lastPublishedAt; // 按发布时间
-    const sortMap = {
-      nameAsc: sortByName,
-      nameDesc: sortByName,
-      popularity: sortByPopularity,
-      publishAt: sortByPublish,
-    };
-    let blocklets = allBlocklets || [];
-    // 按照付费/免费筛选
-    blocklets = filterBlockletByPrice(blocklets, finalFilters.price);
-    // 按照分类筛选
-    blocklets = blocklets.filter((item) => (selectedCategory ? item?.category?.name === selectedCategory : true));
-    // 按照作者筛选
-    blocklets = blocklets.filter((item) =>
-      finalFilters?.developer ? item.owner.did === finalFilters.developer : true
-    );
-    const lowerSearch = finalFilters?.keyword?.toLocaleLowerCase() || '';
-    // 按照搜索筛选
-    blocklets = blocklets.filter((item) => {
-      return (
-        (item?.title || item?.name)?.toLocaleLowerCase().includes(lowerSearch) ||
-        item.description?.toLocaleLowerCase().includes(lowerSearch) ||
-        item?.version?.toLocaleLowerCase().includes(lowerSearch)
-      );
-    });
-    // 用户传入的过滤函数
-    blocklets = extraFilter(blocklets);
-    // 排序
-    return orderBy(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
-  }, [allBlocklets, finalFilters, selectedCategory, extraFilter]);
-
-  const finalBlockletList = useMemo(() => {
-    // 前端分页 currentPage 当前页数  pageSize 每页条数
-    return blockletList.slice(
-      (paginateState.defaultCurrentPage - 1) * paginateState.pageSize,
-      paginateState.currentPage * paginateState.pageSize
-    );
-  }, [blockletList, paginateState]);
-
   const categoryList = useMemo(() => {
-    const list = categoryState.data || [];
+    const list = allCategories || [];
     // 分类按照名称排序
     return orderBy(list, [(i) => i.name], ['asc']);
-  }, [categoryState.data]);
+  }, [allCategories]);
 
   const translate = (key, data) => {
     if (!translations[locale] || !translations[locale][key]) {
@@ -122,13 +83,21 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
 
     return replaceTranslate(translations[locale][key], data);
   };
+  const blockletList = useMemo(() => {
+    let blocklets = blockletsState.list || [];
+    // 用户传入的过滤函数
+    blocklets = extraFilter(blocklets);
+    return blocklets;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [blockletsState, extraFilter]);
+
   const categoryOptions = useMemo(() => getCategoryOptions(categoryList, locale), [categoryList, locale]);
   const priceOptions = getPrices(translate);
   const filterStore = {
     errors: { fetchBlockletsError, fetchCategoriesError },
-    loadings: { fetchBlockletsLoading, fetchCategoriesLoading },
+    loadings: { fetchBlockletsLoading, fetchCategoriesLoading, loadingMore },
     endpoint,
-    finalBlockletList,
+    blockletList,
     t: translate,
     filters: finalFilters,
     selectedCategory,
@@ -137,7 +106,7 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     locale,
     categoryOptions,
     priceOptions,
-    hasNextPage: blockletList.length >= paginateState.pageSize * paginateState.currentPage,
+    hasNextPage: blockletsState.list.length < blockletsState.total,
     handleSort: (sort) => {
       const changeData = {
         ...finalFilters,
@@ -165,8 +134,8 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
       const changeData = { ...finalFilters, category: finalCategory };
       onFilterChange(changeData);
     },
-    handleDeveloper: (developer) => {
-      const changeData = { ...finalFilters, developer: developer || undefined };
+    handleDeveloper: (owner) => {
+      const changeData = { ...finalFilters, owner: owner || undefined };
       onFilterChange(changeData);
     },
     handlePage: (page) => {
@@ -175,40 +144,24 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     },
     loadMore: () => {
       setTimeout(() => {
-        paginateState.currentPage += 1;
+        loadMore();
       }, 1000);
     },
     getCategoryLocale: (category) => {
       if (!category) return null;
       let result = null;
-      const find = categoryState.data.find((item) => item.name === category);
+      const find = allCategories.find((item) => item._id === category);
       if (find) {
         result = find.locales[locale];
       }
       return result;
     },
-    get allBlocklets() {
-      return allBlocklets || [];
-    },
     get developerName() {
-      const blocklets = allBlocklets || [];
-      return blocklets.find((blocklet) => blocklet.owner.did === finalFilters.developer)?.owner?.name || '';
+      const blocklets = blockletList;
+      return blocklets.find((blocklet) => blocklet?.owner?.did === finalFilters.owner)?.owner?.name || '';
     },
   };
 
-  useEffect(() => {
-    if (!hasDeveloperFilter) {
-      fetchCategories();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasDeveloperFilter]);
-
-  useEffect(() => {
-    fetchBlocklets();
-    fetchCategories();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [endpoint]);
-
   return <Provider value={filterStore}>{children}</Provider>;
 }
 

package/src/libs/constant.js

@@ -0,0 +1,11 @@
+const constant = {
+  nameAsc: 'title',
+  nameDesc: 'title',
+  popularity: 'stats.downloads',
+  publishAt: 'lastPublishedAt',
+  mobilePageSize: 10,
+  pageSize: 18,
+  defaultCurrentPage: 1,
+};
+
+export default constant;

package/src/libs/utils.js

@@ -1,11 +1,11 @@
 import joinURL from 'url-join';
 import cloneDeep from 'lodash/cloneDeep';
 
-const isFreeBlocklet = (meta) => {
-  if (!meta.payment) {
+const isFreeBlocklet = (blocklet) => {
+  if (!blocklet.payment) {
     return true;
   }
-  const priceList = (meta.payment.price || []).map((x) => x.value || 0);
+  const priceList = (blocklet.payment.price || []).map((x) => x.value || 0);
   return priceList.every((x) => x === 0);
 };
 
@@ -36,21 +36,9 @@ const getPrices = (t) => {
   ];
 };
 const getCategoryOptions = (list = [], locale = 'en') => {
-  return list.map((item) => ({ name: item.locales[locale], value: item.name }));
-};
-/**
- * 从 blocklets 中的得到属于作者的 Categories
- * @param {*} list
- * @param {*} developerDid
- * @returns
- */
-const getCategoriesByAuthor = (list = [], developerDid = null) => {
-  const filterList = list.filter((item) => (developerDid ? item.owner.did === developerDid : true));
-  const Categories = filterList.map((item) => item.category);
-  const res = new Map();
-  const result = Categories.filter((i) => !!i).filter((a) => !res.has(a._id) && res.set(a._id, 1));
-  return { data: result };
+  return list.map((item) => ({ name: item.locales[locale], value: item._id }));
 };
+
 /**
  * 根据 是否付费 过滤 blocklet list
  * @param {*} list
@@ -110,10 +98,15 @@ const isMobileScreen = () => {
   return window.innerWidth <= 600;
 };
 
+const getCurrentPage = (length, pageSize) => {
+  const page = (length + pageSize) / pageSize;
+  if (page > 1) return page.toFixed();
+  return 1;
+};
+
 export {
   getSortOptions,
   getPrices,
-  getCategoriesByAuthor,
   filterBlockletByPrice,
   getStoreDetail,
   formatLogoPath,
@@ -123,4 +116,5 @@ export {
   urlStringify,
   getCategoryOptions,
   isMobileScreen,
+  getCurrentPage,
 };