added query params to MakeRequest, added typing to endpoint configs which use it, and have it implented as pagination on the profile media tab

packages/components/src/api/MakeRequest.ts

@@ -14,9 +14,6 @@ interface RouteSetup<UrlRouteArgs> {
     routingFunction: UrlRoutingFunction<UrlRouteArgs>;
 } 
   
-//const formatUrl = (endpoint = "") =>
-//  `${useSsl ? "https" : "http"}://${host + endpoint}`;
-  
 const METHOD_OMITS_BODY: { [key: string]: boolean } = {
   DELETE: false,
   GET: true,
@@ -26,11 +23,10 @@ const METHOD_OMITS_BODY: { [key: string]: boolean } = {
   PUT: false,
 };
 
-const MakeRequest = <UrlRouteArgs, Request, Response>(routeSetup: RouteSetup<UrlRouteArgs>) :  (urlRouteArgs: UrlRouteArgs, request: Request) => Promise<Response> => {
-    return async function(urlRouteArgs: UrlRouteArgs, request: Request) : Promise<Response> {
-        const endpoint = routeSetup.routingFunction(urlRouteArgs);
+const MakeRequest = <UrlRouteArgs, Request, Response, UrlParams>(routeSetup: RouteSetup<UrlRouteArgs>) :  (urlRouteArgs: UrlRouteArgs, request: Request, urlParams?: UrlParams) => Promise<Response> => {
+    return async function(urlRouteArgs: UrlRouteArgs, request: Request, urlParams?: any) : Promise<Response> {
+        const endpoint = `${ routeSetup.routingFunction(urlRouteArgs) }${ urlParams ? "?" + new URLSearchParams(urlParams) : "" }`;
         const method = routeSetup.method;
-
         const methodOmitsBody = METHOD_OMITS_BODY[method] || false;
 
         return fetch(formatUrl(endpoint), {

packages/components/src/api/_common/SharedFetchTypes.ts

@@ -0,0 +1,4 @@
+export interface Pagination {
+  current: number,
+  total_page_count: number
+}

packages/components/src/api/media_files/GetMedia.ts

@@ -16,10 +16,10 @@ export interface GetMediaRequest {}
 
 export interface GetMediaResponse {
   success: boolean,
-  media_file?: MediaFile,
+  media_file?: MediaFile
 }
 
-export const GetMedia = MakeRequest<string, GetMediaRequest, GetMediaResponse>({
+export const GetMedia = MakeRequest<string, GetMediaRequest, GetMediaResponse,{}>({
   method: "GET",
   routingFunction: (mediaFileToken: string) => `/v1/media_files/file/${mediaFileToken}`,
 });

packages/components/src/api/media_files/GetMediaByUser.ts

@@ -1,15 +1,21 @@
 import MakeRequest from "../MakeRequest";
 import { MediaFile } from "./GetMedia";
-// import { MediaFileType } from "../_common/enums/MediaFileType";
+import { MediaFileType } from "../_common/enums/MediaFileType";
+import { Pagination } from "../_common/SharedFetchTypes";
 
 export interface GetMediaRequest {}
 
-export interface GetMediaResponse {
+export interface GetMediaListResponse {
+  pagination: Pagination,
   success: boolean,
-  results: MediaFile[],
+  results: MediaFile[]
 }
 
-export const GetMediaByUser = MakeRequest<string, GetMediaRequest, GetMediaResponse>({
+export interface GetMediaParams {
+  page_index: number,
+}
+
+export const GetMediaByUser = MakeRequest<string, GetMediaRequest, GetMediaListResponse, GetMediaParams>({
   method: "GET",
   routingFunction: (userToken: string) => `/v1/media_files/list/user/${userToken}`,
 });

packages/components/src/api/voice_designer/inference/EnqueueTts.ts

@@ -11,7 +11,7 @@ export interface EnqueueTtsResponse {
   inference_job_token: string,
 }
 
-export const EnqueueTts = MakeRequest<string, EnqueueTtsRequest, EnqueueTtsResponse>({
+export const EnqueueTts = MakeRequest<string, EnqueueTtsRequest, EnqueueTtsResponse,{}>({
     method: "POST", 
     routingFunction: () => "/v1/voice_designer/inference/enqueue_tts",
 });

packages/components/src/api/voice_designer/voice_dataset_samples/DeleteSample.ts

@@ -9,7 +9,7 @@ export interface DeleteSampleResponse {
   success: boolean
 }
 
-export const DeleteSample = MakeRequest<string, DeleteSampleRequest, DeleteSampleResponse>({
+export const DeleteSample = MakeRequest<string, DeleteSampleRequest, DeleteSampleResponse,{}>({
   method: "DELETE", 
   routingFunction: (sampleToken:  string) => `/v1/voice_designer/sample/${ sampleToken }/delete`,
 });

packages/components/src/api/voice_designer/voice_dataset_samples/ListSamplesForDataset.ts

@@ -7,7 +7,7 @@ export interface ListSamplesForDatasetResponse {
     success: true
 }
 
-export const ListSamplesForDataset = MakeRequest<string, ListSamplesForDatasetRequest, ListSamplesForDatasetResponse>({
+export const ListSamplesForDataset = MakeRequest<string, ListSamplesForDatasetRequest, ListSamplesForDatasetResponse,{}>({
     method: "GET", 
     routingFunction: (datasetToken:  string) => `/v1/voice_designer/sample/dataset/${ datasetToken }/list`,
 });

packages/components/src/api/voice_designer/voice_datasets/CreateDataset.ts

@@ -11,7 +11,7 @@ export interface CreateDatasetResponse {
   token: string,
 }
 
-export const CreateDataset = MakeRequest<string, CreateDatasetRequest, CreateDatasetResponse>({
+export const CreateDataset = MakeRequest<string, CreateDatasetRequest, CreateDatasetResponse,{}>({
     method: "POST", 
     routingFunction: () => "/v1/voice_designer/dataset/create",
 });

packages/components/src/api/voice_designer/voice_datasets/DeleteDataset.ts

@@ -9,11 +9,7 @@ export interface DeleteDatasetResponse {
   success: boolean;
 }
 
-export const DeleteDataset = MakeRequest<
-  string,
-  DeleteDatasetRequest,
-  DeleteDatasetResponse
->({
+export const DeleteDataset = MakeRequest<string, DeleteDatasetRequest,DeleteDatasetResponse,{}>({
   method: "DELETE",
   routingFunction: (voiceToken: string) =>
     `/v1/voice_designer/dataset/${voiceToken}/delete`,

packages/components/src/api/voice_designer/voice_datasets/GetDataset.ts

@@ -17,11 +17,7 @@ export interface GetDatasetResponse {
   updated_at: Date;
 }
 
-export const GetDataset = MakeRequest<
-  string,
-  GetDatasetRequest,
-  GetDatasetResponse
->({
+export const GetDataset = MakeRequest<string, GetDatasetRequest, GetDatasetResponse, {}>({
   method: "GET",
   routingFunction: (datasetToken: string) =>
     `/v1/voice_designer/dataset/${datasetToken}`,

packages/components/src/api/voice_designer/voice_datasets/ListDatasetsBySession.ts

@@ -1,9 +1,9 @@
 import MakeRequest from "../../MakeRequest";
 import { UserDetailsLight } from "../../_common/UserDetailsLight";
 
-export interface ListVoicesBySessionRequest {}
+export interface ListDatasetsBySessionRequest {}
 
-export interface ListVoicesBySessionResponse {
+export interface ListDatasetsBySessionResponse {
     voice_token: string,
     title: string,
     
@@ -17,7 +17,7 @@ export interface ListVoicesBySessionResponse {
     updated_at: Date,
 }
 
-export const ListVoicesBySession = MakeRequest<string, ListVoicesBySessionRequest, ListVoicesBySessionResponse>({
+export const ListDatasetsBySession = MakeRequest<string, ListDatasetsBySessionRequest, ListDatasetsBySessionResponse, {}>({
     method: "GET", 
     routingFunction: () => `/v1/voice_designer/dataset/session/list`,
 });

packages/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser.ts

@@ -22,7 +22,7 @@ export interface ListDatasetsByUserResponse {
     datasets: Dataset[],
 }
 
-export const ListDatasetsByUser = MakeRequest<string, ListDatasetsByUserRequest, ListDatasetsByUserResponse>({
+export const ListDatasetsByUser = MakeRequest<string, ListDatasetsByUserRequest, ListDatasetsByUserResponse, {}>({
     method: "GET", 
     routingFunction: (userName:  string) => `/v1/voice_designer/dataset/user/${ userName }/list`,
 });

packages/components/src/api/voice_designer/voice_datasets/UpdateDataset.ts

@@ -10,7 +10,7 @@ export interface UpdateDatasetResponse {
     success: boolean,
 }
 
-export const UpdateDataset = MakeRequest<string, UpdateDatasetRequest, UpdateDatasetResponse>({
+export const UpdateDataset = MakeRequest<string, UpdateDatasetRequest, UpdateDatasetResponse, {}>({
     method: "POST", 
     routingFunction: (voiceToken:  string) => `/v1/voice_designer/dataset/${ voiceToken }/update`,
 });

packages/components/src/api/voice_designer/voices/CreateVoice.ts

@@ -10,7 +10,7 @@ export interface CreateVoiceResponse {
   inference_job_token: string,
 }
 
-export const CreateVoice = MakeRequest<string, CreateVoiceRequest, CreateVoiceResponse>({
+export const CreateVoice = MakeRequest<string, CreateVoiceRequest, CreateVoiceResponse,{}>({
     method: "POST", 
     routingFunction: () => "/v1/voice_designer/voice/create",
 });

packages/components/src/api/voice_designer/voices/DeleteVoice.ts

@@ -9,11 +9,7 @@ export interface DeleteVoiceResponse {
   success: boolean;
 }
 
-export const DeleteVoice = MakeRequest<
-  string,
-  DeleteVoiceRequest,
-  DeleteVoiceResponse
->({
+export const DeleteVoice = MakeRequest<string, DeleteVoiceRequest, DeleteVoiceResponse, {}>({
   method: "DELETE",
   routingFunction: (voiceToken: string) =>
     `/v1/voice_designer/voice/${voiceToken}/delete`,

packages/components/src/api/voice_designer/voices/GetVoice.ts

@@ -17,7 +17,7 @@ export interface GetVoiceResponse {
   updated_at: Date;
 }
 
-export const GetVoice = MakeRequest<string, GetVoiceRequest, GetVoiceResponse>({
+export const GetVoice = MakeRequest<string, GetVoiceRequest, GetVoiceResponse, {}>({
   method: "GET",
   routingFunction: (voiceToken: string) =>
     `/v1/voice_designer/voice/${voiceToken}`,

packages/components/src/api/voice_designer/voices/ListVoicesBySession.ts

@@ -17,7 +17,7 @@ export interface ListVoicesBySessionResponse {
     updated_at: Date,
 }
 
-export const ListVoicesBySession = MakeRequest<string, ListVoicesBySessionRequest, ListVoicesBySessionResponse>({
+export const ListVoicesBySession = MakeRequest<string, ListVoicesBySessionRequest, ListVoicesBySessionResponse, {}>({
     method: "GET", 
     routingFunction: () => `/v1/voice_designer/voice/session/list`,
 });

packages/components/src/api/voice_designer/voices/ListVoicesByUser.ts

@@ -22,7 +22,7 @@ export interface ListVoicesByUserResponse {
     voices: Voice[],
 }
 
-export const ListVoicesByUser = MakeRequest<string, ListVoicesByUserRequest, ListVoicesByUserResponse>({
+export const ListVoicesByUser = MakeRequest<string, ListVoicesByUserRequest, ListVoicesByUserResponse, {}>({
     method: "GET", 
     routingFunction: (userName:  string) => `/v1/voice_designer/voice/user/${ userName }/list`,
 });

packages/components/src/api/voice_designer/voices/UpdateVoice.ts

@@ -10,7 +10,7 @@ export interface UpdateVoiceResponse {
     success: boolean,
 }
 
-export const UpdateVoice = MakeRequest<string, UpdateVoiceRequest, UpdateVoiceResponse>({
+export const UpdateVoice = MakeRequest<string, UpdateVoiceRequest, UpdateVoiceResponse, {}>({
     method: "POST", 
     routingFunction: (voiceToken:  string) => `/v1/voice_designer/voice/${ voiceToken }/update`,
 });

packages/components/src/api/weights/GetWeight.ts

@@ -22,7 +22,7 @@ export interface Weight {
 //   media_file?: MediaFile,
 // }
 
-// export const GetMedia = MakeRequest<string, GetMediaRequest, GetMediaResponse>({
+// export const GetMedia = MakeRequest<string, GetMediaRequest, GetMediaResponse, {}>({
 //   method: "GET",
 //   routingFunction: (mediaFileToken: string) => `/v1/media_files/file/${mediaFileToken}`,
 // });

packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx

@@ -16,6 +16,8 @@ interface AudioCardProps {
 export default function AudioCard({ data, type }: AudioCardProps) {
   const history = useHistory();
 
+  // console.log("🐙",data);
+
   const handleCardClick = () => {
     if (type === "media") {
       history.push(`/media/${data.token}`);
@@ -62,7 +64,7 @@ export default function AudioCard({ data, type }: AudioCardProps) {
           </div>
 
           <div className="mt-3" onClick={handleInnerClick}>
-            <LikeButton onToggle={handleLike} likeCount={data.likes} />
+            <LikeButton onToggle={handleLike} likeCount={data.like || 0 } />
           </div>
         </>
       )}

packages/fakeyou.com/src/components/common/Pagination/Pagination.tsx

@@ -8,19 +8,13 @@ import ReactPaginate from "react-paginate";
 import "./Pagination.scss";
 
 interface PaginationComponentProps {
-  currentPage: number;
-  itemsPerPage: number;
-  totalItems: number;
-  onPageChange: (selectedItem: { selected: number }) => void;
+  currentPage: number,
+  onPageChange: (selectedItem: { selected: number }) => void,
+  pageCount: number
 }
 
-export default function Pagination({
-  itemsPerPage,
-  totalItems,
-  onPageChange,
-  currentPage,
-}: PaginationComponentProps) {
-  const pageCount = Math.ceil(totalItems / itemsPerPage);
+export default function Pagination({ currentPage, onPageChange, pageCount }: PaginationComponentProps) {
+  // const pageCount = Math.ceil(totalItems / itemsPerPage);
 
   return (
     <ReactPaginate

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/NewProfilePage.tsx

@@ -49,8 +49,6 @@ import MediaTab from "./tabs/MediaTab";
 import WeightsTab from "./tabs/WeightsTab";
 import BookmarksTab from "./tabs/BookmarksTab";
 
-import useProfileRequests from '../useProfileRequests';
-
 interface Props {
   sessionWrapper: SessionWrapper;
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -77,8 +75,6 @@ function NewProfilePage(this: any, props: Props) {
     }
   }, []);
 
-  useProfileRequests({ requestMedia: true });
-
   useEffect(() => {
     getUser(username);
   }, [username, getUser]);

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx

@@ -60,6 +60,12 @@ export default function BookmarksTab() {
     { value: "SDXL", label: "SD XL" },
   ];
 
+  const paginationProps = {
+    onPageChange: handlePageClick,
+    pageCount: 0, // replace with proper fecth value
+    currentPage: 0 // replace with proper fecth value
+  };
+
   const handleFilterChange = (option: any) => {
     const selectedOption = option as { value: string; label: string };
     setSelectedFilter(selectedOption.value);
@@ -106,12 +112,7 @@ export default function BookmarksTab() {
             />
           )}
         </div>
-        <Pagination
-          itemsPerPage={itemsPerPage}
-          totalItems={data.length}
-          onPageChange={handlePageClick}
-          currentPage={currentPage}
-        />
+        <Pagination { ...paginationProps }/>
       </div>
       {isLoading ? (
         <div className="row gx-3 gy-3">
@@ -149,12 +150,7 @@ export default function BookmarksTab() {
       )}
 
       <div className="d-flex justify-content-end mt-4">
-        <Pagination
-          itemsPerPage={itemsPerPage}
-          totalItems={data.length}
-          onPageChange={handlePageClick}
-          currentPage={currentPage}
-        />
+        <Pagination { ...paginationProps }/>
       </div>
     </>
   );

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx

@@ -1,33 +1,32 @@
 import React, { useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
-import mockMediaData from "./mockMediaData";
+// import mockMediaData from "./mockMediaData";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
 import VideoCard from "components/common/Card/VideoCard";
 import Select from "components/common/Select";
-import {
-  faArrowDownWideShort,
-  faFilter,
-} from "@fortawesome/pro-solid-svg-icons";
+import { faArrowDownWideShort, faFilter } from "@fortawesome/pro-solid-svg-icons";
 import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
 import SkeletonCard from "components/common/Card/SkeletonCard";
 import Pagination from "components/common/Pagination";
 
+import useProfileRequests from "../../useProfileRequests";
+
 export default function MediaTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [data] = useState(mockMediaData);
   const [isLoading] = useState(false);
-  const [currentPage, setCurrentPage] = useState(0);
-  const itemsPerPage = 10;
+
+  const { mediaList, mediaPage, mediaPageChange, mediaPageCount } = useProfileRequests({ requestMedia: true });
 
   const handlePageClick = (selectedItem: { selected: number }) => {
-    setCurrentPage(selectedItem.selected);
+    mediaPageChange(selectedItem.selected + 1);
   };
 
-  const currentItems = data.slice(
-    currentPage * itemsPerPage,
-    (currentPage + 1) * itemsPerPage
-  );
+  const paginationProps = {
+    onPageChange: handlePageClick,
+    pageCount: mediaPageCount - 1,
+    currentPage: mediaPage - 1
+  };
 
   const filterOptions = [
     { value: "all", label: "All Media" },
@@ -59,12 +58,7 @@ export default function MediaTab() {
             isSearchable={false}
           />
         </div>
-        <Pagination
-          itemsPerPage={itemsPerPage}
-          totalItems={data.length}
-          onPageChange={handlePageClick}
-          currentPage={currentPage}
-        />
+        <Pagination { ...paginationProps }/>
       </div>
       <AudioPlayerProvider>
         {isLoading ? (
@@ -78,20 +72,20 @@ export default function MediaTab() {
             gridRef={gridContainerRef}
             onLayoutComplete={() => console.log("Layout complete!")}
           >
-            {currentItems.map((data, index) => {
+            {mediaList.map((data, index) => {
               let card;
               switch (data.media_type) {
                 case "audio":
-                  card = <AudioCard key={index} data={data} type="media" />;
+                  card = <AudioCard data={data} type="media" />;
                   break;
                 case "image":
-                  card = <ImageCard key={index} data={data} type="media" />;
+                  card = <ImageCard data={data} type="media" />;
                   break;
                 case "video":
-                  card = <VideoCard key={index} data={data} type="media" />;
+                  card = <VideoCard data={data} type="media" />;
                   break;
                 default:
-                  card = <div key={index}>Unsupported media type</div>;
+                  card = <div>Unsupported media type</div>;
               }
               return (
                 <div key={index} className="col-12 col-sm-6 col-xl-4 grid-item">
@@ -104,12 +98,7 @@ export default function MediaTab() {
       </AudioPlayerProvider>
 
       <div className="d-flex justify-content-end mt-4">
-        <Pagination
-          itemsPerPage={itemsPerPage}
-          totalItems={data.length}
-          onPageChange={handlePageClick}
-          currentPage={currentPage}
-        />
+        <Pagination { ...paginationProps }/>
       </div>
     </>
   );

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx

@@ -60,6 +60,12 @@ export default function WeightsTab() {
     { value: "SDXL", label: "SD XL" },
   ];
 
+  const paginationProps = {
+    onPageChange: handlePageClick,
+    pageCount: 0, // replace with proper fecth value
+    currentPage: 0 // replace with proper fecth value
+  };
+
   const handleFilterChange = (option: any) => {
     const selectedOption = option as { value: string; label: string };
     setSelectedFilter(selectedOption.value);
@@ -106,12 +112,7 @@ export default function WeightsTab() {
             />
           )}
         </div>
-        <Pagination
-          itemsPerPage={itemsPerPage}
-          totalItems={data.length}
-          onPageChange={handlePageClick}
-          currentPage={currentPage}
-        />
+        <Pagination { ...paginationProps }/>
       </div>
       {isLoading ? (
         <div className="row gx-3 gy-3">
@@ -149,12 +150,7 @@ export default function WeightsTab() {
       )}
 
       <div className="d-flex justify-content-end mt-4">
-        <Pagination
-          itemsPerPage={itemsPerPage}
-          totalItems={data.length}
-          onPageChange={handlePageClick}
-          currentPage={currentPage}
-        />
+        <Pagination { ...paginationProps }/>
       </div>
     </>
   );

packages/fakeyou.com/src/v2/view/pages/profile/useProfileRequests.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-
 import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import { useSession } from "hooks";
@@ -7,24 +6,37 @@ import { useSession } from "hooks";
 export default function useProfileRequests({ requestMedia = false }) {
 	const { user } = useSession();
 	const [mediaList, mediaListSet] = useState<MediaFile[]>([]);
-	const [mediaListStatus, datasetStatusSet] = useState(requestMedia ? 1 : 0);
+	const [mediaListStatus, mediaListStatusSet] = useState(requestMedia ? 1 : 0);
+	const [mediaPage,mediaPageSet] = useState(1);
+	const [mediaPageCount,mediaPageCountSet] = useState(0);
+
+	const mediaPageChange = (page: number) => {
+		mediaPageSet(page);
+		mediaListStatusSet(1);
+	};
 
     useEffect(() => {
 	    if (user && user.username) {
 	      if (mediaListStatus === 1) {
-	        datasetStatusSet(2);
-	        GetMediaByUser(user.username, {}).then((res) => {
-	          datasetStatusSet(3);
+	        mediaListStatusSet(2);
+	        GetMediaByUser(user.username, {}, { page_index: mediaPage }).then((res) => {
+	          mediaListStatusSet(3);
 	          console.log("🧶",res);
-	          if (res.results) mediaListSet(res.results);
+	          if (res.results && res.pagination) {
+	          	mediaPageCountSet(res.pagination.total_page_count)
+	          	mediaListSet(res.results);
+	          }
 	        });
 	      }
     	}
-  }, [user, mediaListStatus]);
+  }, [user, mediaListStatus, mediaPage]);
 
-  console.log("😎",mediaList);
+  // console.log("😎",mediaList);
 
   return {
-
+  	mediaList,
+  	mediaPage,
+  	mediaPageChange,
+  	mediaPageCount
   };
 };