@blocklet/list 0.8.33 → 0.8.36

package/lib/base.js

@@ -13,6 +13,10 @@ var _material = require("@mui/material");
 
 var _Face = _interopRequireDefault(require("@mui/icons-material/Face"));
 
+var _reactErrorBoundary = require("react-error-boundary");
+
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+
 var _filter = require("./contexts/filter");
 
 var _customSelect = _interopRequireDefault(require("./components/custom-select"));
@@ -36,7 +40,7 @@ function ListBase() {
 
   const {
     handleDeveloper,
-    blockletList,
+    finalBlockletList,
     filters,
     developerName,
     handleSort,
@@ -104,8 +108,11 @@ function ListBase() {
             handlePrice(null);
           }
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
-        blocklets: blockletList
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+        FallbackComponent: _ErrorBoundary.ErrorFallback,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
+          blocklets: finalBlockletList
+        })
       })]
     })]
   });

package/lib/components/aside.js

@@ -33,7 +33,7 @@ function Aside() {
         value: filters.price,
         onChange: handlePrice
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), categoryOptions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         marginTop: '16px'
       },

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, {
+      "data-cy": "filter-tag",
       icon: icon,
       label: label,
       onDelete: onDelete

package/lib/components/filter/icon.js

@@ -68,7 +68,7 @@ function FilterIcon() {
         onChange: v => {
           handelChange('price', v);
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), categoryOptions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           marginTop: '16px'
         },

package/lib/components/list/index.js

@@ -5,26 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = BlockletList;
 
+var _react = require("react");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 
-var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
-
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
+var _reactInfiniteScrollHook = _interopRequireDefault(require("react-infinite-scroll-hook"));
+
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+
 var _empty = require("./empty");
 
 var _filter = require("../../contexts/filter");
 
-var _utils = require("../../libs/utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["blocklets"];
@@ -52,20 +54,25 @@ function BlockletList(_ref) {
     errors,
     loadings,
     selectedCategory,
-    blockletList,
+    finalBlockletList,
     getCategoryLocale,
     filters,
-    t
+    t,
+    hasNextPage,
+    loadMore,
+    endpoint
   } = (0, _filter.useFilterContext)();
   const showFilterTip = !!selectedCategory || !!filters.price;
+  const [sentryRef] = (0, _reactInfiniteScrollHook.default)({
+    loading: loadings.fetchBlockletsLoading,
+    hasNextPage,
+    onLoadMore: loadMore,
+    rootMargin: '0px 0px 400px 0px'
+  });
 
   if (errors.fetchBlockletsError) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-      type: "error",
-      variant: "icon",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: (0, _utils.formatError)(errors.fetchBlockletsError)
-      })
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorBoundary.ErrorFallback, {
+      error: new Error("Failed to fetch blocklets from ".concat(endpoint, ": ").concat(errors.fetchBlockletsError.message))
     });
   }
 
@@ -78,7 +85,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (filters.keyword && showFilterTip && blockletList.length === 0) {
+  if (filters.keyword && showFilterTip && finalBlockletList.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
         primaryStart: t('blocklet.noBlockletPart1'),
@@ -91,7 +98,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (filters.keyword && blockletList.length === 0) {
+  if (filters.keyword && finalBlockletList.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
         primaryStart: t('blocklet.noBlockletPart1'),
@@ -103,7 +110,7 @@ function BlockletList(_ref) {
     });
   }
 
-  if (showFilterTip && blockletList.length === 0) {
+  if (showFilterTip && finalBlockletList.length === 0) {
     const categoryLocale = getCategoryLocale(selectedCategory);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CustomEmpty, {
       children: [categoryLocale ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.EmptyTitle, {
@@ -116,16 +123,16 @@ function BlockletList(_ref) {
     });
   }
 
-  if (blockletList.length === 0) {
+  if (finalBlockletList.length === 0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomEmpty, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.NoResults, {})
     });
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGrid, _objectSpread(_objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledGrid, _objectSpread(_objectSpread({
     container: true
   }, rest), {}, {
-    children: blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
+    children: [blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
       item: true,
       lg: 4,
       md: 6,
@@ -134,9 +141,20 @@ function BlockletList(_ref) {
       "data-blocklet-did": blocklet.did,
       children: blockletRender({
         blocklet,
-        blocklets: blockletList
+        blocklets: finalBlockletList
+      })
+    }, blocklet.did)), hasNextPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
+      item: true,
+      md: 12,
+      sm: 12,
+      xs: 12,
+      ref: sentryRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        display: "flex",
+        justifyContent: "center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
       })
-    }, blocklet.did))
+    })]
   }));
 }
 
