diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index e009a5ce..5c063ce6 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -3,9 +3,10 @@ import { Route, Switch } from 'react-router-dom';
import { Swipeable } from 'react-swipeable';
import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classnames from 'classnames';
+import classNames from 'classnames';
import * as PropTypes from 'prop-types';
import { serverType } from '../servers/prop-types';
+import MutedMessage from '../utils/MutedMessage';
import NotFound from './NotFound';
import './MenuLayout.scss';
@@ -38,8 +39,13 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
render() {
const { selectedServer, match } = this.props;
+
+ if (!selectedServer) {
+ return ;
+ }
+
const { params: { serverId } } = match;
- const burgerClasses = classnames('menu-layout__burger-icon', {
+ const burgerClasses = classNames('menu-layout__burger-icon', {
'menu-layout__burger-icon--active': this.state.showSideBar,
});
const swipeMenuIfNoModalExists = (showSideBar) => () => {
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index 1982f6fc..e9964c22 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -1,7 +1,7 @@
import React from 'react';
import { splitEvery } from 'ramda';
import PropTypes from 'prop-types';
-import MuttedMessage from '../utils/MuttedMessage';
+import MutedMessage from '../utils/MutedMessage';
import SearchField from '../utils/SearchField';
const { ceil } = Math;
@@ -29,7 +29,7 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
const { tagsList, match } = this.props;
if (tagsList.loading) {
- return Loading...;
+ return ;
}
if (tagsList.error) {
@@ -43,7 +43,7 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
const tagsCount = tagsList.filteredTags.length;
if (tagsCount < 1) {
- return No tags found;
+ return No tags found;
}
const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
diff --git a/src/utils/MutedMessage.js b/src/utils/MutedMessage.js
new file mode 100644
index 00000000..61e5c90c
--- /dev/null
+++ b/src/utils/MutedMessage.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Card } from 'reactstrap';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const propTypes = {
+ noMargin: PropTypes.bool,
+ loading: PropTypes.bool,
+ children: PropTypes.node,
+};
+
+const MutedMessage = ({ children, loading = false, noMargin = false }) => {
+ const cardClasses = classNames('bg-light', {
+ 'mt-4': !noMargin,
+ });
+
+ return (
+
+
+
+ {loading && }
+ {loading && !children && Loading...}
+ {children}
+
+
+
+ );
+};
+
+MutedMessage.propTypes = propTypes;
+
+export default MutedMessage;
diff --git a/src/utils/MuttedMessage.js b/src/utils/MuttedMessage.js
deleted file mode 100644
index 3b2e6cc6..00000000
--- a/src/utils/MuttedMessage.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { Card } from 'reactstrap';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-
-const DEFAULT_MARGIN_SIZE = 4;
-const propTypes = {
- marginSize: PropTypes.number,
- children: PropTypes.node,
-};
-
-export default function MutedMessage({ children, marginSize = DEFAULT_MARGIN_SIZE }) {
- const cardClasses = classnames('bg-light', {
- [`mt-${marginSize}`]: marginSize > 0,
- });
-
- return (
-
-
-
- {children}
-
-
-
- );
-}
-
-MutedMessage.propTypes = propTypes;
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index 7b1ae484..e235ffef 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -1,12 +1,10 @@
-import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isEmpty, mapObjIndexed, values } from 'ramda';
import React from 'react';
import { Card } from 'reactstrap';
import PropTypes from 'prop-types';
import qs from 'qs';
import DateRangeRow from '../utils/DateRangeRow';
-import MutedMessage from '../utils/MuttedMessage';
+import MutedMessage from '../utils/MutedMessage';
import { formatDate } from '../utils/utils';
import SortableBarGraph from './SortableBarGraph';
import { shortUrlVisitsType } from './reducers/shortUrlVisits';
@@ -66,7 +64,7 @@ const ShortUrlVisits = (
if (loading) {
const message = loadingLarge ? 'This is going to take a while... :S' : 'Loading...';
- return {message};
+ return {message};
}
if (error) {
diff --git a/test/tags/TagsList.test.js b/test/tags/TagsList.test.js
index 60c9b234..5a2ce549 100644
--- a/test/tags/TagsList.test.js
+++ b/test/tags/TagsList.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { identity } from 'ramda';
import createTagsList from '../../src/tags/TagsList';
-import MuttedMessage from '../../src/utils/MuttedMessage';
+import MutedMessage from '../../src/utils/MutedMessage';
import SearchField from '../../src/utils/SearchField';
import { rangeOf } from '../../src/utils/utils';
@@ -28,7 +28,7 @@ describe('', () => {
it('shows a loading message when tags are being loaded', () => {
const wrapper = createWrapper({ loading: true });
- const loadingMsg = wrapper.find(MuttedMessage);
+ const loadingMsg = wrapper.find(MutedMessage);
expect(loadingMsg).toHaveLength(1);
expect(loadingMsg.html()).toContain('Loading...');
@@ -44,7 +44,7 @@ describe('', () => {
it('shows a message when the list of tags is empty', () => {
const wrapper = createWrapper({ filteredTags: [] });
- const msg = wrapper.find(MuttedMessage);
+ const msg = wrapper.find(MutedMessage);
expect(msg).toHaveLength(1);
expect(msg.html()).toContain('No tags found');
diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js
index b136efde..004019cf 100644
--- a/test/visits/ShortUrlVisits.test.js
+++ b/test/visits/ShortUrlVisits.test.js
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import { identity } from 'ramda';
import { Card } from 'reactstrap';
import createShortUrlVisits from '../../src/visits/ShortUrlVisits';
-import MutedMessage from '../../src/utils/MuttedMessage';
+import MutedMessage from '../../src/utils/MutedMessage';
import GraphCard from '../../src/visits/GraphCard';
import SortableBarGraph from '../../src/visits/SortableBarGraph';
import DateRangeRow from '../../src/utils/DateRangeRow';