From 438215296143be08d9cf1e00ce92c615450b9d6a Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 13 Feb 2024 16:22:13 -0500 Subject: [PATCH 1/9] restructuring --- packages/components/src/api/index.tsx | 11 ++ .../components/src/api/media_files/index.tsx | 10 ++ .../src/components/common/Card/index.ts | 5 +- .../common/SelectModal/SelectModalV2.tsx | 136 ++++++++++++++++++ .../components/common/SelectModal/index.tsx | 6 +- .../SelectModalVideoTabs.tsx | 117 +++++++++++++++ .../common/SelectModalVideoTabs/index.tsx | 1 + .../src/components/common/Tabs/index.ts | 4 +- .../src/components/common/index.tsx | 17 ++- .../components/tabContentLibrary.tsx | 25 ++-- 10 files changed, 316 insertions(+), 16 deletions(-) create mode 100644 packages/components/src/api/index.tsx create mode 100644 packages/components/src/api/media_files/index.tsx create mode 100644 packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx create mode 100644 packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx create mode 100644 packages/fakeyou.com/src/components/common/SelectModalVideoTabs/index.tsx diff --git a/packages/components/src/api/index.tsx b/packages/components/src/api/index.tsx new file mode 100644 index 0000000000..0095222c4c --- /dev/null +++ b/packages/components/src/api/index.tsx @@ -0,0 +1,11 @@ +import { + MediaFileType, + GetMediaByUser +} from "./media_files"; + +export type{ + MediaFileType +} +export { + GetMediaByUser +}; \ No newline at end of file diff --git a/packages/components/src/api/media_files/index.tsx b/packages/components/src/api/media_files/index.tsx new file mode 100644 index 0000000000..812530f3da --- /dev/null +++ b/packages/components/src/api/media_files/index.tsx @@ -0,0 +1,10 @@ +import { MediaFile } from "./GetMediaFile"; +import { GetMediaByUser } from "./GetMediaByUser"; + + +export type{ + MediaFile as MediaFileType +} +export { + GetMediaByUser +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/Card/index.ts b/packages/fakeyou.com/src/components/common/Card/index.ts index c0424cdb70..87563c02d2 100644 --- a/packages/fakeyou.com/src/components/common/Card/index.ts +++ b/packages/fakeyou.com/src/components/common/Card/index.ts @@ -1 +1,4 @@ -export { default } from "./Card"; +import MediaCards from "./MediaCards"; +import SkeletonCard from "./SkeletonCard"; +import Card from "./Card"; +export { Card as default, MediaCards, SkeletonCard }; diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx new file mode 100644 index 0000000000..8a3e2313ba --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx @@ -0,0 +1,136 @@ +import React, { + memo, + ReactNode, + useState, + // useEffect, +} from "react"; + +import { + Button, + TempInput as Input, + Modal, + // Searcher +} from "components/common"; + +// import NonRouteTabs from "../Tabs/NonRouteTabs"; +import { faTrash } from "@fortawesome/free-solid-svg-icons"; + +export type SelectModalData = { + token: string; + title: string; +} + +interface SelectModalProps { + label?: string; + modalTitle?: string; + value?: SelectModalData; + onSelect?: (data: SelectModalData) => void; + required?: boolean; + children: ReactNode +} + +export default memo(function SelectModal ({ + label, + // tabs, + modalTitle = "Select", + onSelect, + value, + required, + children +}: 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" + }) + // 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"})) + // }, [activeTab, tabs]); + + const openModal = () => { + setState((curr)=>({...curr, isModalOpen: true})); + }; + + const closeModal = () => { + setState((curr)=>({...curr, isModalOpen: false})); + }; + + const handleRemove = () => { + setState((curr)=>({...curr, selectedValue: emptyValue})); + if (onSelect) onSelect(emptyValue); + }; + + const handleOnSelect = (data:{token:string, title:string}) => { + setState((curr)=>({ + ...curr, + selectedValue: {token: data.token, title: data.title || ""}, + isModalOpen: false + })); + if (onSelect) onSelect(data); + } + + + return ( + <> +
+ {label && ( + + )} + +
+
+ + +
+
+ + {return(<>{children})}} + showButtons={false} + padding={false} + large={true} + position="top" + mobileFullscreen={true} + /> + + ); + } +); diff --git a/packages/fakeyou.com/src/components/common/SelectModal/index.tsx b/packages/fakeyou.com/src/components/common/SelectModal/index.tsx index 34f8ad1385..82f44a1402 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/index.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/index.tsx @@ -1 +1,5 @@ -export { default } from "./SelectModal"; \ No newline at end of file +import SelectModal from "./SelectModal"; +import SelectModalV2, { SelectModalData } from "./SelectModalV2"; + +export type { SelectModalData }; +export { SelectModal as default, SelectModalV2 }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx new file mode 100644 index 0000000000..6c1104a5d7 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx @@ -0,0 +1,117 @@ +import React, { memo, useRef, useState } from "react"; + +import { useListContent, useSession } from "hooks"; + +import { + MediaFileType, + GetMediaByUser +} from "@storyteller/components/src/api"; + +import { + MasonryGrid, + MediaCards, + Pagination, + SkeletonCard, + NonRouteTabs +} from "components/common"; + +import { SelectModalData, SelectModalV2} from "../SelectModal"; + +import prepFilter from "resources/prepFilter"; +import { StringLiteral } from "typescript"; + +export default memo(function SelectModalVideoTabs({ + debug = false, + modalTitle, + inputLabel, + onSelect, +}: { + debug?: boolean; + modalTitle: string; + inputLabel: string; + onSelect?: (data:SelectModalData) => void; +}) { + const gridContainerRef = useRef(null); + const [list, listSet] = useState([]); + const { user } = useSession(); + + const media = useListContent({ + addQueries: { + page_size: 9, + ...prepFilter("mediaType", "filter_media_type"), + }, + urlUpdate: false, + debug: debug ? "Video List" : undefined, + fetcher: GetMediaByUser, + list, + listSet, + requestList: true, + urlParam: user?.username || "" + }); + + const handlePageClick = (selectedItem: { selected: number }) => { + media.pageChange(selectedItem.selected); + }; + + const paginationProps = { + onPageChange: handlePageClick, + pageCount: media.pageCount, + currentPage: media.page, + }; + + return ( + +

children

+ {/*
+ + {media.isLoading ? ( +
+ {Array.from({ length: 12 }).map((_, index) => ( + + ))} +
+ ) : ( + <> + {media.list.length === 0 && media.status === 3 ? ( +
+ No media created yet. +
+ ) : ( + console.log("Layout complete!")} + > + {media.list.map((data: MediaFileType, key: number) => { + let props = { + data, + showCreator: true, + type: "media", + inSelectModal: true, + onResultSelect, + }; + return ( +
+ +
+ ); + })} + + )} + + )} + +
+ +
+
*/} + + ); +}); diff --git a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/index.tsx b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/index.tsx new file mode 100644 index 0000000000..9dc29bff2d --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/index.tsx @@ -0,0 +1 @@ +export { default } from "./SelectModalVideoTabs"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/Tabs/index.ts b/packages/fakeyou.com/src/components/common/Tabs/index.ts index 9a31da7f16..d70cbc9814 100644 --- a/packages/fakeyou.com/src/components/common/Tabs/index.ts +++ b/packages/fakeyou.com/src/components/common/Tabs/index.ts @@ -1 +1,3 @@ -export { default } from "./Tabs"; +import Tabs from "./Tabs"; +import NonRouteTabs from "./NonRouteTabs"; +export { Tabs as default, NonRouteTabs }; diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index e3c262bc35..ca5d4b5d6f 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -5,6 +5,10 @@ import Badge from "./Badge"; import BasicVideo from "./BasicVideo"; import Button from "./Button"; import Checkbox from "./Checkbox"; +import { + MediaCards, + SkeletonCard, +} from "./Card"; import Container from "./Container"; import CoverImageInput from "./CoverImageInput"; import ErrorMessage from "./ErrorMessage" @@ -18,11 +22,14 @@ import InputSeed from "./InputSeed"; import Label from "./Label"; import LikeButton from "./LikeButton"; import MocapInput from "./MocapInput"; +import MasonryGrid from "./MasonryGrid/MasonryGrid"; import Modal from "./Modal"; import NumberSlider from "./NumberSlider"; import NumberSliderV2 from "./NumberSliderV2"; +import Pagination from "./Pagination"; import Panel from "./Panel"; import Radio from "./Radio"; +import Searcher from "./Searcher"; import SegmentButtons from "./SegmentButtons"; import Select from "./Select"; import SelectModal from "./SelectModal"; @@ -30,7 +37,7 @@ import Skeleton from "./Skeleton"; import Slider from "./Slider"; import Spinner from "./Spinner"; import SplitPanel from "./SplitPanel"; -import Tabs from "./Tabs"; +import Tabs, {NonRouteTabs} from "./Tabs"; import TempAudioPlayer from "./TempAudioPlayer"; import TempInput from "./TempInput"; import TempSelect from "./TempSelect"; @@ -47,6 +54,10 @@ export { Badge, BasicVideo, Button, + //Cards + MediaCards, + SkeletonCard, + //End Cards Checkbox, Container, CoverImageInput, @@ -61,12 +72,16 @@ export { Label, LikeButton, MocapInput, + MasonryGrid, Modal, + NonRouteTabs, NumberSlider, NumberSliderV2, + Pagination, Panel, Radio, SegmentButtons, + Searcher, Select, SelectModal, Skeleton, diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx index 394a3bd51d..07d45cc7d6 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx @@ -2,7 +2,8 @@ import React from "react"; import { NavLink } from "react-router-dom"; import { states, Action, State } from "../videoWorkflowReducer"; import { Button } from "components/common"; -import SelectModal, { SelectModalData } from "components/common/SelectModal/SelectModal"; +import SelectModalVideoTabs from "components/common/SelectModalVideoTabs"; +import { SelectModalData } from "components/common/SelectModal/SelectModalV2"; export default function TabContentLibrary({ t, pageState, dispatchPageState @@ -28,19 +29,19 @@ export default function TabContentLibrary({ return (
-
{pageState.status === states.FILE_SELECTED && From b7ed95e98dada9181b054b474fc1714be3da87c8 Mon Sep 17 00:00:00 2001 From: wil Date: Sun, 18 Feb 2024 00:19:55 -0500 Subject: [PATCH 2/9] new component flow works --- .../common/SelectModal/SelectModalV2.tsx | 63 ++------ .../SelectModalVideoTabs.tsx | 140 ++++++++++-------- .../components/tabContentLibrary.tsx | 1 + 3 files changed, 92 insertions(+), 112 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx index 8a3e2313ba..4a341e9e0e 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx @@ -1,18 +1,16 @@ import React, { memo, ReactNode, + useEffect, useState, - // useEffect, } from "react"; import { Button, TempInput as Input, Modal, - // Searcher } from "components/common"; -// import NonRouteTabs from "../Tabs/NonRouteTabs"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; export type SelectModalData = { @@ -23,8 +21,8 @@ export type SelectModalData = { interface SelectModalProps { label?: string; modalTitle?: string; - value?: SelectModalData; - onSelect?: (data: SelectModalData) => void; + value?: string; + onClear: () => void; required?: boolean; children: ReactNode } @@ -33,53 +31,22 @@ export default memo(function SelectModal ({ label, // tabs, modalTitle = "Select", - onSelect, - value, + onClear, + value = "", required, children }: 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" - }) - // 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"})) - // }, [activeTab, tabs]); - + const [isModalOpen, setModalOpen] = useState(false + ) const openModal = () => { - setState((curr)=>({...curr, isModalOpen: true})); + setModalOpen(true); }; const closeModal = () => { - setState((curr)=>({...curr, isModalOpen: false})); + setModalOpen(false); }; - const handleRemove = () => { - setState((curr)=>({...curr, selectedValue: emptyValue})); - if (onSelect) onSelect(emptyValue); - }; - - const handleOnSelect = (data:{token:string, title:string}) => { - setState((curr)=>({ - ...curr, - selectedValue: {token: data.token, title: data.title || ""}, - isModalOpen: false - })); - if (onSelect) onSelect(data); - } - + useEffect(closeModal, [value]); return ( <> @@ -101,18 +68,16 @@ export default memo(function SelectModal ({ wrapperClassName="w-100" placeholder="None selected" onClick={openModal} - value={selectedValue.title !=="" - ? selectedValue.title - : selectedValue.token || ""} + value={value} /> -
+ + ); + } +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx index c2c59bb938..bc407ead0f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx @@ -31,6 +31,7 @@ export default function TabContentLibrary({
Date: Sun, 18 Feb 2024 00:35:37 -0500 Subject: [PATCH 3/9] select video tabs done, code simplified --- .../SelectModalVideoTabs.tsx | 22 +++++++++++-------- .../components/tabContentLibrary.tsx | 11 +--------- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx index cdd35526fe..c404527c4b 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx @@ -12,7 +12,7 @@ import { MediaCards, Pagination, SkeletonCard, - // NonRouteTabs + NonRouteTabs } from "components/common"; import { SelectModalData, SelectModalV2} from "../SelectModal"; @@ -21,29 +21,33 @@ import prepFilter from "resources/prepFilter"; export default memo(function SelectModalWrapper({ debug = false, - value, + value = "", modalTitle, inputLabel, onSelect }: { debug?: boolean; - value: SelectModalData; + value?: string; modalTitle: string; inputLabel: string; onSelect: (data:SelectModalData) => void; }) { - + const tabs = [{ + label: "All Videos", + content: ( +
+ +
+ ) + }] return ( {onSelect({title:"",token:""})}} - // searcher={true} > - + ); }); diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx index bc407ead0f..78a5d1e806 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx @@ -31,19 +31,10 @@ export default function TabContentLibrary({
{pageState.mediaFileToken && From dd785e27272a7e67c4806007fdfd1edfc6129597 Mon Sep 17 00:00:00 2001 From: wil Date: Mon, 19 Feb 2024 11:45:57 -0500 Subject: [PATCH 4/9] listing all weights works --- packages/components/src/api/index.tsx | 16 +- packages/components/src/api/weights/index.tsx | 5 + .../src/components/common/Card/index.ts | 8 +- .../SelectModalWeightsTabs.tsx | 171 ++++++++++++++++++ .../common/SelectModalWeightsTabs/index.tsx | 1 + .../src/components/common/index.tsx | 2 + .../pageWorkflowControls.tsx | 16 +- 7 files changed, 215 insertions(+), 4 deletions(-) create mode 100644 packages/components/src/api/weights/index.tsx create mode 100644 packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx create mode 100644 packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/index.tsx diff --git a/packages/components/src/api/index.tsx b/packages/components/src/api/index.tsx index 0095222c4c..7e53f0301f 100644 --- a/packages/components/src/api/index.tsx +++ b/packages/components/src/api/index.tsx @@ -3,9 +3,21 @@ import { GetMediaByUser } from "./media_files"; +import { + Weight, + ListWeights +} from "./weights"; + +import { + GetBookmarksByUser +} from "./bookmarks/GetBookmarksByUser"; + export type{ - MediaFileType + MediaFileType, + Weight } export { - GetMediaByUser + GetBookmarksByUser, + GetMediaByUser, + ListWeights }; \ No newline at end of file diff --git a/packages/components/src/api/weights/index.tsx b/packages/components/src/api/weights/index.tsx new file mode 100644 index 0000000000..92a219c89c --- /dev/null +++ b/packages/components/src/api/weights/index.tsx @@ -0,0 +1,5 @@ +import { ListWeights } from "./ListWeights"; +import { Weight } from "./GetWeight"; + +export type { Weight }; +export { ListWeights }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/Card/index.ts b/packages/fakeyou.com/src/components/common/Card/index.ts index 87563c02d2..7ea3034f5c 100644 --- a/packages/fakeyou.com/src/components/common/Card/index.ts +++ b/packages/fakeyou.com/src/components/common/Card/index.ts @@ -1,4 +1,10 @@ import MediaCards from "./MediaCards"; +import WeightsCards from "./WeightsCards"; import SkeletonCard from "./SkeletonCard"; import Card from "./Card"; -export { Card as default, MediaCards, SkeletonCard }; +export { + Card as default, + MediaCards, + SkeletonCard, + WeightsCards +}; diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx new file mode 100644 index 0000000000..bff9ed180c --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx @@ -0,0 +1,171 @@ +import React, { memo, useRef, useState } from "react"; + +import { + useBookmarks, + useListContent, + useRatings, + useSession +} from "hooks"; + +import { + Weight as WeightType, + ListWeights, + GetBookmarksByUser +} from "@storyteller/components/src/api"; + +import { + MasonryGrid, + WeightsCards, + Pagination, + SkeletonCard, + NonRouteTabs +} from "components/common"; + +import { SelectModalData, SelectModalV2} from "../SelectModal"; + +import prepFilter from "resources/prepFilter"; + +export default memo(function SelectModalWrapper({ + debug = false, + value = {title:"",token:""}, + modalTitle, + inputLabel, + onSelect +}: { + debug?: boolean; + value?: SelectModalData; + modalTitle: string; + inputLabel: string; + onSelect: (data:SelectModalData) => void; +}) { + const tabs = [{ + label: "All Weights", + content: ( +
+ +
+ ) + }, + // { + // label: "Bookmarked", + // content: ( + //
+ // + //
+ // ) + // } + ] + return ( + {onSelect({title:"",token:""})}} + > + + + ); +}); + +function WeightsTabsContent({ + debug=false, + onSelect +}:{ + debug?: boolean + onSelect: (data:SelectModalData) => void; +}){ + const gridContainerRef = useRef(null); + const bookmarks = useBookmarks(); + const ratings = useRatings(); + const [list, listSet] = useState([]); + const { user } = useSession(); + const weights = useListContent({ + addQueries: { + page_size: 9, + ...prepFilter("sd_1.5", "weight_type"), + }, + urlUpdate: false, + debug: debug ? "Weight List" : undefined, + fetcher: ListWeights, + list, + listSet, + requestList: true, + urlParam: user?.username || "" + }); + const handlePageClick = (selectedItem: { selected: number }) => { + weights.pageChange(selectedItem.selected); + }; + + // const { isLoading, page, pageChange, pageCount, status } = useListContent({ + // addQueries: { + // page_size: 9, + // ...prepFilter("sd_1.5", "maybe_scoped_weight_type"), + // }, + // fetcher: GetBookmarksByUser, + // // onSuccess: res => { + // // setShowBookmarksMasonryGrid(true); + // // }, + // list: list, + // debug: "", + // listSet: listSet, + // requestList: true, + // urlParam: user.username, + // urlUpdate: false, + // }); + + const paginationProps = { + onPageChange: handlePageClick, + pageCount: weights.pageCount, + currentPage: weights.page, + }; + if (weights.isLoading){ + return ( +
+ {Array.from({ length: 12 }).map((_, index) => ( + + ))} +
+ ); + }else if (weights.list.length === 0 && weights.status === 3){ + return( +
+ No weights created yet. +
+ ); + }else { + return( + <> + + console.log("Layout complete!")} + > + {weights.list.map((data: WeightType, key: number) => { + let props = { + data, + ratings, + bookmarks, + showCreator: true, + type: "weights", + inSelectModal: true, + onResultSelect: onSelect, + }; + return ( +
+ +
+ ); + })} + +
+ +
+ + ); + } +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/index.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/index.tsx new file mode 100644 index 0000000000..5022ff51d7 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/index.tsx @@ -0,0 +1 @@ +export { default } from "./SelectModalWeightsTabs"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index f48e5696dc..31c7d4ac02 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -8,6 +8,7 @@ import Checkbox from "./Checkbox"; import { MediaCards, SkeletonCard, + WeightsCards, } from "./Card"; import Container from "./Container"; import CoverImageInput from "./CoverImageInput"; @@ -58,6 +59,7 @@ export { //Cards MediaCards, SkeletonCard, + WeightsCards, //End Cards ButtonRevertToDefault, Checkbox, 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 c716e21de5..8ff376b0fa 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 @@ -16,6 +16,8 @@ import { TextArea } from "components/common"; +import SelectModalWeightsTabs from "components/common/SelectModalWeightsTabs"; + import SectionControlNets, {ControlNetsInitialValues as CnIvs} from "./sectionControlNets"; import SectionVideoSettings, {VideoSettingsInitialValues as VideoIvs} from "./sectionVideoSettings"; import SectionAdvanceOptions, {AdvanceOptionsInitialValues as AdvIvs} from "./sectionAdvanceOptions"; @@ -164,7 +166,7 @@ export default function PageFilterControls({
- { @@ -186,6 +188,18 @@ export default function PageFilterControls({ type: "weights", }, ]} + /> */} + { + handleOnChange("sdModelToken", token); + // handleOnChange("sdModelTitle", title); + }} + value={{ + token:workflowValues.sdModelToken, + title:"" + }} />
From f75864537e2a2667608583c9b35f82cb828b7252 Mon Sep 17 00:00:00 2001 From: wil Date: Mon, 19 Feb 2024 12:42:27 -0500 Subject: [PATCH 5/9] code optimization --- .../pageWorkflowControls.tsx | 29 ++++++++++------- .../sectionAdvanceOptions.tsx | 22 ++++++------- .../sectionControlNets.tsx | 18 +++++------ .../sectionVideoSettings.tsx | 31 +++++++++---------- 4 files changed, 52 insertions(+), 48 deletions(-) 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 8ff376b0fa..c4e72cb366 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 @@ -65,8 +65,8 @@ export default function PageFilterControls({ ...CnIvs }); - const handleOnChange = (key: string, newValue:any,) => { - setWorkflowValues((curr)=>({...curr, [key]: newValue})); + const handleOnChange = (val:{[key: string]: number|string|boolean|undefined}) => { + setWorkflowValues((curr)=>({...curr, ...val})); } const handleReset = ()=>{ setWorkflowValues((curr)=>({ @@ -134,7 +134,7 @@ export default function PageFilterControls({
handleOnChange(key,val)} + onChange={handleOnChange} videoElement={videoRef?.current} />
@@ -193,8 +193,10 @@ export default function PageFilterControls({ modalTitle="Select a Stable Diffusion Weight" inputLabel="Select a Stable Diffusion Weight" onSelect={({title,token})=>{ - handleOnChange("sdModelToken", token); - // handleOnChange("sdModelTitle", title); + handleOnChange({ + "sdModelTitle": title, + "sdModelToken": token, + }); }} value={{ token:workflowValues.sdModelToken, @@ -206,9 +208,12 @@ export default function PageFilterControls({ { + onSelect={({title,token})=>{ console.log(`calling from select modal result select ${token}`); - handleOnChange("loraModelToken", token); + handleOnChange({ + "loraModelTitle": title, + "loraModelToken": token + }); }} tabs={[ { @@ -234,7 +239,7 @@ export default function PageFilterControls({ {...{ label: "Prompt", placeholder: "Enter a prompt", - onChange: (e:React.ChangeEvent)=>handleOnChange("posPrompt", e.target.value), + onChange: (e:React.ChangeEvent)=>handleOnChange({"posPrompt": e.target.value}), value: workflowValues.posPrompt, required: false, }} @@ -245,7 +250,7 @@ export default function PageFilterControls({ {...{ label: "Negative Prompt", placeholder: "Enter Negative Prompt", - onChange: (e:React.ChangeEvent)=>handleOnChange("negPrompt", e.target.value), + onChange: (e:React.ChangeEvent)=>handleOnChange({"negPrompt": e.target.value}), value: workflowValues.negPrompt, required: false, }} @@ -254,7 +259,7 @@ export default function PageFilterControls({
handleOnChange("seed", val) + (val:string)=>handleOnChange({seed: val}) }/>
@@ -262,13 +267,13 @@ export default function PageFilterControls({ handleOnChange(key,val)} + onChange={handleOnChange} /> handleOnChange(key,val)} + onChange={handleOnChange} /> diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionAdvanceOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionAdvanceOptions.tsx index b81ccd3924..42db92b62b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionAdvanceOptions.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionAdvanceOptions.tsx @@ -23,7 +23,7 @@ export default memo( function SectionAdvanceOptions({ onChange : handleOnChange } : { workflowValues : WorkflowValuesType - onChange: (key:string, val:number|boolean)=>void} + onChange: (val:{[key: string]: number|string|boolean})=>void} ){ return( @@ -35,7 +35,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.firstPass, label: " Denoise First Pass", thumbTip: "Denoise First Pass", - onChange: (val)=>{handleOnChange("firstPass",val)} + onChange: (val)=>{handleOnChange({firstPass:val})} }}/>
@@ -44,7 +44,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.upscalePass, label: "Denoise Upscale Pass", thumbTip: "Denoise Upscale Pass", - onChange: (val)=>{handleOnChange("upscalePass", val)} + onChange: (val)=>{handleOnChange({upscalePass: val})} }}/>
@@ -55,7 +55,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.motionScale, label: "Motion Scale", thumbTip: "Motion Scale", - onChange: (val)=>{handleOnChange("motionScale", val)} + onChange: (val)=>{handleOnChange({motionScale: val})} }}/>
@@ -64,7 +64,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.upscaleMultiplier, label: "Upscale Multiplier", thumbTip: "Upscale Multiplier", - onChange: (val)=>{handleOnChange("upscaleMultiplier", val)} + onChange: (val)=>{handleOnChange({upscaleMultiplier: val})} }}/>
@@ -73,14 +73,14 @@ export default memo( function SectionAdvanceOptions({ {handleOnChange("useEmptyLatent", e.target.checked)}} + onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange({useEmptyLatent: e.target.checked})}} />
{handleOnChange("useFaceDetailer", e.target.checked)}} + onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange({useFaceDetailer: e.target.checked})}} />
@@ -94,7 +94,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.denoiseFaceDetailer, label: "Denoise Face Detailer", thumbTip: "Denoise Face Detailer", - onChange: (val)=>{handleOnChange("denoiseFaceDetailer", val)} + onChange: (val)=>{handleOnChange({denoiseFaceDetailer: val})} }}/>
@@ -102,7 +102,7 @@ export default memo( function SectionAdvanceOptions({ {handleOnChange("useLCM", e.target.checked)}} + onChange={(e:{target:{ checked: boolean, name:string, type: string }})=>{handleOnChange({useLCM: e.target.checked})}} />
@@ -113,7 +113,7 @@ export default memo( function SectionAdvanceOptions({ withRevert: true, label: "LCM CFG", thumbTip: "LCM CFG", - onChange: (val)=>{handleOnChange("lcmCFG", val)} + onChange: (val)=>{handleOnChange({lcmCFG: val})} }}/>
@@ -122,7 +122,7 @@ export default memo( function SectionAdvanceOptions({ initialValue: wfVal.lcmSteps, label: "LCM Steps", thumbTip: "LCM Steps", - onChange: (val)=>{handleOnChange("lcmSteps", val)} + onChange: (val)=>{handleOnChange({lcmSteps: val})} }}/>
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionControlNets.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionControlNets.tsx index a432a586d9..c77ade0725 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionControlNets.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionControlNets.tsx @@ -18,7 +18,7 @@ export default memo( function SectionControlNets({ onChange : handleOnChange } : { workflowValues : WorkflowValuesType - onChange: (key:string, val:number)=>void} + onChange: (val:{[key: string]: number|string|boolean})=>void} ){ return( @@ -30,7 +30,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnCanny, label: "Canny", thumbTip: "Canny", - onChange: (val)=>{handleOnChange("cnCanny", val)} + onChange: (val)=>{handleOnChange({cnCanny: val})} }}/>
@@ -39,7 +39,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnLinearAnime, label: "Line Art Anime", thumbTip: "Line Art Anime", - onChange: (val)=>{handleOnChange("cnLinearAnime", val)} + onChange: (val)=>{handleOnChange({cnLinearAnime: val})} }}/>
@@ -50,7 +50,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnDepth, label: "Depth", thumbTip: "Depth", - onChange: (val)=>{handleOnChange("cnDepth", val)} + onChange: (val)=>{handleOnChange({cnDepth: val})} }}/>
@@ -59,7 +59,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnOpenPose, label: "OpenPose", thumbTip: "OpenPose", - onChange: (val)=>{handleOnChange("cnOpenPose", val)} + onChange: (val)=>{handleOnChange({cnOpenPose: val})} }}/>
@@ -70,7 +70,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnPipeFace, label: "Media Pipe Face", thumbTip: "Media Pipe Face", - onChange: (val)=>{handleOnChange("cnPipeFace", val)} + onChange: (val)=>{handleOnChange({cnPipeFace: val})} }}/>
@@ -79,7 +79,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnSparse, label: "Sparse Scribble", thumbTip: "Sparse Scribble", - onChange: (val)=>{handleOnChange("cnSparse", val)} + onChange: (val)=>{handleOnChange({cnSparse: val})} }}/>
@@ -90,7 +90,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnLinearRealistic, label: "Video CN (Linear Realistic)", thumbTip: "Video CN", - onChange: (val)=>{handleOnChange("cnLinearRealistic", val)} + onChange: (val)=>{handleOnChange({cnLinearRealistic: val})} }}/>
@@ -99,7 +99,7 @@ export default memo( function SectionControlNets({ initialValue: wfVal.cnTile, label: "Tile CN", thumbTip: "Tile CN", - onChange: (val)=>{handleOnChange("cnTile", val)} + onChange: (val)=>{handleOnChange({cnTile: val})} }}/>
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionVideoSettings.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionVideoSettings.tsx index f6b60fe647..10c735beff 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionVideoSettings.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/sectionVideoSettings.tsx @@ -18,7 +18,7 @@ export default memo( function SectionVideoSettings({ workflowValues: wfVal, videoElement: ve } : { - onChange: (key:string, val:number)=>void, + onChange: (val:{[key: string]: number|string|boolean|undefined})=>void, workflowValues: WorkflowValuesType, videoElement: HTMLVideoElement | null, }){ @@ -26,33 +26,32 @@ export default memo( function SectionVideoSettings({ const handleFramesCap = (newValue: number)=>{ if(newValue - wfVal.skipFrames >= 16) - handleOnChange("framesCap",newValue); + handleOnChange({framesCap:newValue}); } const handleSkipFrames = (newValue: number)=>{ if(wfVal.framesCap - newValue >= 16) - handleOnChange("skipFrames",newValue); + handleOnChange({skipFrames:newValue}); } if(ve && ve!==null){ ve.onloadedmetadata = () =>{ + const newValues : { + width?: number; + height?: number; + maxFrames?: number; + framesCap?: number; + } = {}; if (ve.videoWidth && ve.videoHeight) { const aspectRatio = ve.videoWidth/ve.videoHeight - if (aspectRatio > 1){ - handleOnChange("width",960); - } - else if (aspectRatio < 1) { - handleOnChange("height",960); - }else{ - console.log(`aspectRaio: ${aspectRatio}`); - } + if (aspectRatio > 1) newValues.width = 960; + else if (aspectRatio < 1) newValues.height = 960 + else console.log(`aspectRaio: ${aspectRatio}`); } if(ve.duration){ - handleOnChange("maxFrames", - Math.floor(ve.duration)*wfVal.inputFps - ); + newValues.maxFrames = Math.floor(ve.duration)*wfVal.inputFps; + newValues.framesCap = newValues.maxFrames; } - //TODO: Optimizer to make ONE handleOnChange only - //TODO: deal with maxFrames with more reliable math + handleOnChange(newValues); } } return( From d9975da30e8656b759d8058a74bf38b5536f2821 Mon Sep 17 00:00:00 2001 From: wil Date: Mon, 19 Feb 2024 15:47:14 -0500 Subject: [PATCH 6/9] bookmark and tabs also works in weight tabs, pagination not responding however --- .../SelectModalWeightsTabs.tsx | 152 ++---------------- .../SelectModalWeightsTabs/tabAllWeights.tsx | 107 ++++++++++++ .../tabBookmarkedWeights.tsx | 109 +++++++++++++ .../pageWorkflowControls.tsx | 24 +-- 4 files changed, 233 insertions(+), 159 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx create mode 100644 packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx index bff9ed180c..03b8204440 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx @@ -1,59 +1,41 @@ -import React, { memo, useRef, useState } from "react"; - -import { - useBookmarks, - useListContent, - useRatings, - useSession -} from "hooks"; - -import { - Weight as WeightType, - ListWeights, - GetBookmarksByUser -} from "@storyteller/components/src/api"; - -import { - MasonryGrid, - WeightsCards, - Pagination, - SkeletonCard, - NonRouteTabs -} from "components/common"; +import React, { memo } from "react"; +import { NonRouteTabs } from "components/common"; import { SelectModalData, SelectModalV2} from "../SelectModal"; - -import prepFilter from "resources/prepFilter"; +import TabAllWeights from "./tabAllWeights"; +import TabBookmarkedWeights from "./tabBookmarkedWeights" export default memo(function SelectModalWrapper({ debug = false, value = {title:"",token:""}, modalTitle, inputLabel, + weightType, onSelect }: { debug?: boolean; value?: SelectModalData; modalTitle: string; inputLabel: string; + weightType: "sd_1.5" | "loRA"; onSelect: (data:SelectModalData) => void; }) { const tabs = [{ label: "All Weights", content: ( -
- +
+
) }, - // { - // label: "Bookmarked", - // content: ( - //
- // - //
- // ) - // } + { + label: "Bookmarked Weights", + content: ( +
+ +
+ ) + } ] return ( void; -}){ - const gridContainerRef = useRef(null); - const bookmarks = useBookmarks(); - const ratings = useRatings(); - const [list, listSet] = useState([]); - const { user } = useSession(); - const weights = useListContent({ - addQueries: { - page_size: 9, - ...prepFilter("sd_1.5", "weight_type"), - }, - urlUpdate: false, - debug: debug ? "Weight List" : undefined, - fetcher: ListWeights, - list, - listSet, - requestList: true, - urlParam: user?.username || "" - }); - const handlePageClick = (selectedItem: { selected: number }) => { - weights.pageChange(selectedItem.selected); - }; - - // const { isLoading, page, pageChange, pageCount, status } = useListContent({ - // addQueries: { - // page_size: 9, - // ...prepFilter("sd_1.5", "maybe_scoped_weight_type"), - // }, - // fetcher: GetBookmarksByUser, - // // onSuccess: res => { - // // setShowBookmarksMasonryGrid(true); - // // }, - // list: list, - // debug: "", - // listSet: listSet, - // requestList: true, - // urlParam: user.username, - // urlUpdate: false, - // }); - - const paginationProps = { - onPageChange: handlePageClick, - pageCount: weights.pageCount, - currentPage: weights.page, - }; - if (weights.isLoading){ - return ( -
- {Array.from({ length: 12 }).map((_, index) => ( - - ))} -
- ); - }else if (weights.list.length === 0 && weights.status === 3){ - return( -
- No weights created yet. -
- ); - }else { - return( - <> - - console.log("Layout complete!")} - > - {weights.list.map((data: WeightType, key: number) => { - let props = { - data, - ratings, - bookmarks, - showCreator: true, - type: "weights", - inSelectModal: true, - onResultSelect: onSelect, - }; - return ( -
- -
- ); - })} - -
- -
- - ); - } -} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx new file mode 100644 index 0000000000..b7a79d7bb5 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx @@ -0,0 +1,107 @@ +import React, {useRef, useState} from 'react'; +import { + useBookmarks, + useListContent, + useRatings, + useSession +} from "hooks"; +import { + Weight as WeightI, + ListWeights +} from "@storyteller/components/src/api"; +import { SelectModalData } from "../SelectModal"; +import prepFilter from "resources/prepFilter"; +import { + MasonryGrid, + WeightsCards, + Pagination, + SkeletonCard, +} from "components/common"; + +export default function WeightsTabsContent({ + debug=false, + weightType, + onSelect +}:{ + debug?: boolean + weightType: "sd_1.5" | "loRA"; + onSelect: (data:SelectModalData) => void; +}){ + const gridContainerRef = useRef(null); + const bookmarks = useBookmarks(); + const ratings = useRatings(); + const [list, listSet] = useState([]); + const { user } = useSession(); + const weights = useListContent({ + addQueries: { + page_size: 9, + ...prepFilter("sd_1.5", "weight_type"), + }, + urlUpdate: false, + debug: debug ? "All Weights" : undefined, + fetcher: ListWeights, + list, + listSet, + requestList: true, + urlParam: user?.username || "" + }); + const handlePageClick = (selectedItem: { selected: number }) => { + weights.pageChange(selectedItem.selected); + }; + + const paginationProps = { + onPageChange: handlePageClick, + pageCount: weights.pageCount, + currentPage: weights.page, + }; + if (weights.isLoading){ + return ( +
+ {Array.from({ length: 12 }).map((_, index) => ( + + ))} +
+ ); + }else if (weights.list.length === 0 && weights.status === 3){ + return( +
+ No weights created yet. +
+ ); + }else { + return( + <> + + console.log("Layout complete!")} + > + {weights.list.map((data: WeightI, key: number) => { + let props = { + data, + ratings, + bookmarks, + showCreator: true, + type: "weights", + inSelectModal: true, + onResultSelect: onSelect, + }; + return ( +
+ +
+ ); + })} + +
+ +
+ + ); + } +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx new file mode 100644 index 0000000000..2033cbde9d --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx @@ -0,0 +1,109 @@ +import React, {useRef, useState} from 'react'; +import { + useBookmarks, + useListContent, + useRatings, + useSession +} from "hooks"; +import { + Weight as WeightI, + GetBookmarksByUser +} from "@storyteller/components/src/api"; +import { SelectModalData } from "../SelectModal"; +import prepFilter from "resources/prepFilter"; +import { + MasonryGrid, + WeightsCards, + Pagination, + SkeletonCard, +} from "components/common"; + +export default function WeightsTabsContent({ + debug=false, + weightType, + onSelect +}:{ + debug?: boolean; + weightType: "sd_1.5" | "loRA"; + onSelect: (data:SelectModalData) => void; +}){ + const gridContainerRef = useRef(null); + const bookmarks = useBookmarks(); + const ratings = useRatings(); + const [list, listSet] = useState([]); + const { user } = useSession(); + const weights = useListContent({ + addQueries: { + page_size: 9, + ...prepFilter(weightType, "weight_type"), + }, + urlUpdate: false, + debug: debug ? "Bookmarked Weights" : undefined, + fetcher: GetBookmarksByUser, + list, + listSet, + requestList: true, + urlParam: user?.username || "" + }); + const handlePageClick = (selectedItem: { selected: number }) => { + weights.pageChange(selectedItem.selected); + }; + + const paginationProps = { + onPageChange: handlePageClick, + pageCount: weights.pageCount, + currentPage: weights.page, + }; + if (weights.isLoading){ + return ( +
+ {Array.from({ length: 12 }).map((_, index) => ( + + ))} +
+ ); + }else if (weights.list.length === 0 && weights.status === 3){ + return( +
+ No weights created yet. +
+ ); + }else { + return( + <> + + console.log("Layout complete!")} + > + {weights.list.map((data: any, key: number) => { + //TODO: data should be TYPED + let props = { + data, + ratings, + bookmarks, + showCreator: true, + type: "weights", + inSelectModal: true, + onResultSelect: onSelect, + }; + return ( +
+ +
+ ); + })} + +
+ +
+ + ); + } +} \ No newline at end of file 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 c4e72cb366..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 @@ -166,32 +166,10 @@ export default function PageFilterControls({
- {/* { - handleOnChange("sdModelToken", token); - }} - tabs={[ - { - label: "All Weights", - tabKey: "allWeights", - typeFilter: "sd_1.5", - searcher: true, - type: "weights", - }, - { - label: "Bookmarked", - tabKey: "bookmarkedWeights", - typeFilter: "sd_1.5", - searcher: false, - type: "weights", - }, - ]} - /> */} { handleOnChange({ "sdModelTitle": title, From f074df9074d6bd5c2e96e6c2f797f6a399319095 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 20 Feb 2024 15:11:10 -0500 Subject: [PATCH 7/9] fix pagination being off --- .../common/Pagination/Pagination.tsx | 8 +++++--- .../SelectModalVideoTabs.tsx | 20 ++++++++++++------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Pagination/Pagination.tsx b/packages/fakeyou.com/src/components/common/Pagination/Pagination.tsx index 3a9f53b63d..dd66197bae 100644 --- a/packages/fakeyou.com/src/components/common/Pagination/Pagination.tsx +++ b/packages/fakeyou.com/src/components/common/Pagination/Pagination.tsx @@ -13,9 +13,11 @@ interface PaginationComponentProps { pageCount: number } -export default function Pagination({ currentPage, onPageChange, pageCount }: PaginationComponentProps) { - // const pageCount = Math.ceil(totalItems / itemsPerPage); - +export default function Pagination({ + currentPage, + onPageChange, + pageCount +}: PaginationComponentProps) { return ( } diff --git a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx index c404527c4b..234e4fc45f 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx @@ -35,7 +35,7 @@ export default memo(function SelectModalWrapper({ const tabs = [{ label: "All Videos", content: ( -
+
) @@ -81,7 +81,7 @@ function VideoTabsContent({ const paginationProps = { onPageChange: handlePageClick, - pageCount: media.pageCount, + pageCount: media.pageCount+1, // account for index 0 currentPage: media.page, }; if (media.isLoading){ @@ -101,10 +101,14 @@ function VideoTabsContent({ }else { return( <> - + {media.pageCount > 1 && +
+ +
+ } console.log("Layout complete!")} + onLayoutComplete={() => {if (debug) console.log("Layout complete!")}} > {media.list.map((data: MediaFileType, key: number) => { let props = { @@ -126,9 +130,11 @@ function VideoTabsContent({ ); })} -
- -
+ {media.pageCount > 1 && +
+ +
+ } ); } From 353760af13e2ba38436c30e3e0ef87be7d4180d9 Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 20 Feb 2024 17:07:00 -0500 Subject: [PATCH 8/9] fixed bookmarked weights, only list weights left to be improved --- .../SelectModalVideoTabs.tsx | 4 +-- .../SelectModalWeightsTabs/tabAllWeights.tsx | 36 ++++++++++++------- .../tabBookmarkedWeights.tsx | 23 +++++++----- 3 files changed, 40 insertions(+), 23 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx index 234e4fc45f..242482cd51 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx @@ -101,7 +101,7 @@ function VideoTabsContent({ }else { return( <> - {media.pageCount > 1 && + {paginationProps.pageCount > 1 &&
@@ -130,7 +130,7 @@ function VideoTabsContent({ ); })} - {media.pageCount > 1 && + {paginationProps.pageCount > 1 &&
diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx index b7a79d7bb5..7cb050a77f 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx @@ -1,9 +1,9 @@ import React, {useRef, useState} from 'react'; import { useBookmarks, - useListContent, + useLazyLists, useRatings, - useSession + // useSession } from "hooks"; import { Weight as WeightI, @@ -31,28 +31,36 @@ export default function WeightsTabsContent({ const bookmarks = useBookmarks(); const ratings = useRatings(); const [list, listSet] = useState([]); - const { user } = useSession(); - const weights = useListContent({ + const [pageCount, setPageCount] = useState(0); + + const weights = useLazyLists({ addQueries: { page_size: 9, - ...prepFilter("sd_1.5", "weight_type"), + ...prepFilter(weightType, "weight_type"), }, - urlUpdate: false, - debug: debug ? "All Weights" : undefined, fetcher: ListWeights, + onSuccess: (res)=>{ + setPageCount((curr)=>{ + if (curr==0) return res.pagination.maybe_next ? 2 : 0 + else return curr+res.pagination.maybe_next ? 1 : 0 + }) + }, list, listSet, requestList: true, - urlParam: user?.username || "" + urlUpdate: false, }); + + const handlePageClick = (selectedItem: { selected: number }) => { - weights.pageChange(selectedItem.selected); + console.log("PAGECLICK") + weights.getMore(); }; const paginationProps = { onPageChange: handlePageClick, - pageCount: weights.pageCount, - currentPage: weights.page, + pageCount: pageCount, + currentPage: 0, }; if (weights.isLoading){ return ( @@ -71,12 +79,14 @@ export default function WeightsTabsContent({ }else { return( <> - +
+ +
console.log("Layout complete!")} > - {weights.list.map((data: WeightI, key: number) => { + {weights.list.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 2033cbde9d..5ab6b2852e 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx @@ -28,7 +28,7 @@ export default function WeightsTabsContent({ onSelect: (data:SelectModalData) => void; }){ const gridContainerRef = useRef(null); - const bookmarks = useBookmarks(); + // const bookmarks = useBookmarks(); const ratings = useRatings(); const [list, listSet] = useState([]); const { user } = useSession(); @@ -48,10 +48,11 @@ export default function WeightsTabsContent({ const handlePageClick = (selectedItem: { selected: number }) => { weights.pageChange(selectedItem.selected); }; - + console.log("BOOKMARKED"); + console.log(weights); const paginationProps = { onPageChange: handlePageClick, - pageCount: weights.pageCount, + pageCount: weights.pageCount + 1, currentPage: weights.page, }; if (weights.isLoading){ @@ -71,7 +72,11 @@ export default function WeightsTabsContent({ }else { return( <> - + {paginationProps.pageCount > 1 && +
+ +
+ } console.log("Layout complete!")} @@ -81,7 +86,7 @@ export default function WeightsTabsContent({ let props = { data, ratings, - bookmarks, + // bookmarks, showCreator: true, type: "weights", inSelectModal: true, @@ -100,9 +105,11 @@ export default function WeightsTabsContent({ ); })} -
- -
+ {paginationProps.pageCount > 1 && +
+ +
+ } ); } From b757f11b8c435a34b1947da7d44bb3d9c1bcd0df Mon Sep 17 00:00:00 2001 From: wil Date: Tue, 20 Feb 2024 17:47:44 -0500 Subject: [PATCH 9/9] turned lazylist into pagination, just need to fix 1 bug more --- .../SelectModalWeightsTabs/tabAllWeights.tsx | 23 ++++++++++++------- .../tabBookmarkedWeights.tsx | 2 +- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx index 7cb050a77f..395e71f2c8 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx @@ -31,7 +31,13 @@ export default function WeightsTabsContent({ const bookmarks = useBookmarks(); const ratings = useRatings(); const [list, listSet] = useState([]); - const [pageCount, setPageCount] = useState(0); + const [pages, setPages] = useState<{ + currPageWeights: any[], + lookup: string[] + }>({ + currPageWeights: [], + lookup: [] + }); const weights = useLazyLists({ addQueries: { @@ -40,9 +46,11 @@ export default function WeightsTabsContent({ }, fetcher: ListWeights, onSuccess: (res)=>{ - setPageCount((curr)=>{ - if (curr==0) return res.pagination.maybe_next ? 2 : 0 - else return curr+res.pagination.maybe_next ? 1 : 0 + setPages((curr)=>{ + return{ + currPageWeights: [...res.results], + lookup: [...curr.lookup, res.pagination.maybe_next] + } }) }, list, @@ -53,13 +61,12 @@ export default function WeightsTabsContent({ const handlePageClick = (selectedItem: { selected: number }) => { - console.log("PAGECLICK") weights.getMore(); }; const paginationProps = { onPageChange: handlePageClick, - pageCount: pageCount, + pageCount: pages.lookup.length+1, currentPage: 0, }; if (weights.isLoading){ @@ -84,9 +91,9 @@ export default function WeightsTabsContent({
console.log("Layout complete!")} + // onLayoutComplete={() => console.log("Layout complete!")} > - {weights.list.map((data: any, key: number) => { + {pages.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 5ab6b2852e..566ff32fc7 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx @@ -1,6 +1,6 @@ import React, {useRef, useState} from 'react'; import { - useBookmarks, + // useBookmarks, useListContent, useRatings, useSession