@@ -148,10 +166,10 @@ const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGrid",
   componentId: "sc-1guvpon-0"
 })(["&.MuiGrid-root{width:auto;margin:0 -16px;}"]);
-const StyledGridItem = (0, _styledComponents.default)(_Grid.default).withConfig({
+const StyledGridItem = /*#__PURE__*/(0, _react.memo)((0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGridItem",
   componentId: "sc-1guvpon-1"
-})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2));
+})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2)));
 const CustomEmpty = (0, _styledComponents.default)(_Empty.default).withConfig({
   displayName: "list__CustomEmpty",
   componentId: "sc-1guvpon-2"

package/lib/contexts/filter.js

@@ -17,6 +17,8 @@ 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"));
@@ -44,7 +46,6 @@ function FilterProvider(_ref) {
   let {
     filters,
     children,
-    baseUrl,
     endpoint,
     locale,
     blockletRender,
@@ -63,9 +64,14 @@ function FilterProvider(_ref) {
     run: fetchBlocklets
   } = (0, _ahooks.useRequest)(async () => {
     const {
-      data: list
+      data
     } = await storeApi.get('/api/blocklets.json');
-    return list;
+
+    if (!(0, _isArray.default)(data)) {
+      throw new Error('/api/blocklets.json response is not array');
+    }
+
+    return data;
   }, {
     initialData: [],
     manual: true
@@ -77,13 +83,23 @@ function FilterProvider(_ref) {
     run: fetchCategories
   } = (0, _ahooks.useRequest)(async () => {
     const {
-      data: list
+      data
     } = await storeApi.get('/api/blocklets/categories');
-    return list;
+
+    if (!(0, _isArray.default)(data)) {
+      throw new Error('/api/blocklets/categories response is not array');
+    }
+
+    return data;
   }, {
     initialData: [],
     manual: true
   });
+  const paginateState = (0, _ahooks.useReactive)({
+    currentPage: 1,
+    pageSize: (0, _utils.isMobileScreen)() ? 10 : 18,
+    defaultCurrentPage: 1
+  });
 
   const finalFilters = _objectSpread({
     sortBy: 'popularity',
@@ -93,10 +109,11 @@ function FilterProvider(_ref) {
   const selectedCategory = finalFilters.category;
   const hasDeveloperFilter = !!finalFilters.developer;
   const categoryState = (0, _react.useMemo)(() => {
+    // 当按作者过滤时，需要从所有blocklets中找出属于作者的分类
     return !hasDeveloperFilter ? {
       data: allCategories
-    } : (0, _utils.getCategories)(allBlocklets, finalFilters.developer);
-  }, [hasDeveloperFilter, allCategories]);
+    } : (0, _utils.getCategoriesByAuthor)(allBlocklets, finalFilters.developer);
+  }, [hasDeveloperFilter, allCategories, allBlocklets]);
   const blockletList = (0, _react.useMemo)(() => {
     var _finalFilters$keyword;
 
@@ -142,6 +159,10 @@ function FilterProvider(_ref) {
 
     return (0, _orderBy.default)(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
   }, [allBlocklets, finalFilters]);
+  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 || []; // 分类按照名称排序
 
@@ -169,16 +190,16 @@ function FilterProvider(_ref) {
       fetchCategoriesLoading
     },
     endpoint,
-    blockletList,
+    finalBlockletList,
     t: translate,
     filters: finalFilters,
     selectedCategory,
     categoryList,
-    baseUrl,
     blockletRender,
     locale,
     categoryOptions,
     priceOptions,
+    hasNextPage: blockletList.length >= paginateState.pageSize * paginateState.currentPage,
     handleSort: sort => {
       const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
         sortBy: sort,
@@ -221,6 +242,18 @@ function FilterProvider(_ref) {
 
       onFilterChange(changeData);
     },
+    handlePage: page => {
+      const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
+        currentPage: page
+      });
+
+      onFilterChange(changeData);
+    },
+    loadMore: () => {
+      setTimeout(() => {
+        paginateState.currentPage += 1;
+      }, 1000);
+    },
     getCategoryLocale: category => {
       if (!category) return null;
       let result = null;
@@ -233,10 +266,15 @@ function FilterProvider(_ref) {
       return result;
     },
 
+    get allBlocklets() {
+      return allBlocklets || [];
+    },
+
     get developerName() {
-      var _allBlocklets$find, _allBlocklets$find$ow;
+      var _blocklets$find, _blocklets$find$owner;
 
-      return ((_allBlocklets$find = allBlocklets.find(blocklet => blocklet.owner.did === finalFilters.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) || '';
+      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) || '';
     }
 
   };

package/lib/libs/prop-types.js

@@ -22,12 +22,10 @@ const propTypes = {
   endpoint: _propTypes.default.string.isRequired,
   blockletRender: _propTypes.default.func.isRequired,
   onFilterChange: _propTypes.default.func,
-  baseUrl: _propTypes.default.string,
   locale: _propTypes.default.oneOf(['zh', 'en'])
 };
 exports.propTypes = propTypes;
 const defaultProps = {
-  baseUrl: null,
   locale: 'zh',
   filters: {},
   onFilterChange: () => {},

package/lib/libs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategoryOptions = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
+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;
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
@@ -59,7 +59,7 @@ const getCategoryOptions = function getCategoryOptions() {
   }));
 };
 /**
- * 从开发者所属 blocklets 中的得到 Categories
+ * 从 blocklets 中的得到属于作者的 Categories
  * @param {*} list
  * @param {*} developerDid
  * @returns
@@ -68,7 +68,9 @@ const getCategoryOptions = function getCategoryOptions() {
 
 exports.getCategoryOptions = getCategoryOptions;
 
-const getCategories = (list, developerDid) => {
+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();
@@ -85,7 +87,7 @@ const getCategories = (list, developerDid) => {
  */
 
 
-exports.getCategories = getCategories;
+exports.getCategoriesByAuthor = getCategoriesByAuthor;
 
 const filterBlockletByPrice = function filterBlockletByPrice() {
   let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -157,4 +159,10 @@ const urlStringify = obj => {
   return new URLSearchParams(removeUndefined(obj)).toString();
 };
 
-exports.urlStringify = urlStringify;
+exports.urlStringify = urlStringify;
+
+const isMobileScreen = () => {
+  return window.innerWidth <= 600;
+};
+
+exports.isMobileScreen = isMobileScreen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.33",
+  "version": "0.8.36",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.17",
+    "@arcblock/ux": "^2.1.23",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -47,6 +47,8 @@
     "flat": "^5.0.2",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
+    "react-error-boundary": "^3.1.4",
+    "react-infinite-scroll-hook": "^4.0.3",
     "styled-components": "5.3.5",
     "url-join": "^4.0.1"
   },
@@ -62,5 +64,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "5e7c02cb3dfd0edff3f8290509f754b10bbc61bc"
+  "gitHead": "d7102af63503db57cb89f856a50fd83e03d1dbdb"
 }

package/src/base.js

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import SortIcon from '@mui/icons-material/Sort';
 import { Box, Hidden } from '@mui/material';
 import FaceIcon from '@mui/icons-material/Face';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 
 import { useFilterContext } from './contexts/filter';
 import CustomSelect from './components/custom-select';
@@ -14,7 +16,7 @@ import Search from './components/search';
 function ListBase() {
   const {
     handleDeveloper,
-    blockletList,
+    finalBlockletList,
     filters,
     developerName,
     handleSort,
@@ -76,7 +78,9 @@ function ListBase() {
             }}
           />
         </Box>
-        <BlockletList blocklets={blockletList} />
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <BlockletList blocklets={finalBlockletList} />
+        </ErrorBoundary>
       </StyledMin>
     </Box>
   );

package/src/components/aside.js

@@ -12,14 +12,16 @@ function Aside() {
       <div>
         <FilterGroup title={t('common.price')} options={priceOptions} value={filters.price} onChange={handlePrice} />
       </div>
-      <div style={{ marginTop: '16px' }}>
-        <FilterGroup
-          title={t('common.category')}
-          options={categoryOptions}
-          value={selectedCategory}
-          onChange={handleCategory}
-        />
-      </div>
+      {categoryOptions.length > 0 && (
+        <div style={{ marginTop: '16px' }}>
+          <FilterGroup
+            title={t('common.category')}
+            options={categoryOptions}
+            value={selectedCategory}
+            onChange={handleCategory}
+          />
+        </div>
+      )}
     </StyledAside>
   );
 }

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 icon={icon} label={label} onDelete={onDelete} />
+      <Chip data-cy="filter-tag" icon={icon} label={label} onDelete={onDelete} />
     </StyleDiv>
   );
 }

package/src/components/filter/icon.js

@@ -36,16 +36,18 @@ function FilterIcon() {
             handelChange('price', v);
           }}
         />
-        <div style={{ marginTop: '16px' }}>
-          <FilterGroup
-            title={t('common.category')}
-            options={categoryOptions}
-            value={selectedCategory}
-            onChange={(v) => {
-              handelChange('category', v);
-            }}
-          />
-        </div>
+        {categoryOptions.length > 0 && (
+          <div style={{ marginTop: '16px' }}>
+            <FilterGroup
+              title={t('common.category')}
+              options={categoryOptions}
+              value={selectedCategory}
+              onChange={(v) => {
+                handelChange('category', v);
+              }}
+            />
+          </div>
+        )}
       </Dialog>
     </StyledDiv>
   );

