@blocklet/list 0.8.14 → 0.8.17

package/src/contexts/store.js

@@ -1,266 +0,0 @@
-import React, { useContext, createContext, useMemo, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useParams, 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, replaceTranslate, urlStringify } 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 } = window;
-  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,
-    run: fetchBlocklets,
-  } = useRequest(
-    async () => {
-      const { data: list } = await axiosInstance.get(joinUrl(endpoint, '/api/blocklets.json'));
-      return list;
-    },
-    { initialData: [], manual: true }
-  );
-
-  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 ? new URLSearchParams(location.search) : new Map(Object.entries(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.get('sortBy'),
-      direction: queryParams.get('sortDirection'),
-    };
-    sortParams = urlSortParams.sort && urlSortParams.direction ? urlSortParams : localSortParams;
-  } else {
-    sortParams = useMemo(() => {
-      return {
-        sort: memoryParams.sortBy,
-        direction: memoryParams.sortDirection,
-      };
-    }, [memoryParams]);
-  }
-
-  const isSearchPage = location.pathname === joinUrl(baseUrl, '/search');
-  const selectedCategory = useMemo(() => {
-    let result = null;
-    if (isPageMode) {
-      result = !isSearchPage ? pathParams.category : queryParams.get('category');
-    } else {
-      result = queryParams.get('category');
-    }
-    return result;
-  }, [isPageMode, pathParams, queryParams]);
-
-  const hasDeveloperFilter = !!queryParams.get('developer');
-  const categoryState = !hasDeveloperFilter
-    ? { data: allCategories }
-    : getCategories(allBlocklets, queryParams.get('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.get('price'));
-    // 按照分类筛选
-    result = result.filter((item) => (selectedCategory ? item?.category?.name === selectedCategory : true));
-    // 按照作者筛选
-    result = result.filter((item) => (queryParams?.developer ? item.owner.did === queryParams.get('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 replaceTranslate(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 = {
-        ...Object.fromEntries(queryParams.entries()),
-        sortBy: value,
-        sortDirection: value === 'nameAsc' ? 'asc' : 'desc',
-      };
-      if (isPageMode) {
-        sortParams.sort = changData.sortBy;
-        sortParams.direction = changData.sortDirection;
-        history.push(`${joinUrl(baseUrl, 'search')}?${urlStringify(changData)}`);
-      } else {
-        setMemoryParams(changData);
-      }
-    },
-    handleSearchKeyword: (value) => {
-      const changData = { ...Object.fromEntries(queryParams.entries()), search: value || undefined };
-      if (isPageMode) {
-        history.push(`${joinUrl(baseUrl, 'search')}?${urlStringify(changData)}`);
-      } else {
-        setMemoryParams(changData);
-      }
-    },
-    handlePriceFilter: (value) => {
-      const changData = {
-        ...Object.fromEntries(queryParams.entries()),
-        price: value === queryParams.get('price') ? undefined : value,
-      };
-      if (isPageMode) {
-        history.push(`${joinUrl(baseUrl, 'search')}?${urlStringify(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 = { ...Object.fromEntries(queryParams.entries()), category: undefined };
-        if (isPageMode) {
-          history.push(!isSearchPage ? baseUrl : `${joinUrl(baseUrl, 'search')}?${urlStringify(changData)}`);
-        } else {
-          setMemoryParams(changData);
-        }
-      } else {
-        const changData = { ...Object.fromEntries(queryParams.entries()), category: value };
-        if (isPageMode) {
-          history.push(
-            !isSearchPage
-              ? `${joinUrl(baseUrl, 'category', value)}`
-              : `${joinUrl(baseUrl, 'search')}?${urlStringify(changData)}`
-          );
-        } else {
-          setMemoryParams(changData);
-        }
-      }
-    },
-    get developerName() {
-      return allBlocklets.find((i) => i.owner.did === queryParams.get('developer'))?.owner?.name || '';
-    },
-  };
-
-  useEffect(() => {
-    if (!hasDeveloperFilter) {
-      fetchCategories();
-    }
-  }, [!hasDeveloperFilter]);
-
-  useEffect(() => {
-    fetchBlocklets();
-  }, [endpoint]);
-
-  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

@@ -1,53 +0,0 @@
-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] || {}),
-    }
-  );
-}