From a9b7249a609519443b40c0970cd9ff70c4691842 Mon Sep 17 00:00:00 2001 From: Victor Date: Thu, 11 Jan 2024 03:31:32 -0800 Subject: [PATCH] consolidation/simplification of useBatchContent outputs --- .../common/BookmarkButton/BookmarkButton.tsx | 16 ++++--- .../common/Card/AudioCard/AudioCard.tsx | 26 ++++++------ .../common/Card/ImageCard/ImageCard.tsx | 27 ++++++------ .../common/Card/VideoCard/VideoCard.tsx | 20 ++++----- .../common/LikeButton/LikeButton.tsx | 12 +++--- .../hooks/useBatchContent/useBatchContent.tsx | 42 +++++++++++++------ .../src/hooks/useBookmarks/useBookmarks.tsx | 13 ++---- .../src/hooks/useRatings/useRatings.tsx | 35 ++++++++-------- .../src/v2/view/pages/media/MediaPage.tsx | 13 +++--- .../src/v2/view/pages/weight/WeightPage.tsx | 19 ++++----- 10 files changed, 110 insertions(+), 113 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.tsx b/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.tsx index 8d93f6f6d..58ac15c14 100644 --- a/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.tsx +++ b/packages/fakeyou.com/src/components/common/BookmarkButton/BookmarkButton.tsx @@ -12,32 +12,30 @@ interface BookmarkButtonProps { busy?: boolean; entityToken?: string; entityType?: string; - initialToggled?: boolean; - onToggle: (entityToken: string, entityType: string) => Promise; favoriteCount?: number; - overlay?: boolean; + isToggled: boolean; large?: boolean; + overlay?: boolean; + toggle: (entityToken: string, entityType: string) => any } export default function BookmarkButton({ busy, entityToken = "", entityType = "", - initialToggled = false, - onToggle, favoriteCount, - overlay, + isToggled, large, + overlay, + toggle, }: BookmarkButtonProps) { - const isToggled = initialToggled; // toggled value managed externally via usebookmarks, this may change - // const [isToggled, setIsToggled] = useState(initialToggled); const [isLoading, setIsLoading] = useState(false); const handleClick = async (event: React.MouseEvent) => { event.preventDefault(); event.stopPropagation(); // setIsLoading(true); - onToggle(entityToken, entityType).then((isToggled: boolean) => { + toggle(entityToken, entityType).then((isToggled: boolean) => { // setIsToggled(isToggled); setIsLoading(false); }); diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx index a64d5a430..4eb1bf887 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -125,12 +125,11 @@ export default function AudioCard({
@@ -190,20 +189,19 @@ export default function AudioCard({
diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx index 0c16a1e6f..98f0bbd00 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -121,10 +121,10 @@ export default function ImageCard({
@@ -191,21 +191,18 @@ export default function ImageCard({
diff --git a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx index 4fd6be793..bc29887ee 100644 --- a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx @@ -83,11 +83,10 @@ export default function VideoCard({ data, origin = "", ratings, showCreator, typ
@@ -132,12 +131,11 @@ export default function VideoCard({ data, origin = "", ratings, showCreator, typ

{timeAgo}

diff --git a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx index 4fc7d2fad..54f8fd6e0 100644 --- a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx +++ b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx @@ -12,25 +12,23 @@ interface LikeButtonProps { busy?: boolean; entityToken?: string; entityType?: string; - initialToggled?: boolean; - onToggle: (entityToken: string, entityType: string) => Promise; likeCount: number; + isToggled: boolean; overlay?: boolean; large?: boolean; + toggle: (entityToken: string, entityType: string) => any } export default function LikeButton({ busy, entityToken = "", entityType = "", - initialToggled = false, - onToggle, likeCount = 0, // useShortenNumber freaks out if likeCount = NaN, give it a default value until it loads + isToggled, overlay, large, + toggle }: LikeButtonProps) { - const isToggled = initialToggled; // toggled value managed externally via useRatings, this may change - // const [isToggled, setIsToggled] = useState(initialToggled); const [isLoading, setIsLoading] = useState(false); // console.log("😎",busy); @@ -39,7 +37,7 @@ export default function LikeButton({ event.preventDefault(); event.stopPropagation(); // setIsLoading(true); - onToggle(entityToken, entityType).then((isToggled: boolean) => { + toggle(entityToken, entityType).then((isToggled: boolean) => { // setIsToggled(isToggled); setIsLoading(false); }); diff --git a/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx b/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx index f6cc85233..aa874dfd7 100644 --- a/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx +++ b/packages/fakeyou.com/src/hooks/useBatchContent/useBatchContent.tsx @@ -7,7 +7,8 @@ interface Props { modLibrary?: any, onPass?: any, onFail?: any, - resultsKey: string + resultsKey: string, + toggleCheck: (x: any) => any } interface Library { @@ -27,8 +28,10 @@ export default function useBatchContent({ modLibrary = (current: any, res: any, entity_token: string ) => current, onPass, onFail, - resultsKey }: Props) { - const [list, listSet] = useState({}); + resultsKey, + toggleCheck +}: Props) { + const [library, librarySet] = useState({}); const [busyList, busyListSet] = useState({}); const [status, statusSet] = useState(FetchStatus.ready); @@ -38,7 +41,7 @@ export default function useBatchContent({ busyListSet(tokens.reduce((obj = {},token = "") => ({ ...obj, [token]: true }),{})); // add current batch to busy list fetcher("",{},{ tokens }).then((batchRes: any) => { - console.log("🪙", batchRes.success && !!batchRes[resultsKey]); + console.log("🪙", res); if (batchRes.success && !!batchRes[resultsKey]) { let newBatch = batchRes[resultsKey].reduce((obj = {}, { entity_token = "", ...current }) => ({ @@ -48,7 +51,7 @@ export default function useBatchContent({ console.log("😡", newBatch); busyListSet({}); // this should be a for each key in tokens delete from busyList, but this is fine for now - listSet((list: any) => expand ? { ...list, ...newBatch } : newBatch); + librarySet((library: any) => expand ? { ...library, ...newBatch } : newBatch); } }) }; @@ -63,43 +66,56 @@ export default function useBatchContent({ }); const toggle = (entity_token: string, entity_type: string) => { - let inLibrary = list[entity_token]; + let inLibrary = library[entity_token]; statusSet(FetchStatus.in_progress); busyAdd(entity_token); console.log(`⏳ toggling entity ${ entity_token }, in library?: ${ !!inLibrary }`); if (inLibrary && checker(inLibrary)) { - return onPass.fetch(entity_token, entity_type, list) + return onPass.fetch(entity_token, entity_type, library) .then((res: any) => { console.log("⭕️",res); busyRemove(entity_token); - listSet(onPass.modLibrary(res, entity_token, entity_type, list)); + librarySet(onPass.modLibrary(res, entity_token, entity_type, library)); statusSet(FetchStatus.ready); return false; }); } else { - return onFail.fetch(entity_token, entity_type, list) + return onFail.fetch(entity_token, entity_type, library) .then((res: any) => { console.log("❌",res); busyRemove(entity_token); - listSet(onFail.modLibrary(res, entity_token, entity_type, list)); + librarySet(onFail.modLibrary(res, entity_token, entity_type, library)); statusSet(FetchStatus.ready); return true; }); } }; + const toggled = ( entity_token = "" ) => toggleCheck(library[entity_token]); + + const makeProps = ({ entityToken, entityType }: { entityToken: string, entityType: string }) => ({ + busy: busyList[entityToken], + entityToken, + entityType, + isToggled: toggled(entityToken), + toggle + }); + + return { busyAdd, busyRemove, busyList, busyListSet, gather, - list, - listSet, + library, + librarySet, + makeProps, status, statusSet, - toggle + toggle, + toggled }; }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx b/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx index 96b6daf7e..548ed93ec 100644 --- a/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx +++ b/packages/fakeyou.com/src/hooks/useBookmarks/useBookmarks.tsx @@ -22,7 +22,7 @@ export default function useBookmarks() { } }; - const { busyList, gather, list, status, toggle } = useBatchContent({ + return useBatchContent({ checker: ({ maybe_bookmark_token }: any) => !!maybe_bookmark_token, fetcher: GetBookmarks, modLibrary: (current: any, res: any, entity_token: string) => { @@ -49,14 +49,7 @@ export default function useBookmarks() { }), modLibrary: toggleList(true) }, - resultsKey: "bookmarks" + resultsKey: "bookmarks", + toggleCheck: (entity: any) => !!entity?.maybe_bookmark_token }); - - return { - busyList, - gather, - list, - status, - toggle - }; }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useRatings/useRatings.tsx b/packages/fakeyou.com/src/hooks/useRatings/useRatings.tsx index 7d6bb86bf..5b3cee5f1 100644 --- a/packages/fakeyou.com/src/hooks/useRatings/useRatings.tsx +++ b/packages/fakeyou.com/src/hooks/useRatings/useRatings.tsx @@ -1,5 +1,3 @@ -import { useState } from 'react'; -import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; import { GetRatings } from "@storyteller/components/src/api/user_ratings/GetRatings"; import { SetRating } from "@storyteller/components/src/api/user_ratings/SetRating"; import { useBatchContent } from "hooks"; @@ -9,10 +7,6 @@ import { useBatchContent } from "hooks"; // } export default function useRatings() { - // const [library, librarySet] = useState({}); - // const [baseList, baseListSet] = useState([]); - const [toggleStatus, toggleStatusSet] = useState(FetchStatus.ready); - const fetch = (entity_token: string, entity_type: string, lib: any) => { // console.log("🔔",lib[entity_token].rating_value); return SetRating("",{ @@ -22,14 +16,20 @@ export default function useRatings() { }); }; - const { busyList, gather, list, status, toggle } = useBatchContent({ + const ratings = useBatchContent({ fetcher: GetRatings, checker: () => true, + modLibrary: (current: any, res: any, entity_token: string) => { + let { positive_rating_count } = res.results.find((item: any, i: number) => + item.weight_token === entity_token + ).stats; + + return { ...current, positive_rating_count }; + }, onPass: { fetch, modLibrary: (res: any, entity_token: string, entity_type: string, lib: any) => { - - let jam = { + return { ...lib, [entity_token]: { entity_type, @@ -37,16 +37,17 @@ export default function useRatings() { positive_rating_count: res.new_positive_rating_count_for_entity } }; - - console.log("💯",res, jam); - - return jam; } }, - resultsKey: "ratings" + resultsKey: "ratings", + toggleCheck: (entity: any) => (entity?.rating_value || "") === "positive" }); - // console.log("🔮",list); - - return { busyList, gather, list, status, toggleStatus, toggleStatusSet, toggle }; + return { + ...ratings, + makeProps: ({ entityToken, entityType }: { entityToken: string, entityType: string }) => ({ + ...ratings.makeProps({ entityToken, entityType }), + likeCount: ratings.library[entityToken]?.positive_rating_count || 0, + }) + } }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 25827fc45..8037b7707 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -35,7 +35,7 @@ import { Input } from "components/common"; import LikeButton from "components/common/LikeButton"; import Badge from "components/common/Badge"; import useMediaFileTypeInfo from "hooks/useMediaFileTypeInfo"; -import { useBookmarks } from "hooks"; +import { useRatings } from "hooks"; import SdCoverImagePanel from "../weight/cover_image_panels/SdCoverImagePanel"; interface MediaPageProps { @@ -69,7 +69,8 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { getMediaFile(token); }, [token, getMediaFile]); - const bookmarks = useBookmarks(); + // const bookmarks = useBookmarks(); + const ratings = useRatings(); function renderMediaComponent(mediaFile: MediaFile) { switch (mediaFile.media_type) { @@ -343,11 +344,11 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
{/*