diff --git a/frontend/src/components/store/Store.tsx b/frontend/src/components/store/Store.tsx index 1afbb22b5..99d7fe40e 100644 --- a/frontend/src/components/store/Store.tsx +++ b/frontend/src/components/store/Store.tsx @@ -13,15 +13,14 @@ import { useTranslation } from 'react-i18next'; import logo from '../../../assets/plugin_store.png'; import Logger from '../../logger'; -import { Store, StorePlugin, getPluginList, getStore } from '../../store'; +import { Store, StorePlugin, getPluginList, getStore, SortOptions, SortDirections } from '../../store'; import PluginCard from './PluginCard'; const logger = new Logger('Store'); const StorePage: FC<{}> = () => { const [currentTabRoute, setCurrentTabRoute] = useState('browse'); - const [data, setData] = useState(null); - const [isTesting, setIsTesting] = useState(false); + const [pluginCount, setPluginCount] = useState(null); const { TabCount } = findModule((m) => { if (m?.TabCount && m?.TabTitle) return true; return false; @@ -29,17 +28,6 @@ const StorePage: FC<{}> = () => { const { t } = useTranslation(); - useEffect(() => { - (async () => { - const res = await getPluginList(); - logger.log('got data!', res); - setData(res); - const storeRes = await getStore(); - logger.log(`store is ${storeRes}, isTesting is ${storeRes === Store.Testing}`); - setIsTesting(storeRes === Store.Testing); - })(); - }, []); - return ( <>
= () => { background: '#0005', }} > - {!data ? ( -
- -
- ) : ( - { - setCurrentTabRoute(tabId); - }} - tabs={[ - { - title: t('Store.store_tabs.title'), - content: , - id: 'browse', - renderTabAddon: () => {data.length}, - }, - { - title: t('Store.store_tabs.about'), - content: , - id: 'about', - }, - ]} - /> - )} + { + setCurrentTabRoute(tabId); + }} + tabs={[ + { + title: t('Store.store_tabs.title'), + content: , + id: 'browse', + renderTabAddon: () => {pluginCount}, + }, + { + title: t('Store.store_tabs.about'), + content: , + id: 'about', + }, + ]} + />
); }; -const BrowseTab: FC<{ children: { data: StorePlugin[]; isTesting: boolean } }> = (data) => { +const BrowseTab: FC<{ children: { setPluginCount: setPluginCount } }> = (data) => { + const { t } = useTranslation(); - const sortOptions = useMemo( + const dropdownSortOptions = useMemo( (): DropdownOption[] => [ { data: 1, label: t('Store.store_tabs.alph_desc') }, { data: 2, label: t('Store.store_tabs.alph_asce') }, + { data: 3, label: "date descending" }, + { data: 4, label: "date ascending" }, ], [], ); // const filterOptions = useMemo((): DropdownOption[] => [{ data: 1, label: 'All' }], []); - - const [selectedSort, setSort] = useState(sortOptions[0].data); + const [selectedSort, setSort] = useState(dropdownSortOptions[0].data); // const [selectedFilter, setFilter] = useState(filterOptions[0].data); const [searchFieldValue, setSearchValue] = useState(''); + const [data, setData] = useState(null); + const [isTesting, setIsTesting] = useState(false); - return ( + useEffect(() => { + (async () => { + sort, direction = null, null + switch (selectedSort) { + case 1: direction=SortDirections.ascending;sort=SortOptions.name + case 2: direction=SortDirections.descending;sort=SortOptions.name + case 3: direction=SortDirections.ascending;sort=SortOptions.date + case 4: direction=SortDirections.descending;sort=SortOptions.date + } + const res = await getPluginList(sort, direction); + logger.log('got data!', res); + setData(res); + setPluginCount(res.length) + const storeRes = await getStore(); + logger.log(`store is ${storeRes}, isTesting is ${storeRes === Store.Testing}`); + setIsTesting(storeRes === Store.Testing); + })(); + }, []); + + return !data ? ( +
+ +
+ ) : ( <>