Added shlink versions to side menu

src/common/AsideMenu.js

@@ -24,7 +24,7 @@ const propTypes = {
   showOnMobile: PropTypes.bool,
 };
 
-const AsideMenu = (DeleteServerButton, ShlinkVersions) => {
+const AsideMenu = (DeleteServerButton) => {
   const AsideMenu = ({ selectedServer, className, showOnMobile }) => {
     const serverId = selectedServer ? selectedServer.id : '';
     const asideClass = classNames('aside-menu', className, {
@@ -49,7 +49,6 @@ const AsideMenu = (DeleteServerButton, ShlinkVersions) => {
             <span className="aside-menu__item-text">Manage tags</span>
           </AsideMenuItem>
 
-          <ShlinkVersions />
           <DeleteServerButton className="aside-menu__item aside-menu__item--danger" server={selectedServer} />
         </nav>
       </aside>

src/common/MenuLayout.js

@@ -61,6 +61,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
           <div className="row menu-layout__swipeable-inner">
             <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={showSideBar} />
             <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => setShowSidebar(false)}>
+              <div className="shlink-container">
                 <Switch>
                   <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
                   <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
@@ -72,6 +73,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
                 </Switch>
               </div>
             </div>
+          </div>
         </Swipeable>
       </React.Fragment>
     );

src/common/ShlinkVersions.js

@@ -1,14 +1,17 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { serverType } from '../servers/prop-types';
 
 const propTypes = {
   selectedServer: serverType,
+  className: PropTypes.string,
 };
 
-const ShlinkVersions = ({ selectedServer }) => {
+const ShlinkVersions = ({ selectedServer, className }) => {
-  const { version } = selectedServer;
+  const { printableVersion } = selectedServer;
 
-  return <span>Server: v{version}</span>;
+  return <small className={classNames('text-muted', className)}>Client: v2.3.1 / Server: {printableVersion}</small>;
 };
 
 ShlinkVersions.propTypes = propTypes;

src/common/services/provideServices.js

@@ -31,7 +31,7 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
   bottle.decorator('MenuLayout', withRouter);
 
-  bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton', 'ShlinkVersions');
+  bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
 
   bottle.serviceFactory('ShlinkVersions', () => ShlinkVersions);
   bottle.decorator('ShlinkVersions', connect([ 'selectedServer' ]));

src/servers/DeleteServerButton.js

@@ -9,7 +9,7 @@ const propTypes = {
   className: PropTypes.string,
 };
 
-const DeleteServerButton = (DeleteServerModal) => {
+const DeleteServerButton = (DeleteServerModal, ShlinkVersions) => {
   const DeleteServerButtonComp = ({ server, className }) => {
     const [ isModalOpen, setModalOpen ] = useState(false);
 
@@ -20,6 +20,8 @@ const DeleteServerButton = (DeleteServerModal) => {
           <span className="aside-menu__item-text">Remove this server</span>
         </span>
 
+        <ShlinkVersions className="mt-2 pl-2" />
+
         <DeleteServerModal
           isOpen={isModalOpen}
           toggle={() => setModalOpen(!isModalOpen)}

src/servers/prop-types/index.js

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

src/servers/reducers/selectedServer.js

@@ -1,4 +1,5 @@
 import { createAction, handleActions } from 'redux-actions';
+import { pipe } from 'ramda';
 import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
 import { versionIsValidSemVer } from '../../utils/utils';
 
@@ -12,6 +13,11 @@ export const LATEST_VERSION_CONSTRAINT = 'latest';
 /* eslint-enable padding-line-between-statements */
 
 const initialState = null;
+const versionToSemVer = pipe(
+  (version) => version === LATEST_VERSION_CONSTRAINT ? MAX_FALLBACK_VERSION : version,
+  (version) => !versionIsValidSemVer(version) ? MIN_FALLBACK_VERSION : version
+);
+const versionToPrintable = (version) => !versionIsValidSemVer(version) ? version : `v${version}`;
 
 export const resetSelectedServer = createAction(RESET_SELECTED_SERVER);
 
@@ -20,16 +26,14 @@ export const selectServer = ({ findServerById }, buildShlinkApiClient) => (serve
 
   const selectedServer = findServerById(serverId);
   const { health } = buildShlinkApiClient(selectedServer);
-  const version = await health()
+  const { version } = await health().catch(() => MIN_FALLBACK_VERSION);
-    .then(({ version }) => version === LATEST_VERSION_CONSTRAINT ? MAX_FALLBACK_VERSION : version)
-    .then((version) => !versionIsValidSemVer(version) ? MIN_FALLBACK_VERSION : version)
-    .catch(() => MIN_FALLBACK_VERSION);
 
   dispatch({
     type: SELECT_SERVER,
     selectedServer: {
       ...selectedServer,
-      version,
+      version: versionToSemVer(version),
+      printableVersion: versionToPrintable(version),
     },
   });
 };

src/servers/services/provideServices.js

@@ -24,7 +24,7 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.decorator('DeleteServerModal', withRouter);
   bottle.decorator('DeleteServerModal', connect(null, [ 'deleteServer' ]));
 
-  bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal');
+  bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal', 'ShlinkVersions');
 
   bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
   bottle.decorator('ImportServersBtn', connect(null, [ 'createServers' ]));

src/short-urls/CreateShortUrl.js

@@ -77,7 +77,6 @@ const CreateShortUrl = (
     const disableDomain = isEmpty(currentServerVersion) || compareVersions(currentServerVersion, '<', '1.19.0-beta.1');
 
     return (
-      <div className="shlink-container">
       <form onSubmit={save}>
         <div className="form-group">
           <input
@@ -153,7 +152,6 @@ const CreateShortUrl = (
 
         <CreateShortUrlResult {...shortUrlCreationResult} resetCreateShortUrl={resetCreateShortUrl} />
       </form>
-      </div>
     );
   }
 };

src/short-urls/ShortUrls.js

@@ -19,11 +19,11 @@ const ShortUrls = (SearchBar, ShortUrlsList) => {
     const urlsListKey = `${serverId}_${page}`;
 
     return (
-      <div className="shlink-container">
+      <React.Fragment>
         <div className="form-group"><SearchBar /></div>
         <ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
         <Paginator paginator={pagination} serverId={serverId} />
-      </div>
+      </React.Fragment>
     );
   };
 

src/tags/TagsList.js

@@ -69,14 +69,14 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
     const { filterTags } = this.props;
 
     return (
-      <div className="shlink-container">
+      <React.Fragment>
         {!this.props.tagsList.loading &&
           <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />
         }
         <div className="row">
           {this.renderContent()}
         </div>
-      </div>
+      </React.Fragment>
     );
   }
 };

src/utils/utils.js

@@ -2,7 +2,7 @@ import L from 'leaflet';
 import marker2x from 'leaflet/dist/images/marker-icon-2x.png';
 import marker from 'leaflet/dist/images/marker-icon.png';
 import markerShadow from 'leaflet/dist/images/marker-shadow.png';
-import { range } from 'ramda';
+import { identity, memoizeWith, range } from 'ramda';
 import { useState } from 'react';
 import { compare } from 'compare-versions';
 
@@ -59,13 +59,13 @@ export const compareVersions = (firstVersion, operator, secondVersion) => compar
   operator
 );
 
-export const versionIsValidSemVer = (version) => {
+export const versionIsValidSemVer = memoizeWith(identity, (version) => {
   try {
     return compareVersions(version, '=', version);
   } catch (e) {
     return false;
   }
-};
+});
 
 export const formatDate = (format = 'YYYY-MM-DD') => (date) => date && date.format ? date.format(format) : date;
 

src/visits/ShortUrlVisits.js

@@ -133,7 +133,7 @@ const ShortUrlVisits = (
     const setDate = (dateField) => (date) => this.setState({ [dateField]: date }, this.loadVisits);
 
     return (
-      <div className="shlink-container">
+      <React.Fragment>
         <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />
 
         <section className="mt-4">
@@ -148,7 +148,7 @@ const ShortUrlVisits = (
         <section>
           {renderVisitsContent()}
         </section>
-      </div>
+      </React.Fragment>
     );
   }
 };