diff --git a/src/components/List/RowContainer/index.tsx b/src/components/List/RowContainer/index.tsx index a1b8f9a..6ff03eb 100644 --- a/src/components/List/RowContainer/index.tsx +++ b/src/components/List/RowContainer/index.tsx @@ -1,5 +1,7 @@ +import Blank from "../../fallback/Blank"; import { PropsWithChildren } from "react"; import { cn } from "../../../lib/utils"; +import { hasValidChildren } from "../../../lib/node.utils"; type RowContainerProps = { row: number; @@ -11,6 +13,10 @@ export default function RowContainer({ className, children, }: RowContainerProps) { + if (!hasValidChildren(children)) { + return ; + } + return (
{children}
); diff --git a/src/components/List/index.stories.tsx b/src/components/List/index.stories.tsx index be4f872..efe8bae 100644 --- a/src/components/List/index.stories.tsx +++ b/src/components/List/index.stories.tsx @@ -23,6 +23,20 @@ export const Default = { ), }; +export const Blank = { + render: () => ( + + + + + {no_books.map((book) => ( + + ))} + + + ), +}; + type BookItemType = { id: string; title: string; @@ -105,6 +119,8 @@ const books: BookItemType[] = [ }, ]; +const no_books: BookItemType[] = []; + const ListItemStory = ({ id, title, author, publisher, etc }: BookItemType) => { return (
diff --git a/src/lib/node.spec.tsx b/src/lib/node.spec.tsx new file mode 100644 index 0000000..d7b7e23 --- /dev/null +++ b/src/lib/node.spec.tsx @@ -0,0 +1,11 @@ +import { hasValidChildren } from "./node.utils"; + +test("return true for valid children case", () => { + const children = [
Valid
, "Text"]; + expect(hasValidChildren(children)).toBe(true); +}); + +test("return false for invalid or empty children case", () => { + const children = [null, undefined, false]; + expect(hasValidChildren(children)).toBe(false); +}); diff --git a/src/lib/node.utils.ts b/src/lib/node.utils.ts new file mode 100644 index 0000000..9ea4706 --- /dev/null +++ b/src/lib/node.utils.ts @@ -0,0 +1,10 @@ +import React from "react"; + +export function hasValidChildren(children: React.ReactNode): boolean { + return React.Children.toArray(children).some( + (child) => + React.isValidElement(child) || + typeof child === "string" || + typeof child === "number" + ); +} diff --git a/src/pages/user/List.tsx b/src/pages/user/List.tsx index 30c3c86..f5b52b9 100644 --- a/src/pages/user/List.tsx +++ b/src/pages/user/List.tsx @@ -80,11 +80,9 @@ const UserListContent = () => { - {!data.users || data.users.length === 0 ? ( - - ) : ( - data.users.map((user) => ) - )} + {data.users.map((user) => ( + + ))}