fixed video select on storyteller filter to show user's videos

packages/fakeyou.com/src/components/common/SelectModal/SelectMediaList.tsx

@@ -1,11 +1,13 @@
 import React, { useRef, useState } from "react";
 import MasonryGrid from "../MasonryGrid/MasonryGrid";
-import InfiniteScroll from "react-infinite-scroll-component";
-import { useLazyLists } from "hooks";
+// import InfiniteScroll from "react-infinite-scroll-component";
+import { useListContent, useSession } from "hooks";
 import prepFilter from "resources/prepFilter";
 import MediaCards from "../Card/MediaCards";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile";
-import { ListMediaFiles } from "@storyteller/components/src/api/media_files/ListMediaFiles";
+import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
+import SkeletonCard from "components/common/Card/SkeletonCard";
+import Pagination from "components/common/Pagination";
 
 interface SelectMediaListProps {
   mediaType: string;
@@ -20,75 +22,79 @@ export default function SelectMediaList({
 }: SelectMediaListProps) {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [list, listSet] = useState<MediaFile[]>([]);
+  const { user } = useSession();
 
-  const media = useLazyLists({
+  const media = useListContent({
     addQueries: {
       page_size: 9,
       ...prepFilter(mediaType, "filter_media_type"),
     },
+    urlUpdate: false,
     debug: "Media List",
-    fetcher: ListMediaFiles,
+    fetcher: GetMediaByUser,
     list,
     listSet,
     requestList: true,
-    disableUrlQueries: true,
+    urlParam: user?.username || ""
   });
 
+  const handlePageClick = (selectedItem: { selected: number }) => {
+    media.pageChange(selectedItem.selected);
+  };
+
+  const paginationProps = {
+    onPageChange: handlePageClick,
+    pageCount: media.pageCount,
+    currentPage: media.page,
+  };
+
   return (
     <div className="searcher-container in-modal" id={listKey}>
-      <InfiniteScroll
-        dataLength={media.list.length}
-        next={media.getMore}
-        hasMore={!media.list.length || !!media.next}
-        loader={
-          media.list.length !== 0 &&
-          media.isLoading && (
-            <div className="mt-4 d-flex justify-content-center">
-              <div className="spinner-border text-light" role="status">
-                <span className="visually-hidden">Loading...</span>
+        <Pagination {...paginationProps} />
+        {media.isLoading ? (
+          <div className="row gx-3 gy-3">
+            {Array.from({ length: 12 }).map((_, index) => (
+              <SkeletonCard key={index} />
+            ))}
+          </div>
+        ) : (
+          <>
+            {media.list.length === 0 && media.status === 3 ? (
+              <div className="text-center mt-4 opacity-75">
+                No media created yet.
               </div>
-            </div>
-          )
-        }
-        endMessage={
-          <p className="text-center mt-4 opacity-75">No more results.</p>
-        }
-        className="overflow-hidden"
-        scrollableTarget={listKey}
-        scrollThreshold={0.95}
-      >
-        <>
-          {media.list.length === 0 && media.status === 3 ? (
-            <div className="text-center opacity-75">No media created yet.</div>
-          ) : (
-            <MasonryGrid
-              gridRef={gridContainerRef}
-              onLayoutComplete={() => console.log("Layout complete!")}
-            >
-              {media.list.map((data: any, key: number) => {
-                let props = {
-                  data,
-                  showCreator: true,
-                  type: "media",
-                  inSelectModal: true,
-                  onResultSelect,
-                };
+            ) : (
+              <MasonryGrid
+                gridRef={gridContainerRef}
+                onLayoutComplete={() => console.log("Layout complete!")}
+              >
+                {media.list.map((data: MediaFile, key: number) => {
+                  let props = {
+                    data,
+                    showCreator: true,
+                    type: "media",
+                    inSelectModal: true,
+                    onResultSelect,
+                  };
+                  return (
+                    <div
+                      {...{
+                        className: "col-12 col-sm-6 col-xl-4 grid-item",
+                        key,
+                      }}
+                    >
+                      <MediaCards {...{ type: data.media_type, props }} />
+                    </div>
+                  );
+                })}
+              </MasonryGrid>
+            )}
+          </>
+        )}
 
-                return (
-                  <div
-                    {...{
-                      className: "col-12 col-sm-6 col-xl-4 grid-item",
-                      key,
-                    }}
-                  >
-                    <MediaCards {...{ type: data.media_type, props }} />
-                  </div>
-                );
-              })}
-            </MasonryGrid>
-          )}
-        </>
-      </InfiniteScroll>
+      <div className="d-flex justify-content-end mt-4">
+        <Pagination {...paginationProps} />
+      </div>
     </div>
   );
 }