bookmark and tabs also works in weight tabs, pagination not responding however

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

@@ -1,59 +1,41 @@
-import React, { memo, useRef, useState } from "react";
-
-import {
-  useBookmarks,
-  useListContent,
-  useRatings,
-  useSession
-} from "hooks";
-
-import {
-  Weight as WeightType,
-  ListWeights,
-  GetBookmarksByUser
-} from "@storyteller/components/src/api";
-
-import { 
-  MasonryGrid,
-  WeightsCards,
-  Pagination,
-  SkeletonCard,
-  NonRouteTabs
-} from "components/common";
+import React, { memo } from "react";
 
+import { NonRouteTabs } from "components/common";
 import { SelectModalData, SelectModalV2} from "../SelectModal";
-
-import prepFilter from "resources/prepFilter";
+import TabAllWeights from "./tabAllWeights";
+import TabBookmarkedWeights from "./tabBookmarkedWeights"
 
 export default memo(function SelectModalWrapper({
   debug = false,
   value = {title:"",token:""},
   modalTitle,
   inputLabel,
+  weightType,
   onSelect
 }: {
   debug?: boolean;
   value?: SelectModalData;
   modalTitle: string;
   inputLabel: string;
+  weightType: "sd_1.5" | "loRA";
   onSelect: (data:SelectModalData) => void;
 }) {
   const tabs = [{
     label: "All Weights",
     content: (
-      <div className="searcher-container in-modal" id="allWeights">
-        <WeightsTabsContent debug={debug} onSelect={onSelect}/>
+      <div className="searcher-container in-modal m-4" id="allWeights">
+        <TabAllWeights {...{debug, onSelect, weightType}}/>
       </div>
     )
   },
-  // {
-  //   label: "Bookmarked",
-  //   content: (
-  //     <div className="searcher-container in-modal" id="allWeights">
-  //       <WeightsTabsContent debug={debug} onSelect={onSelect}/>
-  //     </div>
-  //   )
-  // }
+  {
+    label: "Bookmarked Weights",
+    content: (
+      <div className="searcher-container in-modal m-4" id="allWeights">
+        <TabBookmarkedWeights {...{debug, onSelect, weightType}}/>
+      </div>
+    )
+  }
   ]
   return (
     <SelectModalV2
@@ -67,105 +49,3 @@ export default memo(function SelectModalWrapper({
   );
 });
 
-function WeightsTabsContent({
-  debug=false,
-  onSelect
-}:{
-  debug?: boolean
-  onSelect: (data:SelectModalData) => void;
-}){
-  const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const bookmarks = useBookmarks();
-  const ratings = useRatings();
-  const [list, listSet] = useState<WeightType[]>([]);
-  const { user } = useSession();
-  const weights = useListContent({
-    addQueries: {
-      page_size: 9,
-      ...prepFilter("sd_1.5", "weight_type"),
-    },
-    urlUpdate: false,
-    debug: debug ? "Weight List" : undefined,
-    fetcher: ListWeights,
-    list,
-    listSet,
-    requestList: true,
-    urlParam: user?.username || ""
-  });
-  const handlePageClick = (selectedItem: { selected: number }) => {
-    weights.pageChange(selectedItem.selected);
-  };
-
-  // const { isLoading, page, pageChange, pageCount, status } = useListContent({
-  //   addQueries: {
-  //     page_size: 9,
-  //     ...prepFilter("sd_1.5", "maybe_scoped_weight_type"),
-  //   },
-  //   fetcher: GetBookmarksByUser,
-  //   // onSuccess: res => {
-  //   //   setShowBookmarksMasonryGrid(true);
-  //   // },
-  //   list: list,
-  //   debug: "",
-  //   listSet: listSet,
-  //   requestList: true,
-  //   urlParam: user.username,
-  //   urlUpdate: false,
-  // });
-
-  const paginationProps = {
-    onPageChange: handlePageClick,
-    pageCount: weights.pageCount,
-    currentPage: weights.page,
-  };
-  if (weights.isLoading){
-    return (
-      <div className="row gx-3 gy-3">
-        {Array.from({ length: 12 }).map((_, index) => (
-          <SkeletonCard key={index} />
-        ))}
-      </div>
-    );
-  }else if (weights.list.length === 0 && weights.status === 3){
-    return(
-      <div className="text-center m-4 opacity-75">
-        No weights created yet.
-      </div>
-    );
-  }else {
-    return(
-      <>
-        <Pagination {...paginationProps} />
-        <MasonryGrid
-          gridRef={gridContainerRef}
-          onLayoutComplete={() => console.log("Layout complete!")}
-        >
-          {weights.list.map((data: WeightType, key: number) => {
-            let props = {
-              data,
-              ratings,
-              bookmarks,
-              showCreator: true,
-              type: "weights",
-              inSelectModal: true,
-              onResultSelect: onSelect,
-            };
-            return (
-              <div
-                {...{
-                  className: "col-12 col-sm-6 col-xl-4 grid-item",
-                  key,
-                }}
-              >
-                <WeightsCards {...{ type: data.weight_category, props }} />
-              </div>
-            );
-          })}
-        </MasonryGrid>
-        <div className="d-flex justify-content-end mt-4">
-          <Pagination {...paginationProps} />
-        </div> 
-      </>
-    );
-  }
-}

packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabAllWeights.tsx

@@ -0,0 +1,107 @@
+import React, {useRef, useState} from 'react';
+import {
+  useBookmarks,
+  useListContent,
+  useRatings,
+  useSession
+} from "hooks";
+import {
+  Weight as WeightI,
+  ListWeights
+} from "@storyteller/components/src/api";
+import { SelectModalData } from "../SelectModal";
+import prepFilter from "resources/prepFilter";
+import { 
+  MasonryGrid,
+  WeightsCards,
+  Pagination,
+  SkeletonCard,
+} from "components/common";
+
+export default function WeightsTabsContent({
+  debug=false,
+  weightType,
+  onSelect
+}:{
+  debug?: boolean
+  weightType: "sd_1.5" | "loRA";
+  onSelect: (data:SelectModalData) => void;
+}){
+  const gridContainerRef = useRef<HTMLDivElement | null>(null);
+  const bookmarks = useBookmarks();
+  const ratings = useRatings();
+  const [list, listSet] = useState<WeightI[]>([]);
+  const { user } = useSession();
+  const weights = useListContent({
+    addQueries: {
+      page_size: 9,
+      ...prepFilter("sd_1.5", "weight_type"),
+    },
+    urlUpdate: false,
+    debug: debug ? "All Weights" : undefined,
+    fetcher: ListWeights,
+    list,
+    listSet,
+    requestList: true,
+    urlParam: user?.username || ""
+  });
+  const handlePageClick = (selectedItem: { selected: number }) => {
+    weights.pageChange(selectedItem.selected);
+  };
+
+  const paginationProps = {
+    onPageChange: handlePageClick,
+    pageCount: weights.pageCount,
+    currentPage: weights.page,
+  };
+  if (weights.isLoading){
+    return (
+      <div className="row gx-3 gy-3">
+        {Array.from({ length: 12 }).map((_, index) => (
+          <SkeletonCard key={index} />
+        ))}
+      </div>
+    );
+  }else if (weights.list.length === 0 && weights.status === 3){
+    return(
+      <div className="text-center m-4 opacity-75">
+        No weights created yet.
+      </div>
+    );
+  }else {
+    return(
+      <>
+        <Pagination {...paginationProps} />
+        <MasonryGrid
+          gridRef={gridContainerRef}
+          onLayoutComplete={() => console.log("Layout complete!")}
+        >
+          {weights.list.map((data: WeightI, key: number) => {
+            let props = {
+              data,
+              ratings,
+              bookmarks,
+              showCreator: true,
+              type: "weights",
+              inSelectModal: true,
+              onResultSelect: onSelect,
+            };
+            return (
+              <div
+                {...{
+                  className: "col-12 col-sm-6 col-xl-4 grid-item",
+                  key,
+                }}
+              >
+                <WeightsCards {...{ type: data.weight_category, props }} />
+              </div>
+            );
+          })}
+        </MasonryGrid>
+        <div className="d-flex justify-content-end mt-4">
+          <Pagination {...paginationProps} />
+        </div> 
+      </>
+    );
+  }
+}

packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx

@@ -0,0 +1,109 @@
+import React, {useRef, useState} from 'react';
+import {
+  useBookmarks,
+  useListContent,
+  useRatings,
+  useSession
+} from "hooks";
+import {
+  Weight as WeightI,
+  GetBookmarksByUser
+} from "@storyteller/components/src/api";
+import { SelectModalData } from "../SelectModal";
+import prepFilter from "resources/prepFilter";
+import { 
+  MasonryGrid,
+  WeightsCards,
+  Pagination,
+  SkeletonCard,
+} from "components/common";
+
+export default function WeightsTabsContent({
+  debug=false,
+  weightType,
+  onSelect
+}:{
+  debug?: boolean;
+  weightType: "sd_1.5" | "loRA";
+  onSelect: (data:SelectModalData) => void;
+}){
+  const gridContainerRef = useRef<HTMLDivElement | null>(null);
+  const bookmarks = useBookmarks();
+  const ratings = useRatings();
+  const [list, listSet] = useState<WeightI[]>([]);
+  const { user } = useSession();
+  const weights = useListContent({
+    addQueries: {
+      page_size: 9,
+      ...prepFilter(weightType, "weight_type"),
+    },
+    urlUpdate: false,
+    debug: debug ? "Bookmarked Weights" : undefined,
+    fetcher: GetBookmarksByUser,
+    list,
+    listSet,
+    requestList: true,
+    urlParam: user?.username || ""
+  });
+  const handlePageClick = (selectedItem: { selected: number }) => {
+    weights.pageChange(selectedItem.selected);
+  };
+
+  const paginationProps = {
+    onPageChange: handlePageClick,
+    pageCount: weights.pageCount,
+    currentPage: weights.page,
+  };
+  if (weights.isLoading){
+    return (
+      <div className="row gx-3 gy-3">
+        {Array.from({ length: 12 }).map((_, index) => (
+          <SkeletonCard key={index} />
+        ))}
+      </div>
+    );
+  }else if (weights.list.length === 0 && weights.status === 3){
+    return(
+      <div className="text-center m-4 opacity-75">
+        No weights created yet.
+      </div>
+    );
+  }else {
+    return(
+      <>
+        <Pagination {...paginationProps} />
+        <MasonryGrid
+          gridRef={gridContainerRef}
+          onLayoutComplete={() => console.log("Layout complete!")}
+        >
+          {weights.list.map((data: any, key: number) => {
+            //TODO: data should be TYPED
+            let props = {
+              data,
+              ratings,
+              bookmarks,
+              showCreator: true,
+              type: "weights",
+              inSelectModal: true,
+              onResultSelect: onSelect,
+            };
+            return (
+              <div
+                {...{
+                  className: "col-12 col-sm-6 col-xl-4 grid-item",
+                  key,
+                }}
+              >
+                <WeightsCards {...{ 
+                  type: data.details.maybe_weight_data.weight_category, props }} />
+              </div>
+            );
+          })}
+        </MasonryGrid>
+        <div className="d-flex justify-content-end mt-4">
+          <Pagination {...paginationProps} />
+        </div> 
+      </>
+    );
+  }
+}

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx

@@ -166,32 +166,10 @@ export default function PageFilterControls({
           <Accordion className="mt-4">
             <Accordion.Item title={"Basics"} defaultOpen>
               <div className="row g-3 p-3">
-                {/* <SelectModal 
-                  modalTitle="Select a Stable Diffusion Weight"
-                  label="Select a Stable Diffusion Weight"
-                  onSelect={({token})=>{
-                    handleOnChange("sdModelToken", token);
-                  }}
-                  tabs={[
-                    {
-                      label: "All Weights",
-                      tabKey: "allWeights",
-                      typeFilter: "sd_1.5",
-                      searcher: true,
-                      type: "weights",
-                    },
-                    {
-                      label: "Bookmarked",
-                      tabKey: "bookmarkedWeights",
-                      typeFilter: "sd_1.5",
-                      searcher: false,
-                      type: "weights",
-                    },
-                  ]}
-                /> */}
                 <SelectModalWeightsTabs 
                   modalTitle="Select a Stable Diffusion Weight"
                   inputLabel="Select a Stable Diffusion Weight"
+                  weightType="sd_1.5"
                   onSelect={({title,token})=>{
                     handleOnChange({
                       "sdModelTitle": title,