diff --git a/packages/components/src/api/user_ratings/GetRatings.ts b/packages/components/src/api/user_ratings/GetRatings.ts new file mode 100644 index 0000000000..a39a31ec27 --- /dev/null +++ b/packages/components/src/api/user_ratings/GetRatings.ts @@ -0,0 +1,23 @@ +import MakeRequest from "../MakeRequest"; + +export interface Rating { + entity_token: string, + entity_type: string, + rating_value: string +} + +export interface GetRatingsRequest {} + +export interface GetRatingsResponse { + success: boolean, + ratings?: Rating[] +} + +export interface GetRatingsQueries { + tokens: string[], +} + +export const GetRatings = MakeRequest({ + method: "GET", + routingFunction: () => `/v1/user_rating/batch`, +}); \ No newline at end of file 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 3b613aa810..3a0b9ca7e4 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -17,18 +17,20 @@ interface AudioCardProps { bookmarks: any; data: any; origin?: string; - type: "media" | "weights"; + ratings: any; showCreator?: boolean; showCover?: boolean; + type: "media" | "weights"; } export default function AudioCard({ bookmarks, data, origin = "", - type, + ratings, showCreator, showCover, + type, }: AudioCardProps) { const linkUrl = type === "media" @@ -43,11 +45,6 @@ export default function AudioCard({ const timeAgo = useTimeAgo(data.created_at); - const handleLike = async () => { - console.log(`The item is now ${data.isLiked ? "liked" : "not liked"}.`); - return true; // temporary, replace with like function - }; - const { label: weightBadgeLabel, color: weightBadgeColor } = useWeightTypeInfo( data.weight_type || data.details?.maybe_weight_data?.weight_type @@ -126,7 +123,12 @@ export default function AudioCard({ )}
- +
@@ -184,7 +186,12 @@ export default function AudioCard({ )}
- +
{ - console.log(`The item is now ${data.isLiked ? "liked" : "not liked"}.`); - return true; // temporary will be replaced with like function - }; - const { label: weightBadgeLabel, color: weightBadgeColor } = useWeightTypeInfo( data.weight_type || data.details?.maybe_weight_data?.weight_type @@ -122,7 +119,12 @@ export default function ImageCard({ )}
- +
@@ -186,7 +188,12 @@ export default function ImageCard({ )}
- +
{ - console.log(`The item is now ${data.isLiked ? "liked" : "not liked"}.`); - return true; // temporary, replace with like function - }; - const videoLink = new BucketConfig().getGcsUrl(data.public_bucket_path); return ( @@ -86,10 +82,12 @@ export default function VideoCard({ data, origin = "", type, showCreator }: Vide )}
- +
@@ -132,11 +130,13 @@ export default function VideoCard({ data, origin = "", type, showCreator }: Vide

{timeAgo}

- +
diff --git a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx index c903d5a319..0ca1e9eaa2 100644 --- a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx +++ b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx @@ -26,15 +26,16 @@ export default function LikeButton({ overlay, large, }: LikeButtonProps) { - const [isToggled, setIsToggled] = useState(initialToggled); + const isToggled = initialToggled; // toggled value managed externally via useRatings, 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); + // setIsLoading(true); onToggle(entityToken, entityType).then((isToggled: boolean) => { - setIsToggled(isToggled); + // setIsToggled(isToggled); setIsLoading(false); }); // try { diff --git a/packages/fakeyou.com/src/hooks/useRatings/useRatings.tsx b/packages/fakeyou.com/src/hooks/useRatings/useRatings.tsx index ff989ad044..48db2f171d 100644 --- a/packages/fakeyou.com/src/hooks/useRatings/useRatings.tsx +++ b/packages/fakeyou.com/src/hooks/useRatings/useRatings.tsx @@ -1,11 +1,46 @@ import { useState } from 'react'; import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; +import { GetRatings, GetRatingsResponse } from "@storyteller/components/src/api/user_ratings/GetRatings"; +import { SetRating, SetRatingResponse } from "@storyteller/components/src/api/user_ratings/SetRating"; -interface Props { - value?: any; -} +// interface Props { +// value?: any +// } -export default function useRatings({ value }: Props) { - const [status, statusSet] = useState(FetchStatus.ready); - return { status, statusSet }; +export default function useRatings() { + // const [library, librarySet] = useState({}); + const [baseList, baseListSet] = useState([]); + const [toggleStatus, toggleStatusSet] = useState(FetchStatus.ready); + + const library = baseList.reduce((obj: any, current: any) => { + return { ...obj, [current.entity_token]: current.token } + },{}); + + const gather = (res: any) => { + let tokens = res.results.map((item: any) => item.token); + console.log("💧", tokens); + GetRatings("",{},{ tokens }).then((res: GetRatingsResponse) => { + if (res.success && res.ratings) { + console.log("🪙",res); + baseListSet(res.ratings); + } + }); + }; + + const toggle = (token: string, entityType: string) => { + let inLibrary = library[token]; + + toggleStatusSet(FetchStatus.in_progress); + console.log("⏳ toggling bookmark ...",{ token, entityType }); + SetRating("",{ + entity_token: token, + entity_type: entityType, + rating_value: !inLibrary || inLibrary.rating_value === "neutral" ? "positive" : "neutral" + }).then(( res: SetRatingResponse ) => { + toggleStatusSet(FetchStatus.ready); + console.log("👍 like toggled",res); + }); + }; + + return { gather, toggleStatus, toggleStatusSet, toggle }; }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx index baf4ca54da..e58f5bd5dc 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx @@ -1,20 +1,18 @@ import React, { useEffect, useRef, useState } from "react"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; -import AudioCard from "components/common/Card/AudioCard"; - +import MediaCards from "components/common/Card/MediaCards"; import { Link } from "react-router-dom"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; -import { useBookmarks } from "hooks"; +import { useBookmarks, useRatings } from "hooks"; import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles"; import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes"; import SkeletonCard from "components/common/Card/SkeletonCard"; -import ImageCard from "components/common/Card/ImageCard"; -import VideoCard from "components/common/Card/VideoCard"; export default function FeaturedTab() { const bookmarks = useBookmarks(); + const ratings = useRatings(); const gridContainerRef = useRef(null); const [list, listSet] = useState([]); // const [showMasonryGrid, setShowMasonryGrid] = useState(true); @@ -61,57 +59,16 @@ export default function FeaturedTab() { gridRef={gridContainerRef} onLayoutComplete={() => console.log("Layout complete!")} > - { list.map((data: any, index: number) => { - let card; - switch (data.media_type) { - case "audio": - card = ( - - ); - break; - case "image": - card = ( - - ); - break; - case "video": - card = ( - - ); - break; - default: - card =
Unsupported media type
; - } - return ( -
- {card} -
- ); - })} + { list.map((data: any, key: number) => { + let props = { bookmarks, data, origin, ratings, type: "media" }; + + return
+ +
; + }) } )} 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 eb5b77c6f6..a3c7526e99 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,9 +1,7 @@ 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"; -import VideoCard from "components/common/Card/VideoCard"; +import MediaCards from "components/common/Card/MediaCards"; import { TempSelect } from "components/common"; import { faArrowDownWideShort, @@ -13,7 +11,7 @@ import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContex import SkeletonCard from "components/common/Card/SkeletonCard"; import { ListMediaFiles } from "@storyteller/components/src/api/media_files/ListMediaFiles"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; -import { useBookmarks, useLazyLists } from "hooks"; +import { useBookmarks, useLazyLists, useRatings } from "hooks"; import InfiniteScroll from "react-infinite-scroll-component"; import prepFilter from "resources/prepFilter"; @@ -21,6 +19,7 @@ export default function MediaTab() { const { search } = useLocation(); const urlQueries = new URLSearchParams(search); const bookmarks = useBookmarks(); + const ratings = useRatings(); const gridContainerRef = useRef(null); const [weightType, weightTypeSet] = useState( urlQueries.get("maybe_scoped_weight_type") || "all" @@ -116,58 +115,16 @@ export default function MediaTab() { console.log("Layout complete!")} - > - {media.list.map((data: any, index: number) => { - let card; - switch (data.media_type) { - case "audio": - card = ( - - ); - break; - case "image": - card = ( - - ); - break; - case "video": - card = ( - - ); - break; - default: - card =
Unsupported media type
; - } - return ( -
- {card} -
- ); - })} + > { media.list.map((data: any, key: number) => { + let props = { bookmarks, data, origin, ratings, type: "media" }; + + return
+ +
; + }) } )} 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 6b492dd2f9..9217589b1e 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 @@ -9,7 +9,7 @@ import { } from "@fortawesome/pro-solid-svg-icons"; import Pagination from "components/common/Pagination"; -import { useBookmarks, useListContent } from "hooks"; +import { useBookmarks, useListContent, useRatings } from "hooks"; import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser"; import WeightsCards from "components/common/Card/WeightsCards"; import prepFilter from "resources/prepFilter"; @@ -18,6 +18,7 @@ export default function BookmarksTab({ username }: { username: string }) { const { pathname: origin, search } = useLocation(); const urlQueries = new URLSearchParams(search); const bookmarks = useBookmarks(); + const ratings = useRatings(); const gridContainerRef = useRef(null); const [showMasonryGrid, setShowMasonryGrid] = useState(true); const [weightType, weightTypeSet] = useState( @@ -205,13 +206,7 @@ export default function BookmarksTab({ username }: { username: string }) { onLayoutComplete={() => console.log("Layout complete!")} > {dataList.map((data: any, key: number) => { - let weightProps = { - bookmarks, - data, - origin, - type: "weights", - showCreator: true, - }; + let weightProps = { bookmarks, data, origin, ratings, showCreator: true, type: "weights" }; // let mediaProps = { // bookmarks, 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 82344d0a70..99580a6a32 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,34 +13,35 @@ import Pagination from "components/common/Pagination"; import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; -import { useBookmarks, useListContent } from "hooks"; +import { useBookmarks, useListContent, useRatings } from "hooks"; import prepFilter from "resources/prepFilter"; export default function MediaTab({ username }: { username: string }) { const { pathname: origin, search } = useLocation(); const urlQueries = new URLSearchParams(search); const bookmarks = useBookmarks(); + const ratings = useRatings(); const gridContainerRef = useRef(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: { page_size: 24, ...prepFilter(mediaType, "filter_media_type"), }, addSetters: { mediaTypeSet }, + debug: "profile media", fetcher: GetMediaByUser, list, listSet, onInputChange: () => setShowMasonryGrid(false), - onSuccess: () => setShowMasonryGrid(true), + onSuccess: (res) => { + ratings.gather(res); + setShowMasonryGrid(true); + }, requestList: true, urlParam: username, }); @@ -114,7 +115,7 @@ export default function MediaTab({ username }: { username: string }) { onLayoutComplete={() => console.log("Layout complete!")} > {media.list.map((data: MediaFile, key: number) => { - let props = { bookmarks, data, origin, type: "media" }; + let props = { bookmarks, data, origin, ratings, type: "media" }; return (
([]); const weights = useListContent({ addQueries: { @@ -193,13 +194,7 @@ export default function WeightsTab({ username }: { username: string }) { onLayoutComplete={() => console.log("Layout complete!")} > {weights.list.map((data: any, key: number) => { - let props = { - bookmarks, - data, - origin, - showCreator: true, - type: "weights", - }; + let props = { bookmarks, data, origin, ratings, showCreator: true, type: "weights" }; return (