From 432029c33efe11d2c037d037cbd3c6ead12487dc Mon Sep 17 00:00:00 2001 From: Victor Date: Fri, 22 Dec 2023 22:46:25 -0500 Subject: [PATCH] weights tab on profile uses useListContent/weights by user, other small changes --- .../src/hooks/useBookmarks/useBookmarks.tsx | 4 +- .../hooks/useListContent/useListContent.tsx | 25 +- .../profile/profile_view/NewProfilePage.tsx | 6 +- .../profile_view/tabs/BookmarksTab.tsx | 10 +- .../profile/profile_view/tabs/MediaTab.tsx | 5 +- .../profile/profile_view/tabs/WeightsTab.tsx | 298 ++++-------------- .../view/pages/profile/useProfileRequests.tsx | 12 - 7 files changed, 93 insertions(+), 267 deletions(-) delete mode 100644 packages/fakeyou.com/src/v2/view/pages/profile/useProfileRequests.tsx diff --git a/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx b/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx index 9055a80c7b..f2bdf149d5 100644 --- a/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx +++ b/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx @@ -3,10 +3,12 @@ import { useListContent } from "hooks"; import { CreateBookmark } from "@storyteller/components/src/api/bookmarks/CreateBookmark"; import { DeleteBookmark } from "@storyteller/components/src/api/bookmarks/DeleteBookmark"; import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser"; +import { useSession } from "hooks"; export default function useBookmarks() { const [baseList, baseListSet] = useState([]); - const bookmarks = useListContent({ fetcher: GetBookmarksByUser, debug: "useBookmarks", list: baseList, listSet: baseListSet, requestList: true }); + const { user } = useSession(); + const bookmarks = useListContent({ fetcher: GetBookmarksByUser, debug: "useBookmarks", list: baseList, listSet: baseListSet, requestList: true, urlParam: user.username }); const list = bookmarks.list.reduce((obj: any, current: any) => { return { ...obj, [current.details.entity_token]: current.token } },{}); diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx index 5270954659..42c3d89f80 100644 --- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx +++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx @@ -1,18 +1,18 @@ import { useEffect, useState } from "react"; -import { useSession } from "hooks"; interface Props { addQueries?: any; + addSetters?: any; debug?: string, fetcher: any; list: any; listSet: any; pagePreset?: number; requestList?: boolean; + urlParam: string; } -export default function useListContent({ addQueries, debug = "", fetcher, list, listSet, pagePreset = 0, requestList = false }: Props) { - const { user } = useSession(); +export default function useListContent({ addQueries, addSetters, debug = "", fetcher, list, listSet, pagePreset = 0, requestList = false, urlParam = "" }: Props) { const [filter, filterSet] = useState("all"); const [page, pageSet] = useState(pagePreset); const [pageCount, pageCountSet] = useState(0); @@ -24,19 +24,23 @@ export default function useListContent({ addQueries, debug = "", fetcher, list, statusSet(1); }; - const onChange = ({ target }: { target: { name: string; value: any } }) => { - const todo: { [key: string]: (x: any) => void } = { filterSet, sortSet }; - todo[target.name + "Set"](target.value); - pageSet(1); // Reset to first page on filter/sort change + const reFetch = () => { + pageSet(pagePreset); // Reset to first page on filter/sort change listSet([]); // Reset list on filter/sort change statusSet(1); + } + + const onChange = ({ target }: { target: { name: string; value: any } }) => { + const todo: { [key: string]: (x: any) => void } = { ...addSetters, filterSet, sortSet }; + todo[target.name + "Set"](target.value); + reFetch(); }; useEffect(() => { - if (user && user.username) { + if (urlParam) { if (status === 1) { statusSet(2); - fetcher(user.username, {}, + fetcher(urlParam, {}, { page_index: page, ...addQueries, // eventually we should provide a way to type this ... or not. It works @@ -53,7 +57,7 @@ export default function useListContent({ addQueries, debug = "", fetcher, list, }); } } - }, [ addQueries, debug, fetcher, filter, listSet, page, user, sort, status ]); + }, [ addQueries, debug, fetcher, filter, listSet, page, sort, status, urlParam ]); return { filter, @@ -65,6 +69,7 @@ export default function useListContent({ addQueries, debug = "", fetcher, list, pageSet, pageCount, pageCountSet, + reFetch, sort, sortSet, status, diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/NewProfilePage.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/NewProfilePage.tsx index 178ce1abb9..2ea92559cd 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/NewProfilePage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/NewProfilePage.tsx @@ -357,21 +357,21 @@ function NewProfilePage(this: any, props: Props) { { to: `/dev-profile/${username}/media`, label: "Media", - content: , + content: , icon: faPhotoFilmMusic, padding: true, }, { to: `/dev-profile/${username}/weights`, label: "Weights", - content: , + content: , icon: faLayerGroup, padding: true, }, { to: `/dev-profile/${username}/bookmarks`, label: "Bookmarks", - content: , + content: , icon: faBookmark, padding: true, }, diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx index 839cb7edaf..77a6f19c0c 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx @@ -11,13 +11,13 @@ import Pagination from "components/common/Pagination"; import { useListContent } from "hooks"; import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser"; -export default function BookmarksTab() { +export default function BookmarksTab({ username }: { username: string }) { const gridContainerRef = useRef(null); const [isLoading] = useState(false); const [selectedFilter, setSelectedFilter] = useState("all"); const [list, listSet] = useState([]); - const bookmarks = useListContent({ debug: "bookmarks tab", fetcher: GetBookmarksByUser, list, listSet, requestList: true }); + const bookmarks = useListContent({ debug: "bookmarks tab", fetcher: GetBookmarksByUser, list, listSet, requestList: true, urlParam: username }); const handlePageClick = (selectedItem: { selected: number }) => { bookmarks.pageChange(selectedItem.selected + 1); @@ -60,12 +60,6 @@ export default function BookmarksTab() { { value: "SDXL", label: "SD XL" }, ]; - // const paginationProps = { - // onPageChange: handlePageClick, - // pageCount: 0, // replace with proper fecth value - // currentPage: 0 // replace with proper fecth value - // }; - const handleFilterChange = (option: any) => { const selectedOption = option as { value: string; label: string }; setSelectedFilter(selectedOption.value); diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx index f2bfdd340a..aaca63a21e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx @@ -13,7 +13,7 @@ import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetM import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; import { useListContent } from "hooks"; -export default function MediaTab() { +export default function MediaTab({ username }: { username: string }) { const gridContainerRef = useRef(null); const [isLoading] = useState(false); @@ -24,7 +24,8 @@ export default function MediaTab() { list, listSet, pagePreset: 1, - requestList: true + requestList: true, + urlParam: username }); const handlePageClick = (selectedItem: { selected: number }) => { diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx index ae18f28adb..3d4dc1c708 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx @@ -1,113 +1,48 @@ -// @ts-nocheck -import React, { useRef, useState, useEffect } from "react"; +import React, { useRef, useState } from "react"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; -import mockWeightsData from "./mockWeightsData"; -import { ApiConfig } from "@storyteller/components"; import AudioCard from "components/common/Card/AudioCard"; import ImageCard from "components/common/Card/ImageCard"; import VideoCard from "components/common/Card/VideoCard"; -import Select from "components/common/Select"; -import { - faArrowDownWideShort, - faFilter, -} from "@fortawesome/pro-solid-svg-icons"; +import { faArrowDownWideShort, faFilter } from "@fortawesome/pro-solid-svg-icons"; import SkeletonCard from "components/common/Card/SkeletonCard"; import Pagination from "components/common/Pagination"; +import { useListContent } from "hooks"; +import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser"; +import { TempSelect } from "components/common"; -interface IWeighttModelData { - token: string; - weight_name: string; - public_bucket_path: string; - likes: Number; - isLiked: boolean; - created_at: string; -} +// interface IWeighttModelData { +// token: string; +// weight_name: string; +// public_bucket_path: string; +// likes: Number; +// isLiked: boolean; +// created_at: string; +// } -export default function WeightsTab() { +export default function WeightsTab({ username }: { username: string }) { const gridContainerRef = useRef(null); - const [data, setData] = useState(mockWeightsData); const [isLoading] = useState(false); - const [selectedFilter, setSelectedFilter] = useState("all"); - const [currentPage, setCurrentPage] = useState(0); - const itemsPerPage = 10; + const [sd,sdSet] = useState("all"); + const [tts,ttsSet] = useState("all"); + const [vc,vcSet] = useState("all"); - useEffect(() => { - const api = new ApiConfig(); - const endpointUrl = api.getWeights("?page_size=1000&page_index=0"); - let weightsData = []; + const addSetters = { sdSet, ttsSet, vcSet }; - fetch(endpointUrl, { - method: "GET", - headers: { - Accept: "application/json", - }, - credentials: "include", - }) - .then(res => res.json()) - .then(res => { - if (!res.success) { - return; - } - console.log(res); - res.weights?.forEach((l: any) => { - weightsData.push({ - token: l?.weight_token, - weight_name: l?.title, - media_type: "image", - public_bucket_path: "/images/dummy-image.jpg", - likes: l?.likes, - isLiked: l?.bookmarks, - created_at: l?.created_at, - }); - }); - setData(weightsData); - }) - .catch(e => {}); - }, []); - - const updateRequest = (params: any) => { - const api = new ApiConfig(); - const endpointUrl = api.getWeights("?page_size=1000&page_index=0" + params); - let weightsData = []; - - fetch(endpointUrl, { - method: "GET", - headers: { - Accept: "application/json", - }, - credentials: "include", - }) - .then(res => res.json()) - .then(res => { - if (!res.success) { - return; - } - console.log(res); - res.weights?.forEach((l: any) => { - weightsData.push({ - token: l?.weight_token, - weight_name: l?.title, - media_type: "image", - public_bucket_path: "/images/dummy-image.jpg", - likes: l?.likes, - isLiked: l?.bookmarks, - created_at: l?.created_at, - }); - }); - setData(weightsData); - }) - .catch(e => {}); - }; + const [list, listSet] = useState([]); + const weights = useListContent({ + addSetters, + debug: "Weights tab", + fetcher: GetWeightsByUser, + list, + listSet, + requestList: true, + urlParam: username + }); const handlePageClick = (selectedItem: { selected: number }) => { - setCurrentPage(selectedItem.selected); + weights.pageChange(selectedItem.selected + 1); }; - const currentItems = data.slice( - currentPage * itemsPerPage, - (currentPage + 1) * itemsPerPage - ); - const filterOptions = [ { value: "all", label: "All Weights" }, { value: "tts", label: "Text to Speech" }, @@ -141,150 +76,51 @@ export default function WeightsTab() { const paginationProps = { onPageChange: handlePageClick, - pageCount: 0, // replace with proper fecth value - currentPage: 0 // replace with proper fecth value - }; - - const handleFilterChange = (option: any) => { - const selectedOption = option as { value: string; label: string }; - setSelectedFilter(selectedOption.value); - - switch (selectedOption.value) { - case "all": - updateRequest(""); - break; - case "tts": - updateRequest("&weights_category=text_to_speech"); - break; - case "vc": - updateRequest("&weights_category=voice_conversion"); - break; - case "sd": - updateRequest("&weights_category=image_generation"); - break; - default: - updateRequest(""); - } - }; - - const handleOrderChange = (option: any) => { - const selectedOption = option as { value: string; label: string }; - - switch (selectedOption.value) { - case "oldest": - updateRequest("&sort_ascending=true"); - break; - case "newest": - updateRequest("&sort_ascending=false"); - break; - case "mostliked": - updateRequest("&sort_ascending=false"); - break; - default: - updateRequest("&sort_ascending=false"); - } - }; - - const handleTtsChange = (option: any) => { - const selectedOption = option as { value: string; label: string }; - - switch (selectedOption.value) { - case "all": - updateRequest("&weights_category=text_to_speech"); - break; - case "tt2": - updateRequest("&weights_type=hifigan_tt2"); - break; - default: - updateRequest("&weights_category=text_to_speec"); - } - }; - - const handleVcChange = (option: any) => { - const selectedOption = option as { value: string; label: string }; - - switch (selectedOption.value) { - case "all": - updateRequest("&weights_category=voice_conversion"); - break; - case "rvc": - updateRequest("&weights_type=rvc_v2"); - break; - case "svc": - console.log(selectedOption.value); - updateRequest("&weights_type=so_vits_svc"); - break; - default: - updateRequest("&weights_category=voice_conversion"); - } - }; - - const handleSdChange = (option: any) => { - const selectedOption = option as { value: string; label: string }; - - switch (selectedOption.value) { - case "all": - updateRequest("&weights_category=image_generation"); - break; - case "lora": - updateRequest("&weights_type=loRA"); - break; - case "SD15": - console.log(selectedOption.value); - updateRequest("&weights_type=sd_1.5"); - break; - case "SDXL": - console.log(selectedOption.value); - updateRequest("&weights_type=sdxl"); - break; - default: - updateRequest("&weights_category=image_generation"); - } + pageCount: weights.pageCount, + currentPage: weights.page }; return ( <>
- - - {selectedFilter === "tts" && ( - + {weights.filter === "sd" && ( + )} - {selectedFilter === "vc" && ( -