added frontend query params to explore media and weights tabs, removed useListContent from useBookmarks, which doesn't even need pagination and such

packages/components/src/api/bookmarks/GetBookmarksByUser.ts

@@ -10,7 +10,8 @@ export interface UserBookmarksListResponse {
 }
 
 export interface UserBookmarksListQueries {
-  page_index: number;
+  page_index?: number;
+  page_size: number;
 }
 
 export const GetBookmarksByUser = MakeRequest<

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

@@ -49,8 +49,6 @@ export default function ImageCard({
       data.weight_type || data.details?.maybe_weight_data?.weight_type
     );
 
-  console.log("🌇", origin);
-
   const bucketConfig = new BucketConfig();
   let coverImage = "/images/avatars/default-pfp.png";
 

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

@@ -1,17 +1,19 @@
-import { useState } from 'react';
-import { useListContent } from "hooks";
+import { useEffect, useState } from 'react';
 import { CreateBookmark } from "@storyteller/components/src/api/bookmarks/CreateBookmark";
 import { DeleteBookmark } from "@storyteller/components/src/api/bookmarks/DeleteBookmark";
 import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser";
+import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
 import { useSession } from "hooks";
 
 export default function useBookmarks() {
-  const [baseList, baseListSet] = useState<any[]>([]);
   const { user } = useSession();
-  const bookmarks = useListContent({ fetcher: GetBookmarksByUser, debug: "useBookmarks", list: baseList, listSet: baseListSet, requestList: true, urlParam: user?.username || "" });
-  const list = bookmarks.list.reduce((obj: any, current: any) => {
+  const [baseList, baseListSet] = useState<any[]>([]);
+  const [status, statusSet] = useState(FetchStatus.ready);
+
+  const list = baseList.reduce((obj: any, current: any) => {
     return { ...obj, [current.details.entity_token]: current.token }
   },{});
+
   const toggle = (entityToken = "", type = "") => {
     let bookmarkToken = list[entityToken];
     if (bookmarkToken) {
@@ -19,7 +21,7 @@ export default function useBookmarks() {
       return DeleteBookmark(bookmarkToken,{ as_mod: true })
       .then((res: any) => {
         console.log("🔥",res);
-        bookmarks.statusSet(1);
+        statusSet(FetchStatus.ready);
         return false;
       });
 
@@ -31,12 +33,25 @@ export default function useBookmarks() {
       })
       .then((res: any) => {
         console.log("🔖",res);
-        bookmarks.statusSet(1);
+        statusSet(FetchStatus.ready);
         return true;
       });
     }
   };
 
+  useEffect(() => {
+    if (user && status === FetchStatus.ready) {
+      statusSet(FetchStatus.in_progress);
+      GetBookmarksByUser(user?.username || "",{},{ page_size: 999 }) // high number because we want all bookmarks
+        .then((res: any) => {
+          statusSet(FetchStatus.success);
+          if (res.results) {
+            baseListSet(res.results);
+          }
+        });
+    }
+  },[status, user]);
+
   return {
     list,
     toggle

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

@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react";
 import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
+import { useHistory, useLocation } from "react-router-dom";
 
 interface Props {
   addQueries?: any;
+  addSetters?: any;
   debug?: string,
   fetcher: any;
-  filterKey?: string;
   list: any;
   listSet: any;
   onInputChange?: (x?: any) => any;
@@ -15,11 +16,13 @@ interface Props {
 
 const n = () => {};
 
-export default function useLazyLists({ addQueries, debug = "", fetcher, filterKey = "filter_media_type", list = [], listSet, onInputChange = n, onSuccess = n, requestList = false }: Props) {
-  const [filter, filterSet] = useState("all");
-  const [next, nextSet] = useState("");
+export default function useLazyLists({ addQueries, addSetters, debug = "", fetcher, list = [], listSet, onInputChange = n, onSuccess = n, requestList = 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(false);
+  const [sort, sortSet] = useState(urlQueries.get("sort_ascending") === "true");
   const [status, statusSet] = useState(requestList ? FetchStatus.ready : FetchStatus.paused);
   const listKeys = Object.keys(list);
   const totalKeys = listKeys.length;
@@ -31,7 +34,7 @@ export default function useLazyLists({ addQueries, debug = "", fetcher, filterKe
   };
 
   const onChange = ({ target }: { target: { name: string; value: any } }) => {
-    const todo: { [key: string]: (x: any) => void } = { filterSet, 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
@@ -41,18 +44,18 @@ export default function useLazyLists({ addQueries, debug = "", fetcher, filterKe
   };
 
   useEffect(() => {
+    const queries = {
+      ...(next ? { cursor: next } : {}),
+      ...addQueries, // eventually we should provide a way to type this ... or not. It works
+      ...(sort ? { sort_ascending: true } : {}),
+    };
+
     if (status === FetchStatus.ready) {
+      let search = new URLSearchParams(queries).toString();
       statusSet(FetchStatus.in_progress);
-      fetcher(
-        "",
-        {},
-        {
-          ...(next ? { cursor: next } : {}),
-          ...addQueries, // eventually we should provide a way to type this ... or not. It works
-          ...(filter !== "all" ? { [filterKey]: filter } : {}),
-          ...(sort ? { sort_ascending: true } : {}),
-        }
-      ).then((res: any) => {
+      history.replace({ pathname, search });
+
+      fetcher( "",{},queries).then((res: any) => {
         if (debug) console.log(`🐞 useLazyLists success debug at: ${ debug }`, res);
         statusSet(FetchStatus.success);
         onSuccess(res);
@@ -78,12 +81,10 @@ export default function useLazyLists({ addQueries, debug = "", fetcher, filterKe
         }
       });
     }
-  }, [ addQueries, debug, fetcher, filter, filterKey, listKeys, listSet, next, onSuccess, sort, status, totalKeys ]);
+  }, [ addQueries, debug, fetcher, history, listKeys, listSet, next, onSuccess, pathname, sort, status, totalKeys ]);
 
   return {
     fetchError,
-    filter,
-    filterSet,
     getMore,
     isLoading,
     list: Object.values(list).flat(), // format as an array, eventually the input list will live within this hook. Eventually

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

@@ -31,8 +31,9 @@ export default function useListContent({
   requestList = false,
   urlParam = "",
 }: Props) {
-  const { pathname, search } = useLocation();
-  const urlQueries = new URLSearchParams(search);
+  const { pathname, search: locSearch } = useLocation();
+  const history = useHistory();
+  const urlQueries = new URLSearchParams(locSearch);
   const [page, pageSet] = useState(parseInt(urlQueries.get("page_index") || "") || pagePreset);
   const [pageCount, pageCountSet] = useState(0);
   const [sort, sortSet] = useState(urlQueries.get("sort_ascending") === "true");
@@ -42,7 +43,6 @@ export default function useListContent({
   const isLoading =
     status === FetchStatus.ready || status === FetchStatus.in_progress;
   const fetchError = status === FetchStatus.error;
-  const history = useHistory();
 
   const pageChange = (page: number) => {
     pageSet(page);

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

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from "react";
+import { useLocation } from "react-router-dom";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
@@ -14,21 +15,29 @@ import { ListMediaFiles } from "@storyteller/components/src/api/media_files/List
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import { useBookmarks, useLazyLists } from "hooks";
 import InfiniteScroll from "react-infinite-scroll-component";
+import prepFilter from "resources/prepFilter";
 
 export default function MediaTab() {
+  const { search } = useLocation();
+  const urlQueries = new URLSearchParams(search);
   const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
+  const [weightType, weightTypeSet] = useState(urlQueries.get("maybe_scoped_weight_type") || "all");
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const [list, listSet] = useState<MediaFile[]>([]);
   const media = useLazyLists({
+    addQueries: {
+      page_size: 24,
+      ...prepFilter(weightType, "maybe_scoped_weight_type")
+    },
+    addSetters: { weightTypeSet },
     debug: "explore media tab",
     fetcher: ListMediaFiles,
     list,
     listSet,
     onInputChange: () => setShowMasonryGrid(false),
     onSuccess: () => setShowMasonryGrid(true),
-    requestList: true,
-    addQueries: { page_size: 12 },
+    requestList: true
   });
 
   const filterOptions = [
@@ -61,9 +70,9 @@ export default function MediaTab() {
             {...{
               icon: faFilter,
               options: filterOptions,
-              name: "filter",
+              name: "weightType",
               onChange: media.onChange,
-              value: media.filter,
+              value: weightType,
             }}
           />
         </div>

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

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from "react";
+import { useLocation } from "react-router-dom";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import WeightsCards from "components/common/Card/WeightsCards";
 import { TempSelect } from "components/common";
@@ -12,21 +13,28 @@ 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 { useBookmarks, useLazyLists } from "hooks";
+import prepFilter from "resources/prepFilter";
 
 export default function WeightsTab() {
+  const { search } = useLocation();
+  const urlQueries = new URLSearchParams(search);
   const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
+  const [weightType, weightTypeSet] = useState(urlQueries.get("maybe_scoped_weight_type") || "all");
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const [list, listSet] = useState<Weight[]>([]);
   const weights = useLazyLists({
+    addQueries: {
+      page_size: 24,
+      ...prepFilter(weightType, "maybe_scoped_weight_type")
+    },
+    addSetters: { weightTypeSet },
     fetcher: ListWeights,
-    filterKey: "weights_category",
     list,
     listSet,
     onInputChange: () => setShowMasonryGrid(false),
     onSuccess: () => setShowMasonryGrid(true),
-    requestList: true,
-    addQueries: { page_size: 12 },
+    requestList: true
   });
 
   const filterOptions = [
@@ -77,9 +85,9 @@ export default function WeightsTab() {
             {...{
               icon: faFilter,
               options: filterOptions,
-              name: "filter",
+              name: "weightType",
               onChange: weights.onChange,
-              value: weights.filter,
+              value: weightType,
             }}
           />
           {/* {selectedFilter === "tts" && (