package/src/components/list/index.js

@@ -1,26 +1,45 @@
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Empty from '@arcblock/ux/lib/Empty';
-import Alert from '@arcblock/ux/lib/Alert';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import CircularProgress from '@mui/material/CircularProgress';
+import useInfiniteScroll from 'react-infinite-scroll-hook';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 
 import { NoResults, EmptyTitle, NoResultsTips } from './empty';
 import { useFilterContext } from '../../contexts/filter';
-import { formatError } from '../../libs/utils';
 
 export default function BlockletList({ blocklets, ...rest }) {
-  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, filters, t } =
-    useFilterContext();
+  const {
+    blockletRender,
+    errors,
+    loadings,
+    selectedCategory,
+    finalBlockletList,
+    getCategoryLocale,
+    filters,
+    t,
+    hasNextPage,
+    loadMore,
+    endpoint,
+  } = useFilterContext();
 
   const showFilterTip = !!selectedCategory || !!filters.price;
 
+  const [sentryRef] = useInfiniteScroll({
+    loading: loadings.fetchBlockletsLoading,
+    hasNextPage,
+    onLoadMore: loadMore,
+    rootMargin: '0px 0px 400px 0px',
+  });
+
   if (errors.fetchBlockletsError) {
     return (
-      <Alert type="error" variant="icon">
-        <div>{formatError(errors.fetchBlockletsError)}</div>
-      </Alert>
+      <ErrorFallback
+        error={new Error(`Failed to fetch blocklets from ${endpoint}: ${errors.fetchBlockletsError.message}`)}
+      />
     );
   }
   if (loadings.fetchBlockletsLoading) {
@@ -30,7 +49,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </Box>
     );
   }
