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';