From 484148ada6c3259a972b6db61b6471a309f6dd43 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Tue, 16 Jul 2024 11:18:32 +0500
Subject: [PATCH] refactor: add text if bookmark category is empty

---
 app/pages/BookmarksCategory.jsx | 15 +++++++++++++--
 app/pages/IndexCategory.jsx     | 12 ++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/app/pages/BookmarksCategory.jsx b/app/pages/BookmarksCategory.jsx
index c8ba7f7..f6a5b9a 100644
--- a/app/pages/BookmarksCategory.jsx
+++ b/app/pages/BookmarksCategory.jsx
@@ -46,6 +46,8 @@ const sort = {
 export function BookmarksCategoryPage(props) {
   const token = useUserStore((state) => state.token);
   const [selectedSort, setSelectedSort] = useState(0);
+  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
+
   const getKey = (pageIndex, previousPageData) => {
     if (previousPageData && !previousPageData.content.length) return null;
     return `/api/bookmarks?list=${props.slug}&page=${pageIndex}&token=${token}&sort=${sort.values[selectedSort].value}`;
@@ -65,6 +67,7 @@ export function BookmarksCategoryPage(props) {
         allReleases.push(...data[i].content);
       }
       setContent(allReleases);
+      setIsLoadingEnd(true);
     }
   }, [data]);
 
@@ -96,12 +99,20 @@ export function BookmarksCategoryPage(props) {
           ))}
         </Dropdown>
       </div>
-      {isLoading && (
+      {content && content.length > 0 ? (
+        <ReleaseSection content={content} />
+      ) : !isLoadingEnd || isLoading ? (
         <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
           <Spinner />
         </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
+          <span className="w-24 h-24 iconify-color twemoji--broken-heart"></span>
+          <p>
+            В списке {props.SectionTitleMapping[props.slug]} пока ничего нет...
+          </p>
+        </div>
       )}
-      {content && <ReleaseSection content={content} />}
       {data &&
         data[data.length - 1].current_page <
           data[data.length - 1].total_page_count && (
diff --git a/app/pages/IndexCategory.jsx b/app/pages/IndexCategory.jsx
index 02322e7..586dfc9 100644
--- a/app/pages/IndexCategory.jsx
+++ b/app/pages/IndexCategory.jsx
@@ -21,6 +21,7 @@ const fetcher = async (url) => {
 
 export function IndexCategoryPage(props) {
   const userStore = useUserStore((state) => state);
+  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
   const token = userStore.token;
   const getKey = (pageIndex, previousPageData) => {
     if (previousPageData && !previousPageData.content.length) return null;
@@ -44,6 +45,7 @@ export function IndexCategoryPage(props) {
         allReleases.push(...data[i].content);
       }
       setContent(allReleases);
+      setIsLoadingEnd(true);
     }
   }, [data]);
 
@@ -55,12 +57,6 @@ export function IndexCategoryPage(props) {
   }, [scrollPosition]);
 
   if (error) return <div>failed to load</div>;
-  if (isLoading)
-    return (
-      <main className="flex flex-col items-center justify-center min-w-full min-h-screen">
-        <Spinner />
-      </main>
-    );
 
   return (
     <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
@@ -69,6 +65,10 @@ export function IndexCategoryPage(props) {
           sectionTitle={props.SectionTitleMapping[props.slug]}
           content={content}
         />
+      ) : !isLoadingEnd ? (
+        <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
+          <Spinner />
+        </div>
       ) : (
         <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
           <span className="w-24 h-24 iconify-color twemoji--broken-heart"></span>