-  if (filters.keyword && showFilterTip && blockletList.length === 0) {
+  if (filters.keyword && showFilterTip && finalBlockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
@@ -42,7 +61,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </CustomEmpty>
     );
   }
-  if (filters.keyword && blockletList.length === 0) {
+  if (filters.keyword && finalBlockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
@@ -54,7 +73,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </CustomEmpty>
     );
   }
-  if (showFilterTip && blockletList.length === 0) {
+  if (showFilterTip && finalBlockletList.length === 0) {
     const categoryLocale = getCategoryLocale(selectedCategory);
     return (
       <CustomEmpty>
@@ -71,7 +90,7 @@ export default function BlockletList({ blocklets, ...rest }) {
       </CustomEmpty>
     );
   }
-  if (blockletList.length === 0) {
+  if (finalBlockletList.length === 0) {
     return (
       <CustomEmpty>
         <NoResults />
@@ -83,9 +102,16 @@ 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: blockletList })}
+          {blockletRender({ blocklet, blocklets: finalBlockletList })}
         </StyledGridItem>
       ))}
+      {hasNextPage && (
+        <StyledGridItem item md={12} sm={12} xs={12} ref={sentryRef}>
+          <Box display="flex" justifyContent="center">
+            <CircularProgress />
+          </Box>
+        </StyledGridItem>
+      )}
     </StyledGrid>
   );
 }
