From 400613bdf88883eea7eb7cbad8a513d647e1a9e2 Mon Sep 17 00:00:00 2001
From: Petr Kadlec <67226666+kapetr@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:45:44 +0200
Subject: [PATCH] fix(cards-list): update empty state correctly (#20)

Signed-off-by: Petr Kadlec <petr@puradesign.cz>
---
 src/components/CardsList/CardsList.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/CardsList/CardsList.tsx b/src/components/CardsList/CardsList.tsx
index e5ab9085..fddcf90f 100644
--- a/src/components/CardsList/CardsList.tsx
+++ b/src/components/CardsList/CardsList.tsx
@@ -78,7 +78,7 @@ export function CardsList<T extends OrderBy>({
   children,
 }: PropsWithChildren<Props<T>>) {
   const [search, setSearch] = useState<string | null>(null);
-  const isEmpty = useRef(false);
+  const [isEmptyState, setEmptyState] = useState(false);
 
   const { ref: fetchMoreAnchorRef } = useFetchNextPageInView({
     onFetchNextPage,
@@ -87,11 +87,14 @@ export function CardsList<T extends OrderBy>({
   });
 
   const noResults = totalCount === 0 && !isFetching;
+  const isEmpty = isEmptyState && noResults;
 
-  if (noResults && search == null) isEmpty.current = true;
+  useEffect(() => {
+    if (noResults && search == null) setEmptyState(true);
+    if (totalCount > 0) setEmptyState(false);
+  }, [noResults, search, totalCount]);
 
-  const showBarWithNewButton =
-    (onSearchChange || newButtonProps) && !isEmpty.current;
+  const showBarWithNewButton = (onSearchChange || newButtonProps) && !isEmpty;
 
   return (
     <section className={classes.root}>
@@ -117,7 +120,7 @@ export function CardsList<T extends OrderBy>({
             <div className={classes.heading}>
               {heading && <h2>{heading}</h2>}
 
-              {orderByProps && !isEmpty.current && (
+              {orderByProps && !isEmpty && (
                 <div className={classes.order}>
                   <OrderBySelect<T> {...orderByProps} />
                 </div>
@@ -127,9 +130,9 @@ export function CardsList<T extends OrderBy>({
         </header>
       )}
 
-      {!error && (isEmpty.current || noResults) && (
+      {!error && (isEmpty || noResults) && (
         <div className={classes.empty}>
-          {isEmpty.current ? (
+          {isEmpty ? (
             <>
               <p>{noItemsText}</p>
               {noItemsDescr && (