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

client/src/components/Apps/AppGrid/AppGrid.module.css

@@ -28,4 +28,13 @@
 .GridMessage a {
   color: var(--color-accent);
   font-weight: 600;
+}
+
+.AppsMessage {
+  color: var(--color-primary);
+}
+
+.AppsMessage a {
+  color: var(--color-accent);
+  font-weight: 600;
 }

client/src/components/Apps/AppGrid/AppGrid.tsx

@@ -1,4 +1,5 @@
 import classes from './AppGrid.module.css';
+import { Link } from 'react-router-dom';
 import { App } from '../../../interfaces/App';
 
 import AppCard from '../AppCard/AppCard';
@@ -8,16 +9,24 @@ interface ComponentProps {
 }
 
 const AppGrid = (props: ComponentProps): JSX.Element => {
-  const apps = (
-    <div className={classes.AppGrid}>
-      {props.apps.map((app: App): JSX.Element => {
-        return <AppCard
-          key={app.id}
-          app={app}
-        />
-      })}
-    </div>
-  );
+  let apps: JSX.Element;
+
+  if (props.apps.length > 0) {
+    apps = (
+      <div className={classes.AppGrid}>
+        {props.apps.map((app: App): JSX.Element => {
+          return <AppCard
+            key={app.id}
+            app={app}
+          />
+        })}
+      </div>
+    )
+  } else {
+    apps = (
+      <p className={classes.AppsMessage}>You don't have any applications. You can add a new one from <Link to='/applications'>/application</Link> menu</p>
+    );
+  }
 
   return apps;
 }

client/src/components/Apps/Apps.module.css

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

client/src/components/Apps/Apps.tsx

@@ -96,9 +96,7 @@ const Apps = (props: ComponentProps): JSX.Element => {
         {props.loading
           ? <Spinner />
           : (!isInEdit
-              ? props.apps.length > 0
-                ? <AppGrid apps={props.apps} />
-                : <p className={classes.AppsMessage}>You don't have any applications. You can add a new one from <Link to='/applications'>/application</Link> menu</p>
+              ? <AppGrid apps={props.apps} />
               : <AppTable updateAppHandler={toggleUpdate} />)
         }
       </div>

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>