Added mechanism to provide a version to shlink-web-client

src/common/ShlinkVersions.js

@@ -1,17 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { pipe } from 'ramda';
 import { serverType } from '../servers/prop-types';
+import { versionToPrintable, versionToSemVer } from '../utils/versionHelpers';
+
+const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
 
 const propTypes = {
   selectedServer: serverType,
   className: PropTypes.string,
+  clientVersion: PropTypes.string,
 };
 
-const ShlinkVersions = ({ selectedServer, className }) => {
-  const { printableVersion } = selectedServer;
+const ShlinkVersions = ({ selectedServer, className, clientVersion = SHLINK_WEB_CLIENT_VERSION }) => {
+  const { printableVersion: serverVersion } = selectedServer;
+  const normalizedClientVersion = pipe(versionToSemVer(), versionToPrintable)(clientVersion);
 
-  return <small className={classNames('text-muted', className)}>Client: v2.3.1 / Server: {printableVersion}</small>;
+  return (
+    <small className={classNames('text-muted', className)}>
+      Client: <b>{normalizedClientVersion}</b> - Server: <b>{serverVersion}</b>
+    </small>
+  );
 };
 
 ShlinkVersions.propTypes = propTypes;

src/servers/helpers/ForServerVersion.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { compareVersions } from '../../utils/utils';
 import { serverType } from '../prop-types';
+import { compareVersions } from '../../utils/versionHelpers';
 
 const propTypes = {
   minVersion: PropTypes.string,

src/servers/reducers/selectedServer.js

@@ -1,7 +1,7 @@
 import { createAction, handleActions } from 'redux-actions';
 import { pipe } from 'ramda';
 import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
-import { versionIsValidSemVer } from '../../utils/utils';
+import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/versionHelpers';
 
 /* eslint-disable padding-line-between-statements */
 export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
@@ -15,9 +15,8 @@ export const LATEST_VERSION_CONSTRAINT = 'latest';
 const initialState = null;
 const versionToSemVer = pipe(
   (version) => version === LATEST_VERSION_CONSTRAINT ? MAX_FALLBACK_VERSION : version,
-  (version) => !versionIsValidSemVer(version) ? MIN_FALLBACK_VERSION : version
+  toSemVer(MIN_FALLBACK_VERSION)
 );
-const versionToPrintable = (version) => !versionIsValidSemVer(version) ? version : `v${version}`;
 
 export const resetSelectedServer = createAction(RESET_SELECTED_SERVER);
 

src/short-urls/CreateShortUrl.js

@@ -7,7 +7,7 @@ import * as PropTypes from 'prop-types';
 import DateInput from '../utils/DateInput';
 import Checkbox from '../utils/Checkbox';
 import { serverType } from '../servers/prop-types';
-import { compareVersions } from '../utils/utils';
+import { compareVersions } from '../utils/versionHelpers';
 import { createShortUrlResultType } from './reducers/shortUrlCreation';
 import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
 

src/utils/utils.js

@@ -2,9 +2,8 @@ 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 { identity, memoizeWith, range } from 'ramda';
+import { range } from 'ramda';
 import { useState } from 'react';
-import { compare } from 'compare-versions';
 
 const TEN_ROUNDING_NUMBER = 10;
 const DEFAULT_TIMEOUT_DELAY = 2000;
@@ -53,20 +52,6 @@ export const useToggle = (initialValue = false) => {
   return [ flag, () => setFlag(!flag) ];
 };
 
-export const compareVersions = (firstVersion, operator, secondVersion) => compare(
-  firstVersion,
-  secondVersion,
-  operator
-);
-
-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;
 
 export const formatIsoDate = (date) => date && date.format ? date.format() : date;

src/utils/versionHelpers.js

@@ -0,0 +1,21 @@
+import { compare } from 'compare-versions';
+import { identity, memoizeWith } from 'ramda';
+
+export const compareVersions = (firstVersion, operator, secondVersion) => compare(
+  firstVersion,
+  secondVersion,
+  operator,
+);
+
+const versionIsValidSemVer = memoizeWith(identity, (version) => {
+  try {
+    return compareVersions(version, '=', version);
+  } catch (e) {
+    return false;
+  }
+});
+
+export const versionToPrintable = (version) => !versionIsValidSemVer(version) ? version : `v${version}`;
+
+export const versionToSemVer = (defaultValue = 'latest') =>
+  (version) => versionIsValidSemVer(version) ? version : defaultValue;