@blocklet/list 0.8.6

package/src/components/list.js

@@ -0,0 +1,117 @@
+import React 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 { NoResults, EmptyTitle, NoResultsTips } from './empty';
+import { useSearchContext } from '../contexts/store';
+import { formatError } from '../tools/utils';
+
+export default function BlockletList({ blocklets, ...rest }) {
+  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, queryParams, t } =
+    useSearchContext();
+
+  const showFilterTip = !!selectedCategory || !!queryParams.price;
+
+  if (errors.fetchBlockletsError) {
+    return (
+      <Alert type="error" variant="icon">
+        <div>{formatError(errors.fetchBlockletsError)}</div>
+      </Alert>
+    );
+  }
+  if (loadings.fetchBlockletsLoading) {
+    return (
+      <Box display="flex" alignItems="center" justifyContent="center">
+        <CircularProgress />
+      </Box>
+    );
+  }
+  if (queryParams.search && showFilterTip && blockletList.length === 0) {
+    return (
+      <CustomEmpty>
+        <EmptyTitle
+          primaryStart={t('blocklet.noBlockletPart1')}
+          primaryEnd={t('blocklet.noBlockletPart2')}
+          search={queryParams.search}
+        />
+        <NoResultsTips keywordTip filterTip />
+      </CustomEmpty>
+    );
+  }
+  if (queryParams.search && blockletList.length === 0) {
+    return (
+      <CustomEmpty>
+        <EmptyTitle
+          primaryStart={t('blocklet.noBlockletPart1')}
+          primaryEnd={t('blocklet.noBlockletPart2')}
+          search={queryParams.search}
+        />
+        <NoResultsTips keywordTip />
+      </CustomEmpty>
+    );
+  }
+  if (showFilterTip && blockletList.length === 0) {
+    const categoryLocale = getCategoryLocale(selectedCategory);
+    return (
+      <CustomEmpty>
+        {categoryLocale ? (
+          <EmptyTitle
+            primaryStart={t('blocklet.noCategoryResults1')}
+            primaryEnd={t('blocklet.noCategoryResults2')}
+            search={categoryLocale}
+          />
+        ) : (
+          <NoResults />
+        )}
+        <NoResultsTips filterTip />
+      </CustomEmpty>
+    );
+  }
+  if (blockletList.length === 0) {
+    return (
+      <CustomEmpty>
+        <NoResults />
+      </CustomEmpty>
+    );
+  }
+
+  return (
+    <Grid container spacing={4} {...rest}>
+      {blocklets.map((blocklet) => (
+        <StyledGrid item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
+          {blockletRender(blocklet)}
+        </StyledGrid>
+      ))}
+    </Grid>
+  );
+}
+
+BlockletList.propTypes = {
+  blocklets: PropTypes.array.isRequired,
+};
+
+BlockletList.defaultProps = {};
+
+const StyledGrid = styled(Grid)`
+  @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
+    &.MuiGrid-item {
+      padding-bottom: 0px;
+      padding-left: 16px;
+      padding-right: 4px;
+    }
+  }
+`;
+const CustomEmpty = styled(Empty)`
+  text-align: center;
+  .primary {
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+  .tips {
+    margin-top: ${(props) => props.theme.spacing(1)};
+  }
+`;

package/src/components/search.js

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Magnify, Close } from 'mdi-material-ui';
+import { OutlinedInput, InputAdornment } from '@mui/material';
+import { useDebounceFn } from 'ahooks';
+import styled from 'styled-components';
+
+import { useSearchContext } from '../contexts/store';
+
+const Search = ({ placeholder, ...rest }) => {
+  const searchStore = useSearchContext();
+  const { queryParams, handleSearchKeyword } = searchStore;
+  const [searchStr, setSearchStr] = useState(queryParams.search || '');
+
+  const { run: handleSearch } = useDebounceFn(handleSearchKeyword, { wait: 300 });
+  const handleChange = (event) => {
+    const { value } = event.target;
+    setSearchStr(value);
+    handleSearch(value);
+  };
+  const handleClose = () => {
+    setSearchStr('');
+    handleSearchKeyword();
+  };
+  return (
+    <StyledSearch
+      startAdornment={
+        <InputAdornment position="start">
+          <StyledMagnify />
+        </InputAdornment>
+      }
+      onChange={handleChange}
+      placeholder={placeholder}
+      value={searchStr}
+      title={placeholder}
+      endAdornment={
+        searchStr && (
+          <InputAdornment onClick={handleClose} position="end">
+            <StyledClose />
+          </InputAdornment>
+        )
+      }
+      {...rest}
+    />
+  );
+};
+Search.propTypes = {
+  placeholder: PropTypes.string,
+};
+Search.defaultProps = {
+  placeholder: 'Type to search...',
+};
+const StyledSearch = styled(OutlinedInput)`
+  background-color: #fff;
+  border-radius: 12px;
+  font-size: 16px;
+  margin: 0 10px;
+  .MuiInputBase-input {
+    padding: 12px 0px 12px 0px;
+  }
+  .MuiOutlinedInput-notchedOutline {
+    border: none;
+  }
+  .Mui-focused {
+    background-color: #f6f6f6;
+    .MuiInputBase-input::placeholder {
+      color: transparent;
+    }
+  }
+  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
+    font-size: 14px;
+    border-radius: 6px;
+    .MuiInputBase-input {
+      padding: 8px 0 8px 10px;
+    }
+  }
+`;
+
+const StyledMagnify = styled(Magnify)`
+  color: ${(props) => props.theme.palette.grey[500]};
+  font-size: 28px;
+  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
+    font-size: 24px;
+  }
+`;
+
+const StyledClose = styled(Close)`
+  color: ${(props) => props.theme.palette.grey[500]};
+  font-size: 16px;
+  cursor: pointer;
+`;
+
+export default Search;

