From d313d61c3cb460d9c9a97ee59076c375fbacc822 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 17 Sep 2023 07:29:23 +0800
Subject: [PATCH] Frontend display no shorteners text in table when no
 shorteners are made

---
 react-frontend/src/App.tsx | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/react-frontend/src/App.tsx b/react-frontend/src/App.tsx
index 5bc8cac..18c264f 100644
--- a/react-frontend/src/App.tsx
+++ b/react-frontend/src/App.tsx
@@ -15,6 +15,7 @@ import { Label } from '@/components/ui/label'
 import {
 	Table,
 	TableBody,
+	TableCaption,
 	TableCell,
 	TableHead,
 	TableHeader,
@@ -157,6 +158,9 @@ const ShortenerTable = ({ shorteners }: { shorteners: Shortener[] }) => {
 			</CardHeader>
 			<CardContent>
 				<Table>
+					{!shorteners.length && (
+						<TableCaption>No Shorteners</TableCaption>
+					)}
 					<TableHeader>
 						<TableRow>
 							<TableHead>Link</TableHead>
@@ -164,18 +168,22 @@ const ShortenerTable = ({ shorteners }: { shorteners: Shortener[] }) => {
 						</TableRow>
 					</TableHeader>
 					<TableBody>
-						{shorteners.map((shortener) => (
-							<TableRow key={shortener.id}>
-								<TableCell>{shortener.link}</TableCell>
-								<TableCell
-									className='cursor-pointer select-none'
-									onClick={() =>
-										copyLinkToClipboard(shortener.code)
-									}>
-									{shortener.code}
-								</TableCell>
-							</TableRow>
-						))}
+						{shorteners.length ? (
+							shorteners.map((shortener) => (
+								<TableRow key={shortener.id}>
+									<TableCell>{shortener.link}</TableCell>
+									<TableCell
+										className='cursor-pointer select-none'
+										onClick={() =>
+											copyLinkToClipboard(shortener.code)
+										}>
+										{shortener.code}
+									</TableCell>
+								</TableRow>
+							))
+						) : (
+							<TableRow></TableRow>
+						)}
 					</TableBody>
 				</Table>
 			</CardContent>