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

Merge pull request #332 from acelaya-forks/feature/update-deps

Browse source 
Feature/update deps
This commit is contained in:
Alejandro Celaya 2020-11-14 12:21:49 +01:00 committed by GitHub
commit dafebc3df9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
146 changed files with 12198 additions and 7381 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc
View file

@ -23,6 +23,7 @@
}],
"no-mixed-operators": "off",
"react/display-name": "off",
"react/react-in-jsx-scope": "off",
"@typescript-eslint/require-array-sort-compare": "off"
}
}

4
.github/workflows/docker-image-build.yml vendored
View file

@ -22,7 +22,7 @@ jobs:
- name: Login to docker hub
uses: docker/login-action@v1
with:
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
username: ${{ secrets.DOCKER_HUB_USERNAME }}
password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
- name: Build the image
run: bash ./scripts/docker/build

1
.travis.yml
View file

@ -16,6 +16,7 @@ node_js:
jobs:
fast_finish: true
allow_failures:
- name: 'Lint'
- name: 'Mutation tests'
include:

17
CHANGELOG.md
View file

@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
## [Unreleased]
### Added
* *Nothing*
### Changed
* [#325](https://github.com/shlinkio/shlink-web-client/issues/325) and [#294](https://github.com/shlinkio/shlink-web-client/issues/294) Updated all dependencies, including React 17, Typescript 4, react-datepicker 3 and Stryker 4.
### Deprecated
* *Nothing*
### Removed
* *Nothing*
### Fixed
* [#334](https://github.com/shlinkio/shlink-web-client/issues/334) Fixed color-picker making the app crash when closing the modal without closing the color-picker, and then trying to open the modal again.
## [2.6.1] - 2020-10-31
### Added
* *Nothing*

2
config/setupEnzyme.js
View file

@ -1,4 +1,4 @@
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
Enzyme.configure({ adapter: new Adapter() });

20
config/webpack.config.js
View file

@ -13,7 +13,6 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
@ -611,25 +610,6 @@ module.exports = (webpackEnv) => {
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [ /\.map$/, /asset-manifest\.json$/ ],
importWorkboxFrom: 'cdn',
navigateFallback: `${publicUrl}/index.html`,
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude URLs containing a dot, as they're likely a resource in
// public/ and not a SPA route
new RegExp('/[^/]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({

2
config/webpackDevServer.config.js
View file

@ -110,7 +110,7 @@ module.exports = function(proxy, allowedHost) {
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
app.use(noopServiceWorkerMiddleware());
app.use(noopServiceWorkerMiddleware(paths.publicUrl));
},
};
};

18966
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

189
package.json
View file

@ -17,147 +17,148 @@
"test": "node scripts/test.js --env=jsdom --colors",
"test:ci": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
"test:pretty": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html",
"mutate": "./node_modules/.bin/stryker run",
"mutate": "./node_modules/.bin/stryker run --concurrency 4",
"mutate:ci": "npm run mutate -- --mutate=$MUTATION_FILES"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.14.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-regular-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"array-filter": "^1.0.0",
"array-map": "^0.0.0",
"array-reduce": "^0.0.0",
"axios": "^0.20.0",
"bootstrap": "^4.5.2",
"@fortawesome/fontawesome-free": "^5.15.1",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.12",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"bottlejs": "^2.0.0",
"bowser": "^2.10.0",
"chart.js": "^2.9.3",
"bowser": "^2.11.0",
"chart.js": "^2.9.4",
"classnames": "^2.2.6",
"compare-versions": "^3.6.0",
"csvjson": "^5.1.0",
"event-source-polyfill": "^1.0.17",
"event-source-polyfill": "^1.0.21",
"leaflet": "^1.7.1",
"moment": "^2.27.0",
"promise": "^8.0.3",
"moment": "^2.29.1",
"promise": "^8.1.0",
"qs": "^6.9.4",
"ramda": "^0.27.1",
"react": "^16.13.1",
"react-autosuggest": "^10.0.2",
"react-chartjs-2": "^2.10.0",
"react-color": "^2.18.1",
"react": "^17.0.1",
"react-autosuggest": "^10.0.3",
"react-chartjs-2": "^2.11.1",
"react-color": "^2.19.3",
"react-copy-to-clipboard": "^5.0.2",
"react-datepicker": "~1.5.0",
"react-dom": "^16.13.1",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-external-link": "^1.1.1",
"react-leaflet": "^2.7.0",
"react-moment": "^0.9.7",
"react-redux": "^7.2.1",
"react-leaflet": "^3.0.2",
"react-moment": "^1.0.0",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-swipeable": "^5.5.1",
"react-swipeable": "^6.0.0",
"react-tagsinput": "^3.19.0",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-localstorage-simple": "^2.2.0",
"reactstrap": "^8.7.1",
"redux": "^4.0.5",
"redux-localstorage-simple": "^2.3.1",
"redux-thunk": "^2.3.0",
"uuid": "^3.3.3"
"uuid": "^8.3.1"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.12.1",
"@shlinkio/eslint-config-js-coding-standard": "~1.1.0",
"@stryker-mutator/core": "^3.2.4",
"@stryker-mutator/typescript": "^3.2.4",
"@stryker-mutator/jest-runner": "^3.2.4",
"@svgr/webpack": "^4.3.3",
"@types/chart.js": "^2.9.24",
"@types/classnames": "^2.2.10",
"@types/enzyme": "^3.10.5",
"@types/jest": "^26.0.10",
"@types/leaflet": "^1.5.17",
"@stryker-mutator/core": "^4.1.2",
"@stryker-mutator/jest-runner": "^4.1.2",
"@stryker-mutator/typescript-checker": "^4.1.2",
"@svgr/webpack": "^5.4.0",
"@types/chart.js": "^2.9.27",
"@types/classnames": "^2.2.11",
"@types/enzyme": "^3.10.8",
"@types/jest": "^26.0.15",
"@types/leaflet": "^1.5.19",
"@types/moment": "^2.13.0",
"@types/qs": "^6.9.4",
"@types/ramda": "^0.27.14",
"@types/react": "^16.9.46",
"@types/react-autosuggest": "^10.0.0",
"@types/react-color": "^2.17.4",
"@types/qs": "^6.9.5",
"@types/ramda": "^0.27.32",
"@types/react": "^16.9.56",
"@types/react-autosuggest": "^10.0.1",
"@types/react-color": "^3.0.4",
"@types/react-copy-to-clipboard": "^4.3.0",
"@types/react-datepicker": "~1.8.0",
"@types/react-dom": "^16.9.8",
"@types/react-datepicker": "^3.1.1",
"@types/react-dom": "^16.9.9",
"@types/react-leaflet": "^2.5.2",
"@types/react-redux": "^7.1.9",
"@types/react-router-dom": "^5.1.5",
"@types/react-redux": "^7.1.11",
"@types/react-router-dom": "^5.1.6",
"@types/react-tagsinput": "^3.19.7",
"@types/reactstrap": "^8.5.1",
"@types/uuid": "^8.3.0",
"adm-zip": "^0.4.13",
"autoprefixer": "^9.6.3",
"@typescript-eslint/parser": "^4.7.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
"adm-zip": "^0.4.16",
"autoprefixer": "^10.0.2",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^26.3.0",
"babel-loader": "^8.0.6",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-preset-react-app": "^9.0.2",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.1",
"babel-plugin-named-asset-import": "^0.3.7",
"babel-preset-react-app": "^10.0.0",
"babel-runtime": "^6.26.0",
"bfj": "^7.0.1",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"chalk": "^2.4.2",
"css-loader": "^3.2.0",
"bfj": "^7.0.2",
"case-sensitive-paths-webpack-plugin": "^2.3.0",
"chalk": "^4.1.0",
"css-loader": "^5.0.1",
"dart-sass": "^1.25.0",
"dotenv": "^8.1.0",
"dotenv": "^8.2.0",
"dotenv-expand": "^5.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.2",
"file-loader": "^4.2.0",
"eslint": "^7.13.0",
"eslint-loader": "^4.0.2",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin-alt": "^0.4.14",
"fs-extra": "^8.1.0",
"html-webpack-plugin": "^4.0.0-beta.8",
"fs-extra": "^9.0.1",
"html-webpack-plugin": "^4.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.4.2",
"jest": "^26.6.3",
"jest-pnp-resolver": "^1.2.2",
"jest-resolve": "^26.4.0",
"mini-css-extract-plugin": "^0.8.0",
"jest-resolve": "^26.6.2",
"mini-css-extract-plugin": "^1.3.1",
"object-assign": "^4.1.1",
"ocular.js": "^0.1.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"pnp-webpack-plugin": "^1.5.0",
"postcss": "^7.0.18",
"postcss-flexbugs-fixes": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"pnp-webpack-plugin": "^1.6.4",
"postcss": "^8.1.7",
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"postcss-safe-parser": "^4.0.1",
"postcss-safe-parser": "^5.0.2",
"raf": "^3.4.1",
"react-app-polyfill": "^1.0.6",
"react-dev-utils": "^9.1.0",
"resolve": "^1.12.0",
"sass": "^1.28.0",
"sass-loader": "^10.0.2",
"react-app-polyfill": "^2.0.0",
"react-dev-utils": "^11.0.0",
"resolve": "^1.19.0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"serve": "^11.3.2",
"stryker-cli": "^1.0.0",
"style-loader": "^1.2.1",
"stylelint": "^13.7.0",
"style-loader": "^2.0.0",
"stylelint": "^13.7.2",
"stylelint-config-adidas": "^1.3.0",
"stylelint-config-adidas-bem": "^1.2.0",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-scss": "^3.18.0",
"sw-precache-webpack-plugin": "^0.11.5",
"terser-webpack-plugin": "^2.1.2",
"ts-jest": "^26.3.0",
"sw-precache-webpack-plugin": "^1.0.0",
"terser-webpack-plugin": "^4.2.3",
"ts-jest": "^26.4.4",
"ts-mockery": "^1.2.0",
"typescript": "^3.9.7",
"url-loader": "^2.2.0",
"webpack": "^4.41.0",
"webpack-dev-server": "^3.8.2",
"typescript": "^4.0.5",
"url-loader": "^4.1.1",
"webpack": "^4.44.2",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "^2.2.0",
"whatwg-fetch": "^3.0.0",
"workbox-webpack-plugin": "^4.3.1"
"whatwg-fetch": "^3.5.0"
},
"babel": {
"presets": [
"react-app"
[
"react-app",
{
"runtime": "automatic"
}
]
],
"plugins": [
"@babel/plugin-proposal-optional-chaining",

2
src/App.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, FC } from 'react';
import { useEffect, FC } from 'react';
import { Route, Switch } from 'react-router-dom';
import NotFound from './common/NotFound';
import { ServersMap } from './servers/data';

2
src/common/AsideMenu.tsx
View file

@ -5,7 +5,7 @@ import {
faPen as editIcon,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { FC } from 'react';
import { FC } from 'react';
import { NavLink, NavLinkProps } from 'react-router-dom';
import classNames from 'classnames';
import { Location } from 'history';

4
src/common/ErrorHandler.tsx
View file

@ -1,4 +1,4 @@
import React, { ReactNode } from 'react';
import { Component, ReactNode } from 'react';
import { Button } from 'reactstrap';
import './ErrorHandler.scss';
@ -9,7 +9,7 @@ interface ErrorHandlerState {
const ErrorHandler = (
{ location }: Window,
{ error }: Console,
) => class ErrorHandler extends React.Component<any, ErrorHandlerState> {
) => class ErrorHandler extends Component<any, ErrorHandlerState> {
public constructor(props: object) {
super(props);
this.state = { hasError: false };

1
src/common/Home.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { isEmpty, values } from 'ramda';
import { Link } from 'react-router-dom';
import ServersListGroup from '../servers/ServersListGroup';

2
src/common/MainHeader.tsx
View file

@ -1,6 +1,6 @@
import { faPlus as plusIcon, faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { FC, useEffect } from 'react';
import { FC, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import classNames from 'classnames';

24
src/common/MenuLayout.tsx
View file

@ -1,6 +1,6 @@
import React, { FC, useEffect } from 'react';
import { FC, useEffect } from 'react';
import { Route, Switch } from 'react-router-dom';
import { EventData, Swipeable } from 'react-swipeable';
import { useSwipeable } from 'react-swipeable';
import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
@ -33,7 +33,7 @@ const MenuLayout = (
const burgerClasses = classNames('menu-layout__burger-icon', {
'menu-layout__burger-icon--active': sidebarVisible,
});
const swipeMenuIfNoModalExists = (callback: () => void) => (e: EventData) => {
const swipeMenuIfNoModalExists = (callback: () => void) => (e: any) => {
const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
({ classList }) => classList?.contains('visits-table'),
);
@ -44,17 +44,17 @@ const MenuLayout = (
callback();
};
const swipeableProps = useSwipeable({
delta: 40,
onSwipedLeft: swipeMenuIfNoModalExists(hideSidebar),
onSwipedRight: swipeMenuIfNoModalExists(showSidebar),
});
return (
<React.Fragment>
<>
<FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
<Swipeable
delta={40}
className="menu-layout__swipeable"
onSwipedLeft={swipeMenuIfNoModalExists(hideSidebar)}
onSwipedRight={swipeMenuIfNoModalExists(showSidebar)}
>
<div {...swipeableProps} className="menu-layout__swipeable">
<div className="row menu-layout__swipeable-inner">
<AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
<div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
@ -72,8 +72,8 @@ const MenuLayout = (
</div>
</div>
</div>
</Swipeable>
</React.Fragment>
</div>
</>
);
}, ServerError);

2
src/common/NoMenuLayout.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import './NoMenuLayout.scss';
const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper">{children}</div>;

2
src/common/NotFound.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { Link } from 'react-router-dom';
interface NotFoundProps {

4
src/common/ScrollToTop.tsx
View file

@ -1,4 +1,4 @@
import React, { PropsWithChildren, useEffect } from 'react';
import { PropsWithChildren, useEffect } from 'react';
import { RouteComponentProps } from 'react-router';
const ScrollToTop = () => ({ location, children }: PropsWithChildren<RouteComponentProps>) => {
@ -6,7 +6,7 @@ const ScrollToTop = () => ({ location, children }: PropsWithChildren<RouteCompon
scrollTo(0, 0);
}, [ location ]);
return <React.Fragment>{children}</React.Fragment>;
return <>{children}</>;
};
export default ScrollToTop;

3
src/common/ShlinkVersions.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import classNames from 'classnames';
import { pipe } from 'ramda';
import { ExternalLink } from 'react-external-link';
@ -28,7 +27,7 @@ const ShlinkVersions = (
return (
<small className={classNames('text-muted', className)}>
{isReachableServer(selectedServer) &&
<React.Fragment>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </React.Fragment>
<>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </>
}
Client: <VersionLink project="shlink-web-client" version={normalizedClientVersion} />
</small>

2
src/common/SimplePaginator.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import classNames from 'classnames';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import {

1
src/index.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

2
src/mercure/helpers/boundToMercureHub.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useEffect } from 'react';
import { FC, useEffect } from 'react';
import { pipe } from 'ramda';
import { CreateVisit } from '../../visits/types';
import { MercureInfo } from '../reducers/mercureInfo';

2
src/servers/CreateServer.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { v4 as uuid } from 'uuid';
import { RouterProps } from 'react-router';
import classNames from 'classnames';

6
src/servers/DeleteServerButton.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useToggle } from '../utils/helpers/hooks';
@ -17,14 +17,14 @@ const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>): FC<D
const [ isModalOpen, , showModal, hideModal ] = useToggle();
return (
<React.Fragment>
<>
<span className={className} onClick={showModal}>
{!children && <FontAwesomeIcon icon={deleteIcon} />}
<span className={textClassName}>{children ?? 'Remove this server'}</span>
</span>
<DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} />
</React.Fragment>
</>
);
};

1
src/servers/DeleteServerModal.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { RouterProps } from 'react-router';
import { ServerWithId } from './data';

2
src/servers/EditServer.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { Button } from 'reactstrap';
import NoMenuLayout from '../common/NoMenuLayout';
import { ServerForm } from './helpers/ServerForm';

5
src/servers/ServersDropdown.tsx
View file

@ -1,5 +1,4 @@
import { isEmpty, values } from 'ramda';
import React from 'react';
import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
import { Link } from 'react-router-dom';
import ServersExporter from './services/ServersExporter';
@ -19,7 +18,7 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
}
return (
<React.Fragment>
<>
{serversList.map(({ name, id }) => (
<DropdownItem
key={id}
@ -34,7 +33,7 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
<DropdownItem className="servers-dropdown__export-item" onClick={async () => serversExporter.exportServers()}>
Export servers
</DropdownItem>
</React.Fragment>
</>
);
};

8
src/servers/ServersListGroup.tsx
View file

@ -1,10 +1,10 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
import './ServersListGroup.scss';
import { ServerWithId } from './data';
import './ServersListGroup.scss';
interface ServersListGroup {
servers: ServerWithId[];
@ -18,7 +18,7 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
);
const ServersListGroup: FC<ServersListGroup> = ({ servers, children }) => (
<React.Fragment>
<>
<div className="container">
<h5>{children}</h5>
</div>
@ -27,7 +27,7 @@ const ServersListGroup: FC<ServersListGroup> = ({ servers, children }) => (
{servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
</ListGroup>
)}
</React.Fragment>
</>
);
export default ServersListGroup;

4
src/servers/helpers/ForServerVersion.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { versionMatch, Versions } from '../../utils/helpers/version';
import { isReachableServer, SelectedServer } from '../data';
@ -18,7 +18,7 @@ const ForServerVersion: FC<ForServerVersionProps> = ({ minVersion, maxVersion, s
return null;
}
return <React.Fragment>{children}</React.Fragment>;
return <>{children}</>;
};
export default ForServerVersion;

6
src/servers/helpers/ImportServersBtn.tsx
View file

@ -1,4 +1,4 @@
import React, { useRef, RefObject, ChangeEvent, MutableRefObject } from 'react';
import { useRef, RefObject, ChangeEvent, MutableRefObject } from 'react';
import { UncontrolledTooltip } from 'reactstrap';
import ServersImporter from '../services/ServersImporter';
import { ServerData } from '../data';
@ -33,7 +33,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
.catch(onImportError);
return (
<React.Fragment>
<>
<button
type="button"
className="btn btn-outline-secondary mr-2"
@ -47,7 +47,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
</UncontrolledTooltip>
<input type="file" accept="text/csv" className="create-server__csv-select" ref={ref} onChange={onChange} />
</React.Fragment>
</>
);
};

6
src/servers/helpers/ServerError.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { Link } from 'react-router-dom';
import Message from '../../utils/Message';
import ServersListGroup from '../ServersListGroup';
@ -19,10 +19,10 @@ export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC
<Message type="error">
{!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
{isServerWithId(selectedServer) && (
<React.Fragment>
<>
<p>Oops! Could not connect to this Shlink server.</p>
Make sure you have internet connection, and the server is properly configured and on-line.
</React.Fragment>
</>
)}
</Message>
</div>

2
src/servers/helpers/ServerForm.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useEffect, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
import { handleEventPreventingDefault } from '../../utils/utils';
import { ServerData } from '../data';

2
src/servers/helpers/withSelectedServer.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useEffect } from 'react';
import { FC, useEffect } from 'react';
import { RouteComponentProps } from 'react-router';
import Message from '../../utils/Message';
import { isNotFoundServer, SelectedServer } from '../data';

2
src/servers/helpers/withoutSelectedServer.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useEffect } from 'react';
import { FC, useEffect } from 'react';
interface WithoutSelectedServerProps {
resetSelectedServer: Function;

1
src/settings/RealTimeUpdates.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Card, CardBody, CardHeader, FormGroup, Input } from 'reactstrap';
import classNames from 'classnames';
import ToggleSwitch from '../utils/ToggleSwitch';

2
src/settings/Settings.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import NoMenuLayout from '../common/NoMenuLayout';
const Settings = (RealTimeUpdates: FC) => () => (

2
src/short-urls/CreateShortUrl.tsx
View file

@ -1,7 +1,7 @@
import { faAngleDoubleDown as downIcon, faAngleDoubleUp as upIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isEmpty, pipe, replace, trim } from 'ramda';
import React, { FC, useState } from 'react';
import { FC, useState } from 'react';
import { Collapse, FormGroup, Input } from 'reactstrap';
import { InputType } from 'reactstrap/lib/Input';
import * as m from 'moment';

1
src/short-urls/Paginator.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import { pageIsEllipsis, keyForPage, progressivePagination, prettifyPageNumber } from '../utils/helpers/pagination';

2
src/short-urls/SearchBar.tsx
View file

@ -1,6 +1,6 @@
import { faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { FC } from 'react';
import { FC } from 'react';
import { isEmpty, pipe } from 'ramda';
import moment from 'moment';
import SearchField from '../utils/SearchField';

6
src/short-urls/ShortUrls.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useEffect, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { ShlinkShortUrlsResponse } from '../utils/services/types';
import Paginator from './Paginator';
import { ShortUrlsListProps, WithList } from './ShortUrlsList';
@ -20,13 +20,13 @@ const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps & WithLis
}, [ serverId, page ]);
return (
<React.Fragment>
<>
<div className="form-group"><SearchBar /></div>
<div>
<ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
<Paginator paginator={pagination} serverId={serverId} />
</div>
</React.Fragment>
</>
);
};

6
src/short-urls/ShortUrlsList.tsx
View file

@ -1,7 +1,7 @@
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { head, isEmpty, keys, values } from 'ramda';
import React, { FC, useEffect, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import qs from 'qs';
import { RouteComponentProps } from 'react-router';
import SortingDropdown from '../utils/SortingDropdown';
@ -107,7 +107,7 @@ const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => boundToMercureHub
}, []);
return (
<React.Fragment>
<>
<div className="d-block d-md-none mb-3">
<SortingDropdown
items={SORTABLE_FIELDS}
@ -154,7 +154,7 @@ const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => boundToMercureHub
{renderShortUrls()}
</tbody>
</table>
</React.Fragment>
</>
);
}, () => 'https://shlink.io/new-visit');

5
src/short-urls/UseExistingIfFoundInfoIcon.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
@ -41,12 +40,12 @@ const UseExistingIfFoundInfoIcon = () => {
const [ isModalOpen, toggleModal ] = useToggle();
return (
<React.Fragment>
<>
<span title="What does this mean?">
<FontAwesomeIcon icon={infoIcon} style={{ cursor: 'pointer' }} onClick={toggleModal} />
</span>
<InfoModal isOpen={isModalOpen} toggle={toggleModal} />
</React.Fragment>
</>
);
};

2
src/short-urls/helpers/CreateShortUrlResult.tsx
View file

@ -1,7 +1,7 @@
import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isNil } from 'ramda';
import React, { useEffect } from 'react';
import { useEffect } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import { Card, CardBody, Tooltip } from 'reactstrap';
import { ShortUrlCreation } from '../reducers/shortUrlCreation';

2
src/short-urls/helpers/DeleteShortUrlModal.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { identity, pipe } from 'ramda';
import { ShortUrlDeletion } from '../reducers/shortUrlDeletion';

12
src/short-urls/helpers/EditMetaModal.tsx
View file

@ -1,4 +1,4 @@
import React, { ChangeEvent, useState } from 'react';
import { ChangeEvent, useState } from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
@ -17,10 +17,10 @@ interface EditMetaModalConnectProps extends ShortUrlModalProps {
editShortUrlMeta: (shortCode: string, domain: OptionalString, meta: Nullable<ShortUrlMeta>) => Promise<void>;
}
const dateOrUndefined = (shortUrl: ShortUrl | undefined, dateName: 'validSince' | 'validUntil') => {
const dateOrNull = (shortUrl: ShortUrl | undefined, dateName: 'validSince' | 'validUntil') => {
const date = shortUrl?.meta?.[dateName];
return date ? moment(date) : undefined;
return date ? moment(date) : null;
};
const EditMetaModal = (
@ -28,8 +28,8 @@ const EditMetaModal = (
) => {
const { saving, error } = shortUrlMeta;
const url = shortUrl && (shortUrl.shortUrl || '');
const [ validSince, setValidSince ] = useState(dateOrUndefined(shortUrl, 'validSince'));
const [ validUntil, setValidUntil ] = useState(dateOrUndefined(shortUrl, 'validUntil'));
const [ validSince, setValidSince ] = useState(dateOrNull(shortUrl, 'validSince'));
const [ validUntil, setValidUntil ] = useState(dateOrNull(shortUrl, 'validUntil'));
const [ maxVisits, setMaxVisits ] = useState(shortUrl?.meta?.maxVisits);
const close = pipe(resetShortUrlMeta, toggle);
@ -56,7 +56,7 @@ const EditMetaModal = (
selected={validSince}
maxDate={validUntil}
isClearable
onChange={setValidSince as any}
onChange={setValidSince}
/>
</FormGroup>
<FormGroup>

2
src/short-urls/helpers/EditShortUrlModal.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap';
import { ExternalLink } from 'react-external-link';
import { ShortUrlEdition } from '../reducers/shortUrlEdition';

2
src/short-urls/helpers/EditTagsModal.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useEffect, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { ExternalLink } from 'react-external-link';
import { ShortUrlTags } from '../reducers/shortUrlTags';

1
src/short-urls/helpers/PreviewModal.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
import { ExternalLink } from 'react-external-link';
import { ShortUrlModalProps } from '../data';

1
src/short-urls/helpers/QrCodeModal.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
import { ExternalLink } from 'react-external-link';
import { ShortUrlModalProps } from '../data';

6
src/short-urls/helpers/ShortUrlVisitsCount.tsx
View file

@ -1,4 +1,4 @@
import React, { useRef } from 'react';
import { useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { UncontrolledTooltip } from 'reactstrap';
@ -32,7 +32,7 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
const tooltipRef = useRef<HTMLElement | null>();
return (
<React.Fragment>
<>
<span className="indivisible">
{visitsLink}
<small
@ -50,7 +50,7 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
<UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="bottom">
This short URL will not accept more than <b>{prettifiedMaxVisits}</b> visits.
</UncontrolledTooltip>
</React.Fragment>
</>
);
};

2
src/short-urls/helpers/ShortUrlsRow.tsx
View file

@ -1,5 +1,5 @@
import { isEmpty } from 'ramda';
import React, { FC, useEffect, useRef } from 'react';
import { FC, useEffect, useRef } from 'react';
import Moment from 'react-moment';
import { ExternalLink } from 'react-external-link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

2
src/short-urls/helpers/ShortUrlsRowMenu.tsx
View file

@ -9,7 +9,7 @@ import {
faLink as linkIcon,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { FC } from 'react';
import { FC } from 'react';
import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
import { useToggle } from '../../utils/helpers/hooks';
import { ShortUrl, ShortUrlModalProps } from '../data';

2
src/short-urls/helpers/VisitStatsLink.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { Link } from 'react-router-dom';
import { isServerWithId, SelectedServer, ServerWithId } from '../../servers/data';
import { ShortUrl } from '../data';

2
src/tags/TagCard.tsx
View file

@ -1,7 +1,7 @@
import { Card, CardHeader, CardBody, Button, Collapse } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrash as deleteIcon, faPencilAlt as editIcon, faLink, faEye } from '@fortawesome/free-solid-svg-icons';
import React, { FC } from 'react';
import { FC } from 'react';
import { Link } from 'react-router-dom';
import { prettify } from '../utils/helpers/numbers';
import { useToggle } from '../utils/helpers/hooks';

10
src/tags/TagsList.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useEffect, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { splitEvery } from 'ramda';
import Message from '../utils/Message';
import SearchField from '../utils/SearchField';
@ -48,7 +48,7 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
return (
<React.Fragment>
<>
{tagsGroups.map((group, index) => (
<div key={index} className="col-md-6 col-xl-3">
{group.map((tag) => (
@ -63,17 +63,17 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
))}
</div>
))}
</React.Fragment>
</>
);
};
return (
<React.Fragment>
<>
{!tagsList.loading && <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />}
<div className="row">
{renderContent()}
</div>
</React.Fragment>
</>
);
}, () => 'https://shlink.io/new-visit');

1
src/tags/helpers/DeleteTagConfirmModal.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { TagDeletion } from '../reducers/tagDelete';
import { TagModalProps } from '../data';

6
src/tags/helpers/EditTagModal.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
import { ChromePicker } from 'react-color';
import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
@ -21,14 +21,14 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
) => {
const [ newTagName, setNewTagName ] = useState(tag);
const [ color, setColor ] = useState(getColorForKey(tag));
const [ showColorPicker, toggleColorPicker ] = useToggle();
const [ showColorPicker, toggleColorPicker, , hideColorPicker ] = useToggle();
const saveTag = handleEventPreventingDefault(async () => editTag(tag, newTagName, color)
.then(() => tagEdited(tag, newTagName, color))
.then(toggle)
.catch(() => {}));
return (
<Modal isOpen={isOpen} toggle={toggle} centered>
<Modal isOpen={isOpen} toggle={toggle} centered onClosed={hideColorPicker}>
<form onSubmit={saveTag}>
<ModalHeader toggle={toggle}>Edit tag</ModalHeader>
<ModalBody>

2
src/tags/helpers/Tag.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import ColorGenerator from '../../utils/services/ColorGenerator';
import './Tag.scss';

1
src/tags/helpers/TagBullet.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import ColorGenerator from '../../utils/services/ColorGenerator';
import './TagBullet.scss';

6
src/tags/helpers/TagsSelector.tsx
View file

@ -1,4 +1,4 @@
import React, { ChangeEvent, useEffect } from 'react';
import { ChangeEvent, useEffect } from 'react';
import TagsInput, { RenderInputProps, RenderTagProps } from 'react-tagsinput';
import Autosuggest, { ChangeEvent as AutoChangeEvent, SuggestionSelectedEventData } from 'react-autosuggest';
import ColorGenerator from '../../utils/services/ColorGenerator';
@ -50,10 +50,10 @@ const TagsSelector = (colorGenerator: ColorGenerator) => (
shouldRenderSuggestions={(value: string) => value.trim().length > 0}
getSuggestionValue={(suggestion) => suggestion}
renderSuggestion={(suggestion) => (
<React.Fragment>
<>
<TagBullet tag={suggestion} colorGenerator={colorGenerator} />
{suggestion}
</React.Fragment>
</>
)}
onSuggestionsFetchRequested={() => {}}
onSuggestionsClearRequested={() => {}}

2
src/utils/BooleanControl.tsx
View file

@ -1,4 +1,4 @@
import React, { ChangeEvent, FC } from 'react';
import { ChangeEvent, FC } from 'react';
import classNames from 'classnames';
import { v4 as uuid } from 'uuid';
import { identity } from 'ramda';

2
src/utils/Checkbox.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import BooleanControl, { BooleanControlProps } from './BooleanControl';
const Checkbox: FC<BooleanControlProps> = (props) => <BooleanControl type="checkbox" {...props} />;

35
src/utils/DateInput.tsx
View file

@ -1,26 +1,45 @@
import React, { Component, RefObject } from 'react';
import { isNil } from 'ramda';
import { useRef } from 'react';
import { isNil, dissoc } from 'ramda';
import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
import classNames from 'classnames';
import moment from 'moment';
import './DateInput.scss';
export interface DateInputProps extends ReactDatePickerProps {
ref?: RefObject<Component<ReactDatePickerProps> & { input: HTMLInputElement }>;
interface DatePropsInterface {
endDate?: moment.Moment | null;
maxDate?: moment.Moment | null;
minDate?: moment.Moment | null;
selected?: moment.Moment | null;
startDate?: moment.Moment | null;
onChange?: (date: moment.Moment | null) => void;
}
export type DateInputProps = DatePropsInterface & Omit<ReactDatePickerProps, keyof DatePropsInterface>;
const transformProps = (props: DateInputProps): ReactDatePickerProps => ({
...dissoc('ref', props),
endDate: props.endDate?.toDate(),
maxDate: props.maxDate?.toDate(),
minDate: props.minDate?.toDate(),
selected: props.selected?.toDate(),
startDate: props.startDate?.toDate(),
onChange: (date: Date | null) => props.onChange?.(date && moment(date)),
});
const DateInput = (props: DateInputProps) => {
const { className, isClearable, selected, ref = React.createRef() } = props;
const { className, isClearable, selected } = props;
const showCalendarIcon = !isClearable || isNil(selected);
const ref = useRef<{ input: HTMLInputElement }>();
return (
<div className="date-input-container">
<DatePicker
{...props}
{...transformProps(props)}
dateFormat="yyyy-MM-dd"
className={classNames('date-input-container__input form-control', className)}
dateFormat="YYYY-MM-DD"
readOnly
// @ts-expect-error
ref={ref}
/>
{showCalendarIcon && (

1
src/utils/DateRangeRow.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import moment from 'moment';
import DateInput from './DateInput';
import './DateRangeRow.scss';

2
src/utils/HorizontalFormGroup.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { v4 as uuid } from 'uuid';
import { InputType } from 'reactstrap/lib/Input';

2
src/utils/Message.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { Card } from 'reactstrap';
import classNames from 'classnames';
import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';

1
src/utils/PaginationDropdown.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
interface PaginationDropdownProps {

2
src/utils/SearchField.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch as searchIcon } from '@fortawesome/free-solid-svg-icons';
import classNames from 'classnames';

1
src/utils/SortingDropdown.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { toPairs } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

2
src/utils/ToggleSwitch.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import { FC } from 'react';
import BooleanControl, { BooleanControlProps } from './BooleanControl';
const ToggleSwitch: FC<BooleanControlProps> = (props) => <BooleanControl type="switch" {...props} />;

2
src/visits/ShortUrlVisits.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import { useEffect } from 'react';
import qs from 'qs';
import { RouteComponentProps } from 'react-router';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';

5
src/visits/ShortUrlVisitsHeader.tsx
View file

@ -1,6 +1,5 @@
import { UncontrolledTooltip } from 'reactstrap';
import Moment from 'react-moment';
import React from 'react';
import { ExternalLink } from 'react-external-link';
import { ShortUrlDetail } from './reducers/shortUrlDetail';
import { ShortUrlVisits } from './reducers/shortUrlVisits';
@ -30,9 +29,9 @@ const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortU
</span>
);
const visitsStatsTitle = (
<React.Fragment>
<>
Visits for <ExternalLink href={shortLink} />
</React.Fragment>
</>
);
return (

1
src/visits/TagVisits.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { RouteComponentProps } from 'react-router';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
import ColorGenerator from '../utils/services/ColorGenerator';

1
src/visits/TagVisitsHeader.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import Tag from '../tags/helpers/Tag';
import ColorGenerator from '../utils/services/ColorGenerator';
import VisitsHeader from './VisitsHeader';

2
src/visits/VisitsHeader.tsx
View file

@ -1,5 +1,5 @@
import { Button, Card } from 'reactstrap';
import React, { FC, ReactNode } from 'react';
import { FC, ReactNode } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount';

6
src/visits/VisitsStats.tsx
View file

@ -1,5 +1,5 @@
import { isEmpty, propEq, values } from 'ramda';
import React, { useState, useEffect, useMemo, FC } from 'react';
import { useState, useEffect, useMemo, FC } from 'react';
import { Button, Card, Collapse, Progress } from 'reactstrap';
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -186,7 +186,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
};
return (
<React.Fragment>
<>
{children}
<section className="mt-4">
@ -244,7 +244,7 @@ const VisitsStats: FC<VisitsStatsProps> = (
<section>
{renderVisitsContent()}
</section>
</React.Fragment>
</>
);
};

2
src/visits/VisitsTable.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import Moment from 'react-moment';
import classNames from 'classnames';
import { min, splitEvery } from 'ramda';

2
src/visits/helpers/DefaultChart.tsx
View file

@ -1,4 +1,4 @@
import React, { useRef } from 'react';
import { useRef } from 'react';
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import { keys, values } from 'ramda';
import classNames from 'classnames';

2
src/visits/helpers/GraphCard.tsx
View file

@ -1,5 +1,5 @@
import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
import React, { ReactNode } from 'react';
import { ReactNode } from 'react';
import DefaultChart, { DefaultChartProps } from './DefaultChart';
import './GraphCard.scss';

3
src/visits/helpers/LineChartCard.tsx
View file

@ -1,4 +1,4 @@
import React, { useState, useMemo } from 'react';
import { useState, useMemo } from 'react';
import {
Card,
CardHeader,
@ -199,7 +199,6 @@ const LineChartCard = (
},
tooltips: {
intersect: false,
// @ts-expect-error
axis: 'x',
callbacks: {
label: renderNonDoughnutChartLabel('yLabel'),

10
src/visits/helpers/MapModal.tsx
View file

@ -1,6 +1,6 @@
import React, { FC } from 'react';
import { FC } from 'react';
import { Modal, ModalBody } from 'reactstrap';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { MapContainer, TileLayer, Marker, Popup, MapContainerProps } from 'react-leaflet';
import { prop } from 'ramda';
import { CityStats } from '../types';
import './MapModal.scss';
@ -19,7 +19,7 @@ const OpenStreetMapTile: FC = () => (
/>
);
const calculateMapProps = (locations: CityStats[]): any => {
const calculateMapProps = (locations: CityStats[]): MapContainerProps => {
if (locations.length === 0) {
return {};
}
@ -42,14 +42,14 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
{title}
<button type="button" className="close" onClick={toggle}>&times;</button>
</h3>
<Map {...calculateMapProps(locations)}>
<MapContainer {...calculateMapProps(locations)}>
<OpenStreetMapTile />
{locations.map(({ cityName, latLong, count }, index) => (
<Marker key={index} position={latLong}>
<Popup><b>{count}</b> visit{count > 1 ? 's' : ''} from <b>{cityName}</b></Popup>
</Marker>
))}
</Map>
</MapContainer>
</ModalBody>
</Modal>
);

6
src/visits/helpers/OpenMapModalBtn.tsx
View file

@ -1,4 +1,4 @@
import React, { useRef, useState } from 'react';
import { useRef, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
@ -36,7 +36,7 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
};
return (
<React.Fragment>
<>
<button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef as any} onClick={onClick}>
<FontAwesomeIcon icon={mapIcon} />
</button>
@ -48,7 +48,7 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
</DropdownMenu>
</Dropdown>
<MapModal toggle={closeMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
</React.Fragment>
</>
);
};

6
src/visits/helpers/SortableBarGraph.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
import SortingDropdown from '../../utils/SortingDropdown';
import PaginationDropdown from '../../utils/PaginationDropdown';
@ -94,7 +94,7 @@ const SortableBarGraph = ({
);
const activeCities = Object.keys(currentPageStats);
const computeTitle = () => (
<React.Fragment>
<>
{title}
<div className="float-right">
<SortingDropdown
@ -127,7 +127,7 @@ const SortableBarGraph = ({
{extraHeaderContent(pagination ? activeCities : undefined)}
</div>
)}
</React.Fragment>
</>
);
return (

3
stryker.conf.js
View file

@ -2,7 +2,8 @@ const jestConfig = require(`${__dirname}/jest.config.js`);
module.exports = {
mutate: jestConfig.collectCoverageFrom,
mutator: 'typescript',
checkers: [ 'typescript' ],
tsconfigFile: 'tsconfig.json',
testRunner: 'jest',
reporters: [ 'progress', 'clear-text' ],
coverageAnalysis: 'off',

1
test/App.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { Route } from 'react-router-dom';
import { identity } from 'ramda';

1
test/common/AsideMenu.test.tsx
View file

@ -1,5 +1,4 @@
import { shallow, ShallowWrapper } from 'enzyme';
import React from 'react';
import { Mock } from 'ts-mockery';
import asideMenuCreator from '../../src/common/AsideMenu';
import { ServerWithId } from '../../src/servers/data';

1
test/common/ErrorHandler.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { Button } from 'reactstrap';
import { Mock } from 'ts-mockery';

1
test/common/Home.test.tsx
View file

@ -1,5 +1,4 @@
import { shallow, ShallowWrapper } from 'enzyme';
import React from 'react';
import { Mock } from 'ts-mockery';
import Home, { HomeProps } from '../../src/common/Home';
import { ServerWithId } from '../../src/servers/data';

1
test/common/NotFound.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { Link } from 'react-router-dom';
import NotFound from '../../src/common/NotFound';

1
test/common/ScrollToTop.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import { RouteComponentProps } from 'react-router';

1
test/common/ShlinkVersions.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import ShlinkVersions, { ShlinkVersionsProps } from '../../src/common/ShlinkVersions';

2
test/common/SimplePaginator.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { identity } from 'ramda';
import { PaginationItem } from 'reactstrap';
@ -8,7 +7,6 @@ import { ELLIPSIS } from '../../src/utils/helpers/pagination';
describe('<SimplePaginator />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (pagesCount: number, currentPage = 1) => {
// @ts-expect-error
wrapper = shallow(<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={identity} />);
return wrapper;

6
test/servers/CreateServer.test.tsx
View file

@ -1,6 +1,4 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { identity } from 'ramda';
import { Mock } from 'ts-mockery';
import { History } from 'history';
import createServerConstruct from '../../src/servers/CreateServer';
@ -18,9 +16,7 @@ describe('<CreateServer />', () => {
.mockReturnValueOnce([ importFailed, () => '' ]);
const CreateServer = createServerConstruct(ImportServersBtn, useStateFlagTimeout);
wrapper = shallow(
<CreateServer createServer={createServerMock} resetSelectedServer={identity} history={historyMock} />,
);
wrapper = shallow(<CreateServer createServer={createServerMock} history={historyMock} />);
return wrapper;
};

1
test/servers/DeleteServerButton.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import deleteServerButtonConstruct from '../../src/servers/DeleteServerButton';

1
test/servers/DeleteServerModal.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { History } from 'history';

1
test/servers/EditServer.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { mount, ReactWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import { History, Location } from 'history';

2
test/servers/ServersDropdown.test.tsx
View file

@ -1,6 +1,6 @@
import { values } from 'ramda';
import { Mock } from 'ts-mockery';
import React, { FC } from 'react';
import { FC } from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { DropdownItem, DropdownToggle } from 'reactstrap';
import serversDropdownCreator, { ServersDropdownProps } from '../../src/servers/ServersDropdown';

1
test/servers/ServersListGroup.test.tsx
View file

@ -1,5 +1,4 @@
import { shallow, ShallowWrapper } from 'enzyme';
import React from 'react';
import { ListGroup } from 'reactstrap';
import { Mock } from 'ts-mockery';
import ServersListGroup from '../../src/servers/ServersListGroup';

1
test/servers/helpers/ForServerVersion.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { mount, ReactWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import ForServerVersion from '../../../src/servers/helpers/ForServerVersion';

1
test/servers/helpers/ImportServersBtn.test.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { UncontrolledTooltip } from 'reactstrap';
import { Mock } from 'ts-mockery';

Some files were not shown because too many files have changed in this diff Show more