diff --git a/src/common/ShlinkVersions.js b/src/common/ShlinkVersions.js
index c83e21cb..31cf5b02 100644
--- a/src/common/ShlinkVersions.js
+++ b/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 Client: v2.3.1 / Server: {printableVersion};
+ return (
+
+ Client: {normalizedClientVersion} - Server: {serverVersion}
+
+ );
};
ShlinkVersions.propTypes = propTypes;
diff --git a/src/servers/helpers/ForServerVersion.js b/src/servers/helpers/ForServerVersion.js
index e89eacfc..0d753f30 100644
--- a/src/servers/helpers/ForServerVersion.js
+++ b/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,
diff --git a/src/servers/reducers/selectedServer.js b/src/servers/reducers/selectedServer.js
index 095f9342..861fba85 100644
--- a/src/servers/reducers/selectedServer.js
+++ b/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);
diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js
index e8fe9742..39d02506 100644
--- a/src/short-urls/CreateShortUrl.js
+++ b/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';
diff --git a/src/utils/utils.js b/src/utils/utils.js
index da40702d..d3118236 100644
--- a/src/utils/utils.js
+++ b/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;
diff --git a/src/utils/versionHelpers.js b/src/utils/versionHelpers.js
new file mode 100644
index 00000000..92867939
--- /dev/null
+++ b/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;