Skip to content

Commit

Permalink
Add pagination to asset store results (#6174)
Browse files Browse the repository at this point in the history
  • Loading branch information
@D8H
D8H authored Jan 11, 2024
1 parent ce93dc5 commit 556688c
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 34 deletions.
1 change: 1 addition & 0 deletions newIDE/app/src/AssetStore/AssetStoreNavigator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export type AssetStorePageState = {|
openedPrivateGameTemplateListingData: ?PrivateGameTemplateListingData,
selectedFolders: Array<string>,
filtersState: FiltersState,
pageBreakIndex?: ?number,
scrollPosition?: ?number,
displayAssets: boolean,
searchText?: string,
Expand Down
187 changes: 153 additions & 34 deletions newIDE/app/src/AssetStore/AssetsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import PrivateAssetPackAudioFilesDownloadButton from './PrivateAssets/PrivateAss
import { CorsAwareImage } from '../UI/CorsAwareImage';
import { Column, LargeSpacer, Line } from '../UI/Grid';
import Text from '../UI/Text';
import { ResponsiveLineStackLayout } from '../UI/Layout';
import { ResponsiveLineStackLayout, LineStackLayout } from '../UI/Layout';
import {
getUserPublicProfile,
type UserPublicProfile,
Expand All @@ -48,6 +48,8 @@ import Breadcrumbs from '../UI/Breadcrumbs';
import { getFolderTagsFromAssetShortHeaders } from './TagsHelper';
import { PrivateGameTemplateStoreContext } from './PrivateGameTemplates/PrivateGameTemplateStoreContext';
import { type AssetStorePageState } from './AssetStoreNavigator';
import RaisedButton from '../UI/RaisedButton';
import FlatButton from '../UI/FlatButton';

const ASSETS_DISPLAY_LIMIT = 250;

Expand Down Expand Up @@ -93,20 +95,38 @@ const getAssetFoldersColumns = (windowWidth: WidthType) => {
}
};

const getPageBreakAssetLowerIndex = (pageBreakIndex: number) =>
ASSETS_DISPLAY_LIMIT * pageBreakIndex;
const getPageBreakAssetUpperIndex = (pageBreakIndex: number) =>
ASSETS_DISPLAY_LIMIT * (pageBreakIndex + 1);

export const getAssetShortHeadersToDisplay = (
allAssetShortHeaders: AssetShortHeader[],
selectedFolders: string[]
selectedFolders: string[],
pageBreakIndex: number = 0
): AssetShortHeader[] => {
return allAssetShortHeaders
.filter(assetShortHeader => {
if (!selectedFolders.length) return true;
const allAssetTags = assetShortHeader.tags;
// Check that the asset has all the selected folders tags.
return selectedFolders.every(folderTag =>
allAssetTags.includes(folderTag)
);
})
.splice(0, ASSETS_DISPLAY_LIMIT); // Limit the number of displayed assets to avoid performance issues
let assetShortHeaders = allAssetShortHeaders.filter(assetShortHeader => {
if (!selectedFolders.length) return true;
const allAssetTags = assetShortHeader.tags;
// Check that the asset has all the selected folders tags.
return selectedFolders.every(folderTag => allAssetTags.includes(folderTag));
});
// Limit the number of displayed assets to avoid performance issues
const pageBreakAssetLowerIndex = getPageBreakAssetLowerIndex(pageBreakIndex);
const pageBreakAssetUpperIndex = Math.min(
getPageBreakAssetUpperIndex(pageBreakIndex),
assetShortHeaders.length
);
if (
pageBreakAssetLowerIndex !== 0 ||
pageBreakAssetUpperIndex !== assetShortHeaders.length
) {
assetShortHeaders = assetShortHeaders.slice(
pageBreakAssetLowerIndex,
pageBreakAssetUpperIndex
);
}
return assetShortHeaders;
};

const cellSpacing = 8;
Expand All @@ -130,6 +150,56 @@ const styles = {
},
};

type PageBreakNavigationProps = {|
currentPage: AssetStorePageState,
pageBreakIndex: number,
setPageBreakIndex: number => void,
assetShortHeaders: Array<AssetShortHeader>,
scrollView: ?ScrollViewInterface,
|};

const PageBreakNavigation = ({
currentPage,
pageBreakIndex,
setPageBreakIndex,
assetShortHeaders,
scrollView,
}: PageBreakNavigationProps) => {
return (
<Column>
<LineStackLayout justifyContent="center">
<FlatButton
key="previous-assets"
label={<Trans>Show previous assets</Trans>}
onClick={() => {
currentPage.pageBreakIndex = Math.max(
0,
(currentPage.pageBreakIndex || 0) - 1
);
setPageBreakIndex(currentPage.pageBreakIndex);
scrollView && scrollView.scrollToPosition(0);
}}
disabled={pageBreakIndex <= 0}
/>
<RaisedButton
key="next-assets"
primary
label={<Trans>Show next assets</Trans>}
onClick={() => {
currentPage.pageBreakIndex = (currentPage.pageBreakIndex || 0) + 1;
setPageBreakIndex(currentPage.pageBreakIndex);
scrollView && scrollView.scrollToPosition(0);
}}
disabled={
assetShortHeaders.length <
getPageBreakAssetUpperIndex(pageBreakIndex)
}
/>
</LineStackLayout>
</Column>
);
};

export type AssetsListInterface = {|
getScrollPosition: () => number,
scrollToPosition: (y: number) => void,
Expand Down Expand Up @@ -345,7 +415,8 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
if (
!allPrivateAssetPackListingDatas ||
!openedAssetPack ||
!openedAssetPack.id // public pack selected.
// public pack selected.
!openedAssetPack.id
)
return null;

Expand All @@ -359,14 +430,21 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
[allPrivateAssetPackListingDatas, openedAssetPack]
);

const [pageBreakIndex, setPageBreakIndex] = React.useState<number>(
(currentPage && currentPage.pageBreakIndex) || 0
);

const assetTiles = React.useMemo(
() => {
if (!assetShortHeaders) return null; // Loading
if (hasAssetPackFiltersApplied && !openedAssetPack) return []; // Don't show assets if filtering on asset packs.)
// Loading
if (!assetShortHeaders) return null;
// Don't show assets if filtering on asset packs.)
if (hasAssetPackFiltersApplied && !openedAssetPack) return [];

return getAssetShortHeadersToDisplay(
assetShortHeaders,
selectedFolders
selectedFolders,
pageBreakIndex
).map(assetShortHeader => (
<AssetCardTile
assetShortHeader={assetShortHeader}
Expand All @@ -379,11 +457,12 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
},
[
assetShortHeaders,
onOpenDetails,
windowWidth,
selectedFolders,
hasAssetPackFiltersApplied,
openedAssetPack,
selectedFolders,
pageBreakIndex,
windowWidth,
onOpenDetails,
]
);

Expand All @@ -392,7 +471,8 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
if (
!publicAssetPacks ||
!onPublicAssetPackSelection ||
hasAssetFiltersApplied // Don't show public packs if filtering on assets.
// Don't show public packs if filtering on assets.
hasAssetFiltersApplied
)
return [];
return publicAssetPacks.map((assetPack, index) => (
Expand All @@ -416,7 +496,8 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
if (
!privateAssetPackListingDatas ||
!receivedAssetPacks ||
hasAssetFiltersApplied // Don't show private packs if filtering on assets.
// Don't show private packs if filtering on assets.
hasAssetFiltersApplied
) {
return {
allStandAlonePackTiles: [],
Expand Down Expand Up @@ -490,8 +571,10 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
if (
!privateGameTemplateListingDatas ||
!onPrivateGameTemplateSelection ||
hasAssetFiltersApplied || // Don't show private game templates if filtering on assets.
hasAssetPackFiltersApplied // Don't show private game templates if filtering on asset packs.
// Don't show private game templates if filtering on assets.
hasAssetFiltersApplied ||
// Don't show private game templates if filtering on asset packs.
hasAssetPackFiltersApplied
)
return [];

Expand Down Expand Up @@ -594,7 +677,21 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
</Trans>
</PlaceholderError>
)}
{!openedAssetPack && gameTemplateTiles.length ? (
{currentPage &&
assetShortHeaders &&
assetShortHeaders.length > getPageBreakAssetUpperIndex(0) &&
pageBreakIndex > 0 && (
<PageBreakNavigation
currentPage={currentPage}
pageBreakIndex={pageBreakIndex}
setPageBreakIndex={setPageBreakIndex}
assetShortHeaders={assetShortHeaders}
scrollView={scrollView.current}
/>
)}
{!openedAssetPack &&
gameTemplateTiles.length &&
pageBreakIndex === 0 ? (
<Line expand>
<Column noMargin expand>
<GridList
Expand All @@ -608,7 +705,9 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
</Column>
</Line>
) : null}
{!openedAssetPack && allBundlePackTiles.length ? (
{!openedAssetPack &&
allBundlePackTiles.length &&
pageBreakIndex === 0 ? (
<Line expand>
<Column noMargin expand>
<GridList
Expand All @@ -622,7 +721,9 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
</Column>
</Line>
) : null}
{!openedAssetPack && allStandAlonePackTiles.length ? (
{!openedAssetPack &&
allStandAlonePackTiles.length &&
pageBreakIndex === 0 ? (
<Line expand>
<Column noMargin expand>
<GridList
Expand Down Expand Up @@ -767,14 +868,20 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
assetPack={openedAssetPack}
/>
) : null}
{assetTiles && // loading is finished.
!assetTiles.length && // No assets to show.
!allBundlePackTiles.length && // No bundles to show.
!allStandAlonePackTiles.length && // No packs to show.
!gameTemplateTiles.length && // no templates to show.
(!openedAssetPack ||
!openedAssetPack.content ||
!isAssetPackAudioOnly(openedAssetPack)) && // It's not an audio pack.
{// loading is finished.
assetTiles &&
// No assets to show.
!assetTiles.length &&
// No bundles to show.
!allBundlePackTiles.length &&
// No packs to show.
!allStandAlonePackTiles.length &&
// no templates to show.
!gameTemplateTiles.length &&
(!openedAssetPack ||
!openedAssetPack.content ||
// It's not an audio pack.
!isAssetPackAudioOnly(openedAssetPack)) &&
noResultComponent}
{onPrivateAssetPackSelection &&
openAuthorPublicProfileDialog &&
Expand All @@ -789,6 +896,18 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
}}
/>
)}

{currentPage &&
assetShortHeaders &&
assetShortHeaders.length > getPageBreakAssetUpperIndex(0) && (
<PageBreakNavigation
currentPage={currentPage}
pageBreakIndex={pageBreakIndex}
setPageBreakIndex={setPageBreakIndex}
assetShortHeaders={assetShortHeaders}
scrollView={scrollView.current}
/>
)}
</ScrollView>
);
}
Expand Down

0 comments on commit 556688c

Please sign in to comment.