@blocklet/list 0.8.33 → 0.8.34

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"));
@@ -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: blockletList
+        })
       })]
     })]
   });

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/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

@@ -11,20 +11,18 @@ 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 _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"];
@@ -55,17 +53,14 @@ function BlockletList(_ref) {
     blockletList,
     getCategoryLocale,
     filters,
-    t
+    t,
+    endpoint
   } = (0, _filter.useFilterContext)();
   const showFilterTip = !!selectedCategory || !!filters.price;
 
   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))
     });
   }
 

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,9 +83,14 @@ 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
@@ -174,7 +185,6 @@ function FilterProvider(_ref) {
     filters: finalFilters,
     selectedCategory,
     categoryList,
-    baseUrl,
     blockletRender,
     locale,
     categoryOptions,
@@ -234,9 +244,10 @@ function FilterProvider(_ref) {
     },
 
     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

@@ -68,7 +68,9 @@ const getCategoryOptions = function getCategoryOptions() {
 
 exports.getCategoryOptions = getCategoryOptions;
 
-const getCategories = (list, developerDid) => {
+const getCategories = function getCategories() {
+  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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.33",
+  "version": "0.8.34",
   "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.19",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -47,6 +47,7 @@
     "flat": "^5.0.2",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
+    "react-error-boundary": "^3.1.4",
     "styled-components": "5.3.5",
     "url-join": "^4.0.1"
   },
@@ -62,5 +63,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "5e7c02cb3dfd0edff3f8290509f754b10bbc61bc"
+  "gitHead": "fed8918e15b5bd8cb3f4bac84b32434b58dda21b"
 }

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';
@@ -76,7 +78,9 @@ function ListBase() {
             }}
           />
         </Box>
-        <BlockletList blocklets={blockletList} />
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <BlockletList blocklets={blockletList} />
+        </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/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,25 @@
 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 { 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 } =
+  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, filters, t, endpoint } =
     useFilterContext();
 
   const showFilterTip = !!selectedCategory || !!filters.price;
 
   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) {

package/src/contexts/filter.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useRequest } from 'ahooks';
 import orderBy from 'lodash/orderBy';
 import axios from 'axios';
-// import joinUrl from 'url-join';
+import isArray from 'lodash/isArray';
 
 import { getCategories, filterBlockletByPrice, replaceTranslate, getPrices, getCategoryOptions } from '../libs/utils';
 import translations from '../assets/locale';
@@ -12,7 +12,7 @@ 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 +23,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,8 +39,11 @@ 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 }
   );
@@ -59,7 +65,6 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       popularity: sortByPopularity,
       publishAt: sortByPublish,
     };
-
     let blocklets = allBlocklets || [];
     // 按照付费/免费筛选
     blocklets = filterBlockletByPrice(blocklets, finalFilters.price);
@@ -98,10 +103,8 @@ 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 },
@@ -111,7 +114,6 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
     filters: finalFilters,
     selectedCategory,
     categoryList,
-    baseUrl,
     blockletRender,
     locale,
     categoryOptions,
@@ -157,7 +159,8 @@ function FilterProvider({ filters, children, baseUrl, endpoint, locale, blocklet
       return result;
     },
     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

@@ -44,7 +44,7 @@ const getCategoryOptions = (list = [], locale = 'en') => {
  * @param {*} developerDid
  * @returns
  */
-const getCategories = (list, developerDid) => {
+const getCategories = (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();