swapped out status on useListContent to use enum

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

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
 
 interface Props {
   addQueries?: any;
@@ -17,17 +18,19 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet
   const [page, pageSet] = useState(pagePreset);
   const [pageCount, pageCountSet] = useState(0);
   const [sort, sortSet] = useState(false);
-  const [status, statusSet] = useState(requestList ? 1 : 0);
+  const [status, statusSet] = useState(requestList ? FetchStatus.ready : FetchStatus.paused);
+  const isLoading = status === FetchStatus.ready || status === FetchStatus.in_progress;
+  const fetchError = status === FetchStatus.error;
 
   const pageChange = (page: number) => {
     pageSet(page);
-    statusSet(1);
+    statusSet(FetchStatus.ready);
   };
 
   const reFetch = () => {
     pageSet(pagePreset); // Reset to first page on filter/sort change
     listSet([]); // Reset list on filter/sort change
-    statusSet(1);
+    statusSet(FetchStatus.ready);
   }
 
   const onChange = ({ target }: { target: { name: string; value: any } }) => {
@@ -39,7 +42,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet
   useEffect(() => {
     if (urlParam) {
       if (status === 1) {
-        statusSet(2);
+        statusSet(FetchStatus.success);
         fetcher(urlParam, {},
           {
             page_index: page,
@@ -49,7 +52,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet
           }
         ).then((res: any) => {
           if (debug) console.log(`🪲 useListContent success debug at: ${ debug }`, res);
-          statusSet(3);
+          statusSet(FetchStatus.error);
           if (res.results && res.pagination) {
             pageCountSet(res.pagination.total_page_count);
             listSet(res.results);
@@ -60,9 +63,11 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet
   }, [ addQueries, debug, fetcher, filter, listSet, page, sort, status, urlParam ]);
 
   return {
+    fetchError,
     filter,
     filterSet,
     list,
+    isLoading,
     onChange,
     page,
     pageChange,

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
@@ -16,9 +16,7 @@ import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/Ge
 
 export default function BookmarksTab({ username }: { username: string }) {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
   const [selectedFilter, setSelectedFilter] = useState("all");
-  // const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const [list, listSet] = useState<any[]>([]);
   const bookmarks = useListContent({
     debug: "bookmarks tab",
@@ -40,20 +38,6 @@ export default function BookmarksTab({ username }: { username: string }) {
     currentPage: bookmarks.page,
   };
 
-  // const resetMasonryGrid = () => {
-  //   setShowMasonryGrid(false);
-  //   setTimeout(() => setShowMasonryGrid(true), 10);
-  // };
-
-  // const handleSortOrFilterChange = (event: any) => {
-  //   if (weights.onChange) {
-  //     weights.onChange(event);
-  //   }
-
-  //   // Reset Masonry Grid
-  //   resetMasonryGrid();
-  // };
-
   const filterOptions = [
     { value: "all", label: "All Weights" },
     { value: "tts", label: "Text to Speech" },
@@ -90,14 +74,6 @@ export default function BookmarksTab({ username }: { username: string }) {
     setSelectedFilter(selectedOption.value);
   };
 
-  useEffect(() => {
-    if (bookmarks.status === 1) {
-      setIsLoading(true);
-    } else if (bookmarks.status === 3) {
-      setIsLoading(false);
-    }
-  }, [bookmarks.status]);
-
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -141,7 +117,7 @@ export default function BookmarksTab({ username }: { username: string }) {
         </div>
         <Pagination {...paginationProps} />
       </div>
-      {isLoading ? (
+      { bookmarks.isLoading ? (
         <div className="row gx-3 gy-3">
           {Array.from({ length: 12 }).map((_, index) => (
             <SkeletonCard key={index} />

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
@@ -18,7 +18,6 @@ import { useListContent } from "hooks";
 
 export default function MediaTab({ username }: { username: string }) {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
 
   const [list, listSet] = useState<MediaFile[]>([]);
@@ -27,7 +26,6 @@ export default function MediaTab({ username }: { username: string }) {
     fetcher: GetMediaByUser,
     list,
     listSet,
-    // pagePreset: 1,
     requestList: true,
     urlParam: username,
     addQueries: { per_page: 24 },
@@ -57,14 +55,6 @@ export default function MediaTab({ username }: { username: string }) {
     resetMasonryGrid();
   };
 
-  useEffect(() => {
-    if (media.status === 1) {
-      setIsLoading(true);
-    } else if (media.status === 3) {
-      setIsLoading(false);
-    }
-  }, [media.status]);
-
   const filterOptions = [
     { value: "all", label: "All Media" },
     { value: "image", label: "Images" },
@@ -104,7 +94,7 @@ export default function MediaTab({ username }: { username: string }) {
         <Pagination {...paginationProps} />
       </div>
       <AudioPlayerProvider>
-        {isLoading ? (
+        { media.isLoading ? (
           <div className="row gx-3 gy-3">
             {Array.from({ length: 12 }).map((_, index) => (
               <SkeletonCard key={index} />

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
@@ -24,7 +24,6 @@ import SkeletonCard from "components/common/Card/SkeletonCard";
 
 export default function WeightsTab({ username }: { username: string }) {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
   const [sd, sdSet] = useState("all");
   const [tts, ttsSet] = useState("all");
   const [vc, vcSet] = useState("all");
@@ -99,14 +98,6 @@ export default function WeightsTab({ username }: { username: string }) {
     resetMasonryGrid();
   };
 
-  useEffect(() => {
-    if (weights.status === 1) {
-      setIsLoading(true);
-    } else if (weights.status === 3) {
-      setIsLoading(false);
-    }
-  }, [weights.status]);
-
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -162,7 +153,7 @@ export default function WeightsTab({ username }: { username: string }) {
         </div>
         <Pagination {...paginationProps} />
       </div>
-      {isLoading ? (
+      { weights.isLoading ? (
         <div className="row gx-3 gy-3">
           {Array.from({ length: 12 }).map((_, index) => (
             <SkeletonCard key={index} />