@@ -103,7 +129,7 @@ const StyledGrid = styled(Grid)`
   }
 `;
 
-const StyledGridItem = styled(Grid)`
+const StyledGridItem = memo(styled(Grid)`
   @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
@@ -114,7 +140,7 @@ const StyledGridItem = styled(Grid)`
       margin-bottom: ${(props) => props.theme.spacing(2)};
     }
   }
-`;
+`);
 const CustomEmpty = styled(Empty)`
   text-align: center;
   .primary {

package/src/contexts/filter.js

@@ -1,18 +1,24 @@
 import { useContext, createContext, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useRequest } from 'ahooks';
+import { useRequest, useReactive } from 'ahooks';
 import orderBy from 'lodash/orderBy';
 import axios from 'axios';
-// import joinUrl from 'url-join';
-
-import { getCategories, filterBlockletByPrice, replaceTranslate, getPrices, getCategoryOptions } from '../libs/utils';
+import isArray from 'lodash/isArray';
+import {
+  getCategoriesByAuthor,
+  filterBlockletByPrice,
+  replaceTranslate,
+  getPrices,
+  getCategoryOptions,
+  isMobileScreen,
+} from '../libs/utils';
 import translations from '../assets/locale';
 import { propTypes, defaultProps } from '../libs/prop-types';
 
 const Filter = createContext({});
 const { Provider, Consumer } = Filter;
 
-function FilterProvider({ filters, children, baseUrl, endpoint, locale, blockletRender, onFilterChange, extraFilter }) {
+function FilterProvider({ filters, children, endpoint, locale, blockletRender, onFilterChange, extraFilter }) {
   const storeApi = axios.create({
     baseURL: endpoint,
   });
@@ -23,8 +29,11 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     run: fetchBlocklets,
   } = useRequest(
     async () => {
-      const { data: list } = await storeApi.get('/api/blocklets.json');
-      return list;
+      const { data } = await storeApi.get('/api/blocklets.json');
+      if (!isArray(data)) {
+        throw new Error('/api/blocklets.json response is not array');
+      }
+      return data;
     },
     { initialData: [], manual: true }
   );
@@ -36,18 +45,23 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     run: fetchCategories,
   } = useRequest(
     async () => {
-      const { data: list } = await storeApi.get('/api/blocklets/categories');
-      return list;
+      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 }
   );
 
+  const paginateState = useReactive({ currentPage: 1, pageSize: isMobileScreen() ? 10 : 18, defaultCurrentPage: 1 });
   const finalFilters = { sortBy: 'popularity', sortDirection: 'desc', ...filters };
   const selectedCategory = finalFilters.category;
   const hasDeveloperFilter = !!finalFilters.developer;
   const categoryState = useMemo(() => {
-    return !hasDeveloperFilter ? { data: allCategories } : getCategories(allBlocklets, finalFilters.developer);
-  }, [hasDeveloperFilter, allCategories]);
+    // 当按作者过滤时，需要从所有blocklets中找出属于作者的分类
+    return !hasDeveloperFilter ? { data: allCategories } : getCategoriesByAuthor(allBlocklets, finalFilters.developer);
+  }, [hasDeveloperFilter, allCategories, allBlocklets]);
 
   const blockletList = useMemo(() => {
     const sortByName = (x) => x?.title?.toLocaleLowerCase() || x?.name?.toLocaleLowerCase(); // 按名称排序
@@ -59,7 +73,6 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       popularity: sortByPopularity,
       publishAt: sortByPublish,
     };
-
     let blocklets = allBlocklets || [];
     // 按照付费/免费筛选
     blocklets = filterBlockletByPrice(blocklets, finalFilters.price);
@@ -84,6 +97,14 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     return orderBy(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
   }, [allBlocklets, finalFilters]);
 
