From c2ac2eb10081ec32f07f524af2d57ea13cc00c1f Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 10 Feb 2024 12:46:31 +0700 Subject: [PATCH 1/2] bookmarked weights in selectmodal --- .../common/Card/AudioCard/AudioCard.tsx | 59 +++-- .../common/Card/ImageCard/ImageCard.tsx | 8 + .../src/components/common/Modal/Modal.scss | 2 +- .../components/common/Searcher/Searcher.tsx | 2 + .../common/SelectModal/SelectModal.tsx | 107 ++++---- .../common/SelectModal/SelectWeightsList.tsx | 232 ++++++++++++++---- .../components/common/TempInput/TempInput.tsx | 19 +- .../hooks/useListContent/useListContent.tsx | 17 +- .../pages/text_to_image/TextToImagePage.tsx | 17 +- .../components/TextToImageJobsList.tsx | 3 - .../inference_panels/SdInferencePanel.tsx | 2 + 11 files changed, 322 insertions(+), 146 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx index c8bd6a2ce8..07b73cc8da 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -23,6 +23,7 @@ interface AudioCardProps { type: "media" | "weights"; inSelectModal?: boolean; onResultSelect?: (data: { token: string; title: string }) => void; + onResultBookmarkSelect?: (data: { token: string; title: string }) => void; // onClick?: (e:any) => any; } @@ -37,16 +38,24 @@ export default function AudioCard({ inSelectModal = false, // onClick: inClick, onResultSelect, + onResultBookmarkSelect, }: AudioCardProps) { const linkUrl = getCardUrl(data, source, type); const history = useHistory(); const handleSelectModalResultSelect = () => { - if (inSelectModal && onResultSelect) { - onResultSelect({ - token: data.weight_token, - title: data.title, - }); + if (inSelectModal) { + onResultSelect && + onResultSelect({ + token: data.weight_token, + title: data.title, + }); + + onResultBookmarkSelect && + onResultBookmarkSelect({ + token: data.details.entity_token, + title: data.details.maybe_weight_data.title, + }); } }; @@ -90,7 +99,9 @@ export default function AudioCard({
- +
@@ -102,14 +113,16 @@ export default function AudioCard({

{timeAgo}

- + )} @@ -163,14 +176,16 @@ export default function AudioCard({ - + )} diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx index d5cd1744c0..36a350703c 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -20,6 +20,7 @@ interface ImageCardProps { type: "media" | "weights"; inSelectModal?: boolean; onResultSelect?: (data: { token: string; title: string }) => void; + onResultBookmarkSelect?: (data: { token: string; title: string }) => void; } export default function ImageCard({ @@ -31,6 +32,7 @@ export default function ImageCard({ type, inSelectModal = false, onResultSelect, + onResultBookmarkSelect, }: ImageCardProps) { const history = useHistory(); // const { setToken, setWeightTitle } = useToken(); @@ -44,6 +46,12 @@ export default function ImageCard({ token: data.weight_token, title: data.title, }); + + onResultBookmarkSelect && + onResultBookmarkSelect({ + token: data.details.entity_token, + title: data.details.maybe_weight_data.title, + }); } }; diff --git a/packages/fakeyou.com/src/components/common/Modal/Modal.scss b/packages/fakeyou.com/src/components/common/Modal/Modal.scss index 926704db75..6b99159d93 100644 --- a/packages/fakeyou.com/src/components/common/Modal/Modal.scss +++ b/packages/fakeyou.com/src/components/common/Modal/Modal.scss @@ -68,6 +68,6 @@ .modal-content { // width: 85vw; min-height: 70vh; - padding: 1rem; + padding: 1.5rem; } } diff --git a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx index 4cabfca6e2..d78ab6ba05 100644 --- a/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx +++ b/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx @@ -127,6 +127,8 @@ export default function Searcher({ foundWeights.map((data: any, key: number) => { let props = { data, + ratings, + bookmarks, type: "weights", inSelectModal: true, onResultSelect, diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx index 6e84965fdc..c13a9d193c 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModal.tsx @@ -11,13 +11,14 @@ import SelectWeightsList from "./SelectWeightsList"; export type SelectModalData = { token: string; title: string; -} +}; interface TabConfig { label: string; tabKey: string; type: "media" | "weights"; typeFilter?: string; searcher?: boolean; + onlyBookmarked?: boolean; } interface SelectModalProps { label?: string; @@ -37,42 +38,46 @@ const SelectModal = memo( value, required, }: SelectModalProps) => { - const emptyValue = {token:"", title:""}; - const [{isModalOpen, selectedValue, valueType, activeTab}, setState] = useState({ - isModalOpen:false, - selectedValue: value ? value : emptyValue, - activeTab: tabs[0].tabKey, - valueType: tabs[0].typeFilter || "all" - }) + const emptyValue = { token: "", title: "" }; + const [{ isModalOpen, selectedValue, valueType, activeTab }, setState] = + useState({ + isModalOpen: false, + selectedValue: value ? value : emptyValue, + activeTab: tabs[0].tabKey, + valueType: tabs[0].typeFilter || "all", + }); console.log("🔫", tabs, activeTab, valueType); // Update mediaType when activeTab changes useEffect(() => { const currentTab = tabs.find(tab => tab.tabKey === activeTab); - setState((curr)=>({...curr, valueType: currentTab?.typeFilter || "all"})) + setState(curr => ({ + ...curr, + valueType: currentTab?.typeFilter || "all", + })); }, [activeTab, tabs]); const openModal = () => { - setState((curr)=>({...curr, isModalOpen: true})); + setState(curr => ({ ...curr, isModalOpen: true })); }; const closeModal = () => { - setState((curr)=>({...curr, isModalOpen: false})); + setState(curr => ({ ...curr, isModalOpen: false })); }; const handleRemove = () => { - setState((curr)=>({...curr, selectedValue: emptyValue})); + setState(curr => ({ ...curr, selectedValue: emptyValue })); if (onSelect) onSelect(emptyValue); }; - const handleOnSelect = (data:{token:string, title:string}) => { - setState((curr)=>({ + const handleOnSelect = (data: { token: string; title: string }) => { + setState(curr => ({ ...curr, - selectedValue: {token: data.token, title: data.title || ""}, - isModalOpen: false + selectedValue: { token: data.token, title: data.title || "" }, + isModalOpen: false, })); if (onSelect) onSelect(data); - } + }; const searchTabs = tabs.map(tab => ({ label: tab.label, @@ -93,16 +98,27 @@ const SelectModal = memo( /> )} {tab.type === "weights" && ( - + <> + {tab.onlyBookmarked ? ( + + ) : ( + + )} + )} ), padding: true, - onClick: () => setState((curr)=>({...curr, activeTab: tab.tabKey})), + onClick: () => setState(curr => ({ ...curr, activeTab: tab.tabKey })), })); return ( @@ -114,32 +130,35 @@ const SelectModal = memo( )} -
-
+
- -
@@ -159,4 +178,4 @@ const SelectModal = memo( } ); -export default SelectModal; \ No newline at end of file +export default SelectModal; diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx index d815573b0c..705ad331fc 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectWeightsList.tsx @@ -1,32 +1,55 @@ import React, { useRef, useState } from "react"; import MasonryGrid from "../MasonryGrid/MasonryGrid"; import InfiniteScroll from "react-infinite-scroll-component"; -import { useLazyLists } from "hooks"; +import { + useBookmarks, + useLazyLists, + useListContent, + useRatings, + useSession, +} from "hooks"; import prepFilter from "resources/prepFilter"; import WeightsCards from "../Card/WeightsCards"; import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights"; import { Weight } from "@storyteller/components/src/api/weights/GetWeight"; +import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser"; +import Pagination from "../Pagination"; interface SelectWeightsListProps { weightType: string; listKey: string; - onResultSelect?: (data:{token:string, title:string}) => void; + onResultSelect?: (data: { token: string; title: string }) => void; + onResultBookmarkSelect?: (data: { token: string; title: string }) => void; + onlyBookmarked?: boolean; } export default function SelectWeightsList({ weightType, listKey, onResultSelect, + onResultBookmarkSelect, + onlyBookmarked, }: SelectWeightsListProps) { const gridContainerRef = useRef(null); + const gridContainerRef2 = useRef(null); const [list, listSet] = useState([]); + const [bookmarksList, setBookmarksList] = useState([]); + const bookmarks = useBookmarks(); + const ratings = useRatings(); + const { user } = useSession(); + const [showBookmarksMasonryGrid, setShowBookmarksMasonryGrid] = + useState(false); + const handlePageClick = (selectedItem: { selected: number }) => { + pageChange(selectedItem.selected); + }; + + //weights const weights = useLazyLists({ addQueries: { page_size: 9, ...prepFilter(weightType, "weight_type"), }, - debug: "Weights List", fetcher: ListWeights, list, listSet, @@ -34,61 +57,164 @@ export default function SelectWeightsList({ disableUrlQueries: true, }); + //bookmarks + const { isLoading, page, pageChange, pageCount, status } = useListContent({ + addQueries: { + page_size: 9, + ...prepFilter(weightType, "weight_type"), + }, + fetcher: GetBookmarksByUser, + onSuccess: res => { + setShowBookmarksMasonryGrid(true); + }, + list: bookmarksList, + debug: "bookmarks tab", + listSet: setBookmarksList, + requestList: true, + urlParam: user.username, + disableUrlQueries: true, + }); + + const paginationProps = { + onPageChange: handlePageClick, + pageCount, + currentPage: page, + }; + return (
- -
- Loading... -
-
- ) - } - endMessage={ -

No more results.

- } - className="overflow-hidden" - scrollableTarget={listKey} - scrollThreshold={0.95} - > + {onlyBookmarked ? ( <> - {weights.list.length === 0 && weights.status === 3 ? ( -
No weight created yet.
- ) : ( - console.log("Layout complete!")} - > - {weights.list.map((data: any, key: number) => { - let props = { - data, - showCreator: true, - type: "weights", - inSelectModal: true, - onResultSelect, - }; - - return ( -
- +
+ +
+ <> + {isLoading ? ( +
+
+ Loading... +
+
+ ) : ( + <> + {bookmarksList.length === 0 && status === 3 ? ( +
+ No bookmarked weights yet.
- ); - })} - - )} + ) : ( + <> + {showBookmarksMasonryGrid && + Array.isArray(bookmarksList) && ( + + console.log("Layout complete!") + } + > + {bookmarksList.map((data: any, key: number) => { + let weightProps = { + bookmarks, + data, + ratings, + type: "weights", + inSelectModal: true, + onResultBookmarkSelect, + }; + + return ( +
+ + {/* */} +
+ ); + })} + + )} + + )} + + )} + + +
+ +
- + ) : ( + +
+ Loading... +
+
+ ) + } + endMessage={ +

No more results.

+ } + className="overflow-hidden" + scrollableTarget={listKey} + scrollThreshold={0.95} + > + <> + {weights.list.length === 0 && weights.status === 3 ? ( +
+ No weight created yet. +
+ ) : ( + console.log("Layout complete!")} + > + {weights.list.map((data: any, key: number) => { + let props = { + data, + ratings, + bookmarks, + showCreator: true, + type: "weights", + inSelectModal: true, + onResultSelect, + }; + + return ( +
+ +
+ ); + })} + + )} + + + )} ); } diff --git a/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx b/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx index 10218d1c0e..02813028cb 100644 --- a/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx +++ b/packages/fakeyou.com/src/components/common/TempInput/TempInput.tsx @@ -5,8 +5,8 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import "./Input.scss"; interface InputProps extends React.InputHTMLAttributes { - wrapperClassName ?: string; - className?: string; + wrapperClassName?: string; + className?: string; icon?: IconDefinition; invalidReason?: string; label?: string; @@ -26,13 +26,20 @@ export default function TempInput({ }: InputProps) { return ( // Changed fragment to div here just so that it can be laid out with bootstrap easily using d-flex, flex-column and responsive gaps which requires grouping. -
- {label &&