package/src/contexts/store.js

@@ -0,0 +1,250 @@
+import React, { useContext, createContext, useMemo, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import qs from 'qs';
+import { useParams, useLocation, useHistory } from 'react-router-dom';
+import { useRequest } from 'ahooks';
+import orderBy from 'lodash-es/orderBy';
+import axios from 'axios';
+import joinUrl from 'url-join';
+
+import usePageState from '../hooks/page-state';
+import { getCategories, filterBlockletByPrice, replace } from '../tools/utils';
+import translations from '../assets/locale';
+
+const axiosInstance = axios.create();
+const Search = createContext({});
+const { Provider, Consumer } = Search;
+
+function SearchProvider({ children, baseUrl, type, endpoint, locale, blockletRender }) {
+  const location = useLocation();
+  const history = useHistory();
+  const pathParams = useParams();
+  const isPageMode = type === 'page';
+  if (isPageMode && !baseUrl) {
+    throw new Error('baseUrl is required when type is page');
+  }
+  const {
+    data: allBlocklets,
+    error: fetchBlockletsError,
+    loading: fetchBlockletsLoading,
+  } = useRequest(
+    async () => {
+      const { data: list } = await axiosInstance.get(joinUrl(endpoint, '/api/blocklets.json'));
+      return list;
+    },
+    { initialData: [] }
+  );
+
+  const {
+    data: allCategories,
+    error: fetchCategoriesError,
+    loading: fetchCategoriesLoading,
+    run: fetchCategories,
+  } = useRequest(
+    async () => {
+      const { data: list } = await axiosInstance.get(`${joinUrl(endpoint, '/api/blocklets/categories')}`);
+      return list;
+    },
+    { initialData: [], manual: true }
+  );
+
+  const [memoryParams, setMemoryParams] = useState({
+    sortBy: 'popularity',
+    sortDirection: 'desc',
+  });
+
+  const queryParams = useMemo(() => {
+    return isPageMode ? qs.parse(location.search, { ignoreQueryPrefix: true }) : memoryParams;
+  }, [memoryParams, location.search]);
+
+  let sortParams;
+  // 当作页面使用时 sort 数据比较特殊, 默认取 localStorge 中的值，如果 url query 中有sort值则优先使用
+  if (isPageMode) {
+    const localSortParams = usePageState(
+      {
+        sort: 'popularity',
+        direction: 'desc',
+      },
+      baseUrl
+    );
+    const urlSortParams = {
+      sort: queryParams.sortBy,
+      direction: queryParams.sortDirection,
+    };
+    sortParams = urlSortParams.sortBy && urlSortParams.sortDirection ? urlSortParams : localSortParams;
+  } else {
+    sortParams = useMemo(() => {
+      return {
+        sort: memoryParams.sortBy,
+        direction: memoryParams.sortDirection,
+      };
+    }, [memoryParams]);
+  }
+
+  const isSearchPage = location.pathname === '/search';
+  const selectedCategory = useMemo(() => {
+    let result = null;
+    if (isPageMode) {
+      result = !isSearchPage ? pathParams.category : queryParams.category;
+    } else {
+      result = queryParams.category;
+    }
+    return result;
+  }, [isPageMode, pathParams, queryParams]);
+
+  const hasDeveloperFilter = !!queryParams.developer;
+  const categoryState = !hasDeveloperFilter
+    ? { data: allCategories }
+    : getCategories(allBlocklets, queryParams.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 result = allBlocklets || [];
+    // 按照付费/免费筛选
+    result = filterBlockletByPrice(result, queryParams.price);
+    // 按照分类筛选
+    result = result.filter((item) => (selectedCategory ? item?.category?.name === selectedCategory : true));
+    // 按照作者筛选
+    result = result.filter((item) => (queryParams?.developer ? item.owner.did === queryParams.developer : true));
+    const lowerSearch = queryParams?.search?.toLocaleLowerCase() || '';
+    // 按照搜索筛选
+    result = result.filter((item) => {
+      return (
+        (item?.title || item?.name)?.toLocaleLowerCase().includes(lowerSearch) ||
+        item.description?.toLocaleLowerCase().includes(lowerSearch) ||
+        item?.version?.toLocaleLowerCase().includes(lowerSearch)
+      );
+    });
+    // 排序
+    return orderBy(result, [sortMap[sortParams.sort]], [sortParams.direction]);
+  }, [allBlocklets, queryParams, sortParams]);
+
+  const categoryList = useMemo(() => {
+    const list = categoryState.data || [];
+    // 分类按照名称排序
+    return orderBy(list, [(i) => i.name], ['asc']);
+  }, [categoryState.data]);
+
+  const translate = (key, data) => {
+    if (!translations[locale] || !translations[locale][key]) {
+      console.warn(`Warning: no ${key} translation of ${locale}`);
+      return key;
+    }
+
+    return replace(translations[locale][key], data);
+  };
+
+  const searchStore = {
+    errors: { fetchBlockletsError, fetchCategoriesError },
+    loadings: { fetchBlockletsLoading, fetchCategoriesLoading },
+    endpoint,
+    sortParams,
+    history,
+    blockletList,
+    t: translate,
+    queryParams,
+    selectedCategory,
+    isSearchPage,
+    categoryList,
+    isPageMode,
+    baseUrl,
+    blockletRender,
+    locale,
+    handleSort: (value) => {
+      const changData = { ...queryParams, sortBy: value, sortDirection: value === 'nameAsc' ? 'asc' : 'desc' };
+      if (isPageMode) {
+        sortParams.sort = changData.sortBy;
+        sortParams.direction = changData.sortDirection;
+        history.push(`${baseUrl}search?${qs.stringify(changData)}`);
+      } else {
+        setMemoryParams(changData);
+      }
+    },
+    handleSearchKeyword: (value) => {
+      const changData = { ...queryParams, search: value || undefined };
+      if (isPageMode) {
+        history.push(`${baseUrl}search?${qs.stringify(changData)}`);
+      } else {
+        setMemoryParams(changData);
+      }
+    },
+    handlePriceFilter: (value) => {
+      const changData = { ...queryParams, price: value === queryParams.price ? undefined : value };
+      if (isPageMode) {
+        history.push(`${baseUrl}search?${qs.stringify(changData)}`);
+      } else {
+        setMemoryParams(changData);
+      }
+    },
+    getCategoryLocale: (name) => {
+      if (!name) return null;
+      let result = null;
+      const find = categoryState.data.find((item) => item.name === name);
+      if (find) {
+        result = find.locales[locale];
+      }
+      return result;
+    },
+    handleCategorySelect: (value) => {
+      if (value === 'all') {
+        const changData = { ...queryParams, category: undefined };
+        if (isPageMode) {
+          history.push(!isSearchPage ? baseUrl : `${baseUrl}search?${qs.stringify(changData)}`);
+        } else {
+          setMemoryParams(changData);
+        }
+      } else {
+        const changData = { ...queryParams, category: value };
+        if (isPageMode) {
+          history.push(!isSearchPage ? `${baseUrl}category/${value}` : `${baseUrl}search?${qs.stringify(changData)}`);
+        } else {
+          setMemoryParams(changData);
+        }
+      }
+    },
+    get developerName() {
+      return allBlocklets.find((i) => i.owner.did === queryParams.developer)?.owner?.name || '';
+    },
+  };
+
+  useEffect(() => {
+    if (!hasDeveloperFilter) {
+      fetchCategories();
+    }
+  }, [!hasDeveloperFilter]);
+  return <Provider value={searchStore}>{children}</Provider>;
+}
+
+SearchProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+  baseUrl: PropTypes.string,
+  endpoint: PropTypes.string.isRequired,
+  // 组件的类型： page 单独作为页面使用 持久化数据将存储在 url 和 localstorage，select 作为选择器组件使用 数据在存储在内存中
+  type: PropTypes.oneOf(['select', 'page']).isRequired,
+  locale: PropTypes.oneOf(['zh', 'en']),
+  blockletRender: PropTypes.func.isRequired,
+};
+
+SearchProvider.defaultProps = {
+  baseUrl: null,
+  locale: 'zh',
+};
+
+function useSearchContext() {
+  const searchStore = useContext(Search);
+  if (!searchStore) {
+    return {};
+  }
+  return searchStore;
+}
+
+export { SearchProvider, Consumer as SearchConsumer, useSearchContext };

