explore page updates

2026-11-05 09:48:44 +00:00 · 2023-12-21 11:09:29 +07:00
1 parent 75d4803c57
commit 7a14830955
@@ -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,
@@ -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) {
        <>
          <div className="mb-3">
            <div className="d-flex align-items-center">
-              <div className="d-flex flex-grow-1">
+              <div className="d-flex flex-grow-1 align-items-center gap-2">
                <Badge label="Audio" color="teal" />
              </div>
            </div>

-            <h6 className="fw-semibold text-white mb-1 mt-3">
+            <h6 className="fw-semibold text-white mb-1 mt-4 text-truncate">
              {data.weight_name}
            </h6>
            <p className="fs-7 opacity-75">{timeAgo}</p>
@@ -63,8 +66,30 @@ export default function AudioCard({ data, type }: AudioCardProps) {
            <AudioPlayer src={data.public_bucket_path} id={data.token} />
          </div>

-          <div className="mt-3" onClick={handleInnerClick}>
-            <LikeButton onToggle={handleLike} likeCount={data.like || 0 } />
+          <hr className="my-3" />
+
+          <div
+            className="d-flex align-items-center gap-2"
+            onClick={handleInnerClick}
+          >
+            {showCreator && (
+              <div className="flex-grow-1">
+                <CreatorName
+                  displayName={data.maybe_creator_user.display_name}
+                  gravatarHash={data.maybe_creator_user.gravatar_hash}
+                  avatarIndex={
+                    data.maybe_creator_user.default_avatar.image_index
+                  }
+                  backgroundIndex={
+                    data.maybe_creator_user.default_avatar.color_index
+                  }
+                />
+              </div>
+            )}
+
+            <div>
+              <LikeButton onToggle={handleLike} likeCount={data.like || 0} />
+            </div>
          </div>
        </>
      )}