+  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 || [];
     // 分类按照名称排序
@@ -98,24 +119,22 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
 
     return replaceTranslate(translations[locale][key], data);
   };
-
   const categoryOptions = useMemo(() => getCategoryOptions(categoryList, locale), [categoryList, locale]);
   const priceOptions = getPrices(translate);
-
   const filterStore = {
     errors: { fetchBlockletsError, fetchCategoriesError },
     loadings: { fetchBlockletsLoading, fetchCategoriesLoading },
     endpoint,
-    blockletList,
+    finalBlockletList,
     t: translate,
     filters: finalFilters,
     selectedCategory,
     categoryList,
-    baseUrl,
     blockletRender,
     locale,
     categoryOptions,
     priceOptions,
+    hasNextPage: blockletList.length >= paginateState.pageSize * paginateState.currentPage,
     handleSort: (sort) => {
       const changeData = {
         ...finalFilters,
@@ -147,6 +166,15 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       const changeData = { ...finalFilters, developer: developer || undefined };
       onFilterChange(changeData);
     },
+    handlePage: (page) => {
+      const changeData = { ...finalFilters, currentPage: page };
+      onFilterChange(changeData);
+    },
+    loadMore: () => {
+      setTimeout(() => {
+        paginateState.currentPage += 1;
+      }, 1000);
+    },
     getCategoryLocale: (category) => {
       if (!category) return null;
       let result = null;
@@ -156,8 +184,12 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       }
       return result;
     },
+    get allBlocklets() {
+      return allBlocklets || [];
+    },
     get developerName() {
-      return allBlocklets.find((blocklet) => blocklet.owner.did === finalFilters.developer)?.owner?.name || '';
+      const blocklets = allBlocklets || [];
+      return blocklets.find((blocklet) => blocklet.owner.did === finalFilters.developer)?.owner?.name || '';
     },
   };
 

package/src/libs/prop-types.js

@@ -13,12 +13,10 @@ const propTypes = {
   endpoint: PropTypes.string.isRequired,
   blockletRender: PropTypes.func.isRequired,
   onFilterChange: PropTypes.func,
-  baseUrl: PropTypes.string,
   locale: PropTypes.oneOf(['zh', 'en']),
 };
 
 const defaultProps = {
-  baseUrl: null,
   locale: 'zh',
   filters: {},
   onFilterChange: () => {},

package/src/libs/utils.js

@@ -5,10 +5,10 @@ const isFreeBlocklet = (meta) => {
   if (!meta.payment) {
     return true;
   }
-
   const priceList = (meta.payment.price || []).map((x) => x.value || 0);
   return priceList.every((x) => x === 0);
 };
+
 const getSortOptions = (t) => {
   return [
     {
@@ -39,12 +39,12 @@ const getCategoryOptions = (list = [], locale = 'en') => {
   return list.map((item) => ({ name: item.locales[locale], value: item.name }));
 };
 /**
- * 从开发者所属 blocklets 中的得到 Categories
+ * 从 blocklets 中的得到属于作者的 Categories
  * @param {*} list
  * @param {*} developerDid
  * @returns
  */
-const getCategories = (list, developerDid) => {
+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();
@@ -106,10 +106,14 @@ const urlStringify = (obj) => {
   return new URLSearchParams(removeUndefined(obj)).toString();
 };
 
+const isMobileScreen = () => {
+  return window.innerWidth <= 600;
+};
+
 export {
   getSortOptions,
   getPrices,
-  getCategories,
+  getCategoriesByAuthor,
   filterBlockletByPrice,
   getStoreDetail,
   formatLogoPath,
@@ -118,4 +122,5 @@ export {
   removeUndefined,
   urlStringify,
   getCategoryOptions,
+  isMobileScreen,
 };