diff --git a/src/common/Home.scss b/src/common/Home.scss index ee360009..1c3b9ac3 100644 --- a/src/common/Home.scss +++ b/src/common/Home.scss @@ -1,8 +1,8 @@ @import '../utils/base'; .home { - text-align: center; height: calc(100vh - #{$headerHeight}); + text-align: center; display: flex; align-items: center; justify-content: center; diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js index 7a0a6ca7..44a7ffa9 100644 --- a/src/common/MenuLayout.js +++ b/src/common/MenuLayout.js @@ -7,6 +7,7 @@ import classNames from 'classnames'; import * as PropTypes from 'prop-types'; import { serverType } from '../servers/prop-types'; import Message from '../utils/Message'; +import { ServerError } from '../servers/helpers/ServerError'; import NotFound from './NotFound'; import './MenuLayout.scss'; @@ -32,16 +33,11 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi } if (selectedServer.serverNotFound) { - return Could not find this Shlink server in this host.; + return ; } if (selectedServer.serverNotReachable) { - return ( - -

Oops! Could not connect to this Shlink server.

- Make sure you have internet connection, and the server is properly configured and on-line. -
- ); + return ; } const burgerClasses = classNames('menu-layout__burger-icon', { diff --git a/src/servers/ServersListGroup.js b/src/servers/ServersListGroup.js index 764ca583..aae2ef5b 100644 --- a/src/servers/ServersListGroup.js +++ b/src/servers/ServersListGroup.js @@ -10,6 +10,7 @@ import './ServersListGroup.scss'; const propTypes = { servers: PropTypes.arrayOf(serverType).isRequired, children: PropTypes.node.isRequired, + className: PropTypes.string, }; const ServerListItem = ({ id, name }) => ( @@ -24,15 +25,15 @@ ServerListItem.propTypes = { name: PropTypes.string, }; -const ServersListGroup = ({ servers, children }) => ( - +const ServersListGroup = ({ servers, children, className }) => ( +
{children}
- {servers.length && ( + {servers.length > 0 && ( {servers.map(({ id, name }) => )} )} - +
); ServersListGroup.propTypes = propTypes; diff --git a/src/servers/helpers/ServerError.js b/src/servers/helpers/ServerError.js new file mode 100644 index 00000000..b663830b --- /dev/null +++ b/src/servers/helpers/ServerError.js @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; +import Message from '../../utils/Message'; +import ServersListGroup from '../ServersListGroup'; +import './ServerError.scss'; + +const propTypes = { + type: PropTypes.oneOf([ 'not-found', 'not-reachable' ]).isRequired, +}; + +export const ServerError = ({ type }) => ( +
+
+ + {type === 'not-found' && 'Could not find this Shlink server.'} + {type === 'not-reachable' && ( + +

Oops! Could not connect to this Shlink server.

+ Make sure you have internet connection, and the server is properly configured and on-line. +
+ )} +
+
+ + These are the {type === 'not-reachable' ? 'other' : ''} servers currently configured. Choose one of + them or add a new one. + +
+); + +ServerError.propTypes = propTypes; diff --git a/src/servers/helpers/ServerError.scss b/src/servers/helpers/ServerError.scss new file mode 100644 index 00000000..073758ae --- /dev/null +++ b/src/servers/helpers/ServerError.scss @@ -0,0 +1,6 @@ +.server-error-container { + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/servers/prop-types/index.js b/src/servers/prop-types/index.js index 6dc0eaa1..4bdb7355 100644 --- a/src/servers/prop-types/index.js +++ b/src/servers/prop-types/index.js @@ -1,12 +1,24 @@ import PropTypes from 'prop-types'; -export const serverType = PropTypes.shape({ +const regularServerType = PropTypes.shape({ id: PropTypes.string, name: PropTypes.string, url: PropTypes.string, apiKey: PropTypes.string, version: PropTypes.string, printableVersion: PropTypes.string, - serverNotFound: PropTypes.bool, - serverNotReachable: PropTypes.bool, }); + +const notFoundServerType = PropTypes.shape({ + serverNotFound: PropTypes.bool.isRequired, +}); + +const notReachableServerType = PropTypes.shape({ + serverNotReachable: PropTypes.bool.isRequired, +}); + +export const serverType = PropTypes.oneOfType([ + regularServerType, + notFoundServerType, + notReachableServerType, +]);