From f7f0d8c7c16f65298489bf6be1980dc0e5cb397e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Thu, 16 Aug 2018 19:19:57 +0200
Subject: [PATCH] Improved tags list section

---
 src/common/AsideMenu.js          |  3 ++
 src/common/AsideMenu.scss        | 20 +++++++++++
 src/short-urls/ShortUrlVisits.js | 10 +-----
 src/tags/TagsList.js             | 57 +++++++++++++++++++++-----------
 src/utils/MuttedMessage.js       | 17 ++++++++++
 5 files changed, 79 insertions(+), 28 deletions(-)
 create mode 100644 src/utils/MuttedMessage.js

diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index df22f91d..9a57310c 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -29,6 +29,7 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
   return (
     <aside className={asideClass}>
       <nav className="nav flex-column aside-menu__nav">
+        <h4 className="aside-menu__nav-group-title">Short URLs</h4>
         <NavLink
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
@@ -45,6 +46,8 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
           <FontAwesomeIcon icon={createIcon} flip="horizontal" />
           <span className="aside-menu__item-text">Create short URL</span>
         </NavLink>
+
+        <h4 className="aside-menu__nav-group-title">Tags</h4>
         <NavLink
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index aa3ae18f..9235c264 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -1,5 +1,6 @@
 @import '../utils/base';
 @import '../utils/mixins/box-shadow';
+@import '../utils/mixins/vertical-align';
 
 $asideMenuMobileWidth: 280px;
 
@@ -74,3 +75,22 @@ $asideMenuMobileWidth: 280px;
 .aside-menu__item-text {
   margin-left: 8px;
 }
+
+.aside-menu__nav-group-title {
+  font-size: .9rem;
+  text-align: center;
+  color: #bbb;
+  text-shadow: 1px 1px #ddd;
+  position: relative;
+
+  &:before {
+    @include vertical-align();
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: red;
+  }
+}
+.aside-menu__nav-group-title:not(:first-child) {
+  margin-top: 1rem;
+}
diff --git a/src/short-urls/ShortUrlVisits.js b/src/short-urls/ShortUrlVisits.js
index 29b7ac3e..2f8f15dc 100644
--- a/src/short-urls/ShortUrlVisits.js
+++ b/src/short-urls/ShortUrlVisits.js
@@ -10,15 +10,7 @@ import DateInput from '../common/DateInput'
 import VisitsParser from '../visits/services/VisitsParser'
 import { getShortUrlVisits } from './reducers/shortUrlVisits'
 import './ShortUrlVisits.scss'
-
-const MutedMessage = ({ children }) =>
-  <div className="col-md-10 offset-md-1">
-    <Card className="bg-light mt-4" body>
-      <h3 className="text-center text-muted mb-0">
-        {children}
-      </h3>
-    </Card>
-  </div>;
+import MutedMessage from '../utils/MuttedMessage';
 
 export class ShortUrlsVisits extends React.Component {
   state = { startDate: undefined, endDate: undefined };
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index f93f5361..b441337e 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -5,6 +5,9 @@ import { listTags } from './reducers/tagsList';
 import './TagsList.scss';
 import { Card } from 'reactstrap';
 import ColorGenerator from '../utils/ColorGenerator';
+import MuttedMessage from '../utils/MuttedMessage';
+
+const { round } = Math;
 
 export class TagsList extends React.Component {
   componentDidMount() {
@@ -12,32 +15,48 @@ export class TagsList extends React.Component {
     listTags();
   }
 
-  render() {
+  renderContent() {
     const { tagsList, colorGenerator } = this.props;
-    const tagsCount = Math.round(tagsList.tags.length);
-    if (tagsCount < 1) {
-      return <div>No tags</div>;
+    if (tagsList.loading) {
+      return <MuttedMessage>Loading...</MuttedMessage>
     }
 
-    const tagsGroups = splitEvery(Math.round(tagsCount / 4), tagsList.tags);
+    if (tagsList.error) {
+      return <div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>;
+    }
 
+    const tagsCount = tagsList.tags.length;
+    if (tagsCount < 1) {
+      return <MuttedMessage>No tags found</MuttedMessage>;
+    }
+
+    const tagsGroups = splitEvery(round(tagsCount / 4), tagsList.tags);
+    return (
+      <React.Fragment>
+        {tagsGroups.map((group, index) => (
+          <div key={index} className="col-md-6 col-xl-3">
+            {group.map(tag => (
+              <div
+                style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
+                className="tags-list__tag-container"
+                key={tag}
+              >
+                <Card body className="tags-list__tag-card">
+                  <h5 className="tags-list__tag-title">{tag}</h5>
+                </Card>
+              </div>
+            ))}
+          </div>
+        ))}
+      </React.Fragment>
+    );
+  }
+
+  render() {
     return (
       <div className="shlink-container">
         <div className="row">
-          {tagsGroups.map((group, index) => (
-            <div key={index} className="col-md-6 col-xl-3">
-              {group.map(tag => (
-                <div
-                  style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
-                  className="tags-list__tag-container"
-                >
-                  <Card body className="tags-list__tag-card">
-                    <h5 className="tags-list__tag-title">{tag}</h5>
-                  </Card>
-                </div>
-              ))}
-            </div>
-          ))}
+          {this.renderContent()}
         </div>
       </div>
     );
diff --git a/src/utils/MuttedMessage.js b/src/utils/MuttedMessage.js
new file mode 100644
index 00000000..e4eb1fd9
--- /dev/null
+++ b/src/utils/MuttedMessage.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Card } from 'reactstrap';
+import classnames from 'classnames';
+
+export default function MutedMessage({ children, marginSize = 4 }) {
+  const cardClasses = classnames('bg-light', `mt-${marginSize}`);
+
+  return (
+    <div className="col-md-10 offset-md-1">
+      <Card className={cardClasses} body>
+        <h3 className="text-center text-muted mb-0">
+          {children}
+        </h3>
+      </Card>
+    </div>
+  );
+}