mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added shlink versions to side menu

Browse source
This commit is contained in:
Alejandro Celaya 2020-03-05 11:11:26 +01:00
parent b02dcf6c53
commit 1e949b3a22
13 changed files with 110 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/common/AsideMenu.js
View file

@ -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>

20
src/common/MenuLayout.js
View file

@ -61,15 +61,17 @@ 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)}>
<Switch>
<Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
<Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
<Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
<Route exact path="/server/:serverId/manage-tags" component={TagsList} />
<Route
render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />}
/>
</Switch>
<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} />
<Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
<Route exact path="/server/:serverId/manage-tags" component={TagsList} />
<Route
render={() => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />}
/>
</Switch>
</div>
</div>
</div>
</Swipeable>

9
src/common/ShlinkVersions.js
View file

@ -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 { version } = selectedServer;
const ShlinkVersions = ({ selectedServer, className }) => {
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;

2
src/common/services/provideServices.js
View file

@ -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' ]));

4
src/servers/DeleteServerButton.js
View file

@ -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)}

1
src/servers/prop-types/index.js
View file

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

14
src/servers/reducers/selectedServer.js
View file

@ -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()
.then(({ version }) => version === LATEST_VERSION_CONSTRAINT ? MAX_FALLBACK_VERSION : version)
.then((version) => !versionIsValidSemVer(version) ? MIN_FALLBACK_VERSION : version)
.catch(() => MIN_FALLBACK_VERSION);
const { version } = await health().catch(() => MIN_FALLBACK_VERSION);
dispatch({
type: SELECT_SERVER,
selectedServer: {
...selectedServer,
version,
version: versionToSemVer(version),
printableVersion: versionToPrintable(version),
},
});
};

2
src/servers/services/provideServices.js
View file

@ -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' ]));

138
src/short-urls/CreateShortUrl.js
View file

@ -77,83 +77,81 @@ const CreateShortUrl = (
const disableDomain = isEmpty(currentServerVersion) || compareVersions(currentServerVersion, '<', '1.19.0-beta.1');
return (
<div className="shlink-container">
<form onSubmit={save}>
<form onSubmit={save}>
<div className="form-group">
<input
className="form-control form-control-lg"
type="url"
placeholder="Insert the URL to be shortened"
required
value={this.state.longUrl}
onChange={(e) => this.setState({ longUrl: e.target.value })}
/>
</div>
<Collapse isOpen={this.state.moreOptionsVisible}>
<div className="form-group">
<input
className="form-control form-control-lg"
type="url"
placeholder="Insert the URL to be shortened"
required
value={this.state.longUrl}
onChange={(e) => this.setState({ longUrl: e.target.value })}
/>
<TagsSelector tags={this.state.tags} onChange={changeTags} />
</div>
<Collapse isOpen={this.state.moreOptionsVisible}>
<div className="form-group">
<TagsSelector tags={this.state.tags} onChange={changeTags} />
<div className="row">
<div className="col-sm-6">
{renderOptionalInput('customSlug', 'Custom slug')}
</div>
<div className="row">
<div className="col-sm-6">
{renderOptionalInput('customSlug', 'Custom slug')}
</div>
<div className="col-sm-6">
{renderOptionalInput('domain', 'Domain', 'text', {
disabled: disableDomain,
...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
})}
</div>
<div className="col-sm-6">
{renderOptionalInput('domain', 'Domain', 'text', {
disabled: disableDomain,
...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
})}
</div>
<div className="row">
<div className="col-sm-6">
{renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
</div>
<div className="col-sm-3">
{renderDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
</div>
<div className="col-sm-3">
{renderDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
</div>
</div>
<ForServerVersion minVersion="1.16.0">
<div className="mb-4 text-right">
<Checkbox
className="mr-2"
checked={this.state.findIfExists}
onChange={(findIfExists) => this.setState({ findIfExists })}
>
Use existing URL if found
</Checkbox>
<UseExistingIfFoundInfoIcon />
</div>
</ForServerVersion>
</Collapse>
<div>
<button
type="button"
className="btn btn-outline-secondary"
onClick={() => this.setState(({ moreOptionsVisible }) => ({ moreOptionsVisible: !moreOptionsVisible }))}
>
<FontAwesomeIcon icon={this.state.moreOptionsVisible ? upIcon : downIcon} />
&nbsp;
{this.state.moreOptionsVisible ? 'Less' : 'More'} options
</button>
<button
className="btn btn-outline-primary float-right"
disabled={shortUrlCreationResult.loading || isEmpty(this.state.longUrl)}
>
{shortUrlCreationResult.loading ? 'Creating...' : 'Create'}
</button>
</div>
<CreateShortUrlResult {...shortUrlCreationResult} resetCreateShortUrl={resetCreateShortUrl} />
</form>
</div>
<div className="row">
<div className="col-sm-6">
{renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
</div>
<div className="col-sm-3">
{renderDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
</div>
<div className="col-sm-3">
{renderDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
</div>
</div>
<ForServerVersion minVersion="1.16.0">
<div className="mb-4 text-right">
<Checkbox
className="mr-2"
checked={this.state.findIfExists}
onChange={(findIfExists) => this.setState({ findIfExists })}
>
Use existing URL if found
</Checkbox>
<UseExistingIfFoundInfoIcon />
</div>
</ForServerVersion>
</Collapse>
<div>
<button
type="button"
className="btn btn-outline-secondary"
onClick={() => this.setState(({ moreOptionsVisible }) => ({ moreOptionsVisible: !moreOptionsVisible }))}
>
<FontAwesomeIcon icon={this.state.moreOptionsVisible ? upIcon : downIcon} />
&nbsp;
{this.state.moreOptionsVisible ? 'Less' : 'More'} options
</button>
<button
className="btn btn-outline-primary float-right"
disabled={shortUrlCreationResult.loading || isEmpty(this.state.longUrl)}
>
{shortUrlCreationResult.loading ? 'Creating...' : 'Create'}
</button>
</div>
<CreateShortUrlResult {...shortUrlCreationResult} resetCreateShortUrl={resetCreateShortUrl} />
</form>
);
}
};

4
src/short-urls/ShortUrls.js
View file

@ -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>
);
};

4
src/tags/TagsList.js
View file

@ -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>
);
}
};

6
src/utils/utils.js
View file

@ -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;

4
src/visits/ShortUrlVisits.js
View file

@ -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>
);
}
};