searcher updates

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

@@ -4,19 +4,20 @@ import { faSearch } from "@fortawesome/pro-solid-svg-icons";
 import MasonryGrid from "../MasonryGrid/MasonryGrid";
 import "./Searcher.scss";
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
-import { useBookmarks, useRatings } from "hooks";
+import { useLazyLists } from "hooks";
 import { SearchWeights } from "@storyteller/components/src/api/weights/SearchWeights";
 import debounce from "lodash.debounce";
 import WeightsCards from "../Card/WeightsCards";
 import LoadingSpinner from "../LoadingSpinner";
 import useSearcherStore from "hooks/useSearcherStore";
-
+import prepFilter from "resources/prepFilter";
+import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights";
+import InfiniteScroll from "react-infinite-scroll-component";
 interface SearcherProps {
   type?: "page" | "modal";
   dataType?: "media" | "weights";
   weightType?: string;
   onResultSelect?: () => void;
-  weightTypeFilter?: any;
   searcherKey: string;
 }
 
@@ -25,7 +26,6 @@ export default function Searcher({
   dataType = "weights",
   weightType = "all",
   onResultSelect,
-  weightTypeFilter,
   searcherKey,
 }: SearcherProps) {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
@@ -33,8 +33,9 @@ export default function Searcher({
   const [foundWeights, setFoundWeights] = useState<Weight[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const [searchCompleted, setSearchCompleted] = useState(0);
-  const bookmarks = useBookmarks();
-  const ratings = useRatings();
+  // const bookmarks = useBookmarks();
+  // const ratings = useRatings();
+  const [list, listSet] = useState<Weight[]>([]);
 
   useEffect(() => {
     if (searchTerm[searcherKey]) {
@@ -59,7 +60,7 @@ export default function Searcher({
       setIsSearching(true);
 
       if (weightType !== "all") {
-        request[weightTypeFilter] = weightType;
+        request["weight_type"] = weightType;
       }
 
       let response = await SearchWeights(request);
@@ -74,7 +75,7 @@ export default function Searcher({
 
       setIsSearching(false);
     },
-    [setFoundWeights, weightType, setSearchCompleted, weightTypeFilter]
+    [setFoundWeights, weightType, setSearchCompleted]
   );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -85,6 +86,19 @@ export default function Searcher({
     [doSearch]
   );
 
+  const weights = useLazyLists({
+    addQueries: {
+      page_size: 9,
+      ...prepFilter(weightType, "weight_type"),
+    },
+    debug: "Weights List",
+    fetcher: ListWeights,
+    list,
+    listSet,
+    requestList: true,
+    disableUrlQueries: true,
+  });
+
   return (
     <div>
       <Input
@@ -98,36 +112,102 @@ export default function Searcher({
         className={`searcher-container ${
           type === "modal" ? "in-modal" : ""
         }`.trim()}
+        id={searcherKey}
       >
         {/* Result Cards */}
-        {isSearching ? (
-          <LoadingSpinner />
-        ) : (
-          <MasonryGrid key={searchCompleted} gridRef={gridContainerRef}>
-            {dataType === "weights" &&
-              foundWeights.map((data: any, key: number) => {
-                let props = {
-                  data,
-                  bookmarks,
-                  ratings,
-                  showCreator: true,
-                  type: "weights",
-                  inSearcher: true,
-                  onResultSelect,
-                };
 
-                return (
-                  <div
-                    {...{
-                      className: "col-12 col-sm-6 col-xl-4 grid-item",
-                      key,
-                    }}
-                  >
-                    <WeightsCards {...{ type: data.weight_category, props }} />
+        {searchTerm[searcherKey] && !isSearching ? (
+          <>
+            {isSearching ? (
+              <LoadingSpinner />
+            ) : (
+              <MasonryGrid key={searchCompleted} gridRef={gridContainerRef}>
+                {dataType === "weights" &&
+                  foundWeights.map((data: any, key: number) => {
+                    let props = {
+                      data,
+                      showCreator: true,
+                      type: "weights",
+                      inSearcher: true,
+                      onResultSelect,
+                    };
+
+                    return (
+                      <div
+                        {...{
+                          className: "col-12 col-sm-6 col-xl-4 grid-item",
+                          key,
+                        }}
+                      >
+                        <WeightsCards
+                          {...{ type: data.weight_category, props }}
+                        />
+                      </div>
+                    );
+                  })}
+              </MasonryGrid>
+            )}
+          </>
+        ) : (
+          <>
+            <InfiniteScroll
+              dataLength={weights.list.length}
+              next={weights.getMore}
+              hasMore={!weights.list.length || !!weights.next}
+              loader={
+                weights.list.length !== 0 &&
+                weights.isLoading && (
+                  <div className="mt-4 d-flex justify-content-center">
+                    <div className="spinner-border text-light" role="status">
+                      <span className="visually-hidden">Loading...</span>
+                    </div>
                   </div>
-                );
-              })}
-          </MasonryGrid>
+                )
+              }
+              endMessage={
+                <p className="text-center mt-4 opacity-75">No more results.</p>
+              }
+              className="overflow-hidden"
+              scrollableTarget={searcherKey}
+              scrollThreshold={0.95}
+            >
+              <>
+                {weights.list.length === 0 && weights.status === 3 ? (
+                  <div className="text-center mt-4 opacity-75">
+                    No weight created yet.
+                  </div>
+                ) : (
+                  <MasonryGrid
+                    gridRef={gridContainerRef}
+                    onLayoutComplete={() => console.log("Layout complete!")}
+                  >
+                    {weights.list.map((data: any, key: number) => {
+                      let props = {
+                        data,
+                        showCreator: true,
+                        type: "weights",
+                        inSearcher: true,
+                        onResultSelect,
+                      };
+
+                      return (
+                        <div
+                          {...{
+                            className: "col-12 col-sm-6 col-xl-4 grid-item",
+                            key,
+                          }}
+                        >
+                          <WeightsCards
+                            {...{ type: data.weight_category, props }}
+                          />
+                        </div>
+                      );
+                    })}
+                  </MasonryGrid>
+                )}
+              </>
+            </InfiniteScroll>
+          </>
         )}
       </div>
     </div>

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

@@ -40,7 +40,7 @@ const SelectSearcher = memo(({ label, tabs }: SelectSearcherProps) => {
         type="modal"
         onResultSelect={closeModal}
         searcherKey={tab.searcherKey}
-        weightTypeFilter={tab.weightTypeFilter}
+        weightType={tab.weightTypeFilter}
       />
     ),
     padding: true,

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

@@ -5,28 +5,43 @@ import { useHistory, useLocation } from "react-router-dom";
 interface Props {
   addQueries?: any;
   addSetters?: any;
-  debug?: string,
+  debug?: string;
   fetcher: any;
   list: any;
   listSet: any;
   onInputChange?: (x?: any) => any;
   onSuccess?: (x?: any) => any;
   requestList?: boolean;
+  disableUrlQueries?: boolean;
 }
 
 const n = () => {};
 
-export default function useLazyLists({ addQueries, addSetters, debug = "", fetcher, list = [], listSet, onInputChange = n, onSuccess = n, requestList = false }: Props) {
+export default function useLazyLists({
+  addQueries,
+  addSetters,
+  debug = "",
+  fetcher,
+  list = [],
+  listSet,
+  onInputChange = n,
+  onSuccess = n,
+  requestList = false,
+  disableUrlQueries = false,
+}: Props) {
   const { pathname, search: locSearch } = useLocation();
   const history = useHistory();
   const urlQueries = new URLSearchParams(locSearch);
   const [next, nextSet] = useState(urlQueries.get("cursor") || "");
   const [previous, previousSet] = useState(""); // I am not used for anything yet :)
   const [sort, sortSet] = useState(urlQueries.get("sort_ascending") === "true");
-  const [status, statusSet] = useState(requestList ? FetchStatus.ready : FetchStatus.paused);
+  const [status, statusSet] = useState(
+    requestList ? FetchStatus.ready : FetchStatus.paused
+  );
   const listKeys = Object.keys(list);
   const totalKeys = listKeys.length;
-  const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress;
+  const isLoading =
+    status === FetchStatus.ready || status === FetchStatus.in_progress;
   const fetchError = status === FetchStatus.error;
 
   const getMore = () => {
@@ -34,7 +49,10 @@ export default function useLazyLists({ addQueries, addSetters, debug = "", fetch
   };
 
   const onChange = ({ target }: { target: { name: string; value: any } }) => {
-    const todo: { [key: string]: (x: any) => void } = { ...addSetters, sortSet };
+    const todo: { [key: string]: (x: any) => void } = {
+      ...addSetters,
+      sortSet,
+    };
     todo[target.name + "Set"](target.value);
     onInputChange({ target });
     listSet([]); // Reset list on filter/sort change
@@ -53,15 +71,18 @@ export default function useLazyLists({ addQueries, addSetters, debug = "", fetch
     if (status === FetchStatus.ready) {
       let search = new URLSearchParams(queries).toString();
       statusSet(FetchStatus.in_progress);
-      history.replace({ pathname, search });
+      !disableUrlQueries && history.replace({ pathname, search });
 
-      fetcher( "",{},queries).then((res: any) => {
-        if (debug) console.log(`🐞 useLazyLists success debug at: ${ debug }`, res);
+      fetcher("", {}, queries).then((res: any) => {
+        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) {
@@ -81,7 +102,21 @@ export default function useLazyLists({ addQueries, addSetters, debug = "", fetch
         }
       });
     }
-  }, [ addQueries, debug, fetcher, history, listKeys, listSet, next, onSuccess, pathname, sort, status, totalKeys ]);
+  }, [
+    addQueries,
+    debug,
+    fetcher,
+    history,
+    listKeys,
+    listSet,
+    next,
+    onSuccess,
+    pathname,
+    sort,
+    status,
+    totalKeys,
+    disableUrlQueries,
+  ]);
 
   return {
     fetchError,

packages/fakeyou.com/src/v2/view/pages/weight/inference_panels/SdInferencePanel.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, memo } from "react";
 import {
   Button,
   Input,
@@ -33,7 +33,7 @@ interface SdInferencePanelProps {
   ) => void;
 }
 
-export default function SdInferencePanel({
+function SdInferencePanel({
   enqueueInferenceJob,
   sd_model_token,
 }: SdInferencePanelProps) {
@@ -339,12 +339,12 @@ export default function SdInferencePanel({
                 {
                   label: "All LoRA Weights",
                   searcherKey: "allLoraWeights",
-                  weightTypeFilter: "lora",
+                  weightTypeFilter: "rvc_v2",
                 },
                 {
                   label: "Bookmarked",
                   searcherKey: "bookmarkedLoraWeights",
-                  weightTypeFilter: "lora",
+                  weightTypeFilter: "rvc_v2",
                 },
               ]}
             />
@@ -392,3 +392,5 @@ export default function SdInferencePanel({
     </Panel>
   );
 }
+
+export default memo(SdInferencePanel);