shlink-web-client/src/servers/helpers/ServerError.tsx

import { FC } from 'react';
import { Link } from 'react-router-dom';
import Message from '../../utils/Message';
import ServersListGroup from '../ServersListGroup';
import { DeleteServerButtonProps } from '../DeleteServerButton';
import { isServerWithId, SelectedServer, ServersMap } from '../data';
import NoMenuLayout from '../../common/NoMenuLayout';
import './ServerError.scss';

interface ServerErrorProps {
  servers: ServersMap;
  selectedServer: SelectedServer;
}

export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC<ServerErrorProps> => (
  { servers, selectedServer },
) => (
  <NoMenuLayout>
    <div className="server-error__container flex-column">
      <div className="row w-100 mb-3 mb-md-5">
        <Message type="error" fullWidth noMargin>
          {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
          {isServerWithId(selectedServer) && (
            <>
              <p>Oops! Could not connect to this Shlink server.</p>
              Make sure you have internet connection, and the server is properly configured and on-line.
            </>
          )}
        </Message>
      </div>

      <ServersListGroup servers={Object.values(servers)}>
        These are the Shlink servers currently configured. Choose one of
        them or <Link to="/server/create">add a new one</Link>.
      </ServersListGroup>

      {isServerWithId(selectedServer) && (
        <div className="container mt-3 mt-md-5">
          <h5>
            Alternatively, if you think you may have miss-configured this server, you
            can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
            <Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
          </h5>
        </div>
      )}
    </div>
  </NoMenuLayout>
);