@blocklet/list 0.8.62 → 0.8.65

package/lib/base.js

@@ -40,7 +40,7 @@ function ListBase() {
 
   const {
     handleDeveloper,
-    finalBlockletList,
+    blockletList,
     filters,
     developerName,
     handleSort,
@@ -117,7 +117,7 @@ function ListBase() {
             overflow: 'auto'
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
-            blocklets: finalBlockletList
+            blocklets: blockletList
           })
         })
       })]

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.62",
+  "version": "0.8.65",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.57",
+    "@arcblock/ux": "^2.1.71",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -64,5 +64,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "2554f4332e15ac769e6d12a35a0e7ab8e0a7c7ab"
+  "gitHead": "3ddb0217a07753400bdcfefd10c76f76e69a3b05"
 }

package/src/base.js

@@ -16,7 +16,7 @@ import Search from './components/search';
 function ListBase() {
   const {
     handleDeveloper,
-    finalBlockletList,
+    blockletList,
     filters,
     developerName,
     handleSort,
@@ -79,7 +79,7 @@ function ListBase() {
         </Box>
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <div style={{ position: 'relative', flex: 1, overflow: 'auto' }}>
-            <BlockletList blocklets={finalBlockletList} />
+            <BlockletList blocklets={blockletList} />
           </div>
         </ErrorBoundary>
       </StyledMin>

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,
 };