useLazyList uses enum status svs numerical

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

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
 
 interface Props {
   addQueries?: any;
@@ -19,9 +20,11 @@ export default function useLazyLists({
   const [next, nextSet] = useState("");
   const [previous, previousSet] = useState(""); // I am not used for anything yet :)
   const [sort, sortSet] = useState(false);
-  const [status, statusSet] = useState(requestList ? 1 : 0);
+  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 fetchError = status === FetchStatus.error;
 
   const getMore = () => {
     if (next) statusSet(1);
@@ -33,12 +36,12 @@ export default function useLazyLists({
     listSet([]); // Reset list on filter/sort change
     nextSet("");
     previousSet("");
-    statusSet(1);
+    statusSet(FetchStatus.ready);
   };
 
   useEffect(() => {
-    if (status === 1) {
-      statusSet(2);
+    if (status === FetchStatus.ready) {
+      statusSet(FetchStatus.in_progress);
       fetcher(
         "",
         {},
@@ -49,7 +52,7 @@ export default function useLazyLists({
           ...(sort ? { sort_ascending: true } : {}),
         }
       ).then((res: any) => {
-        statusSet(3);
+        statusSet(FetchStatus.ready);
         console.log("🎆", res);
         if (res.results && res.pagination) {
           listSet((prevObj: any) => {
@@ -89,9 +92,11 @@ export default function useLazyLists({
   ]);
 
   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
     listKeys,
     next,

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

@@ -41,7 +41,7 @@ export default function useListContent({ addQueries, addSetters, debug = "", fet
 
   useEffect(() => {
     if (urlParam) {
-      if (status === 1) {
+      if (status === FetchStatus.ready) {
         statusSet(FetchStatus.success);
         fetcher(urlParam, {},
           {

packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.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";
 
@@ -12,7 +12,6 @@ import SkeletonCard from "components/common/Card/SkeletonCard";
 
 export default function FeaturedTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
   const [list, listSet] = useState<MediaFile[]>([]);
 
   const media = useLazyLists({
@@ -23,14 +22,6 @@ export default function FeaturedTab() {
     addQueries: { per_page: 12 },
   });
 
-  useEffect(() => {
-    if (media.status === 1) {
-      setIsLoading(true);
-    } else if (media.status === 3) {
-      setIsLoading(false);
-    }
-  }, [media.status]);
-
   return (
     <div className="d-flex flex-column gap-4">
       <div>
@@ -42,7 +33,7 @@ export default function FeaturedTab() {
           </Link>
         </div>
 
-        {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/explore/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 InfiniteScroll from "react-infinite-scroll-component";
 export default function MediaTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
-  const [isLoading, setIsLoading] = useState(true);
 
   const [list, listSet] = useState<MediaFile[]>([]);
   const media = useLazyLists({
@@ -56,12 +55,6 @@ export default function MediaTab() {
     // { value: "mostliked", label: "Most Liked" },
   ];
 
-  useEffect(() => {
-    if (media.status === 3) {
-      setIsLoading(false);
-    }
-  }, [media.status]);
-
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -87,7 +80,7 @@ export default function MediaTab() {
         </div>
       </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/explore/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";
@@ -19,8 +19,6 @@ import { useLazyLists } from "hooks";
 export default function WeightsTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
-  const [isLoading, setIsLoading] = useState(true);
-
   const [list, listSet] = useState<Weight[]>([]);
   const weights = useLazyLists({
     fetcher: ListWeights,
@@ -75,12 +73,6 @@ export default function WeightsTab() {
   //   { value: "SDXL", label: "SD XL" },
   // ];
 
-  useEffect(() => {
-    if (weights.status === 3) {
-      setIsLoading(false);
-    }
-  }, [weights.status]);
-
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -127,7 +119,7 @@ export default function WeightsTab() {
         </div>
       </div>
       <AudioPlayerProvider>
-        {isLoading ? (
+        { weights.isLoading ? (
           <div className="row gx-3 gy-3">
             {Array.from({ length: 12 }).map((_, index) => (
               <SkeletonCard key={index} />