mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Added list of servers connected to store in ServerError component
This commit is contained in:
parent
d1a5ee43e9
commit
9804a2d18d
7 changed files with 18 additions and 14 deletions
|
@ -1,8 +1,8 @@
|
|||
@import '../utils/base';
|
||||
|
||||
.home {
|
||||
height: calc(100vh - #{$headerHeight});
|
||||
text-align: center;
|
||||
height: calc(100vh - #{$headerHeight});
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
@ -7,7 +7,6 @@ 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';
|
||||
|
||||
|
@ -18,7 +17,7 @@ const propTypes = {
|
|||
selectedServer: serverType,
|
||||
};
|
||||
|
||||
const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions) => {
|
||||
const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions, ServerError) => {
|
||||
const MenuLayoutComp = ({ match, location, selectedServer, selectServer }) => {
|
||||
const [ showSideBar, setShowSidebar ] = useState(false);
|
||||
const { params: { serverId } } = match;
|
||||
|
|
|
@ -27,7 +27,8 @@ const provideServices = (bottle, connect, withRouter) => {
|
|||
'AsideMenu',
|
||||
'CreateShortUrl',
|
||||
'ShortUrlVisits',
|
||||
'ShlinkVersions'
|
||||
'ShlinkVersions',
|
||||
'ServerError'
|
||||
);
|
||||
bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
|
||||
bottle.decorator('MenuLayout', withRouter);
|
||||
|
|
|
@ -10,7 +10,6 @@ import './ServersListGroup.scss';
|
|||
const propTypes = {
|
||||
servers: PropTypes.arrayOf(serverType).isRequired,
|
||||
children: PropTypes.node.isRequired,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
const ServerListItem = ({ id, name }) => (
|
||||
|
@ -25,15 +24,15 @@ ServerListItem.propTypes = {
|
|||
name: PropTypes.string,
|
||||
};
|
||||
|
||||
const ServersListGroup = ({ servers, children, className }) => (
|
||||
<div className={className}>
|
||||
const ServersListGroup = ({ servers, children }) => (
|
||||
<React.Fragment>
|
||||
<h5>{children}</h5>
|
||||
{servers.length > 0 && (
|
||||
<ListGroup className="servers-list__list-group">
|
||||
<ListGroup className="servers-list__list-group mt-md-3">
|
||||
{servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
|
||||
</ListGroup>
|
||||
)}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
ServersListGroup.propTypes = propTypes;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
@import '../utils/mixins/vertical-align';
|
||||
|
||||
.servers-list__list-group {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
@ -14,5 +13,6 @@
|
|||
|
||||
.servers-list__server-item-icon {
|
||||
@include vertical-align();
|
||||
|
||||
right: 1rem;
|
||||
}
|
||||
|
|
|
@ -6,12 +6,13 @@ import ServersListGroup from '../ServersListGroup';
|
|||
import './ServerError.scss';
|
||||
|
||||
const propTypes = {
|
||||
servers: PropTypes.object,
|
||||
type: PropTypes.oneOf([ 'not-found', 'not-reachable' ]).isRequired,
|
||||
};
|
||||
|
||||
export const ServerError = ({ type }) => (
|
||||
export const ServerError = ({ type, servers: { list } }) => (
|
||||
<div className="server-error-container flex-column">
|
||||
<div className="row w-100">
|
||||
<div className="row w-100 mb-3 mb-md-5">
|
||||
<Message type="error">
|
||||
{type === 'not-found' && 'Could not find this Shlink server.'}
|
||||
{type === 'not-reachable' && (
|
||||
|
@ -22,8 +23,8 @@ export const ServerError = ({ type }) => (
|
|||
)}
|
||||
</Message>
|
||||
</div>
|
||||
<ServersListGroup servers={[]} className="mt-3 mt-md-5">
|
||||
These are the {type === 'not-reachable' ? 'other' : ''} servers currently configured. Choose one of
|
||||
<ServersListGroup servers={Object.values(list)}>
|
||||
These are the {type === 'not-reachable' ? 'other' : ''} Shlink servers currently configured. Choose one of
|
||||
them or <Link to="/server/create">add a new one</Link>.
|
||||
</ServersListGroup>
|
||||
</div>
|
||||
|
|
|
@ -7,6 +7,7 @@ import ImportServersBtn from '../helpers/ImportServersBtn';
|
|||
import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
|
||||
import { createServer, createServers, deleteServer, listServers } from '../reducers/server';
|
||||
import ForServerVersion from '../helpers/ForServerVersion';
|
||||
import { ServerError } from '../helpers/ServerError';
|
||||
import ServersImporter from './ServersImporter';
|
||||
import ServersService from './ServersService';
|
||||
import ServersExporter from './ServersExporter';
|
||||
|
@ -32,6 +33,9 @@ const provideServices = (bottle, connect, withRouter) => {
|
|||
bottle.serviceFactory('ForServerVersion', () => ForServerVersion);
|
||||
bottle.decorator('ForServerVersion', connect([ 'selectedServer' ]));
|
||||
|
||||
bottle.serviceFactory('ServerError', () => ServerError);
|
||||
bottle.decorator('ServerError', connect([ 'servers' ]));
|
||||
|
||||
// Services
|
||||
bottle.constant('csvjson', csvjson);
|
||||
bottle.service('ServersImporter', ServersImporter, 'csvjson');
|
||||
|
|
Loading…
Reference in a new issue