From 9ebb61baab171671f0a6bfced645a9b406641f40 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 20 Feb 2024 18:17:57 -0500 Subject: [PATCH 1/4] guarding end of list successfully --- .../SelectModalWeightsTabs/tabAllWeights.tsx | 39 +++++++++++++------ 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx index 395e71f2c8..03a9ea36eb 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx @@ -27,31 +27,44 @@ 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<{ currPageWeights: any[], - lookup: string[] + currPageIndex: number, + lookup: string[], + hasNext: 0|1 }>({ currPageWeights: [], - lookup: [] + currPageIndex: 0, + lookup: [], + hasNext: 0 }); const weights = useLazyLists({ addQueries: { - page_size: 9, + page_size: pageSize, ...prepFilter(weightType, "weight_type"), }, fetcher: ListWeights, onSuccess: (res)=>{ - setPages((curr)=>{ - return{ + if (res.results.length>0 + && res.pagination.maybe_next !== pages.lookup[pages.lookup.length -1]){ + setPages((curr)=>({ currPageWeights: [...res.results], + currPageIndex: curr.lookup.length, + hasNext: 1, lookup: [...curr.lookup, res.pagination.maybe_next] - } - }) + })); + }else if (res.results.length === 0) { + setPages((curr)=>({ + ...curr, + hasNext: 0, + })); + } }, list, listSet, @@ -59,15 +72,19 @@ export default function WeightsTabsContent({ urlUpdate: false, }); - const handlePageClick = (selectedItem: { selected: number }) => { - weights.getMore(); + if(selectedItem.selected * 9 + 9 > weights.list.length) + weights.getMore(); + else{ + //TODO: + console.log('dealing with slicing list here'); + } }; const paginationProps = { onPageChange: handlePageClick, - pageCount: pages.lookup.length+1, - currentPage: 0, + pageCount: pages.lookup.length+pages.hasNext, + currentPage: pages.currPageIndex, }; if (weights.isLoading){ return ( From 471f34ac9ee3126809ba2060b0e6b9a05c4f53ac Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 21 Feb 2024 13:29:56 -0500 Subject: [PATCH 2/4] lazylist math is good, next up is fetch states --- .../SelectModalWeightsTabs/tabAllWeights.tsx | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx index 03a9ea36eb..fde0add174 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx @@ -72,17 +72,27 @@ export default function WeightsTabsContent({ urlUpdate: false, }); - const handlePageClick = (selectedItem: { selected: number }) => { - if(selectedItem.selected * 9 + 9 > weights.list.length) + const handlePageChange = (selectedItem: { selected: number }) => { + console.log(`selected page: ${selectedItem.selected}`) + if(selectedItem.selected * 9 + 9 > weights.list.length && pages.hasNext){ + console.log("should get more") weights.getMore(); - else{ - //TODO: - console.log('dealing with slicing list here'); + }else{ + const startIdx = selectedItem.selected * 9 + const endIdx = (selectedItem.selected+1)*9 <= weights.list.length + ? (selectedItem.selected+1)*9 : weights.list.length; + console.log(`should slice ${startIdx}-${endIdx}`) + console.log(weights.list) + setPages((curr)=>({ + ...curr, + currPageWeights: weights.list.slice(startIdx,endIdx), + currPageIndex: selectedItem.selected, + })); } }; const paginationProps = { - onPageChange: handlePageClick, + onPageChange: handlePageChange, pageCount: pages.lookup.length+pages.hasNext, currentPage: pages.currPageIndex, }; @@ -108,7 +118,7 @@ export default function WeightsTabsContent({ console.log("Layout complete!")} + onLayoutComplete={() => console.log("Layout complete!")} > {pages.currPageWeights.map((data: any, key: number) => { let props = { From e2eb7dc2dc366e99cc91a4708aa94043a61f0065 Mon Sep 17 00:00:00 2001 From: wil Date: Wed, 21 Feb 2024 14:40:39 -0500 Subject: [PATCH 3/4] get more overflow once --- .../SelectModalWeightsTabs/tabAllWeights.tsx | 68 +++++++++++-------- .../pageWorkflowControls.tsx | 1 + 2 files changed, 40 insertions(+), 29 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx index fde0add174..f9f3dc0782 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx @@ -1,4 +1,4 @@ -import React, {useRef, useState} from 'react'; +import React, {useRef, useState, useEffect} from 'react'; import { useBookmarks, useLazyLists, @@ -32,18 +32,19 @@ export default function WeightsTabsContent({ const bookmarks = useBookmarks(); const ratings = useRatings(); const [list, listSet] = useState([]); - const [pages, setPages] = useState<{ + const [lazyPages, setLazyPages] = useState<{ currPageWeights: any[], currPageIndex: number, - lookup: string[], - hasNext: 0|1 + pageLookup: string[], + hasNext: boolean }>({ currPageWeights: [], currPageIndex: 0, - lookup: [], - hasNext: 0 + pageLookup: [], + hasNext: true }); - + const {currPageWeights, currPageIndex, pageLookup} = lazyPages; + const weights = useLazyLists({ addQueries: { page_size: pageSize, @@ -51,18 +52,21 @@ export default function WeightsTabsContent({ }, fetcher: ListWeights, onSuccess: (res)=>{ - if (res.results.length>0 - && res.pagination.maybe_next !== pages.lookup[pages.lookup.length -1]){ - setPages((curr)=>({ + if(debug) console.log(res); + //case of first load + if(currPageWeights.length === 0){ + setLazyPages((prev)=>({ currPageWeights: [...res.results], - currPageIndex: curr.lookup.length, - hasNext: 1, - lookup: [...curr.lookup, res.pagination.maybe_next] + currPageIndex: 0, + hasNext: true, + pageLookup: [...prev.pageLookup, res.pagination.maybe_next] })); - }else if (res.results.length === 0) { - setPages((curr)=>({ - ...curr, - hasNext: 0, + } + //case of last page + if (res.results.length === 0) { + setLazyPages((prevState)=>({ + ...prevState, + hasNext: false, })); } }, @@ -72,29 +76,35 @@ export default function WeightsTabsContent({ urlUpdate: false, }); + useEffect(()=>{ + + if(weights.next && lazyPages.hasNext && + (currPageIndex+1)*pageSize >= weights.list.length){ + //preload nextPage + console.log('getMore') + weights.getMore(); + } + },[weights, currPageIndex]); + const handlePageChange = (selectedItem: { selected: number }) => { console.log(`selected page: ${selectedItem.selected}`) - if(selectedItem.selected * 9 + 9 > weights.list.length && pages.hasNext){ - console.log("should get more") - weights.getMore(); - }else{ const startIdx = selectedItem.selected * 9 const endIdx = (selectedItem.selected+1)*9 <= weights.list.length ? (selectedItem.selected+1)*9 : weights.list.length; - console.log(`should slice ${startIdx}-${endIdx}`) - console.log(weights.list) - setPages((curr)=>({ - ...curr, + 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: handlePageChange, - pageCount: pages.lookup.length+pages.hasNext, - currentPage: pages.currPageIndex, + pageCount: pageLookup.length+1, + currentPage: currPageIndex, }; if (weights.isLoading){ return ( @@ -120,7 +130,7 @@ export default function WeightsTabsContent({ gridRef={gridContainerRef} onLayoutComplete={() => 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/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx index 5ccec551bd..b545ffb841 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx @@ -167,6 +167,7 @@ export default function PageFilterControls({
Date: Wed, 21 Feb 2024 15:36:32 -0500 Subject: [PATCH 4/4] seems like all bugs are killed --- packages/components/src/api/index.tsx | 4 +- .../SelectModalWeightsTabs/tabAllWeights.tsx | 38 ++++++++++--------- .../tabBookmarkedWeights.tsx | 6 +-- .../pageWorkflowControls.tsx | 1 - 4 files changed, 25 insertions(+), 24 deletions(-) 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 f9f3dc0782..68e838ab46 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx @@ -3,9 +3,10 @@ import { useBookmarks, useLazyLists, useRatings, - // useSession } from "hooks"; + import { + FetchStatus, Weight as WeightI, ListWeights } from "@storyteller/components/src/api"; @@ -77,28 +78,29 @@ export default function WeightsTabsContent({ }); useEffect(()=>{ - - if(weights.next && lazyPages.hasNext && - (currPageIndex+1)*pageSize >= weights.list.length){ + if (weights.next && lazyPages.hasNext + && (currPageIndex+1)*pageSize >= weights.list.length + && weights.status === FetchStatus.success + ){ //preload nextPage - console.log('getMore') + // if(debug) console.log('useEffect: getMore') weights.getMore(); } - },[weights, currPageIndex]); + },[weights, currPageIndex, lazyPages.hasNext]); const handlePageChange = (selectedItem: { selected: number }) => { - console.log(`selected page: ${selectedItem.selected}`) - const startIdx = selectedItem.selected * 9 - const endIdx = (selectedItem.selected+1)*9 <= weights.list.length + 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, - })); - // } + 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 = { @@ -128,7 +130,7 @@ export default function WeightsTabsContent({
console.log("Layout complete!")} + onLayoutComplete={() => {if(debug)console.log("Layout complete!")}} > {currPageWeights.map((data: any, key: number) => { let props = { 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 diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx index b545ffb841..5ccec551bd 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx @@ -167,7 +167,6 @@ export default function PageFilterControls({