diff --git a/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx b/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx
index 345357f1ab..d58a04e0ac 100644
--- a/packages/fakeyou.com/src/components/common/Card/MediaCards.tsx
+++ b/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 ;
diff --git a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx b/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx
index ac34cf75d3..828b14a6d7 100644
--- a/packages/fakeyou.com/src/components/common/Card/WeightsCards.tsx
+++ b/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:
diff --git a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx b/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
index f2e8797373..5d34f95cb3 100644
--- a/packages/fakeyou.com/src/hooks/useListContent/useListContent.tsx
+++ b/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,
diff --git a/packages/fakeyou.com/src/resources/prepFilter.ts b/packages/fakeyou.com/src/resources/prepFilter.ts
new file mode 100644
index 0000000000..631c4b3ccc
--- /dev/null
+++ b/packages/fakeyou.com/src/resources/prepFilter.ts
@@ -0,0 +1,3 @@
+const prepFilter = (value: string, queryKey: string) => ({ ...value !== "all" ? { [queryKey]: value } : {} });
+
+export default prepFilter;
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
index 2137ef1372..7f017990fa 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
+++ b/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(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([]);
// 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,
}}
/>
- {filter === "tts" && (
+ { weightType === "tts" && (
)}
- {filter === "sd" && (
+ { weightType === "sd" && (
)}
- {filter === "vc" && (
+ { weightType === "vc" && (
(null);
const [showMasonryGrid, setShowMasonryGrid] = useState(true);
+ const [mediaType, mediaTypeSet] = useState(urlQueries.get("filter_media_type") || "all");
const [list, listSet] = useState([]);
// 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,
}}
/>
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
index f40a6b913c..0392b7befa 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
+++ b/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(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([]);
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" && (
)}
- {weights.filter === "sd" && (
+ { weightType === "sd" && (
)}
- {weights.filter === "vc" && (
+ { weightType === "vc" && (