package/src/hooks/page-state.js

@@ -0,0 +1,53 @@
+import { useLocalStorageState, useReactive } from 'ahooks';
+
+const PAGE_STATE_KEY = 'page-state';
+
+export default function usePageState(defaultValue = {}, persistence = true, path = window.location.pathname) {
+  const [pageState, setPageState] = useLocalStorageState(PAGE_STATE_KEY, {});
+  const state = useReactive(pageState);
+  if (!(path in pageState) && persistence) {
+    state[path] = defaultValue;
+    syncState();
+  }
+  function syncState() {
+    setPageState(state);
+  }
+
+  return new Proxy(
+    {},
+    {
+      get: (target, prop) => {
+        try {
+          return state[path][prop];
+        } catch {
+          return undefined;
+        }
+      },
+      set: (target, prop, value) => {
+        try {
+          const data = {
+            ...(state[path] || {}),
+            [prop]: value,
+          };
+          state[path] = data;
+          syncState();
+          return true;
+        } catch {
+          return false;
+        }
+      },
+      deleteProperty: (target, prop) => {
+        try {
+          const data = { ...(state[path] || {}) };
+          delete data[prop];
+          delete state[path][prop];
+          syncState();
+          return true;
+        } catch {
+          return false;
+        }
+      },
+      ownKeys: () => Object.keys(state[path] || {}),
+    }
+  );
+}

