From c4c2025cb7dab96cb230fe0c554e08da3dc1c58f Mon Sep 17 00:00:00 2001 From: Victor Date: Sun, 31 Dec 2023 17:14:19 -0500 Subject: [PATCH] added frontend query params to explore media and weights tabs, removed useListContent from useBookmarks, which doesn't even need pagination and such --- .../src/api/bookmarks/GetBookmarksByUser.ts | 3 +- .../common/Card/ImageCard/ImageCard.tsx | 2 - .../src/hooks/useBookmarks/useBookmarks.tsx | 29 ++++++++++---- .../src/hooks/useLazyLists/useLazyLists.tsx | 39 ++++++++++--------- .../hooks/useListContent/useListContent.tsx | 6 +-- .../v2/view/pages/explore/tabs/MediaTab.tsx | 17 ++++++-- .../v2/view/pages/explore/tabs/WeightsTab.tsx | 18 ++++++--- 7 files changed, 73 insertions(+), 41 deletions(-) diff --git a/packages/components/src/api/bookmarks/GetBookmarksByUser.ts b/packages/components/src/api/bookmarks/GetBookmarksByUser.ts index 671e07d7a7..8217299ab8 100644 --- a/packages/components/src/api/bookmarks/GetBookmarksByUser.ts +++ b/packages/components/src/api/bookmarks/GetBookmarksByUser.ts @@ -10,7 +10,8 @@ export interface UserBookmarksListResponse { } export interface UserBookmarksListQueries { - page_index: number; + page_index?: number; + page_size: number; } export const GetBookmarksByUser = MakeRequest< 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 a963fa390e..95891f4730 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -49,8 +49,6 @@ export default function ImageCard({ data.weight_type || data.details?.maybe_weight_data?.weight_type ); - console.log("🌇", origin); - const bucketConfig = new BucketConfig(); let coverImage = "/images/avatars/default-pfp.png"; diff --git a/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx b/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx index 6590881183..b44b29fe1d 100644 --- a/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx +++ b/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx @@ -1,17 +1,19 @@ -import { useState } from 'react'; -import { useListContent } from "hooks"; +import { useEffect, useState } from 'react'; 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 { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; import { useSession } from "hooks"; export default function useBookmarks() { - const [baseList, baseListSet] = useState([]); 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) => { + const [baseList, baseListSet] = useState([]); + const [status, statusSet] = useState(FetchStatus.ready); + + const list = baseList.reduce((obj: any, current: any) => { return { ...obj, [current.details.entity_token]: current.token } },{}); + const toggle = (entityToken = "", type = "") => { let bookmarkToken = list[entityToken]; if (bookmarkToken) { @@ -19,7 +21,7 @@ export default function useBookmarks() { return DeleteBookmark(bookmarkToken,{ as_mod: true }) .then((res: any) => { console.log("🔥",res); - bookmarks.statusSet(1); + statusSet(FetchStatus.ready); return false; }); @@ -31,12 +33,25 @@ export default function useBookmarks() { }) .then((res: any) => { console.log("🔖",res); - bookmarks.statusSet(1); + statusSet(FetchStatus.ready); return true; }); } }; + useEffect(() => { + if (user && status === FetchStatus.ready) { + statusSet(FetchStatus.in_progress); + GetBookmarksByUser(user?.username || "",{},{ page_size: 999 }) // high number because we want all bookmarks + .then((res: any) => { + statusSet(FetchStatus.success); + if (res.results) { + baseListSet(res.results); + } + }); + } + },[status, user]); + return { list, toggle diff --git a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx index 36c5860658..99db6b670b 100644 --- a/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx +++ b/packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx @@ -1,11 +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; @@ -15,11 +16,13 @@ interface Props { const n = () => {}; -export default function useLazyLists({ addQueries, debug = "", fetcher, filterKey = "filter_media_type", list = [], listSet, onInputChange = n, onSuccess = n, requestList = false }: Props) { - const [filter, filterSet] = useState("all"); - const [next, nextSet] = useState(""); +export default function useLazyLists({ addQueries, addSetters, debug = "", fetcher, list = [], listSet, onInputChange = n, onSuccess = n, requestList = false }: Props) { + const { pathname, search: locSearch } = useLocation(); + const history = useHistory(); + const urlQueries = new URLSearchParams(locSearch); + const [next, nextSet] = useState(urlQueries.get("cursor") || ""); const [previous, previousSet] = useState(""); // I am not used for anything yet :) - const [sort, sortSet] = useState(false); + const [sort, sortSet] = useState(urlQueries.get("sort_ascending") === "true"); const [status, statusSet] = useState(requestList ? FetchStatus.ready : FetchStatus.paused); const listKeys = Object.keys(list); const totalKeys = listKeys.length; @@ -31,7 +34,7 @@ export default function useLazyLists({ addQueries, debug = "", fetcher, filterKe }; const onChange = ({ target }: { target: { name: string; value: any } }) => { - const todo: { [key: string]: (x: any) => void } = { filterSet, sortSet }; + const todo: { [key: string]: (x: any) => void } = { ...addSetters, sortSet }; todo[target.name + "Set"](target.value); onInputChange({ target }); listSet([]); // Reset list on filter/sort change @@ -41,18 +44,18 @@ export default function useLazyLists({ addQueries, debug = "", fetcher, filterKe }; useEffect(() => { + const queries = { + ...(next ? { cursor: next } : {}), + ...addQueries, // eventually we should provide a way to type this ... or not. It works + ...(sort ? { sort_ascending: true } : {}), + }; + if (status === FetchStatus.ready) { + let search = new URLSearchParams(queries).toString(); statusSet(FetchStatus.in_progress); - fetcher( - "", - {}, - { - ...(next ? { cursor: next } : {}), - ...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( "",{},queries).then((res: any) => { if (debug) console.log(`🐞 useLazyLists success debug at: ${ debug }`, res); statusSet(FetchStatus.success); onSuccess(res); @@ -78,12 +81,10 @@ export default function useLazyLists({ addQueries, debug = "", fetcher, filterKe } }); } - }, [ addQueries, debug, fetcher, filter, filterKey, listKeys, listSet, next, onSuccess, sort, status, totalKeys ]); + }, [ addQueries, debug, fetcher, history, listKeys, listSet, next, onSuccess, pathname, sort, status, totalKeys ]); return { fetchError, - filter, - filterSet, getMore, isLoading, list: Object.values(list).flat(), // format as an array, eventually the input list will live within this hook. Eventually diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx index 5d34f95cb3..c62d195b4a 100644 --- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx +++ b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx @@ -31,8 +31,9 @@ export default function useListContent({ requestList = false, urlParam = "", }: Props) { - const { pathname, search } = useLocation(); - const urlQueries = new URLSearchParams(search); + const { pathname, search: locSearch } = useLocation(); + const history = useHistory(); + const urlQueries = new URLSearchParams(locSearch); const [page, pageSet] = useState(parseInt(urlQueries.get("page_index") || "") || pagePreset); const [pageCount, pageCountSet] = useState(0); const [sort, sortSet] = useState(urlQueries.get("sort_ascending") === "true"); @@ -42,7 +43,6 @@ export default function useListContent({ const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress; const fetchError = status === FetchStatus.error; - const history = useHistory(); const pageChange = (page: number) => { pageSet(page); diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx index 1013e7d8a1..b5df29566f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx @@ -1,4 +1,5 @@ import React, { useRef, useState } from "react"; +import { useLocation } from "react-router-dom"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; import AudioCard from "components/common/Card/AudioCard"; import ImageCard from "components/common/Card/ImageCard"; @@ -14,21 +15,29 @@ import { ListMediaFiles } from "@storyteller/components/src/api/media_files/List import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; import { useBookmarks, useLazyLists } from "hooks"; import InfiniteScroll from "react-infinite-scroll-component"; +import prepFilter from "resources/prepFilter"; export default function MediaTab() { + const { search } = useLocation(); + const urlQueries = new URLSearchParams(search); const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); + const [weightType, weightTypeSet] = useState(urlQueries.get("maybe_scoped_weight_type") || "all"); const [showMasonryGrid, setShowMasonryGrid] = useState(true); const [list, listSet] = useState([]); const media = useLazyLists({ + addQueries: { + page_size: 24, + ...prepFilter(weightType, "maybe_scoped_weight_type") + }, + addSetters: { weightTypeSet }, debug: "explore media tab", fetcher: ListMediaFiles, list, listSet, onInputChange: () => setShowMasonryGrid(false), onSuccess: () => setShowMasonryGrid(true), - requestList: true, - addQueries: { page_size: 12 }, + requestList: true }); const filterOptions = [ @@ -61,9 +70,9 @@ export default function MediaTab() { {...{ icon: faFilter, options: filterOptions, - name: "filter", + name: "weightType", onChange: media.onChange, - value: media.filter, + value: weightType, }} /> diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx index 15debd21d8..369e031c09 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx @@ -1,4 +1,5 @@ import React, { useRef, useState } from "react"; +import { useLocation } from "react-router-dom"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; import WeightsCards from "components/common/Card/WeightsCards"; import { TempSelect } from "components/common"; @@ -12,21 +13,28 @@ import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights import { Weight } from "@storyteller/components/src/api/weights/GetWeight"; import InfiniteScroll from "react-infinite-scroll-component"; import { useBookmarks, useLazyLists } from "hooks"; +import prepFilter from "resources/prepFilter"; export default function WeightsTab() { + const { search } = useLocation(); + const urlQueries = new URLSearchParams(search); const bookmarks = useBookmarks(); const gridContainerRef = useRef(null); + const [weightType, weightTypeSet] = useState(urlQueries.get("maybe_scoped_weight_type") || "all"); const [showMasonryGrid, setShowMasonryGrid] = useState(true); const [list, listSet] = useState([]); const weights = useLazyLists({ + addQueries: { + page_size: 24, + ...prepFilter(weightType, "maybe_scoped_weight_type") + }, + addSetters: { weightTypeSet }, fetcher: ListWeights, - filterKey: "weights_category", list, listSet, onInputChange: () => setShowMasonryGrid(false), onSuccess: () => setShowMasonryGrid(true), - requestList: true, - addQueries: { page_size: 12 }, + requestList: true }); const filterOptions = [ @@ -77,9 +85,9 @@ export default function WeightsTab() { {...{ icon: faFilter, options: filterOptions, - name: "filter", + name: "weightType", onChange: weights.onChange, - value: weights.filter, + value: weightType, }} /> {/* {selectedFilter === "tts" && (