@blocklet/list 0.8.13 → 0.8.16

package/src/base.js

@@ -1,21 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
-import Sort from 'mdi-material-ui/Sort';
+import SortIcon from '@mui/icons-material/Sort';
 import FilterListIcon from '@mui/icons-material/FilterList';
-import { Box, Hidden, SvgIcon } from '@mui/material';
+import { Box, Hidden } from '@mui/material';
 
-import { useSearchContext } from './contexts/store';
+import { useFilterContext } from './contexts/filter';
 import CustomSelect from './components/custom-select';
 import FilterAuthor from './components/filter-author';
-import { getSortOptions, getPrices } from './tools/utils';
+import { getSortOptions, getPrices } from './libs/utils';
 import BlockletList from './components/list';
 import Aside from './components/aside';
 import Search from './components/search';
-import { CategorySelect } from './components/categories';
+import CategorySelect from './components/category-select';
 
 const ListBase = () => {
-  const searchStore = useSearchContext();
-  const { sortParams, history, blockletList, queryParams, developerName, handleSort, t } = searchStore;
+  const { handleDeveloper, blockletList, filters, developerName, handleSort, t, handlePrice } = useFilterContext();
   return (
     <Box display="flex" alignItems="flex-start" height="100%">
       <Hidden mdDown>
@@ -24,11 +23,11 @@ const ListBase = () => {
       <StyledMin>
         <Box className="marketplace-header" display="flex" alignItems="center">
           <Hidden mdDown>
-            {!!queryParams.get('developer') && (
+            {!!filters.developer && (
               <FilterAuthor
                 user={developerName}
                 deleteUserTag={() => {
-                  history.push('/');
+                  handleDeveloper(null);
                 }}
               />
             )}
@@ -43,10 +42,10 @@ const ListBase = () => {
               <CategorySelect />
             </Hidden>
             <CustomSelect
-              value={sortParams.sort}
+              value={filters.sortBy}
               options={getSortOptions(t)}
-              title={getSortOptions(t).find((f) => f.value === sortParams.sort)?.name || t('sort.sort')}
-              icon={<SvgIcon component={Sort} />}
+              title={getSortOptions(t).find((f) => f.value === filters.sortBy)?.name || t('sort.sort')}
+              icon={<SortIcon />}
               onChange={(v) => {
                 handleSort(v);
               }}
@@ -58,24 +57,24 @@ const ListBase = () => {
             display="flex"
             flexWrap="wrap"
             alignItems="center"
-            justifyContent={queryParams.get('developer') ? 'space-between' : 'flex-end'}>
-            {!!queryParams.get('developer') && (
+            justifyContent={filters.developer ? 'space-between' : 'flex-end'}>
+            {!!filters.developer && (
               <FilterAuthor
                 user={developerName}
                 deleteUserTag={() => {
-                  history.push('/');
+                  handleDeveloper(null);
                 }}
                 style={{ marginBottom: '16px' }}
               />
             )}
             {/* 筛选付费/免费 */}
             <CustomSelect
-              value={queryParams.get('price')}
+              value={filters.price}
               icon={<FilterListIcon />}
               options={getPrices(t)}
-              title={getPrices(t).find((f) => f.value === queryParams.get('price'))?.name || t('common.price')}
+              title={getPrices(t).find((f) => f.value === filters.price)?.name || t('common.price')}
               onChange={(v) => {
-                searchStore.handlePriceFilter(v);
+                handlePrice(v);
               }}
               style={{ marginBottom: '16px' }}
             />

package/src/components/{aside.js → aside/aside.js}

@@ -2,14 +2,13 @@ import React from 'react';
 import { Box, List, Checkbox, FormControlLabel } from '@mui/material';
 import styled from 'styled-components';
 
-import { useSearchContext } from '../contexts/store';
-import { getPrices } from '../tools/utils';
-import Search from './search';
-import { CategoryLinkList } from './categories';
+import { useFilterContext } from '../../contexts/filter';
+import { getPrices } from '../../libs/utils';
+import Search from '../search';
+import CategoryLinkList from './category-link-list';
 
 const Aside = () => {
-  const searchStore = useSearchContext();
-  const { queryParams, handlePriceFilter, t } = searchStore;
+  const { filters, handlePrice, t } = useFilterContext();
   return (
     <StyledAside>
       <Search placeholder={t('common.searchStore')} />
@@ -21,10 +20,10 @@ const Aside = () => {
             control={
               <Checkbox
                 onClick={() => {
-                  handlePriceFilter(item.value);
+                  handlePrice(item.value);
                 }}
                 size="small"
-                checked={item.value === queryParams.get('price')}
+                checked={item.value === filters.price}
               />
             }
             label={item.name}

package/src/components/aside/category-link-list.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ListItem, ListItemText, Link } from '@mui/material';
+import joinUrl from 'url-join';
+
+import { useFilterContext } from '../../contexts/filter';
+import { urlStringify } from '../../libs/utils';
+
+/**
+ * 宽屏幕下的分类列表
+ * @returns
+ */
+const CategoryLinkList = () => {
+  const { categoryList, selectedCategory, filters, baseUrl, handleCategory, t, locale } = useFilterContext();
+
+  const handleClick = (e, name) => {
+    handleCategory(name);
+    e.preventDefault();
+    return false;
+  };
+  const content = (
+    <div style={{ marginRight: '16px' }}>
+      <ListItem selected={!selectedCategory} button onClick={(e) => handleClick(e, 'all')}>
+        <ListItemText primary={t('category.all')} />
+      </ListItem>
+      {categoryList.map((item) => (
+        <ListItem
+          key={item._id}
+          title={item.locales[locale]}
+          component={Link}
+          to={`${joinUrl(baseUrl, '/search')}?${urlStringify({
+            ...filters,
+            category: item.name,
+          })}`}
+          onClick={(e) => handleClick(e, item.name)}
+          button
+          selected={item.name === selectedCategory}>
+          <ListItemText primary={item.locales[locale]} />
+        </ListItem>
+      ))}
+    </div>
+  );
+
+  return (
+    <>
+      <ListItem>
+        <ListItemText className="category" primary={t('common.category')} />
+      </ListItem>
+      {content}
+    </>
+  );
+};
+
+export default CategoryLinkList;

package/src/components/aside/index.js

@@ -0,0 +1,3 @@
+import Aside from './aside';
+
+export default Aside;

package/src/components/category-select.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MenuItem } from '@mui/material';
+
+import { useFilterContext } from '../contexts/filter';
+import CustomSelect from './custom-select';
+
+/**
+ * 小屏幕下的分类选择器
+ * @returns
+ */
+const CategorySelect = () => {
+  const { categoryList, selectedCategory, handleCategory, t, locale } = useFilterContext();
+
+  const itemRender = (item) => {
+    return (
+      <MenuItem
+        className={['my-select__option', selectedCategory?.includes(item.name) ? 'my-select__option--active' : ''].join(
+          ' '
+        )}
+        key={item._id}
+        value={item.name}
+        onClick={() => handleCategory(item.name)}>
+        {item.locales[locale]}
+      </MenuItem>
+    );
+  };
+
+  return (
+    <CustomSelect
+      value={selectedCategory || 'all'}
+      options={categoryList}
+      title={categoryList.find((i) => i.name === selectedCategory)?.locales[locale] || t('category.all')}
+      itemRender={itemRender}
+      prepend={
+        <MenuItem value="all" onClick={() => handleCategory('all')}>
+          {t('category.all')}
+        </MenuItem>
+      }
+    />
+  );
+};
+
+export default CategorySelect;

package/src/components/{custom-select.js → custom-select/custom-select.js}

@@ -4,7 +4,8 @@ import useTheme from '@mui/styles/useTheme';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { ClickAwayListener, Grow, MenuItem, MenuList, Paper, Popper, SvgIcon, useMediaQuery } from '@mui/material';
-import { Check, ChevronDown } from 'mdi-material-ui';
+import CheckIcon from '@mui/icons-material/Check';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import cloneDeep from 'lodash/cloneDeep';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -81,9 +82,9 @@ const CustomSelect = ({
         <div className="my-select__icon">{icon}</div>
         {title}
         {multiple && currentValue.length > 1 && ` (${currentValue.length})`}
-        <SvgIcon className="my-select__arrowdown" component={ChevronDown} fontSize="small" />
+        <SvgIcon className="my-select__arrowdown" component={KeyboardArrowDownIcon} fontSize="small" />
       </StyledButton>
-      <Popper open={open} anchorEl={anchorRef.current} transition style={{ zIndex: '1' }}>
+      <Popper open={open} anchorEl={anchorRef.current} transition style={{ zIndex: '9999' }}>
         {({ TransitionProps, placement }) => (
           <Grow
             {...TransitionProps}
@@ -106,7 +107,7 @@ const CustomSelect = ({
                         ].join(' ')}>
                         {multiple && (
                           <SvgIcon
-                            component={Check}
+                            component={CheckIcon}
                             className={[
                               'my-select__option__icon',
                               containsValue(option.value) ? 'my-select__option__icon--active' : '',

package/src/components/custom-select/index.js

@@ -0,0 +1,3 @@
+import CustomSelect from './custom-select';
+
+export default CustomSelect;

package/src/components/filter-author.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Chip } from '@mui/material';
 import FaceIcon from '@mui/icons-material/Face';
 
-import { useSearchContext } from '../contexts/store';
+import { useFilterContext } from '../contexts/filter';
 
 const StyleDiv = styled.div`
   .MuiChip-root {
@@ -14,8 +14,7 @@ const StyleDiv = styled.div`
   }
 `;
 const FilterAuthor = ({ user, deleteUserTag, ...containerProps }) => {
-  const searchStore = useSearchContext();
-  const { t } = searchStore;
+  const { t } = useFilterContext();
   if (!user) return null;
   return (
     <StyleDiv {...containerProps}>

package/src/components/{empty.js → list/empty.js}

@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
-import { useSearchContext } from '../contexts/store';
+import { useFilterContext } from '../../contexts/filter';
 
 const NoResults = () => {
-  const searchStore = useSearchContext();
-  const { t } = searchStore;
+  const { t } = useFilterContext();
   return (
     <Typography style={{ textAlign: 'center' }} variant="subtitle2">
       {t('blocklet.noResults')}
@@ -15,8 +14,8 @@ const NoResults = () => {
   );
 };
 const NoResultsTips = ({ filterTip, keywordTip }) => {
-  const searchStore = useSearchContext();
-  const { t, locale } = searchStore;
+  const { t, locale } = useFilterContext();
+
   const getSplit = () => {
     if (locale === 'zh') return '、';
     return ' , ';
@@ -39,11 +38,11 @@ NoResultsTips.defaultProps = {
   filterTip: false,
   keywordTip: false,
 };
-const EmptyTitle = ({ primaryStart, primaryEnd, search }) => {
+const EmptyTitle = ({ primaryStart, primaryEnd, filter }) => {
   return (
     <Typography variant="subtitle2">
       <span>{primaryStart}</span>
-      <span className="primary"> {search} </span>
+      <span className="primary"> {filter} </span>
       <span>{primaryEnd} </span>
     </Typography>
   );
@@ -51,7 +50,7 @@ const EmptyTitle = ({ primaryStart, primaryEnd, search }) => {
 EmptyTitle.propTypes = {
   primaryStart: PropTypes.string.isRequired,
   primaryEnd: PropTypes.string.isRequired,
-  search: PropTypes.string.isRequired,
+  filter: PropTypes.string.isRequired,
 };
 
 export { NoResults, EmptyTitle, NoResultsTips };

package/src/components/list/index.js

@@ -0,0 +1,3 @@
+import BlockletList from './list';
+
+export default BlockletList;

package/src/components/{list.js → list/list.js}

@@ -8,14 +8,14 @@ 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';
+import { useFilterContext } from '../../contexts/filter';
+import { formatError } from '../../libs/utils';
 
 export default function BlockletList({ blocklets, ...rest }) {
-  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, queryParams, t } =
-    useSearchContext();
+  const { blockletRender, errors, loadings, selectedCategory, blockletList, getCategoryLocale, filters, t } =
+    useFilterContext();
 
-  const showFilterTip = !!selectedCategory || !!queryParams.get('price');
+  const showFilterTip = !!selectedCategory || !!filters.price;
 
   if (errors.fetchBlockletsError) {
     return (
@@ -31,25 +31,25 @@ export default function BlockletList({ blocklets, ...rest }) {
       </Box>
     );
   }
-  if (queryParams.get('search') && showFilterTip && blockletList.length === 0) {
+  if (filters.keyword && showFilterTip && blockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
           primaryStart={t('blocklet.noBlockletPart1')}
           primaryEnd={t('blocklet.noBlockletPart2')}
-          search={queryParams.get('search')}
+          filter={filters.keyword}
         />
         <NoResultsTips keywordTip filterTip />
       </CustomEmpty>
     );
   }
-  if (queryParams.get('search') && blockletList.length === 0) {
+  if (filters.keyword && blockletList.length === 0) {
     return (
       <CustomEmpty>
         <EmptyTitle
           primaryStart={t('blocklet.noBlockletPart1')}
           primaryEnd={t('blocklet.noBlockletPart2')}
-          search={queryParams.get('search')}
+          filter={filters.keyword}
         />
         <NoResultsTips keywordTip />
       </CustomEmpty>
@@ -63,7 +63,7 @@ export default function BlockletList({ blocklets, ...rest }) {
           <EmptyTitle
             primaryStart={t('blocklet.noCategoryResults1')}
             primaryEnd={t('blocklet.noCategoryResults2')}
-            search={categoryLocale}
+            filter={categoryLocale}
           />
         ) : (
           <NoResults />

package/src/components/search.js

@@ -1,26 +1,26 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Magnify, Close } from 'mdi-material-ui';
+import SearchIcon from '@mui/icons-material/Search';
+import CloseIcon from '@mui/icons-material/Close';
 import { OutlinedInput, InputAdornment } from '@mui/material';
 import { useDebounceFn } from 'ahooks';
 import styled from 'styled-components';
 
-import { useSearchContext } from '../contexts/store';
+import { useFilterContext } from '../contexts/filter';
 
 const Search = ({ placeholder, ...rest }) => {
-  const searchStore = useSearchContext();
-  const { queryParams, handleSearchKeyword } = searchStore;
-  const [searchStr, setSearchStr] = useState(queryParams.get('search') || '');
+  const { filters, handleKeyword } = useFilterContext();
+  const [searchStr, setSearchStr] = useState(filters.keyword || '');
 
-  const { run: handleSearch } = useDebounceFn(handleSearchKeyword, { wait: 300 });
+  const debouncedSearch = useDebounceFn(handleKeyword, { wait: 300 });
   const handleChange = (event) => {
     const { value } = event.target;
     setSearchStr(value);
-    handleSearch(value);
+    debouncedSearch.run(value);
   };
   const handleClose = () => {
     setSearchStr('');
-    handleSearchKeyword();
+    handleKeyword();
   };
   return (
     <StyledSearch
@@ -29,7 +29,7 @@ const Search = ({ placeholder, ...rest }) => {
       }}
       startAdornment={
         <InputAdornment position="start">
-          <StyledMagnify />
+          <StyledSearchIcon />
         </InputAdornment>
       }
       onChange={handleChange}
@@ -40,7 +40,7 @@ const Search = ({ placeholder, ...rest }) => {
       endAdornment={
         searchStr && (
           <InputAdornment position="end">
-            <StyledClose data-cy="search-delete" onClick={handleClose} />
+            <StyledCloseIcon data-cy="search-delete" onClick={handleClose} />
           </InputAdornment>
         )
       }
@@ -80,7 +80,7 @@ const StyledSearch = styled(OutlinedInput)`
   }
 `;
 
-const StyledMagnify = styled(Magnify)`
+const StyledSearchIcon = styled(SearchIcon)`
   color: ${(props) => props.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
@@ -88,7 +88,7 @@ const StyledMagnify = styled(Magnify)`
   }
 `;
 
-const StyledClose = styled(Close)`
+const StyledCloseIcon = styled(CloseIcon)`
   color: ${(props) => props.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;

package/src/contexts/filter.js

@@ -0,0 +1,196 @@
+import React, { useContext, createContext, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useRequest } from 'ahooks';
+import orderBy from 'lodash/orderBy';
+import axios from 'axios';
+// import joinUrl from 'url-join';
+
+import { getCategories, filterBlockletByPrice, replaceTranslate } from '../libs/utils';
+import translations from '../assets/locale';
+import { propTypes, defaultProps } from '../libs/prop-types';
+
+const Filter = createContext({});
+const { Provider, Consumer } = Filter;
+
+function FilterProvider({
+  onSelectBlocklet,
+  selectedBlocklets,
+  filters,
+  children,
+  baseUrl,
+  endpoint,
+  locale,
+  blockletRender,
+  onFilterChange,
+}) {
+  const storeApi = axios.create({
+    baseURL: endpoint,
+  });
+
+  const {
+    data: allBlocklets,
+    error: fetchBlockletsError,
+    loading: fetchBlockletsLoading,
+    run: fetchBlocklets,
+  } = useRequest(
+    async () => {
+      const { data: list } = await storeApi.get('/api/blocklets.json');
+      return list;
+    },
+    { initialData: [], manual: true }
+  );
+
+  const {
+    data: allCategories,
+    error: fetchCategoriesError,
+    loading: fetchCategoriesLoading,
+    run: fetchCategories,
+  } = useRequest(
+    async () => {
+      const { data: list } = await storeApi.get('/api/blocklets/categories');
+      return list;
+    },
+    { initialData: [], manual: true }
+  );
+
+  const selectedCategory = filters.category;
+
+  const hasDeveloperFilter = !!filters.developer;
+  const categoryState = useMemo(() => {
+    return !hasDeveloperFilter ? { data: allCategories } : getCategories(allBlocklets, filters.developer);
+  }, [hasDeveloperFilter, allCategories]);
+
+  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, filters.price);
+    // 按照分类筛选
+    result = result.filter((item) => (selectedCategory ? item?.category?.name === selectedCategory : true));
+    // 按照作者筛选
+    result = result.filter((item) => (filters?.developer ? item.owner.did === filters.developer : true));
+    const lowerSearch = filters?.keyword?.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[filters.sortBy]], [filters.sortDirection]);
+  }, [allBlocklets, filters]);
+
+  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 replaceTranslate(translations[locale][key], data);
+  };
+  const filterStore = {
+    errors: { fetchBlockletsError, fetchCategoriesError },
+    loadings: { fetchBlockletsLoading, fetchCategoriesLoading },
+    endpoint,
+    blockletList,
+    t: translate,
+    filters: { sortBy: 'popularity', sortDirection: 'desc', ...filters },
+    selectedCategory,
+    categoryList,
+    baseUrl,
+    blockletRender,
+    locale,
+    selectedBlocklets,
+    onSelectBlocklet,
+    handleSort: (sort) => {
+      const changeData = {
+        ...filters,
+        sortBy: sort,
+        sortDirection: sort === 'nameAsc' ? 'asc' : 'desc',
+      };
+      onFilterChange(changeData);
+    },
+    handleKeyword: (keyWord) => {
+      const changeData = { ...filters, keyword: keyWord || undefined };
+      onFilterChange(changeData);
+    },
+    handlePrice: (price) => {
+      const changeData = {
+        ...filters,
+        price: price === filters.price ? undefined : price,
+      };
+      onFilterChange(changeData);
+    },
+    handleCategory: (category) => {
+      if (category === 'all') {
+        const changeData = { ...filters, category: undefined };
+        onFilterChange(changeData);
+      } else {
+        const changeData = { ...filters, category };
+        onFilterChange(changeData);
+      }
+    },
+    handleDeveloper: (developer) => {
+      const changeData = { ...filters, developer: developer || undefined };
+      onFilterChange(changeData);
+    },
+    getCategoryLocale: (category) => {
+      if (!category) return null;
+      let result = null;
+      const find = categoryState.data.find((item) => item.name === category);
+      if (find) {
+        result = find.locales[locale];
+      }
+      return result;
+    },
+    get developerName() {
+      return allBlocklets.find((i) => i.owner.did === filters.developer)?.owner?.name || '';
+    },
+  };
+
+  useEffect(() => {
+    if (!hasDeveloperFilter) {
+      fetchCategories();
+    }
+  }, [!hasDeveloperFilter]);
+
+  useEffect(() => {
+    fetchBlocklets();
+  }, [endpoint]);
+
+  return <Provider value={filterStore}>{children}</Provider>;
+}
+
+FilterProvider.propTypes = {
+  ...propTypes,
+  children: PropTypes.any.isRequired,
+};
+
+FilterProvider.defaultProps = defaultProps;
+
+function useFilterContext() {
+  const filterStore = useContext(Filter);
+  if (!filterStore) {
+    return {};
+  }
+  return filterStore;
+}
+
+export { FilterProvider, Consumer as FilterConsumer, useFilterContext };