package/src/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import SelectBase from './base';
+import { SearchProvider } from './contexts/store';
+
+export default function BlockletList(props) {
+  return (
+    <SearchProvider {...props}>
+      <SelectBase />
+    </SearchProvider>
+  );
+}
+
+BlockletList.propTypes = {
+  baseUrl: PropTypes.string,
+  endpoint: PropTypes.string.isRequired,
+  // 组件的类型： page 单独作为页面使用 持久化数据将存储在 url 和 localstorage，select 作为选择器组件使用 数据在存储在内存中
+  type: PropTypes.oneOf(['select', 'page']).isRequired,
+  locale: PropTypes.oneOf(['zh', 'en']),
+  blockletRender: PropTypes.func.isRequired,
+};
+
+BlockletList.defaultProps = {
+  baseUrl: null,
+  locale: 'zh',
+};

package/src/tools/utils.js

@@ -0,0 +1,97 @@
+import joinURL from 'url-join';
+
+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 [
+    {
+      name: t('sort.popularity'),
+      value: 'popularity',
+    },
+    {
+      name: t('sort.lastPublished'),
+      value: 'publishAt',
+    },
+    {
+      name: t('sort.nameAscend'),
+      value: 'nameAsc',
+    },
+    {
+      name: t('sort.nameDescend'),
+      value: 'nameDesc',
+    },
+  ];
+};
+const getPrices = (t) => {
+  return [
+    { name: t('blocklet.free'), value: 'free' },
+    { name: t('blocklet.payment'), value: 'payment' },
+  ];
+};
+/**
+ * 从开发者所属 blocklets 中的得到 Categories
+ * @param {*} list
+ * @param {*} developerDid
+ * @returns
+ */
+const getCategories = (list, developerDid) => {
+  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
+ * @param {*} price
+ * @returns
+ */
+const filterBlockletByPrice = (list = [], price = '') => {
+  let result = list;
+  if (!price) return result;
+  if (price === 'free') {
+    result = list.filter((blocklet) => isFreeBlocklet(blocklet));
+  } else {
+    result = list.filter((blocklet) => !isFreeBlocklet(blocklet));
+  }
+  return result;
+};
+
+const formatError = (error) => {
+  if (Array.isArray(error.errors)) {
+    return error.errors.map((x) => x.message).join('\n');
+  }
+
+  return error.message;
+};
+
+const getStoreDetail = (storeUrl, blocklet) => {
+  return joinURL(storeUrl, `/blocklets/${blocklet.did}`);
+};
+const formatLogoPath = (did, asset, target = 'assets') => {
+  if (asset.startsWith(target)) {
+    return asset;
+  }
+  return `${target}/${did}/${asset}`;
+};
+const replace = (template, data) =>
+  // eslint-disable-next-line no-prototype-builtins
+  template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+
+export {
+  getSortOptions,
+  getPrices,
+  getCategories,
+  filterBlockletByPrice,
+  getStoreDetail,
+  formatLogoPath,
+  replace,
+  formatError,
+};