From 8973593d4af969a97cf62243f0efd2f20c53e5eb Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sat, 23 Dec 2023 08:11:11 +0700
Subject: [PATCH] featured media list

---
 .../api/media_files/ListFeaturedMediaFiles.ts | 19 +++++++++++++++++
 .../view/pages/explore/tabs/FeaturedTab.tsx   | 21 ++++++++++++-------
 2 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 packages/components/src/api/media_files/ListFeaturedMediaFiles.ts

diff --git a/packages/components/src/api/media_files/ListFeaturedMediaFiles.ts b/packages/components/src/api/media_files/ListFeaturedMediaFiles.ts
new file mode 100644
index 0000000000..91585aff7c
--- /dev/null
+++ b/packages/components/src/api/media_files/ListFeaturedMediaFiles.ts
@@ -0,0 +1,19 @@
+import MakeRequest from "../MakeRequest";
+import { MediaFile } from "./GetMedia";
+
+export interface ListFeaturedMediaFilesRequest {}
+
+export interface ListFeaturedMediaFilesResponse {
+  success: boolean;
+  media_files: MediaFile[];
+}
+
+export const ListFeaturedMediaFiles = MakeRequest<
+  string,
+  ListFeaturedMediaFilesRequest,
+  ListFeaturedMediaFilesResponse,
+  {}
+>({
+  method: "GET",
+  routingFunction: () => `/v1/media_files/list_featured`,
+});
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 91a27c9764..8235d31323 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,24 +1,31 @@
 import React, { useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
-import mockWeightsData from "./mockWeightsData";
 import AudioCard from "components/common/Card/AudioCard";
 import SkeletonCard from "components/common/Card/SkeletonCard";
 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 { useLazyLists } from "hooks";
+import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles";
 
 export default function FeaturedTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [data] = useState(mockWeightsData);
   const [isLoading] = useState(false);
+  const [list, listSet] = useState<MediaFile[]>([]);
+
+  const media = useLazyLists({
+    fetcher: ListFeaturedMediaFiles,
+    list,
+    listSet,
+    requestList: true,
+  });
 
   return (
     <div className="d-flex flex-column gap-4">
       <div>
         <div className="d-flex align-items-center mb-3">
-          <h3 className="fw-semibold mb-0 flex-grow-1">
-            Featured Voice Weights
-          </h3>
+          <h3 className="fw-semibold mb-0 flex-grow-1">Featured Media</h3>
           <Link to="/explore/weights">
             View all
             <FontAwesomeIcon icon={faChevronRight} className="ms-2" />
@@ -36,12 +43,12 @@ export default function FeaturedTab() {
             gridRef={gridContainerRef}
             onLayoutComplete={() => console.log("Layout complete!")}
           >
-            {data.map((data, index) => {
+            {media.list.map((data, index) => {
               let card = (
                 <AudioCard
                   key={index}
                   data={data}
-                  type="weights"
+                  type="media"
                   showCreator={true}
                   showCover={true}
                 />