Display info message on homescreen if applications or categories arrays are empty

client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css

@@ -19,4 +19,13 @@
   .BookmarkGrid {
     grid-template-columns: repeat(4, 1fr);
   }
+}
+
+.BookmarksMessage {
+  color: var(--color-primary);
+}
+
+.BookmarksMessage a {
+  color: var(--color-accent);
+  font-weight: 600;
 }

client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 import classes from './BookmarkGrid.module.css';
 
 import { Bookmark, Category } from '../../../interfaces';
@@ -9,12 +11,21 @@ interface ComponentProps {
 }
 
 const BookmarkGrid = (props: ComponentProps): JSX.Element => {
-  return (
-    <div className={classes.BookmarkGrid}>
-      {props.categories.map((category: Category): JSX.Element => <BookmarkCard category={category} key={category.id} />)}
-    </div>
-  )
-  
+  let bookmarks: JSX.Element;
+
+  if (props.categories.length > 0) {
+    bookmarks = (
+      <div className={classes.BookmarkGrid}>
+        {props.categories.map((category: Category): JSX.Element => <BookmarkCard category={category} key={category.id} />)}
+      </div>
+    );
+  } else {
+    bookmarks = (
+      <p className={classes.BookmarksMessage}>You don't have any bookmarks. You can add a new one from <Link to='/bookmarks'>/bookmarks</Link> menu</p>
+    );
+  }
+
+  return bookmarks;
 }
 
 export default BookmarkGrid;

client/src/components/Bookmarks/Bookmarks.module.css

@@ -1,13 +1,4 @@
 .ActionsContainer {
   display: flex;
   align-items: center;
-}
-
-.BookmarksMessage {
-  color: var(--color-primary);
-}
-
-.BookmarksMessage a {
-  color: var(--color-accent);
-  font-weight: 600;
 }

client/src/components/Bookmarks/Bookmarks.tsx

@@ -134,14 +134,12 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
       {props.loading
         ? <Spinner />
         : (!isInEdit
-          ? props.categories.length > 0
-            ? <BookmarkGrid categories={props.categories} />
-            : <p className={classes.BookmarksMessage}>You don't have any bookmarks. You can add a new one from <Link to='/bookmarks'>/bookmarks</Link> menu</p>
-          : (<BookmarkTable
+          ? <BookmarkGrid categories={props.categories} />
+          : <BookmarkTable
               contentType={tableContentType}
               categories={props.categories}
               updateHandler={goToUpdateMode}
-            />)
+            />
           )
       }
     </Container>