Handled loading server in just one place, and added error handling for loading servers

src/common/MenuLayout.js

@@ -20,19 +20,30 @@ const propTypes = {
 const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions) => {
   const MenuLayoutComp = ({ match, location, selectedServer, selectServer }) => {
     const [ showSideBar, setShowSidebar ] = useState(false);
-
-    useEffect(() => {
     const { params: { serverId } } = match;
 
+    useEffect(() => {
       selectServer(serverId);
-    }, []);
+    }, [ serverId ]);
     useEffect(() => setShowSidebar(false), [ location ]);
 
     if (!selectedServer) {
       return <MutedMessage loading />;
     }
 
-    const { params: { serverId } } = match;
+    if (selectedServer.serverNotFound) {
+      return <MutedMessage>Could not find a server with id <b>&quot;{serverId}&quot;</b> in this host.</MutedMessage>;
+    }
+
+    if (selectedServer.serverNotReachable) {
+      return (
+        <MutedMessage>
+          Oops! Could not connect to Shlink server with ID <b>&quot;{serverId}&quot;</b>. Make sure you have internet
+          connection, the server is properly configured and it is on-line.
+        </MutedMessage>
+      );
+    }
+
     const burgerClasses = classNames('menu-layout__burger-icon', {
       'menu-layout__burger-icon--active': showSideBar,
     });

src/servers/ServersDropdown.js

@@ -8,7 +8,6 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
   static propTypes = {
     servers: PropTypes.object,
     selectedServer: serverType,
-    selectServer: PropTypes.func,
     listServers: PropTypes.func,
     history: PropTypes.shape({
       push: PropTypes.func,
@@ -16,14 +15,10 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
   };
 
   renderServers = () => {
-    const { servers: { list, loading }, selectedServer, selectServer } = this.props;
+    const { servers: { list, loading }, selectedServer } = this.props;
     const servers = values(list);
     const { push } = this.props.history;
-    const loadServer = (id) => {
+    const loadServer = (id) => push(`/server/${id}/list-short-urls/1`);
-      selectServer(id)
-        .then(() => push(`/server/${id}/list-short-urls/1`))
-        .catch(() => {});
-    };
 
     if (loading) {
       return <DropdownItem disabled><i>Trying to load servers...</i></DropdownItem>;
@@ -41,10 +36,7 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
           </DropdownItem>
         ))}
         <DropdownItem divider />
-        <DropdownItem
+        <DropdownItem className="servers-dropdown__export-item" onClick={() => serversExporter.exportServers()}>
-          className="servers-dropdown__export-item"
-          onClick={() => serversExporter.exportServers()}
-        >
           Export servers
         </DropdownItem>
       </React.Fragment>

src/servers/prop-types/index.js

@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
 
 export const serverType = PropTypes.shape({
-  id: PropTypes.string,
+  id: PropTypes.string.isRequired,
-  name: PropTypes.string,
+  name: PropTypes.string.isRequired,
-  url: PropTypes.string,
+  url: PropTypes.string.isRequired,
-  apiKey: PropTypes.string,
+  apiKey: PropTypes.string.isRequired,
   version: PropTypes.string,
   printableVersion: PropTypes.string,
+  serverNotFound: PropTypes.bool,
+  serverNotReachable: PropTypes.bool,
 });

src/servers/reducers/selectedServer.js

@@ -21,11 +21,22 @@ const versionToSemVer = pipe(
 export const resetSelectedServer = createAction(RESET_SELECTED_SERVER);
 
 export const selectServer = ({ findServerById }, buildShlinkApiClient) => (serverId) => async (dispatch) => {
+  dispatch(resetSelectedServer());
   dispatch(resetShortUrlParams());
-
   const selectedServer = findServerById(serverId);
+
+  if (!selectedServer) {
+    dispatch({
+      type: SELECT_SERVER,
+      selectedServer: { serverNotFound: true },
+    });
+
+    return;
+  }
+
+  try {
     const { health } = buildShlinkApiClient(selectedServer);
-  const { version } = await health().catch(() => MIN_FALLBACK_VERSION);
+    const { version } = await health();
 
     dispatch({
       type: SELECT_SERVER,
@@ -35,6 +46,12 @@ export const selectServer = ({ findServerById }, buildShlinkApiClient) => (serve
         printableVersion: versionToPrintable(version),
       },
     });
+  } catch (e) {
+    dispatch({
+      type: SELECT_SERVER,
+      selectedServer: { serverNotReachable: true },
+    });
+  }
 };
 
 export default handleActions({

src/servers/services/provideServices.js

@@ -18,7 +18,7 @@ const provideServices = (bottle, connect, withRouter) => {
 
   bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter');
   bottle.decorator('ServersDropdown', withRouter);
-  bottle.decorator('ServersDropdown', connect([ 'servers', 'selectedServer' ], [ 'listServers', 'selectServer' ]));
+  bottle.decorator('ServersDropdown', connect([ 'servers', 'selectedServer' ], [ 'listServers' ]));
 
   bottle.serviceFactory('DeleteServerModal', () => DeleteServerModal);
   bottle.decorator('DeleteServerModal', withRouter);