card component consolidation + useLazyList loop fix

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

@@ -11,6 +11,7 @@ import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
 import Button from "components/common/Button";
 import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
 import WeightCoverImage from "components/common/WeightCoverImage";
+
 interface AudioCardProps {
   bookmarks: any,
   data: any;

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

@@ -12,17 +12,16 @@ import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 
 interface ImageCardProps {
+  bookmarks: any,
   data: any;
   type: "media" | "weights";
   showCreator?: boolean;
 }
 
-export default function ImageCard({ data, type, showCreator }: ImageCardProps) {
+export default function ImageCard({ bookmarks, data, type, showCreator }: ImageCardProps) {
   const linkUrl =
     type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`;
 
-    console.log("🎲",data);
-
   const handleInnerClick = (event: any) => {
     event.stopPropagation();
   };
@@ -157,7 +156,11 @@ export default function ImageCard({ data, type, showCreator }: ImageCardProps) {
                   <div>
                     <LikeButton onToggle={handleLike} likeCount={data.likes} />
                   </div>
-                  <BookmarkButton onToggle={handleLike} />
+                  <BookmarkButton {...{
+                    entityToken: data.weight_token,
+                    entityType: "model_weight",
+                    onToggle: bookmarks.toggle,
+                  }}/>
                 </div>
               </div>
             </div>

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import AudioCard from "./AudioCard";
+import ImageCard from "./ImageCard";
+import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
+
+interface Props {
+  props: any,
+  type: string 
+}
+
+export default function WeightsCards({ props, type }: Props) {
+  switch (type) {
+    case WeightCategory.TTS:
+    case WeightCategory.VC:
+    case WeightCategory.ZS: return <AudioCard { ...props } />;
+    case WeightCategory.SD: return <ImageCard { ...{ ...props, showCover: true }  } />;
+    default: return <div>Unsupported media type</div>;
+  }
+};

packages/fakeyou.com/src/hooks/useLazyLists/useLazyLists.tsx

@@ -3,19 +3,18 @@ import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetch
 
 interface Props {
   addQueries?: any;
+  debug?: string,
   fetcher: any;
   list: any;
   listSet: any;
+  onInputChange?: (x?: any) => any;
+  onSuccess?: (x?: any) => any;
   requestList?: boolean;
 }
 
-export default function useLazyLists({
-  addQueries,
-  fetcher,
-  list = [],
-  listSet,
-  requestList = false,
-}: Props) {
+const n = () => {};
+
+export default function useLazyLists({ addQueries, debug = "", fetcher, list = [], listSet, onInputChange = n, onSuccess = n, requestList = false }: Props) {
   const [filter, filterSet] = useState("all");
   const [next, nextSet] = useState("");
   const [previous, previousSet] = useState(""); // I am not used for anything yet :)
@@ -33,6 +32,7 @@ export default function useLazyLists({
   const onChange = ({ target }: { target: { name: string; value: any } }) => {
     const todo: { [key: string]: (x: any) => void } = { filterSet, sortSet };
     todo[target.name + "Set"](target.value);
+    onInputChange({ target });
     listSet([]); // Reset list on filter/sort change
     nextSet("");
     previousSet("");
@@ -52,13 +52,12 @@ export default function useLazyLists({
           ...(sort ? { sort_ascending: true } : {}),
         }
       ).then((res: any) => {
-        statusSet(FetchStatus.ready);
-        console.log("🎆", res);
+        if (debug) console.log(`🐞 useLazyLists success debug at: ${ debug }`, res);
+        statusSet(FetchStatus.success);
+        onSuccess(res);
         if (res.results && res.pagination) {
           listSet((prevObj: any) => {
-            let keyExists = listKeys.find(
-              key => key.split("#")[1] === res.pagination.maybe_next
-            );
+            let keyExists = listKeys.find(key => key.split("#")[1] === res.pagination.maybe_next);
             if (!next && !totalKeys) {
               return { [0 + "#initial"]: res.results }; // save as object so we can track what has been loaded
             } else if (!keyExists) {
@@ -78,18 +77,7 @@ export default function useLazyLists({
         }
       });
     }
-  }, [
-    addQueries,
-    fetcher,
-    filter,
-    list,
-    listKeys,
-    listSet,
-    next,
-    sort,
-    status,
-    totalKeys,
-  ]);
+  }, [ addQueries, debug, fetcher, filter, listKeys, listSet, next, onSuccess, sort, status, totalKeys ]);
 
   return {
     fetchError,

packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx

@@ -9,12 +9,15 @@ interface Props {
   list: any;
   listSet: any;
   onInputChange?: (x?: any) => any;
+  onSuccess?: (x?: any) => any;
   pagePreset?: number;
   requestList?: boolean;
   urlParam: string;
 }
 
-export default function useListContent({ addQueries, addSetters, debug = "", fetcher, list, listSet, onInputChange = () => {}, pagePreset = 0, requestList = false, urlParam = "" }: Props) {
+const n = () => {};
+
+export default function useListContent({ addQueries, addSetters, debug = "", fetcher, list, listSet, onInputChange = n, onSuccess = n, pagePreset = 0, requestList = false, urlParam = "" }: Props) {
   const [filter, filterSet] = useState("all");
   const [page, pageSet] = useState(pagePreset);
   const [pageCount, pageCountSet] = useState(0);
@@ -55,6 +58,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet
         ).then((res: any) => {
           if (debug) console.log(`🪲 useListContent success debug at: ${ debug }`, res);
           statusSet(FetchStatus.error);
+          onSuccess(res);
           if (res.results && res.pagination) {
             pageCountSet(res.pagination.total_page_count);
             listSet(res.results);
@@ -62,7 +66,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet
         });
       }
     }
-  }, [ addQueries, debug, fetcher, filter, listSet, page, sort, status, urlParam ]);
+  }, [ addQueries, debug, fetcher, filter, listSet, onSuccess, page, sort, status, urlParam ]);
 
   return {
     fetchError,

packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx

@@ -14,11 +14,14 @@ export default function FeaturedTab() {
   const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [list, listSet] = useState<MediaFile[]>([]);
+  const [showMasonryGrid, setShowMasonryGrid] = useState(true);
 
   const media = useLazyLists({
     fetcher: ListFeaturedMediaFiles,
     list,
     listSet,
+    onInputChange: () => setShowMasonryGrid(false),
+    onSuccess: () => setShowMasonryGrid(true),
     requestList: true,
     addQueries: { per_page: 12 },
   });
@@ -41,7 +44,7 @@ export default function FeaturedTab() {
             ))}
           </div>
         ) : (
-          <>
+          showMasonryGrid && <>
             {media.list.length === 0 && media.status === 3 ? (
               <div className="text-center mt-4 opacity-75">
                 No featured media.

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

@@ -19,30 +19,18 @@ export default function MediaTab() {
   const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
-
   const [list, listSet] = useState<MediaFile[]>([]);
   const media = useLazyLists({
+    debug: "aaaa",
     fetcher: ListMediaFiles,
     list,
     listSet,
+    onInputChange: () => setShowMasonryGrid(false),
+    onSuccess: () => setShowMasonryGrid(true),
     requestList: true,
     addQueries: { per_page: 12 },
   });
 
-  const resetMasonryGrid = () => {
-    setShowMasonryGrid(false);
-    setTimeout(() => setShowMasonryGrid(true), 10);
-  };
-
-  const handleSortOrFilterChange = (event: any) => {
-    if (media.onChange) {
-      media.onChange(event);
-    }
-
-    // Reset Masonry Grid
-    resetMasonryGrid();
-  };
-
   const filterOptions = [
     { value: "all", label: "All Media" },
     { value: "images", label: "Images" },
@@ -65,7 +53,7 @@ export default function MediaTab() {
               icon: faArrowDownWideShort,
               options: sortOptions,
               name: "sort",
-              onChange: handleSortOrFilterChange,
+              onChange: media.onChange,
               value: media.sort,
             }}
           />
@@ -74,7 +62,7 @@ export default function MediaTab() {
               icon: faFilter,
               options: filterOptions,
               name: "filter",
-              onChange: handleSortOrFilterChange,
+              onChange: media.onChange,
               value: media.filter,
             }}
           />

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

@@ -1,8 +1,6 @@
 import React, { useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
-import AudioCard from "components/common/Card/AudioCard";
-import ImageCard from "components/common/Card/ImageCard";
-// import VideoCard from "components/common/Card/VideoCard";
+import WeightsCards from "components/common/Card/WeightsCards";
 import { TempSelect } from "components/common";
 import {
   faArrowDownWideShort,
@@ -13,7 +11,6 @@ import SkeletonCard from "components/common/Card/SkeletonCard";
 import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights";
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
 import { useBookmarks, useLazyLists } from "hooks";
 
 export default function WeightsTab() {
@@ -25,24 +22,12 @@ export default function WeightsTab() {
     fetcher: ListWeights,
     list,
     listSet,
+    onInputChange: () => setShowMasonryGrid(false),
+    onSuccess: () => setShowMasonryGrid(true),
     requestList: true,
     addQueries: { per_page: 12 },
   });
 
-  const resetMasonryGrid = () => {
-    setShowMasonryGrid(false);
-    setTimeout(() => setShowMasonryGrid(true), 10);
-  };
-
-  const handleSortOrFilterChange = (event: any) => {
-    if (weights.onChange) {
-      weights.onChange(event);
-    }
-
-    // Reset Masonry Grid
-    resetMasonryGrid();
-  };
-
   const filterOptions = [
     { value: "all", label: "All Weights" },
     { value: "tts", label: "Text to Speech" },
@@ -74,6 +59,7 @@ export default function WeightsTab() {
   //   { value: "SDXL", label: "SD XL" },
   // ];
 
+
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -83,7 +69,7 @@ export default function WeightsTab() {
               icon: faArrowDownWideShort,
               options: sortOptions,
               name: "sort",
-              onChange: handleSortOrFilterChange,
+              onChange: weights.onChange,
               value: weights.sort,
             }}
           />
@@ -92,7 +78,7 @@ export default function WeightsTab() {
               icon: faFilter,
               options: filterOptions,
               name: "filter",
-              onChange: handleSortOrFilterChange,
+              onChange: weights.onChange,
               value: weights.filter,
             }}
           />
@@ -154,67 +140,13 @@ export default function WeightsTab() {
                     gridRef={gridContainerRef}
                     onLayoutComplete={() => console.log("Layout complete!")}
                   >
-                    {weights.list.map((data: any, index: number) => {
-                      let card;
-                      switch (data.weights_category) {
-                        case WeightCategory.TTS:
-                          card = (
-                            <AudioCard {...{
-                              bookmarks,
-                              data,
-                              type: "weights",
-                              showCreator: true,
-                              showCover: true
-                            }} />
-                          );
-                          break;
-                        case WeightCategory.VC:
-                          card = (
-                            <AudioCard {...{
-                              bookmarks,
-                              data,
-                              type: "weights",
-                              showCreator: true,
-                              showCover: true
-                            }} />
-                          );
-                          break;
-                        case WeightCategory.ZS:
-                          card = (
-                            <AudioCard {...{
-                              bookmarks,
-                              data,
-                              type: "weights",
-                              showCreator: true,
-                              showCover: true
-                            }} />
-                          );
-                          break;
-                        case WeightCategory.SD:
-                          card = (
-                            <ImageCard {...{
-                              bookmarks,
-                              data,
-                              type: "weights",
-                              showCreator: true
-                            }} />
-                          );
-                          break;
-                        case WeightCategory.VOCODER:
-                          card = <></>;
-                          break;
-                        default:
-                          card = <div>Unsupported weight type</div>;
-                      }
-                      return (
-                        <div
-                          key={index}
-                          className="col-12 col-sm-6 col-xl-4 grid-item"
-                        >
-                          {card}
-                        </div>
-                      );
-                    })}
+                    { weights.list.map((data: any, key: number) => {
+                      let props = { bookmarks, data, showCreator: true, type: "weights" };
+          
+                      return <div {...{ className: "col-12 col-sm-6 col-xl-4 grid-item", key }} >
+                        <WeightsCards {...{ type: data.weights_category, props }}/>
+                      </div>;
+                    }) }
                   </MasonryGrid>
                 )}
               </>

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

@@ -22,10 +22,10 @@ export default function BookmarksTab({ username }: { username: string }) {
   const [tts, ttsSet] = useState("all");
   const [vc, vcSet] = useState("all");
   const [list, listSet] = useState<any[]>([]);
-  const resetMasonryGrid = () => {
-    setShowMasonryGrid(false);
-    setTimeout(() => setShowMasonryGrid(true), 10);
-  };
+  // const resetMasonryGrid = () => {
+  //   setShowMasonryGrid(false);
+  //   setTimeout(() => setShowMasonryGrid(true), 10);
+  // };
   const { filter, isLoading, list: dataList, onChange, page, pageChange, pageCount, sort, status } = useListContent({
     addQueries: { per_page: 24 },
     addSetters: { sdSet, ttsSet, vcSet },
@@ -33,7 +33,8 @@ export default function BookmarksTab({ username }: { username: string }) {
     fetcher: GetBookmarksByUser,
     list,
     listSet,
-    onInputChange: () => resetMasonryGrid(),
+    onInputChange: () => setShowMasonryGrid(false),
+    onSuccess: () => setShowMasonryGrid(true),
     requestList: true,
     urlParam: username,
   });

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

@@ -21,16 +21,17 @@ export default function MediaTab({ username }: { username: string }) {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const [list, listSet] = useState<MediaFile[]>([]);
-  const resetMasonryGrid = () => {
-    setShowMasonryGrid(false);
-    setTimeout(() => setShowMasonryGrid(true), 10);
-  };
+  // const resetMasonryGrid = () => {
+  //   setShowMasonryGrid(false);
+  //   setTimeout(() => setShowMasonryGrid(true), 10);
+  // };
   const media = useListContent({
     // addQueries: { abc: "anything" }, an example
     fetcher: GetMediaByUser,
     list,
     listSet,
-    onInputChange: () => resetMasonryGrid(),
+    onInputChange: () => setShowMasonryGrid(false),
+    onSuccess: () => setShowMasonryGrid(true),
     requestList: true,
     urlParam: username,
     addQueries: { per_page: 24 },

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

@@ -1,7 +1,6 @@
 import React, { useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
-import AudioCard from "components/common/Card/AudioCard";
-import ImageCard from "components/common/Card/ImageCard";
+import WeightsCards from "components/common/Card/WeightsCards";
 import {
   faArrowDownWideShort,
   faFilter,
@@ -10,7 +9,6 @@ import Pagination from "components/common/Pagination";
 import { useBookmarks, useListContent } from "hooks";
 import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser";
 import { TempSelect } from "components/common";
-import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
 import SkeletonCard from "components/common/Card/SkeletonCard";
 
 // interface IWeighttModelData {
@@ -30,17 +28,14 @@ export default function WeightsTab({ username }: { username: string }) {
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const bookmarks = useBookmarks();
   const [list, listSet] = useState<any[]>([]);
-  const resetMasonryGrid = () => {
-    setShowMasonryGrid(false);
-    setTimeout(() => setShowMasonryGrid(true), 10);
-  };
   const weights = useListContent({
     addSetters: { sdSet, ttsSet, vcSet },
     debug: "Weights tab",
     fetcher: GetWeightsByUser,
     list,
     listSet,
-    onInputChange: () => resetMasonryGrid(),
+    onInputChange: () => setShowMasonryGrid(false),
+    onSuccess: () => setShowMasonryGrid(true),
     requestList: true,
     urlParam: username,
     addQueries: { per_page: 24 },
@@ -88,16 +83,6 @@ export default function WeightsTab({ username }: { username: string }) {
     addQueries: { per_page: 24 },
   };
 
-  const Card = ({ props, type }: { props: any, type: string }) => {
-    switch (type) {
-      case WeightCategory.TTS:
-      case WeightCategory.VC:
-      case WeightCategory.ZS: return <AudioCard { ...props } />;
-      case WeightCategory.SD: return <ImageCard { ...{ ...props, showCover: true }  } />;
-      default: return <div>Unsupported media type</div>;
-    }
-  };
-
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -176,7 +161,7 @@ export default function WeightsTab({ username }: { username: string }) {
                     let props = { bookmarks, data, showCreator: true, type: "weights" };
 
                     return <div {...{ className: "col-12 col-sm-6 col-xl-4 grid-item", key }} >
-                      <Card {...{ type: data.weights_category, props }}/>
+                      <WeightsCards {...{ type: data.weights_category, props }}/>
                     </div>;
                   }) }
                 </MasonryGrid>