From 35c589c94cc51952150ad6967fae980b7eb479fe Mon Sep 17 00:00:00 2001
From: unknown <pawel999@icloud.com>
Date: Tue, 8 Jun 2021 14:02:19 +0200
Subject: [PATCH] Display info message on homescreen if applications or
 categories arrays are empty

---
 .../Apps/AppGrid/AppGrid.module.css           |  9 ++++++
 .../src/components/Apps/AppGrid/AppGrid.tsx   | 29 ++++++++++++-------
 client/src/components/Apps/Apps.module.css    |  9 ------
 client/src/components/Apps/Apps.tsx           |  4 +--
 .../BookmarkGrid/BookmarkGrid.module.css      |  9 ++++++
 .../Bookmarks/BookmarkGrid/BookmarkGrid.tsx   | 23 +++++++++++----
 .../components/Bookmarks/Bookmarks.module.css |  9 ------
 client/src/components/Bookmarks/Bookmarks.tsx |  8 ++---
 8 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/client/src/components/Apps/AppGrid/AppGrid.module.css b/client/src/components/Apps/AppGrid/AppGrid.module.css
index 42729c9a..78749183 100644
--- a/client/src/components/Apps/AppGrid/AppGrid.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/client/src/components/Apps/AppGrid/AppGrid.tsx b/client/src/components/Apps/AppGrid/AppGrid.tsx
index f61e402c..dff06889 100644
--- a/client/src/components/Apps/AppGrid/AppGrid.tsx
+++ b/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;
 }
diff --git a/client/src/components/Apps/Apps.module.css b/client/src/components/Apps/Apps.module.css
index 4b6d917c..09810e1f 100644
--- a/client/src/components/Apps/Apps.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/client/src/components/Apps/Apps.tsx b/client/src/components/Apps/Apps.tsx
index a062c561..0f8e0792 100644
--- a/client/src/components/Apps/Apps.tsx
+++ b/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>
diff --git a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css
index 6651f653..8c0d1abc 100644
--- a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx
index 2cee0668..007086de 100644
--- a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx
+++ b/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;
\ No newline at end of file
diff --git a/client/src/components/Bookmarks/Bookmarks.module.css b/client/src/components/Bookmarks/Bookmarks.module.css
index 4c171971..09810e1f 100644
--- a/client/src/components/Bookmarks/Bookmarks.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/client/src/components/Bookmarks/Bookmarks.tsx b/client/src/components/Bookmarks/Bookmarks.tsx
index b5f7b9bb..d7cd3414 100644
--- a/client/src/components/Bookmarks/Bookmarks.tsx
+++ b/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>