diff --git a/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx b/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx index 345357f1ab..d58a04e0ac 100644 --- a/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx +++ b/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx @@ -9,7 +9,6 @@ interface Props { } export default function MediaCards({ props, type }: Props) { - console.log("🔋",props); switch (type) { case "audio": return ; diff --git a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx index ac34cf75d3..828b14a6d7 100644 --- a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx +++ b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx @@ -9,7 +9,6 @@ interface Props { } export default function WeightsCards({ props, type }: Props) { - console.log("🧿",props); switch (type) { case WeightCategory.TTS: case WeightCategory.VC: diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx index f2e8797373..5d34f95cb3 100644 --- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx +++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx @@ -1,12 +1,12 @@ import { useEffect, useState } from "react"; import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; +import { useHistory, useLocation } from "react-router-dom"; interface Props { addQueries?: any; addSetters?: any; debug?: string; fetcher: any; - filterKey?: string; list: any; listSet: any; onInputChange?: (x?: any) => any; @@ -23,7 +23,6 @@ export default function useListContent({ addSetters, debug = "", fetcher, - filterKey = "filter_media_type", list, listSet, onInputChange = n, @@ -32,16 +31,18 @@ export default function useListContent({ requestList = false, urlParam = "", }: Props) { - const [filter, filterSet] = useState("all"); - const [page, pageSet] = useState(pagePreset); + const { pathname, search } = useLocation(); + const urlQueries = new URLSearchParams(search); + const [page, pageSet] = useState(parseInt(urlQueries.get("page_index") || "") || pagePreset); const [pageCount, pageCountSet] = useState(0); - const [sort, sortSet] = useState(false); + const [sort, sortSet] = useState(urlQueries.get("sort_ascending") === "true"); const [status, statusSet] = useState( requestList ? FetchStatus.ready : FetchStatus.paused ); const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress; const fetchError = status === FetchStatus.error; + const history = useHistory(); const pageChange = (page: number) => { pageSet(page); @@ -57,7 +58,6 @@ export default function useListContent({ const onChange = ({ target }: { target: { name: string; value: any } }) => { const todo: { [key: string]: (x: any) => void } = { ...addSetters, - filterSet, sortSet, }; todo[target.name + "Set"](target.value); @@ -66,19 +66,18 @@ export default function useListContent({ }; useEffect(() => { + const queries = { + page_index: page, + ...addQueries, // eventually we should provide a way to type this ... or not. It works + ...(sort ? { sort_ascending: true } : {}), + }; + if (urlParam) { if (status === FetchStatus.ready) { + let search = new URLSearchParams(queries).toString(); statusSet(FetchStatus.in_progress); - fetcher( - urlParam, - {}, - { - page_index: page, - ...addQueries, // eventually we should provide a way to type this ... or not. It works - ...(filter !== "all" ? { [filterKey]: filter } : {}), - ...(sort ? { sort_ascending: true } : {}), - } - ).then((res: any) => { + history.replace({ pathname, search }); + fetcher(urlParam,{},queries).then((res: any) => { if (debug) console.log(`🪲 useListContent success debug at: ${debug}`, res); statusSet(FetchStatus.success); @@ -94,10 +93,10 @@ export default function useListContent({ addQueries, debug, fetcher, - filter, - filterKey, + history, listSet, onSuccess, + pathname, page, sort, status, @@ -106,8 +105,6 @@ export default function useListContent({ return { fetchError, - filter, - filterSet, list, isLoading, onChange, diff --git a/packages/fakeyou.com/src/resources/prepFilter.ts b/packages/fakeyou.com/src/resources/prepFilter.ts new file mode 100644 index 0000000000..631c4b3ccc --- /dev/null +++ b/packages/fakeyou.com/src/resources/prepFilter.ts @@ -0,0 +1,3 @@ +const prepFilter = (value: string, queryKey: string) => ({ ...value !== "all" ? { [queryKey]: value } : {} }); + +export default prepFilter; \ No newline at end of file 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 2137ef1372..7f017990fa 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 @@ -12,23 +12,26 @@ import Pagination from "components/common/Pagination"; import { useBookmarks, useListContent } from "hooks"; import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser"; import WeightsCards from "components/common/Card/WeightsCards"; +import prepFilter from "resources/prepFilter"; export default function BookmarksTab({ username }: { username: string }) { - const { pathname: origin } = useLocation(); + const { pathname: origin, search } = useLocation(); + const urlQueries = new URLSearchParams(search); const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); + const [weightType, weightTypeSet] = useState(urlQueries.get("maybe_scoped_weight_type") || "all"); const [sd, sdSet] = useState("all"); const [tts, ttsSet] = useState("all"); const [vc, vcSet] = useState("all"); - const [weightCategory, weightCategorySet] = useState("all"); + const [weightCategory, weightCategorySet] = useState(urlQueries.get("maybe_scoped_weight_category") || "all"); const [list, listSet] = useState([]); // const resetMasonryGrid = () => { // setShowMasonryGrid(false); // setTimeout(() => setShowMasonryGrid(true), 10); // }; const { - filter, + // filter, isLoading, list: dataList, onChange, @@ -40,12 +43,12 @@ export default function BookmarksTab({ username }: { username: string }) { } = useListContent({ addQueries: { page_size: 24, - ...(weightCategory !== "all" ? { maybe_scoped_weight_category: weightCategory } : {}), + ...prepFilter(weightType, "maybe_scoped_weight_type"), + ...prepFilter(weightCategory, "maybe_scoped_weight_category"), }, - addSetters: { sdSet, ttsSet, vcSet, weightCategorySet }, + addSetters: { sdSet, ttsSet, vcSet, weightCategorySet, weightTypeSet }, debug: "bookmarks tab", fetcher: GetBookmarksByUser, - filterKey: "maybe_scoped_weight_type", list, listSet, onInputChange: () => setShowMasonryGrid(false), @@ -131,9 +134,9 @@ export default function BookmarksTab({ username }: { username: string }) { {...{ icon: faFilter, options: filterOptions, - name: "filter", + name: "weightType", onChange, - value: filter, + value: weightType, }} /> - {filter === "tts" && ( + { weightType === "tts" && ( )} - {filter === "sd" && ( + { weightType === "sd" && ( )} - {filter === "vc" && ( + { weightType === "vc" && ( (null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); + const [mediaType, mediaTypeSet] = useState(urlQueries.get("filter_media_type") || "all"); const [list, listSet] = useState([]); // const resetMasonryGrid = () => { // setShowMasonryGrid(false); // setTimeout(() => setShowMasonryGrid(true), 10); // }; const media = useListContent({ - // addQueries: { abc: "anything" }, an example + addQueries: { + page_size: 24, + ...prepFilter(mediaType, "filter_media_type"), + }, + addSetters: { mediaTypeSet }, fetcher: GetMediaByUser, list, listSet, onInputChange: () => setShowMasonryGrid(false), onSuccess: () => setShowMasonryGrid(true), requestList: true, - urlParam: username, - addQueries: { page_size: 24 }, + urlParam: username }); const handlePageClick = (selectedItem: { selected: number }) => { @@ -77,9 +83,9 @@ export default function MediaTab({ username }: { username: string }) { {...{ icon: faFilter, options: filterOptions, - name: "filter", + name: "mediaType", onChange: media.onChange, - value: media.filter, + value: mediaType, }} /> 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 f40a6b913c..0392b7befa 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 @@ -11,6 +11,7 @@ import { useBookmarks, useListContent } from "hooks"; import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser"; import { TempSelect } from "components/common"; import SkeletonCard from "components/common/Card/SkeletonCard"; +import prepFilter from "resources/prepFilter"; // interface IWeighttModelData { // token: string; @@ -22,8 +23,11 @@ import SkeletonCard from "components/common/Card/SkeletonCard"; // } export default function WeightsTab({ username }: { username: string }) { - const { pathname: origin } = useLocation(); + const { pathname: origin, search } = useLocation(); + // const { maybe_scoped_weight_type, ...yadda } = useParams<{ maybe_scoped_weight_type: string }>(); + const urlQueries = new URLSearchParams(search); const gridContainerRef = useRef(null); + const [weightType, weightTypeSet] = useState(urlQueries.get("maybe_scoped_weight_type") || "all"); const [sd, sdSet] = useState("all"); const [tts, ttsSet] = useState("all"); const [vc, vcSet] = useState("all"); @@ -31,7 +35,11 @@ export default function WeightsTab({ username }: { username: string }) { const bookmarks = useBookmarks(); const [list, listSet] = useState([]); const weights = useListContent({ - addSetters: { sdSet, ttsSet, vcSet }, + addQueries: { + ...prepFilter(weightType, "maybe_scoped_weight_type"), + page_size: 24 + }, + addSetters: { weightTypeSet, sdSet, ttsSet, vcSet }, debug: "Weights tab", fetcher: GetWeightsByUser, list, @@ -39,12 +47,9 @@ export default function WeightsTab({ username }: { username: string }) { onInputChange: () => setShowMasonryGrid(false), onSuccess: () => setShowMasonryGrid(true), requestList: true, - urlParam: username, - addQueries: { page_size: 24 }, + urlParam: username }); - console.log("💎", origin); - const handlePageClick = (selectedItem: { selected: number }) => { weights.pageChange(selectedItem.selected); }; @@ -104,12 +109,12 @@ export default function WeightsTab({ username }: { username: string }) { {...{ icon: faFilter, options: filterOptions, - name: "filter", + name: "weightType", onChange: weights.onChange, - value: weights.filter, + value: weightType, }} /> - {weights.filter === "tts" && ( + { weightType === "tts" && ( )} - {weights.filter === "sd" && ( + { weightType === "sd" && ( )} - {weights.filter === "vc" && ( + { weightType === "vc" && (