@@ -76,12 +101,14 @@ export default function AudioCard({ data, type }: AudioCardProps) {
              <div className="d-flex flex-grow-1">
                <Badge label="RVC" color="orange" />
              </div>
-              <div onClick={handleInnerClick}>
-                <FavoriteButton
-                  onToggle={handleLike}
-                  favoriteCount={data.likes}
-                />
-              </div>
+              <Button
+                icon={faArrowRight}
+                iconFlip={true}
+                variant="link"
+                label="Use"
+                onClick={handleCardClick}
+                className="fs-7"
+              />
            </div>

            <div className="d-flex align-items-center mt-3">
@@ -91,9 +118,36 @@ export default function AudioCard({ data, type }: AudioCardProps) {
                </h6>
                <p className="fs-7 opacity-75">{timeAgo}</p>
              </div>
-              <div onClick={handleInnerClick}>
-                <Button label="Use" small={true} onClick={handleUseModel} />
+            </div>
+
+            <hr className="my-3" />
+
+            <div
+              className="d-flex align-items-center gap-2"
+              onClick={handleInnerClick}
+            >
+              {showCreator && (
+                <div className="flex-grow-1">
+                  <CreatorName
+                    displayName={data.maybe_creator_user.display_name}
+                    gravatarHash={data.maybe_creator_user.gravatar_hash}
+                    avatarIndex={
+                      data.maybe_creator_user.default_avatar.image_index
+                    }
+                    backgroundIndex={
+                      data.maybe_creator_user.default_avatar.color_index
+                    }
+                  />
+                </div>
+              )}
+
+              <div>
+                <LikeButton onToggle={handleLike} likeCount={data.likes} />
              </div>
+              <FavoriteButton
+                onToggle={handleLike}
+                favoriteCount={data.likes}
+              />
            </div>
          </div>
        </>
@@ -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 (
+    <div className={`d-flex gap-2 align-items-center ${className}`}>
+      <Gravatar
+        size={22}
+        email_hash={gravatarHash}
+        avatarIndex={avatarIndex}
+        backgroundIndex={backgroundIndex}
+      />
+      <Link
+        to={`/`}
+        className="fw-medium fs-7 text-white opacity-75 text-truncate"
+        onClick={handleInnerClick}
+      >
+        {displayName}
+      </Link>
+    </div>
+  );
+}
@@ -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) {
              <div>
                <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
              </div>
-              <div onClick={handleInnerClick} className="mt-2">
-                <LikeButton
-                  onToggle={handleLike}
-                  likeCount={data.likes}
-                  overlay={true}
-                />
+
+              <hr className="my-2" />
+
+              <div
+                className="d-flex align-items-center gap-2"
+                onClick={handleInnerClick}
+              >
+                {showCreator && (
+                  <div className="flex-grow-1">
+                    <CreatorName
+                      displayName={data.maybe_creator_user.display_name}
+                      gravatarHash={data.maybe_creator_user.gravatar_hash}
+                      avatarIndex={
+                        data.maybe_creator_user.default_avatar.image_index
+                      }
+                      backgroundIndex={
+                        data.maybe_creator_user.default_avatar.color_index
+                      }
+                    />
+                  </div>
+                )}
+
+                <div>
+                  <LikeButton onToggle={handleLike} likeCount={data.likes} />
+                </div>
              </div>
            </div>
          </div>
@@ -76,18 +98,18 @@ export default function ImageCard({ data, type }: ImageCardProps) {
          />
          <div className="card-img-overlay">
            <div className="card-img-gradient" />
-
            <div className="d-flex align-items-center">
              <div className="d-flex flex-grow-1">
                <Badge label="LORA" color="pink" overlay={true} />
              </div>
-              <div onClick={handleInnerClick}>
-                <FavoriteButton
-                  onToggle={handleLike}
-                  favoriteCount={data.likes}
-                  overlay={true}
-                />
-              </div>
+              <Button
+                icon={faArrowRight}
+                iconFlip={true}
+                variant="link"
+                label="Use"
+                onClick={handleCardClick}
+                className="fs-7"
+              />
            </div>

            <div className="card-img-overlay-text">
@@ -96,11 +118,38 @@ export default function ImageCard({ data, type }: ImageCardProps) {
                  <h6 className="fw-semibold text-white mb-1">
                    {data.weight_name}
                  </h6>
-                  <p className="fs-7 opacity-75">{timeAgo}</p>
+                  <p className="fs-7 opacity-75 mb-0">{timeAgo}</p>
                </div>
-                <div onClick={handleInnerClick}>
-                  <Button label="Use" small={true} />
+              </div>
+
+              <hr className="my-2" />
+
+              <div
+                className="d-flex align-items-center gap-2"
+                onClick={handleInnerClick}
+              >
+                {showCreator && (
+                  <div className="flex-grow-1">
+                    <CreatorName
+                      displayName={data.maybe_creator_user.display_name}
+                      gravatarHash={data.maybe_creator_user.gravatar_hash}
+                      avatarIndex={
+                        data.maybe_creator_user.default_avatar.image_index
+                      }
+                      backgroundIndex={
+                        data.maybe_creator_user.default_avatar.color_index
+                      }
+                    />
+                  </div>
+                )}
+
+                <div>
+                  <LikeButton onToggle={handleLike} likeCount={data.likes} />
                </div>
+                <FavoriteButton
+                  onToggle={handleLike}
+                  favoriteCount={data.likes}
+                />
              </div>
            </div>
          </div>
@@ -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(
@@ -95,10 +95,24 @@ export default function MediaTab() {
                let card;
                switch (data.media_type) {
                  case "audio":
-                    card = <AudioCard key={index} data={data} type="media" />;
+                    card = (
+                      <AudioCard
+                        key={index}
+                        data={data}
+                        type="media"
+                        showCreator={true}
+                      />
+                    );
                    break;
                  case "image":
-                    card = <ImageCard key={index} data={data} type="media" />;
+                    card = (
+                      <ImageCard
+                        key={index}
+                        data={data}
+                        type="media"
+                        showCreator={true}
+                      />
+                    );
                    break;
                  case "video":
                    card = <VideoCard key={index} data={data} type="media" />;
@@ -110,10 +110,24 @@ export default function WeightsTab() {
            let card;
            switch (data.media_type) {
              case "audio":
-                card = <AudioCard key={index} data={data} type="weights" />;
+                card = (
+                  <AudioCard
+                    key={index}
+                    data={data}
+                    type="weights"
+                    showCreator={true}
+                  />
+                );
                break;
              case "image":
-                card = <ImageCard key={index} data={data} type="weights" />;
+                card = (
+                  <ImageCard
+                    key={index}
+                    data={data}
+                    type="weights"
+                    showCreator={true}
+                  />
+                );
                break;
              case "video":
                card = <VideoCard key={index} data={data} type="weights" />;
@@ -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,
+      },
+    },
  },
 ];

@@ -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;