From 7a148309553ea0e162d024b29754dce395a18cc8 Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 19 Dec 2023 11:09:10 +0700 Subject: [PATCH] explore page updates --- .../src/components/common/Button/Button.scss | 12 + .../common/Card/AudioCard/AudioCard.tsx | 90 +++- .../components/common/Card/CreatorName.tsx | 41 ++ .../common/Card/ImageCard/ImageCard.tsx | 87 +++- .../components/common/SearchBar/SearchBar.tsx | 4 +- .../v2/view/pages/explore/tabs/MediaTab.tsx | 18 +- .../v2/view/pages/explore/tabs/WeightsTab.tsx | 18 +- .../view/pages/explore/tabs/mockMediaData.ts | 407 +++++------------- .../pages/explore/tabs/mockWeightsData.ts | 161 ++++++- 9 files changed, 477 insertions(+), 361 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/Card/CreatorName.tsx diff --git a/packages/fakeyou.com/src/components/common/Button/Button.scss b/packages/fakeyou.com/src/components/common/Button/Button.scss index 6f1a478b75..60d0a00c0c 100644 --- a/packages/fakeyou.com/src/components/common/Button/Button.scss +++ b/packages/fakeyou.com/src/components/common/Button/Button.scss @@ -108,6 +108,18 @@ } } +.card .button-link { + padding: 4px 8px; + font-size: 13px !important; + color: $white !important; + background-color: $primary; + border-radius: 0.5rem; + + &:hover { + background-color: lighten($primary, 5%); + } +} + /* Disabled styles */ .btn-primary:disabled, .btn-secondary:disabled, 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 b56fdeef69..1934ab30af 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -6,14 +6,17 @@ import useTimeAgo from "hooks/useTimeAgo"; import Badge from "components/common/Badge"; import LikeButton from "components/common/LikeButton"; import FavoriteButton from "components/common/FavoriteButton"; +import CreatorName from "../CreatorName"; +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; import Button from "components/common/Button"; interface AudioCardProps { data: any; type: "media" | "weights"; + showCreator?: boolean; } -export default function AudioCard({ data, type }: AudioCardProps) { +export default function AudioCard({ data, type, showCreator }: AudioCardProps) { const history = useHistory(); // console.log("🐙",data, data.public_bucket_path); @@ -30,11 +33,11 @@ export default function AudioCard({ data, type }: AudioCardProps) { event.stopPropagation(); }; - const handleUseModel = () => { - if (type === "weights") { - history.push(`/weights/${data.token}`); - } - }; + // const handleUseModel = () => { + // if (type === "weights") { + // history.push(`/weights/${data.token}`); + // } + // }; const timeAgo = useTimeAgo(data.created_at); @@ -48,12 +51,12 @@ export default function AudioCard({ data, type }: AudioCardProps) { <>
-
+
-
+
{data.weight_name}

{timeAgo}

@@ -63,8 +66,30 @@ export default function AudioCard({ data, type }: AudioCardProps) {
-
- +
+ +
+ {showCreator && ( +
+ +
+ )} + +
+ +
)} @@ -76,12 +101,14 @@ export default function AudioCard({ data, type }: AudioCardProps) {
-
- -
+
@@ -91,9 +118,36 @@ export default function AudioCard({ data, type }: AudioCardProps) {

{timeAgo}

-
-
+ +
+ +
+ {showCreator && ( +
+ +
+ )} + +
+
+
diff --git a/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx b/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx new file mode 100644 index 0000000000..216e0f305f --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Card/CreatorName.tsx @@ -0,0 +1,41 @@ +import { Gravatar } from "@storyteller/components/src/elements/Gravatar"; +import React from "react"; +import { Link } from "react-router-dom"; + +interface CreatorNameProps { + displayName: string; + gravatarHash: string; + avatarIndex: number; + backgroundIndex: number; + className?: string; +} + +const handleInnerClick = (event: any) => { + event.stopPropagation(); +}; + +export default function CreatorName({ + displayName, + gravatarHash, + avatarIndex, + backgroundIndex, + className, +}: CreatorNameProps) { + return ( +
+ + + {displayName} + +
+ ); +} 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 4bda2d687c..6d25b917af 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -4,15 +4,18 @@ import Card from "../Card"; import useTimeAgo from "hooks/useTimeAgo"; import Badge from "components/common/Badge"; import LikeButton from "components/common/LikeButton"; -import Button from "components/common/Button"; import FavoriteButton from "components/common/FavoriteButton"; +import CreatorName from "../CreatorName"; +import Button from "components/common/Button"; +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; interface ImageCardProps { data: any; type: "media" | "weights"; + showCreator?: boolean; } -export default function ImageCard({ data, type }: ImageCardProps) { +export default function ImageCard({ data, type, showCreator }: ImageCardProps) { const history = useHistory(); const handleCardClick = () => { @@ -55,12 +58,31 @@ export default function ImageCard({ data, type }: ImageCardProps) {

{timeAgo}

-
- + +
+ +
+ {showCreator && ( +
+ +
+ )} + +
+ +
@@ -76,18 +98,18 @@ export default function ImageCard({ data, type }: ImageCardProps) { />
-
-
- -
+
@@ -96,11 +118,38 @@ export default function ImageCard({ data, type }: ImageCardProps) {
{data.weight_name}
-

{timeAgo}

+

{timeAgo}

-
-
+ +
+ +
+ {showCreator && ( +
+ +
+ )} + +
+
+
diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx index 46b9928ea7..8dc0ee14c2 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx @@ -79,7 +79,9 @@ export default function SearchBar({ }, [searchTerm, history, location.pathname, doSearch, isOnSearchPage]); const handleSearchButtonClick = useCallback(() => { - history.push(`/search/weights?query=${encodeURIComponent(searchTerm)}`); + if (searchTerm !== "") { + history.push(`/search/weights?query=${encodeURIComponent(searchTerm)}`); + } }, [searchTerm, history]); const handleKeyPress = useCallback( 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 a995064220..6d3e87000a 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 @@ -95,10 +95,24 @@ export default function MediaTab() { let card; switch (data.media_type) { case "audio": - card = ; + card = ( + + ); break; case "image": - card = ; + card = ( + + ); break; case "video": card = ; 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 3b3b29df7b..8ae0305c48 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 @@ -110,10 +110,24 @@ export default function WeightsTab() { let card; switch (data.media_type) { case "audio": - card = ; + card = ( + + ); break; case "image": - card = ; + card = ( + + ); break; case "video": card = ; diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockMediaData.ts b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockMediaData.ts index d70b906404..2c6e64ff55 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockMediaData.ts +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockMediaData.ts @@ -1,13 +1,23 @@ -let mockMediaData = [ +const mockMediaData = [ { token: "token1", - weight_name: "Queen Elizabeth", + weight_name: "Queen Elizabeth Queen Elizabeth Queen Elizabeth", media_type: "audio", public_bucket_path: "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", likes: 150, isLiked: true, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "1234", + username: "MelodyMaker123", + display_name: "MelodyMaker", + gravatar_hash: "1234", + default_avatar: { + image_index: 1, + color_index: 1, + }, + }, }, { token: "token2", @@ -17,6 +27,16 @@ let mockMediaData = [ likes: 200, isLiked: false, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "5678", + username: "ArtisticExplorer", + display_name: "ArtisticExplorer", + gravatar_hash: "5678", + default_avatar: { + image_index: 2, + color_index: 2, + }, + }, }, { token: "token3", @@ -27,6 +47,16 @@ let mockMediaData = [ likes: 200, isLiked: false, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "9012", + username: "SoccerStar90", + display_name: "SoccerStar", + gravatar_hash: "9012", + default_avatar: { + image_index: 3, + color_index: 3, + }, + }, }, { token: "token4", @@ -36,6 +66,16 @@ let mockMediaData = [ likes: 150, isLiked: true, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "3456", + username: "DesertWanderer", + display_name: "DesertWanderer", + gravatar_hash: "3456", + default_avatar: { + image_index: 4, + color_index: 4, + }, + }, }, { token: "token5", @@ -45,6 +85,16 @@ let mockMediaData = [ likes: 200, isLiked: false, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "7890", + username: "CatLover78", + display_name: "CatLover", + gravatar_hash: "7890", + default_avatar: { + image_index: 5, + color_index: 5, + }, + }, }, { token: "token6", @@ -55,6 +105,16 @@ let mockMediaData = [ likes: 200, isLiked: false, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "2345", + username: "SuperheroFan23", + display_name: "SuperheroFan", + gravatar_hash: "2345", + default_avatar: { + image_index: 1, + color_index: 2, + }, + }, }, { token: "token7", @@ -65,6 +125,16 @@ let mockMediaData = [ likes: 150, isLiked: true, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "5678", + username: "DBZFan5678", + display_name: "DBZFan", + gravatar_hash: "5678", + default_avatar: { + image_index: 2, + color_index: 3, + }, + }, }, { token: "token8", @@ -74,6 +144,16 @@ let mockMediaData = [ likes: 150, isLiked: true, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "9012", + username: "SpaceExplorer90", + display_name: "SpaceExplorer", + gravatar_hash: "9012", + default_avatar: { + image_index: 3, + color_index: 4, + }, + }, }, { token: "token9", @@ -84,6 +164,16 @@ let mockMediaData = [ likes: 150, isLiked: true, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "1234", + username: "MysteriousMask", + display_name: "MysteriousMask", + gravatar_hash: "1234", + default_avatar: { + image_index: 1, + color_index: 1, + }, + }, }, { token: "token10", @@ -93,309 +183,16 @@ let mockMediaData = [ likes: 150, isLiked: true, created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token11", - weight_name: "Queen Elizabeth", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token12", - weight_name: "Monster House", - media_type: "image", - public_bucket_path: "/images/dummy-image.jpg", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token13", - weight_name: "Ronaldo", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token14", - weight_name: "Desert", - media_type: "video", - public_bucket_path: "/images/dummy-video.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token15", - weight_name: "3D Cat", - media_type: "image", - public_bucket_path: "/images/dummy-image-2.jpg", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token16", - weight_name: "Superman", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token17", - weight_name: "Son Goku", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token18", - weight_name: "Astronaut in Space", - media_type: "image", - public_bucket_path: "/images/dummy-image-3.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token19", - weight_name: "Monokuma", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token20", - weight_name: "Watery Landscape", - media_type: "image", - public_bucket_path: "/images/dummy-image-4.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token1", - weight_name: "Queen Elizabeth", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token2", - weight_name: "Monster House", - media_type: "image", - public_bucket_path: "/images/dummy-image.jpg", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token3", - weight_name: "Ronaldo", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token4", - weight_name: "Desert", - media_type: "video", - public_bucket_path: "/images/dummy-video.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token5", - weight_name: "3D Cat", - media_type: "image", - public_bucket_path: "/images/dummy-image-2.jpg", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token6", - weight_name: "Superman", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token7", - weight_name: "Son Goku", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token8", - weight_name: "Astronaut in Space", - media_type: "image", - public_bucket_path: "/images/dummy-image-3.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token9", - weight_name: "Monokuma", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token10", - weight_name: "Watery Landscape", - media_type: "image", - public_bucket_path: "/images/dummy-image-4.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token11", - weight_name: "Queen Elizabeth", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token12", - weight_name: "Monster House", - media_type: "image", - public_bucket_path: "/images/dummy-image.jpg", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token13", - weight_name: "Ronaldo", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token14", - weight_name: "Desert", - media_type: "video", - public_bucket_path: "/images/dummy-video.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token15", - weight_name: "3D Cat", - media_type: "image", - public_bucket_path: "/images/dummy-image-2.jpg", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token16", - weight_name: "Superman", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 200, - isLiked: false, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token17", - weight_name: "Son Goku", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token18", - weight_name: "Astronaut in Space", - media_type: "image", - public_bucket_path: "/images/dummy-image-3.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token19", - weight_name: "Monokuma", - media_type: "audio", - public_bucket_path: - "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token20", - weight_name: "Watery Landscape", - media_type: "image", - public_bucket_path: "/images/dummy-image-4.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token21", - weight_name: "Watery Landscape", - media_type: "image", - public_bucket_path: "/images/dummy-image-4.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", - }, - { - token: "token22", - weight_name: "Watery Landscape", - media_type: "image", - public_bucket_path: "/images/dummy-image-4.jpg", - likes: 150, - isLiked: true, - created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "2345", + username: "NatureLover23", + display_name: "NatureLover", + gravatar_hash: "2345", + default_avatar: { + image_index: 1, + color_index: 2, + }, + }, }, ]; diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockWeightsData.ts b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockWeightsData.ts index 665e5975d9..36b0874037 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockWeightsData.ts +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/mockWeightsData.ts @@ -8,6 +8,16 @@ let mockWeightsData = [ likes: 150, isLiked: true, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "1234", + username: "MelodyMaker123", + display_name: "MelodyMaker", + gravatar_hash: "abcd", + default_avatar: { + image_index: 1, + color_index: 1, + }, + }, }, { token: "token2", @@ -17,6 +27,16 @@ let mockWeightsData = [ likes: 200, isLiked: false, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "5678", + username: "ArtisticExplorer", + display_name: "ArtisticExplorer", + gravatar_hash: "efgh", + default_avatar: { + image_index: 2, + color_index: 2, + }, + }, }, { token: "token3", @@ -27,6 +47,35 @@ let mockWeightsData = [ likes: 200, isLiked: false, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "9012", + username: "SoccerStar90", + display_name: "SoccerStar", + gravatar_hash: "ijkl", + default_avatar: { + image_index: 3, + color_index: 3, + }, + }, + }, + { + token: "token4", + weight_name: "Desert", + media_type: "video", + public_bucket_path: "/images/dummy-video.jpg", + likes: 150, + isLiked: true, + created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "3456", + username: "DesertWanderer", + display_name: "DesertWanderer", + gravatar_hash: "mnop", + default_avatar: { + image_index: 4, + color_index: 4, + }, + }, }, { token: "token5", @@ -36,6 +85,16 @@ let mockWeightsData = [ likes: 200, isLiked: false, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "7890", + username: "CatLover78", + display_name: "CatLover", + gravatar_hash: "qrst", + default_avatar: { + image_index: 5, + color_index: 5, + }, + }, }, { token: "token6", @@ -46,21 +105,95 @@ let mockWeightsData = [ likes: 200, isLiked: false, created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "2345", + username: "SuperheroFan23", + display_name: "SuperheroFan", + gravatar_hash: "uvwx", + default_avatar: { + image_index: 1, + color_index: 2, + }, + }, + }, + { + token: "token7", + weight_name: "Son Goku", + media_type: "audio", + public_bucket_path: + "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", + likes: 150, + isLiked: true, + created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "5678", + username: "DBZFan5678", + display_name: "DBZFan", + gravatar_hash: "yzab", + default_avatar: { + image_index: 2, + color_index: 3, + }, + }, + }, + { + token: "token8", + weight_name: "Astronaut in Space", + media_type: "image", + public_bucket_path: "/images/dummy-image-3.jpg", + likes: 150, + isLiked: true, + created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "9012", + username: "SpaceExplorer90", + display_name: "SpaceExplorer", + gravatar_hash: "cdex", + default_avatar: { + image_index: 3, + color_index: 4, + }, + }, + }, + { + token: "token9", + weight_name: "Monokuma", + media_type: "audio", + public_bucket_path: + "/media/s/p/x/d/2/spxd2xr7nt7zdezyhp61h00kxatr18pf/fakeyou_rvc_spxd2xr7nt7zdezyhp61h00kxatr18pf.wav", + likes: 150, + isLiked: true, + created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "1234", + username: "MysteriousMask", + display_name: "MysteriousMask", + gravatar_hash: "efgh", + default_avatar: { + image_index: 1, + color_index: 1, + }, + }, + }, + { + token: "token10", + weight_name: "Watery Landscape", + media_type: "image", + public_bucket_path: "/images/dummy-image-4.jpg", + likes: 150, + isLiked: true, + created_at: "2023-08-10T09:00:00.000Z", + maybe_creator_user: { + user_token: "2345", + username: "NatureLover23", + display_name: "NatureLover", + gravatar_hash: "ghij", + default_avatar: { + image_index: 1, + color_index: 2, + }, + }, }, ]; -// Randomize the order of the array -for (let i = mockWeightsData.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [mockWeightsData[i], mockWeightsData[j]] = [ - mockWeightsData[j], - mockWeightsData[i], - ]; -} - -// Update the 'token' property to start at 1 -mockWeightsData.forEach((item, index) => { - item.token = `token${index + 1}`; -}); - export default mockWeightsData;