diff --git a/backend/locales/en-US.json b/backend/locales/en-US.json index 7845ae4fe..aaa7659f5 100644 --- a/backend/locales/en-US.json +++ b/backend/locales/en-US.json @@ -218,6 +218,10 @@ "about": "About", "alph_asce": "Alphabetical (Z to A)", "alph_desc": "Alphabetical (A to Z)", + "date_asce": "Oldest First", + "date_desc": "Newest First", + "downloads_asce": "Least Downloaded First", + "downloads_desc": "Most Downloaded First", "title": "Browse" }, "store_testing_cta": "Please consider testing new plugins to help the Decky Loader team!", diff --git a/frontend/src/components/store/Store.tsx b/frontend/src/components/store/Store.tsx index 1afbb22b5..e3d1b0f16 100644 --- a/frontend/src/components/store/Store.tsx +++ b/frontend/src/components/store/Store.tsx @@ -8,20 +8,19 @@ import { TextField, findModule, } from 'decky-frontend-lib'; -import { FC, useEffect, useMemo, useState } from 'react'; +import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import logo from '../../../assets/plugin_store.png'; import Logger from '../../logger'; -import { Store, StorePlugin, getPluginList, getStore } from '../../store'; +import { SortDirections, SortOptions, Store, StorePlugin, getPluginList, getStore } 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<{ setPluginCount: Dispatch> }> = ({ setPluginCount }) => { 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') }, + // ascending and descending order are the wrong way around for the alphabetical sort + // this is because it was initially done incorrectly for i18n and 'fixing' it would + // make all the translations incorrect + { data: [SortOptions.name, SortDirections.ascending], label: t('Store.store_tabs.alph_desc') }, + { data: [SortOptions.name, SortDirections.descending], label: t('Store.store_tabs.alph_asce') }, + { data: [SortOptions.date, SortDirections.ascending], label: t('Store.store_tabs.date_asce') }, + { data: [SortOptions.date, SortDirections.descending], label: t('Store.store_tabs.date_desc') }, + { data: [SortOptions.downloads, SortDirections.descending], label: t('Store.store_tabs.downloads_desc') }, + { data: [SortOptions.downloads, SortDirections.ascending], label: t('Store.store_tabs.downloads_asce') }, ], [], ); // const filterOptions = useMemo((): DropdownOption[] => [{ data: 1, label: 'All' }], []); - - const [selectedSort, setSort] = useState(sortOptions[0].data); + const [selectedSort, setSort] = useState<[SortOptions, SortDirections]>(dropdownSortOptions[0].data); // const [selectedFilter, setFilter] = useState(filterOptions[0].data); const [searchFieldValue, setSearchValue] = useState(''); + const [pluginList, setPluginList] = useState(null); + const [isTesting, setIsTesting] = useState(false); + + useEffect(() => { + (async () => { + const res = await getPluginList(selectedSort[0], selectedSort[1]); + logger.log('got data!', res); + setPluginList(res); + setPluginCount(res.length); + })(); + }, [selectedSort]); + + useEffect(() => { + (async () => { + const storeRes = await getStore(); + logger.log(`store is ${storeRes}, isTesting is ${storeRes === Store.Testing}`); + setIsTesting(storeRes === Store.Testing); + })(); + }, []); return ( <> @@ -117,7 +124,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[]; isTesting: boolean } }> = {t("Store.store_sort.label")} setSort(e.data)} @@ -163,7 +170,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[]; isTesting: boolean } }> = {t('Store.store_sort.label')} setSort(e.data)} @@ -182,7 +189,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[]; isTesting: boolean } }> = - {data.children.isTesting && ( + {isTesting && (
=
)}
- {data.children.data - .filter((plugin: StorePlugin) => { - return ( - plugin.name.toLowerCase().includes(searchFieldValue.toLowerCase()) || - plugin.description.toLowerCase().includes(searchFieldValue.toLowerCase()) || - plugin.author.toLowerCase().includes(searchFieldValue.toLowerCase()) || - plugin.tags.some((tag: string) => tag.toLowerCase().includes(searchFieldValue.toLowerCase())) - ); - }) - .sort((a, b) => { - if (selectedSort % 2 === 1) return a.name.localeCompare(b.name); - else return b.name.localeCompare(a.name); - }) - .map((plugin: StorePlugin) => ( - - ))} + {!pluginList ? ( +
+ +
+ ) : ( + pluginList + .filter((plugin: StorePlugin) => { + return ( + plugin.name.toLowerCase().includes(searchFieldValue.toLowerCase()) || + plugin.description.toLowerCase().includes(searchFieldValue.toLowerCase()) || + plugin.author.toLowerCase().includes(searchFieldValue.toLowerCase()) || + plugin.tags.some((tag: string) => tag.toLowerCase().includes(searchFieldValue.toLowerCase())) + ); + }) + .map((plugin: StorePlugin) => ) + )}
); diff --git a/frontend/src/store.tsx b/frontend/src/store.tsx index 3fcfdb2f7..8ab8f50a3 100644 --- a/frontend/src/store.tsx +++ b/frontend/src/store.tsx @@ -7,6 +7,17 @@ export enum Store { Custom, } +export enum SortOptions { + name = 'name', + date = 'date', + downloads = 'downloads', +} + +export enum SortDirections { + ascending = 'asc', + descending = 'desc', +} + export interface StorePluginVersion { name: string; hash: string; @@ -36,10 +47,19 @@ export async function getStore(): Promise { return await getSetting('store', Store.Default); } -export async function getPluginList(): Promise { - let version = await DeckyPluginLoader.updateVersion(); +export async function getPluginList( + sort_by: SortOptions | null = null, + sort_direction: SortDirections | null = null, +): Promise { + let version = await window.DeckyPluginLoader.updateVersion(); let store = await getSetting('store', null); let customURL = await getSetting('store-url', 'https://plugins.deckbrew.xyz/plugins'); + + let query: URLSearchParams | string = new URLSearchParams(); + sort_by && query.set('sort_by', sort_by); + sort_direction && query.set('sort_direction', sort_direction); + query = '?' + String(query); + let storeURL; if (store === null) { console.log('Could not get store, using Default.'); @@ -82,7 +102,7 @@ export async function getPluginList(): Promise { storeURL = 'https://plugins.deckbrew.xyz/plugins'; break; } - return fetch(storeURL, { + return fetch(storeURL + query, { method: 'GET', headers: { 'X-Decky-Version': version.current,