diff --git a/packages/components/src/api/index.tsx b/packages/components/src/api/index.tsx index 7e53f0301f..cdfa1d7034 100644 --- a/packages/components/src/api/index.tsx +++ b/packages/components/src/api/index.tsx @@ -1,13 +1,12 @@ +import { FetchStatus } from "./_common/SharedFetchTypes"; import { MediaFileType, GetMediaByUser } from "./media_files"; - import { Weight, ListWeights } from "./weights"; - import { GetBookmarksByUser } from "./bookmarks/GetBookmarksByUser"; @@ -17,6 +16,7 @@ export type{ Weight } export { + FetchStatus, GetBookmarksByUser, GetMediaByUser, ListWeights diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx index 395e71f2c8..68e838ab46 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx @@ -1,11 +1,12 @@ -import React, {useRef, useState} from 'react'; +import React, {useRef, useState, useEffect} from 'react'; import { useBookmarks, useLazyLists, useRatings, - // useSession } from "hooks"; + import { + FetchStatus, Weight as WeightI, ListWeights } from "@storyteller/components/src/api"; @@ -27,31 +28,48 @@ export default function WeightsTabsContent({ weightType: "sd_1.5" | "loRA"; onSelect: (data:SelectModalData) => void; }){ + const pageSize = 9; const gridContainerRef = useRef(null); const bookmarks = useBookmarks(); const ratings = useRatings(); const [list, listSet] = useState([]); - const [pages, setPages] = useState<{ + const [lazyPages, setLazyPages] = useState<{ currPageWeights: any[], - lookup: string[] + currPageIndex: number, + pageLookup: string[], + hasNext: boolean }>({ currPageWeights: [], - lookup: [] + currPageIndex: 0, + pageLookup: [], + hasNext: true }); - + const {currPageWeights, currPageIndex, pageLookup} = lazyPages; + const weights = useLazyLists({ addQueries: { - page_size: 9, + page_size: pageSize, ...prepFilter(weightType, "weight_type"), }, fetcher: ListWeights, onSuccess: (res)=>{ - setPages((curr)=>{ - return{ + if(debug) console.log(res); + //case of first load + if(currPageWeights.length === 0){ + setLazyPages((prev)=>({ currPageWeights: [...res.results], - lookup: [...curr.lookup, res.pagination.maybe_next] - } - }) + currPageIndex: 0, + hasNext: true, + pageLookup: [...prev.pageLookup, res.pagination.maybe_next] + })); + } + //case of last page + if (res.results.length === 0) { + setLazyPages((prevState)=>({ + ...prevState, + hasNext: false, + })); + } }, list, listSet, @@ -59,15 +77,36 @@ export default function WeightsTabsContent({ urlUpdate: false, }); + useEffect(()=>{ + if (weights.next && lazyPages.hasNext + && (currPageIndex+1)*pageSize >= weights.list.length + && weights.status === FetchStatus.success + ){ + //preload nextPage + // if(debug) console.log('useEffect: getMore') + weights.getMore(); + } + },[weights, currPageIndex, lazyPages.hasNext]); - const handlePageClick = (selectedItem: { selected: number }) => { - weights.getMore(); + const handlePageChange = (selectedItem: { selected: number }) => { + if(debug)console.log(`selected page: ${selectedItem.selected}`) + const startIdx = selectedItem.selected * 9 + const endIdx = (selectedItem.selected+1)*9 <= weights.list.length + ? (selectedItem.selected+1)*9 : weights.list.length; + if (debug) console.log(`should slice ${startIdx}-${endIdx}`) + if (debug) console.log(weights.list) + setLazyPages((prevState)=>({ + ...prevState, + currPageWeights: weights.list.slice(startIdx,endIdx), + currPageIndex: selectedItem.selected, + })); + // } }; const paginationProps = { - onPageChange: handlePageClick, - pageCount: pages.lookup.length+1, - currentPage: 0, + onPageChange: handlePageChange, + pageCount: pageLookup.length+1, + currentPage: currPageIndex, }; if (weights.isLoading){ return ( @@ -91,9 +130,9 @@ export default function WeightsTabsContent({ console.log("Layout complete!")} + onLayoutComplete={() => {if(debug)console.log("Layout complete!")}} > - {pages.currPageWeights.map((data: any, key: number) => { + {currPageWeights.map((data: any, key: number) => { let props = { data, ratings, diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx index 566ff32fc7..0a4e7c3e2f 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx @@ -48,8 +48,8 @@ export default function WeightsTabsContent({ const handlePageClick = (selectedItem: { selected: number }) => { weights.pageChange(selectedItem.selected); }; - console.log("BOOKMARKED"); - console.log(weights); + // console.log("BOOKMARKED"); + // console.log(weights); const paginationProps = { onPageChange: handlePageClick, pageCount: weights.pageCount + 1, @@ -79,7 +79,7 @@ export default function WeightsTabsContent({ } console.log("Layout complete!")} + onLayoutComplete={() => {if(debug)console.log("Layout complete!")}} > {weights.list.map((data: any, key: number) => { //TODO: data should be TYPED