added frontend query params for url sharing, page refrefreshes, etc.

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

@@ -9,7 +9,6 @@ interface Props {
 }
 
 export default function MediaCards({ props, type }: Props) {
-  console.log("🔋",props);
   switch (type) {
     case "audio":
       return <AudioCard {...props} />;

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

@@ -9,7 +9,6 @@ interface Props {
 }
 
 export default function WeightsCards({ props, type }: Props) {
-  console.log("🧿",props);
   switch (type) {
     case WeightCategory.TTS:
     case WeightCategory.VC:

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

@@ -1,12 +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;
@@ -23,7 +23,6 @@ export default function useListContent({
   addSetters,
   debug = "",
   fetcher,
-  filterKey = "filter_media_type",
   list,
   listSet,
   onInputChange = n,
@@ -32,16 +31,18 @@ export default function useListContent({
   requestList = false,
   urlParam = "",
 }: Props) {
-  const [filter, filterSet] = useState("all");
-  const [page, pageSet] = useState(pagePreset);
+  const { pathname, search } = useLocation();
+  const urlQueries = new URLSearchParams(search);
+  const [page, pageSet] = useState(parseInt(urlQueries.get("page_index") || "") || pagePreset);
   const [pageCount, pageCountSet] = useState(0);
-  const [sort, sortSet] = useState(false);
+  const [sort, sortSet] = useState(urlQueries.get("sort_ascending") === "true");
   const [status, statusSet] = useState(
     requestList ? FetchStatus.ready : FetchStatus.paused
   );
   const isLoading =
     status === FetchStatus.ready || status === FetchStatus.in_progress;
   const fetchError = status === FetchStatus.error;
+  const history = useHistory();
 
   const pageChange = (page: number) => {
     pageSet(page);
@@ -57,7 +58,6 @@ export default function useListContent({
   const onChange = ({ target }: { target: { name: string; value: any } }) => {
     const todo: { [key: string]: (x: any) => void } = {
       ...addSetters,
-      filterSet,
       sortSet,
     };
     todo[target.name + "Set"](target.value);
@@ -66,19 +66,18 @@ export default function useListContent({
   };
 
   useEffect(() => {
+    const queries = {
+      page_index: page,
+      ...addQueries, // eventually we should provide a way to type this ... or not. It works
+      ...(sort ? { sort_ascending: true } : {}),
+    };
+
     if (urlParam) {
       if (status === FetchStatus.ready) {
+        let search = new URLSearchParams(queries).toString();
         statusSet(FetchStatus.in_progress);
-        fetcher(
-          urlParam,
-          {},
-          {
-            page_index: page,
-            ...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(urlParam,{},queries).then((res: any) => {
           if (debug)
             console.log(`🪲 useListContent success debug at: ${debug}`, res);
           statusSet(FetchStatus.success);
@@ -94,10 +93,10 @@ export default function useListContent({
     addQueries,
     debug,
     fetcher,
-    filter,
-    filterKey,
+    history,
     listSet,
     onSuccess,
+    pathname,
     page,
     sort,
     status,
@@ -106,8 +105,6 @@ export default function useListContent({
 
   return {
     fetchError,
-    filter,
-    filterSet,
     list,
     isLoading,
     onChange,

packages/fakeyou.com/src/resources/prepFilter.ts

@@ -0,0 +1,3 @@
+const prepFilter = (value: string, queryKey: string) => ({ ...value !== "all" ? { [queryKey]: value } : {} });
+
+export default prepFilter;

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

@@ -12,23 +12,26 @@ import Pagination from "components/common/Pagination";
 import { useBookmarks, useListContent } from "hooks";
 import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser";
 import WeightsCards from "components/common/Card/WeightsCards";
+import prepFilter from "resources/prepFilter";
 
 export default function BookmarksTab({ username }: { username: string }) {
-  const { pathname: origin } = useLocation();
+  const { pathname: origin, search } = useLocation();
+  const urlQueries = new URLSearchParams(search);
   const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
+  const [weightType, weightTypeSet] = useState(urlQueries.get("maybe_scoped_weight_type") || "all");
   const [sd, sdSet] = useState("all");
   const [tts, ttsSet] = useState("all");
   const [vc, vcSet] = useState("all");
-  const [weightCategory, weightCategorySet] = useState("all");
+  const [weightCategory, weightCategorySet] = useState(urlQueries.get("maybe_scoped_weight_category") || "all");
   const [list, listSet] = useState<any[]>([]);
   // const resetMasonryGrid = () => {
   //   setShowMasonryGrid(false);
   //   setTimeout(() => setShowMasonryGrid(true), 10);
   // };
   const {
-    filter,
+    // filter,
     isLoading,
     list: dataList,
     onChange,
@@ -40,12 +43,12 @@ export default function BookmarksTab({ username }: { username: string }) {
   } = useListContent({
     addQueries: {
       page_size: 24,
-      ...(weightCategory !== "all" ? { maybe_scoped_weight_category: weightCategory } : {}),
+      ...prepFilter(weightType, "maybe_scoped_weight_type"),
+      ...prepFilter(weightCategory, "maybe_scoped_weight_category"),
     },
-    addSetters: { sdSet, ttsSet, vcSet, weightCategorySet },
+    addSetters: { sdSet, ttsSet, vcSet, weightCategorySet, weightTypeSet },
     debug: "bookmarks tab",
     fetcher: GetBookmarksByUser,
-    filterKey: "maybe_scoped_weight_type",
     list,
     listSet,
     onInputChange: () => setShowMasonryGrid(false),
@@ -131,9 +134,9 @@ export default function BookmarksTab({ username }: { username: string }) {
             {...{
               icon: faFilter,
               options: filterOptions,
-              name: "filter",
+              name: "weightType",
               onChange,
-              value: filter,
+              value: weightType,
             }}
           />
           <TempSelect
@@ -145,7 +148,7 @@ export default function BookmarksTab({ username }: { username: string }) {
               value: weightCategory,
             }}
           />
-          {filter === "tts" && (
+          { weightType === "tts" && (
             <TempSelect
               {...{
                 options: modelTtsOptions,
@@ -155,7 +158,7 @@ export default function BookmarksTab({ username }: { username: string }) {
               }}
             />
           )}
-          {filter === "sd" && (
+          { weightType === "sd" && (
             <TempSelect
               {...{
                 options: modelSdOptions,
@@ -165,7 +168,7 @@ export default function BookmarksTab({ username }: { username: string }) {
               }}
             />
           )}
-          {filter === "vc" && (
+          { weightType === "vc" && (
             <TempSelect
               {...{
                 options: modelVcOptions,

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

@@ -14,27 +14,33 @@ import Pagination from "components/common/Pagination";
 import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import { useBookmarks, useListContent } from "hooks";
+import prepFilter from "resources/prepFilter";
 
 export default function MediaTab({ username }: { username: string }) {
-  const { pathname: origin } = useLocation();
+  const { pathname: origin, search } = useLocation();
+  const urlQueries = new URLSearchParams(search);
   const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
+  const [mediaType, mediaTypeSet] = useState(urlQueries.get("filter_media_type") || "all");
   const [list, listSet] = useState<MediaFile[]>([]);
   // const resetMasonryGrid = () => {
   //   setShowMasonryGrid(false);
   //   setTimeout(() => setShowMasonryGrid(true), 10);
   // };
   const media = useListContent({
-    // addQueries: { abc: "anything" }, an example
+    addQueries: {
+      page_size: 24,
+      ...prepFilter(mediaType, "filter_media_type"),
+    },
+    addSetters: { mediaTypeSet },
     fetcher: GetMediaByUser,
     list,
     listSet,
     onInputChange: () => setShowMasonryGrid(false),
     onSuccess: () => setShowMasonryGrid(true),
     requestList: true,
-    urlParam: username,
-    addQueries: { page_size: 24 },
+    urlParam: username
   });
 
   const handlePageClick = (selectedItem: { selected: number }) => {
@@ -77,9 +83,9 @@ export default function MediaTab({ username }: { username: string }) {
             {...{
               icon: faFilter,
               options: filterOptions,
-              name: "filter",
+              name: "mediaType",
               onChange: media.onChange,
-              value: media.filter,
+              value: mediaType,
             }}
           />
         </div>

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

@@ -11,6 +11,7 @@ import { useBookmarks, useListContent } from "hooks";
 import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser";
 import { TempSelect } from "components/common";
 import SkeletonCard from "components/common/Card/SkeletonCard";
+import prepFilter from "resources/prepFilter";
 
 // interface IWeighttModelData {
 //   token: string;
@@ -22,8 +23,11 @@ import SkeletonCard from "components/common/Card/SkeletonCard";
 // }
 
 export default function WeightsTab({ username }: { username: string }) {
-  const { pathname: origin } = useLocation();
+  const { pathname: origin, search } = useLocation();
+  // const { maybe_scoped_weight_type, ...yadda } = useParams<{ maybe_scoped_weight_type: string }>();
+  const urlQueries = new URLSearchParams(search);
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
+  const [weightType, weightTypeSet] = useState(urlQueries.get("maybe_scoped_weight_type") || "all");
   const [sd, sdSet] = useState("all");
   const [tts, ttsSet] = useState("all");
   const [vc, vcSet] = useState("all");
@@ -31,7 +35,11 @@ export default function WeightsTab({ username }: { username: string }) {
   const bookmarks = useBookmarks();
   const [list, listSet] = useState<any[]>([]);
   const weights = useListContent({
-    addSetters: { sdSet, ttsSet, vcSet },
+    addQueries: {
+      ...prepFilter(weightType, "maybe_scoped_weight_type"),
+      page_size: 24
+    },
+    addSetters: { weightTypeSet, sdSet, ttsSet, vcSet },
     debug: "Weights tab",
     fetcher: GetWeightsByUser,
     list,
@@ -39,12 +47,9 @@ export default function WeightsTab({ username }: { username: string }) {
     onInputChange: () => setShowMasonryGrid(false),
     onSuccess: () => setShowMasonryGrid(true),
     requestList: true,
-    urlParam: username,
-    addQueries: { page_size: 24 },
+    urlParam: username
   });
 
-  console.log("💎", origin);
-
   const handlePageClick = (selectedItem: { selected: number }) => {
     weights.pageChange(selectedItem.selected);
   };
@@ -104,12 +109,12 @@ export default function WeightsTab({ username }: { username: string }) {
             {...{
               icon: faFilter,
               options: filterOptions,
-              name: "filter",
+              name: "weightType",
               onChange: weights.onChange,
-              value: weights.filter,
+              value: weightType,
             }}
           />
-          {weights.filter === "tts" && (
+          { weightType === "tts" && (
             <TempSelect
               {...{
                 options: modelTtsOptions,
@@ -119,7 +124,7 @@ export default function WeightsTab({ username }: { username: string }) {
               }}
             />
           )}
-          {weights.filter === "sd" && (
+          { weightType === "sd" && (
             <TempSelect
               {...{
                 options: modelSdOptions,
@@ -129,7 +134,7 @@ export default function WeightsTab({ username }: { username: string }) {
               }}
             />
           )}
-          {weights.filter === "vc" && (
+          { weightType === "vc" && (
             <TempSelect
               {...{
                 options: modelVcOptions,