Moved logic to dynamically render components based on server version to a separated component

src/servers/helpers/ForServerVersion.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compareVersions } from '../../utils/utils';
+import { serverType } from '../prop-types';
+
+const propTypes = {
+  minVersion: PropTypes.string,
+  maxVersion: PropTypes.string,
+  selectedServer: serverType,
+  children: PropTypes.node.isRequired,
+};
+
+const ForServerVersion = ({ minVersion, maxVersion, selectedServer, children }) => {
+  if (!selectedServer) {
+    return null;
+  }
+
+  const { version } = selectedServer;
+  const matchesMinVersion = !minVersion || compareVersions(version, '>=', minVersion);
+  const matchesMaxVersion = !maxVersion || compareVersions(version, '<=', maxVersion);
+
+  if (!matchesMinVersion || !matchesMaxVersion) {
+    return null;
+  }
+
+  return <React.Fragment>{children}</React.Fragment>;
+};
+
+ForServerVersion.propTypes = propTypes;
+
+export default ForServerVersion;

src/servers/prop-types/index.js

@@ -5,4 +5,5 @@ export const serverType = PropTypes.shape({
   name: PropTypes.string,
   url: PropTypes.string,
   apiKey: PropTypes.string,
+  version: PropTypes.string,
 });

src/servers/services/provideServices.js

@@ -6,6 +6,7 @@ import DeleteServerButton from '../DeleteServerButton';
 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 ServersImporter from './ServersImporter';
 import ServersService from './ServersService';
 import ServersExporter from './ServersExporter';
@@ -28,6 +29,9 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
   bottle.decorator('ImportServersBtn', connect(null, [ 'createServers' ]));
 
+  bottle.serviceFactory('ForServerVersion', () => ForServerVersion);
+  bottle.decorator('ForServerVersion', connect([ 'selectedServer' ]));
+
   // Services
   bottle.constant('csvjson', csvjson);
   bottle.service('ServersImporter', ServersImporter, 'csvjson');