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

Merge pull request #25 from acelaya/feature/1.0.0

Browse source 
Feature/1.0.0
This commit is contained in:
Alejandro Celaya 2018-08-26 20:26:02 +02:00 committed by GitHub
commit cddca4abcf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
104 changed files with 5283 additions and 1515 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
.eslintrc Normal file
View file

@ -0,0 +1,40 @@
{
"extends": [
"adidas-env/browser",
"adidas-env/module",
"adidas-es6",
"adidas-babel",
"adidas-react"
],
"plugins": ["jest"],
"env": {
"jest/globals": true
},
"globals": {
"process": true,
"setImmediate": true
},
"settings": {
"react": {
"version": "16.3"
}
},
"rules": {
"comma-dangle": ["error", "always-multiline"],
"no-invalid-this": "off",
"no-console": "warn",
"template-curly-spacing": ["error", "never"],
"no-warning-comments": "off",
"no-undefined": "off",
"indent": ["error", 2, {
"SwitchCase": 1
}
],
"react/jsx-curly-spacing": ["error", "never"],
"react/jsx-indent-props": ["error", 2],
"react/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
"react/jsx-closing-bracket-location": ["error", "tag-aligned"],
"react/no-array-index-key": "off",
"react/no-did-update-set-state": "off"
}
}

5
.scrutinizer.yml Normal file
View file

@ -0,0 +1,5 @@
build:
environment:
node: v10.4.1
tools:
external_code_coverage: true

11
.stylelintrc Normal file
View file

@ -0,0 +1,11 @@
{
"extends": [
"stylelint-config-adidas",
"stylelint-config-adidas-bem",
"stylelint-config-recommended-scss"
],
"syntax": "scss",
"plugins": [
"stylelint-scss"
]
}

7
.travis.yml
View file

@ -12,8 +12,11 @@ install:
- yarn install
script:
# - yarn inspect
- yarn test
- yarn lint
- yarn test:ci
- yarn build # Make sure the app can be built without errors
after_script:
- yarn ocular coverage/clover.xml
sudo: false

39
CHANGELOG.md
View file

@ -1,5 +1,44 @@
# CHANGELOG
## 1.0.0 - 2018-08-26
#### Added
* [#4](https://github.com/shlinkio/shlink-web-client/issues/4) Now it is possible to export and import servers.
* Export all servers in a CSV file.
* Import the CSV in a different device.
* [#4](https://github.com/shlinkio/shlink-web-client/issues/4) Added tags management.
* List existing tags, and filter the list.
* Change their name and color.
* Jump to URLs list filtering by one tag.
* [#5](https://github.com/shlinkio/shlink-web-client/issues/5) Tags for existing URLs can be edited now.
* [#24](https://github.com/shlinkio/shlink-web-client/issues/24) Improved left menu in mobile devices, which is now a swipeable sidebar instead of a stacked top bar.
* [#22](https://github.com/shlinkio/shlink-web-client/issues/22) Improved code coverage.
* [#28](https://github.com/shlinkio/shlink-web-client/issues/28) Added integration with [Scrutinizer](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/).
#### Changed
* [#33](https://github.com/shlinkio/shlink-web-client/issues/33) Changed to [adidas coding style](https://github.com/adidas/js-linter-configs) for Javascript.
* [#32](https://github.com/shlinkio/shlink-web-client/issues/32) Changed to [adidas coding style](https://github.com/adidas/js-linter-configs) for stylesheets.
* [#26](https://github.com/shlinkio/shlink-web-client/issues/26) The tags input now displays tags using their actual color.
#### Deprecated
* *Nothing*
#### Removed
* *Nothing*
#### Fixed
* *Nothing*
## 0.2.0 - 2018-08-12
#### Added

6
README.md
View file

@ -1,6 +1,10 @@
# shlink-web-client
[![Build Status](https://travis-ci.org/shlinkio/shlink-web-client.svg?branch=master)](https://travis-ci.org/shlinkio/shlink-web-client)
[![Build Status](https://img.shields.io/travis/shlinkio/shlink-web-client.svg?style=flat-square)](https://travis-ci.org/shlinkio/shlink-web-client)
[![Code Coverage](https://img.shields.io/scrutinizer/coverage/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/gshlinkio/shlink-web-client/?branch=master)
[![Scrutinizer Code Quality](https://img.shields.io/scrutinizer/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/?branch=master)
[![GitHub release](https://img.shields.io/github/release/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/releases/latest)
[![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/master/LICENSE)
A ReactJS-based progressive web application for [Shlink](https://shlink.io).

21
config/env.js
View file

@ -1,4 +1,3 @@
'use strict';
const fs = require('fs');
const path = require('path');
@ -7,7 +6,8 @@ const paths = require('./paths');
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];
const NODE_ENV = process.env.NODE_ENV;
const { NODE_ENV } = process.env;
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.'
@ -15,9 +15,10 @@ if (!NODE_ENV) {
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
var dotenvFiles = [
const dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
`${paths.dotenv}.${NODE_ENV}`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
@ -30,7 +31,7 @@ var dotenvFiles = [
// that have already been set. Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
dotenvFiles.forEach((dotenvFile) => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
@ -50,10 +51,11 @@ dotenvFiles.forEach(dotenvFile => {
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter(folder => folder && !path.isAbsolute(folder))
.map(folder => path.resolve(appDirectory, folder))
.filter((folder) => folder && !path.isAbsolute(folder))
.map((folder) => path.resolve(appDirectory, folder))
.join(path.delimiter);
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
@ -62,16 +64,19 @@ const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.filter((key) => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
@ -79,10 +84,12 @@ function getClientEnvironment(publicUrl) {
PUBLIC_URL: publicUrl,
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};

1
config/jest/cssTransform.js
View file

@ -1,4 +1,3 @@
'use strict';
// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html

1
config/jest/fileTransform.js
View file

@ -1,4 +1,3 @@
'use strict';
const path = require('path');

13
config/paths.js
View file

@ -1,4 +1,3 @@
'use strict';
const path = require('path');
const fs = require('fs');
@ -7,22 +6,23 @@ const url = require('url');
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebookincubator/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
const envPublicUrl = process.env.PUBLIC_URL;
function ensureSlash(path, needsSlash) {
const hasSlash = path.endsWith('/');
if (hasSlash && !needsSlash) {
return path.substr(path, path.length - 1);
} else if (!hasSlash && needsSlash) {
return `${path}/`;
} else {
return path;
}
}
const getPublicUrl = appPackageJson =>
return path;
}
const getPublicUrl = (appPackageJson) =>
envPublicUrl || require(appPackageJson).homepage;
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
@ -34,6 +34,7 @@ const getPublicUrl = appPackageJson =>
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
return ensureSlash(servedUrl, true);
}

1
config/polyfills.js
View file

@ -1,4 +1,3 @@
'use strict';
if (typeof Promise === 'undefined') {
// Rejection tracking prevents a common issue where React gets into an

51
config/webpack.config.dev.js
View file

@ -1,7 +1,6 @@
'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
@ -9,23 +8,26 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
const publicUrl = '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
const postCssLoader = {
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
@ -36,7 +38,7 @@ const postCssLoader = {
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
'not ie < 9',
],
flexbox: 'no-2009',
}),
@ -48,15 +50,19 @@ const postCssLoader = {
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
entry: [
// We ship a few polyfills by default:
require.resolve('./polyfills'),
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
@ -68,36 +74,46 @@ module.exports = {
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
],
output: {
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
devtoolModuleFilenameTemplate: (info) =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
modules: [ 'node_modules', paths.appNodeModules ].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
@ -112,6 +128,7 @@ module.exports = {
'react-native': 'react-native-web',
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
@ -123,6 +140,7 @@ module.exports = {
module: {
strictExportPresence: true,
rules: [
// TODO: Disable require.ensure as it's not a standard language feature.
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
// { parser: { requireEnsure: false } },
@ -145,10 +163,12 @@ module.exports = {
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
@ -160,6 +180,7 @@ module.exports = {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
@ -173,6 +194,7 @@ module.exports = {
cacheDirectory: true,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
@ -195,15 +217,17 @@ module.exports = {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader', postCssLoader]
})
use: [ 'css-loader', 'sass-loader', postCssLoader ],
}),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
@ -216,37 +240,46 @@ module.exports = {
},
],
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string.
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
@ -255,6 +288,7 @@ module.exports = {
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new ExtractTextPlugin('main.css'),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
@ -264,6 +298,7 @@ module.exports = {
tls: 'empty',
child_process: 'empty',
},
// Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become
// cumbersome.

58
config/webpack.config.prod.js
View file

@ -1,7 +1,6 @@
'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
@ -16,15 +15,19 @@ const getClientEnvironment = require('./env');
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
const publicPath = paths.servedPath;
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = publicPath.slice(0, -1);
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
@ -41,47 +44,57 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
// However, our output is structured with css, js and media folders.
// To have this structure working with relative paths, we have to use custom options.
// Making sure that the publicPath goes back to to build folder.
const extractTextPluginOptions = shouldUseRelativeAssetPaths
? // Making sure that the publicPath goes back to to build folder.
{publicPath: Array(cssFilename.split('/').length).join('../')}
? { publicPath: Array(cssFilename.split('/').length).join('../') }
: {};
// This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle.
// The development configuration is different and lives in a separate file.
module.exports = {
// Don't attempt to continue if there are any errors.
bail: true,
// We generate sourcemaps in production. This is slow but gives good results.
// You can exclude the *.map files from the build during deployment.
devtool: shouldUseSourceMap ? 'source-map' : false,
// In production, we only want to load the polyfills and the app code.
entry: [ require.resolve('./polyfills'), paths.appIndexJs ],
output: {
// The build folder.
path: paths.appBuild,
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: 'static/js/[name].[chunkhash:8].js',
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath,
publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
devtoolModuleFilenameTemplate: (info) =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/'),
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
modules: [ 'node_modules', paths.appNodeModules ].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
@ -96,6 +109,7 @@ module.exports = {
'react-native': 'react-native-web',
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
@ -107,6 +121,7 @@ module.exports = {
module: {
strictExportPresence: true,
rules: [
// TODO: Disable require.ensure as it's not a standard language feature.
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
// { parser: { requireEnsure: false } },
@ -129,10 +144,12 @@ module.exports = {
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
@ -143,6 +160,7 @@ module.exports = {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
@ -153,6 +171,7 @@ module.exports = {
compact: true,
},
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
@ -191,6 +210,7 @@ module.exports = {
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
@ -201,7 +221,7 @@ module.exports = {
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
'not ie < 9',
],
flexbox: 'no-2009',
}),
@ -213,14 +233,17 @@ module.exports = {
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
// "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
@ -230,6 +253,7 @@ module.exports = {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
@ -237,12 +261,14 @@ module.exports = {
],
},
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
@ -260,15 +286,18 @@ module.exports = {
minifyURLs: true,
},
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// Minify the code.
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebookincubator/create-react-app/issues/2376
// Pending further investigation:
@ -280,25 +309,30 @@ module.exports = {
},
output: {
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
},
sourceMap: shouldUseSourceMap,
}),
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
new ExtractTextPlugin({
filename: cssFilename,
}),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json',
}),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
new SWPrecacheWebpackPlugin({
// By default, a cache-busting query parameter is appended to requests
// used to populate the caches, to ensure the responses are fresh.
// If a URL is already hashed by Webpack, then there is no concern
@ -315,17 +349,22 @@ module.exports = {
// https://github.com/facebookincubator/create-react-app/issues/2612
return;
}
console.log(message);
console.log(message); // eslint-disable-line
},
minify: true,
// For unknown URLs, fallback to the index page
navigateFallback: publicUrl + '/index.html',
navigateFallback: `${publicUrl}/index.html`,
// Ignores URLs starting from /__ (useful for Firebase):
// https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
navigateFallbackWhitelist: [ /^(?!\/__).*/ ],
// Don't precache sourcemaps (they're large) and build asset manifest:
staticFileGlobsIgnorePatterns: [ /\.map$/, /asset-manifest\.json$/ ],
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
@ -333,6 +372,7 @@ module.exports = {
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {

15
config/webpackDevServer.config.js
View file

@ -1,4 +1,3 @@
'use strict';
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
@ -11,6 +10,7 @@ const host = process.env.HOST || '0.0.0.0';
module.exports = function(proxy, allowedHost) {
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
// https://github.com/webpack/webpack-dev-server/issues/887
@ -29,11 +29,14 @@ module.exports = function(proxy, allowedHost) {
// really know what you're doing with a special environment variable.
disableHostCheck:
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
// Enable gzip compression of generated files.
compress: true,
// Silence WebpackDevServer's own logs since they're generally not useful.
// It will still show compile warnings and errors with this setting.
clientLogLevel: 'none',
// By default WebpackDevServer serves physical files from current directory
// in addition to all the virtual build products that it serves from memory.
// This is confusing because those files won’t automatically be available in
@ -49,20 +52,25 @@ module.exports = function(proxy, allowedHost) {
// for some reason broken when imported through Webpack. If you just want to
// use an image, put it in `src` and `import` it from JavaScript instead.
contentBase: paths.appPublic,
// By default files from `contentBase` will not trigger a page reload.
watchContentBase: true,
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
// for the WebpackDevServer client so it can learn when the files were
// updated. The WebpackDevServer client is included as an entry point
// in the Webpack development configuration. Note that only changes
// to CSS are currently hot reloaded. JS changes will refresh the browser.
hot: true,
// It is important to tell WebpackDevServer to use the same "root" path
// as we specified in the config. In development, we always serve from /.
publicPath: config.output.publicPath,
// WebpackDevServer is noisy by default so we emit custom message instead
// by listening to the compiler events with `compiler.plugin` calls above.
quiet: true,
// Reportedly, this avoids CPU overload on some systems.
// https://github.com/facebookincubator/create-react-app/issues/293
// src/node_modules is not ignored to support absolute imports
@ -70,11 +78,13 @@ module.exports = function(proxy, allowedHost) {
watchOptions: {
ignored: ignoredFiles(paths.appSrc),
},
// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === 'https',
host: host,
host,
overlay: false,
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebookincubator/create-react-app/issues/387.
disableDotRule: true,
@ -84,6 +94,7 @@ module.exports = function(proxy, allowedHost) {
before(app) {
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if

1
docker-compose.yml
View file

@ -10,3 +10,4 @@ services:
ports:
- "3000:3000"
- "56745:56745"
- "5000:5000"

45
package.json
View file

@ -1,12 +1,19 @@
{
"name": "shlink-web-client-react",
"description": "A React-based web client for shlink",
"version": "0.1.0",
"description": "A React-based progressive web application for shlink",
"version": "1.0.0",
"private": false,
"scripts": {
"lint": "yarn lint:js && yarn lint:css",
"lint:js": "eslint src test scripts config",
"lint:js:fix": "yarn lint:js --fix",
"lint:css": "stylelint src/**/*.scss",
"lint:css:fix": "yarn lint:css --fix",
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom --colors"
"test": "node scripts/test.js --env=jsdom --colors",
"test:ci": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
"test:pretty": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html"
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.8",
@ -16,6 +23,8 @@
"axios": "^0.18.0",
"bootstrap": "^4.1.1",
"chart.js": "^2.7.2",
"classnames": "^2.2.6",
"csvjson": "^5.1.0",
"moment": "^2.22.2",
"promise": "8.0.1",
"prop-types": "^15.6.2",
@ -23,12 +32,14 @@
"ramda": "^0.25.0",
"react": "^16.3.2",
"react-chartjs-2": "^2.7.4",
"react-color": "^2.14.1",
"react-copy-to-clipboard": "^5.0.1",
"react-datepicker": "^1.5.0",
"react-dom": "^16.3.2",
"react-moment": "^0.7.6",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-swipeable": "^4.3.0",
"react-tagsinput": "^3.19.0",
"reactstrap": "^6.0.1",
"redux": "^4.0.0",
@ -41,7 +52,7 @@
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-loader": "^7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
@ -51,13 +62,16 @@
"dotenv-expand": "4.2.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint": "^5.4.0",
"eslint-config-adidas-babel": "^1.0.1",
"eslint-config-adidas-env": "^1.0.1",
"eslint-config-adidas-es6": "^1.0.1",
"eslint-config-adidas-react": "^1.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jest": "^21.22.0",
"eslint-plugin-promise": "^3.0.0",
"eslint-plugin-react": "^7.4.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
@ -65,14 +79,21 @@
"jest": "20.0.4",
"node-sass": "^4.9.0",
"object-assign": "4.1.1",
"ocular.js": "^0.1.0",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"raf": "3.4.0",
"react-dev-utils": "^5.0.1",
"resolve": "1.6.0",
"sass-loader": "^7.0.1",
"serve": "^10.0.0",
"sinon": "^6.1.5",
"style-loader": "0.19.0",
"stylelint": "^9.5.0",
"stylelint-config-adidas": "^1.0.1",
"stylelint-config-adidas-bem": "^1.0.1",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-scss": "^3.3.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
@ -81,6 +102,7 @@
"whatwg-fetch": "2.0.3"
},
"jest": {
"coverageDirectory": "<rootDir>/coverage",
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
@ -118,8 +140,5 @@
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}

57
scripts/build.js
View file

@ -1,4 +1,4 @@
'use strict';
/* eslint no-console: "off" */
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
@ -7,7 +7,7 @@ process.env.NODE_ENV = 'production';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
process.on('unhandledRejection', (err) => {
throw err;
});
@ -18,23 +18,21 @@ const path = require('path');
const chalk = require('chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
const config = require('../config/webpack.config.prod');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');
const AdmZip = require('adm-zip');
const paths = require('../config/paths');
const config = require('../config/webpack.config.prod');
const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = FileSizeReporter;
const useYarn = fs.existsSync(paths.yarnLockFile);
// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; // eslint-disable-line
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; // eslint-disable-line
// Warn and crash if required files are missing
if (!checkRequiredFiles([ paths.appHtml, paths.appIndexJs ])) {
@ -44,12 +42,14 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
measureFileSizesBeforeBuild(paths.appBuild)
.then(previousFileSizes => {
.then((previousFileSizes) => {
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
return build(previousFileSizes);
})
@ -59,14 +59,14 @@ measureFileSizesBeforeBuild(paths.appBuild)
console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n'));
console.log(
'\nSearch for the ' +
chalk.underline(chalk.yellow('keywords')) +
' to learn more about each warning.'
`\nSearch for the ${
chalk.underline(chalk.yellow('keywords'))
} to learn more about each warning.`
);
console.log(
'To ignore, add ' +
chalk.cyan('// eslint-disable-next-line') +
' to the line before.\n'
`To ignore, add ${
chalk.cyan('// eslint-disable-next-line')
} to the line before.\n`
);
} else {
console.log(chalk.green('Compiled successfully.\n'));
@ -83,9 +83,11 @@ measureFileSizesBeforeBuild(paths.appBuild)
console.log();
const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrl;
const publicPath = config.output.publicPath;
const { publicUrl } = paths;
const { publicPath } = config.output;
const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions(
appPackage,
publicUrl,
@ -94,7 +96,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
useYarn
);
},
err => {
(err) => {
console.log(chalk.red('Failed to compile.\n'));
printBuildError(err);
process.exit(1);
@ -106,19 +108,23 @@ measureFileSizesBeforeBuild(paths.appBuild)
function build(previousFileSizes) {
console.log('Creating an optimized production build...');
let compiler = webpack(config);
const compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err) {
return reject(err);
}
const messages = formatWebpackMessages(stats.toJson({}, true));
if (messages.errors.length) {
// Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) {
messages.errors.length = 1;
}
return reject(new Error(messages.errors.join('\n\n')));
}
if (
@ -133,8 +139,10 @@ function build(previousFileSizes) {
'Most CI servers set it automatically.\n'
)
);
return reject(new Error(messages.warnings.join('\n\n')));
}
return resolve({
stats,
previousFileSizes,
@ -147,17 +155,19 @@ function build(previousFileSizes) {
function copyPublicFolder() {
fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true,
filter: file => file !== paths.appHtml,
filter: (file) => file !== paths.appHtml,
});
}
function zipDist() {
const minArgsToContainVersion = 3;
// If no version was provided, do nothing
if (process.argv.length < 3) {
if (process.argv.length < minArgsToContainVersion) {
return;
}
const version = process.argv[2];
const [ , , version ] = process.argv;
const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
console.log(chalk.cyan(`Generating dist file for version ${chalk.bold(version)}...`));
@ -167,6 +177,7 @@ function zipDist() {
if (fs.existsSync(versionFileName)) {
fs.unlink(versionFileName);
}
zip.addLocalFolder('./build', `shlink-web-client_${version}_dist`);
zip.writeZip(versionFileName);
console.log(chalk.green('Dist file properly generated'));

35
scripts/start.js
View file

@ -1,4 +1,4 @@
'use strict';
/* eslint no-console: "off" */
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
@ -7,7 +7,7 @@ process.env.NODE_ENV = 'development';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
process.on('unhandledRejection', (err) => {
throw err;
});
@ -40,7 +40,8 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const FALLBACK_PORT = 3000;
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || FALLBACK_PORT;
const HOST = process.env.HOST || '0.0.0.0';
if (process.env.HOST) {
@ -52,7 +53,7 @@ if (process.env.HOST) {
)
);
console.log(
`If this was unintentional, check that you haven't mistakenly set it in your shell.`
'If this was unintentional, check that you haven\'t mistakenly set it in your shell.'
);
console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
console.log();
@ -61,47 +62,59 @@ if (process.env.HOST) {
// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT)
.then(port => {
if (port == null) {
.then((port) => {
if (port === null) {
// We have not found a port.
return;
}
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const urls = prepareUrls(protocol, HOST, port);
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler(webpack, config, appName, urls, useYarn);
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web sever.
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
devServer.listen(port, HOST, (err) => {
if (err) {
return console.log(err);
console.log(err);
return;
}
if (isInteractive) {
clearConsole();
}
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
});
['SIGINT', 'SIGTERM'].forEach(function(sig) {
process.on(sig, function() {
[ 'SIGINT', 'SIGTERM' ].forEach((sig) => {
process.on(sig, () => {
devServer.close();
process.exit();
});
});
})
.catch(err => {
.catch((err) => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});

7
scripts/test.js
View file

@ -1,4 +1,3 @@
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
@ -8,7 +7,7 @@ process.env.PUBLIC_URL = '';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
process.on('unhandledRejection', (err) => {
throw err;
});
@ -17,6 +16,8 @@ require('../config/env');
// Make tests to be matched inside tests folder
const jest = require('jest');
let argv = process.argv.slice(2);
const argumentsToRemove = 2;
const argv = process.argv.slice(argumentsToRemove);
jest.run(argv);

6
src/App.js
View file

@ -6,10 +6,9 @@ import MainHeader from './common/MainHeader';
import MenuLayout from './common/MenuLayout';
import CreateServer from './servers/CreateServer';
export default class App extends React.Component {
render() {
export default function App() {
return (
<div className="container-fluid">
<div className="container-fluid app-container">
<MainHeader />
<div className="app">
@ -22,4 +21,3 @@ export default class App extends React.Component {
</div>
);
}
}

5
src/App.scss
View file

@ -1,5 +1,10 @@
@import './utils/base';
.app-container {
height: 100%;
}
.app {
padding-top: $headerHeight;
height: 100%;
}

70
src/api/ShlinkApiClient.js
View file

@ -3,6 +3,7 @@ import qs from 'qs';
import { isEmpty, isNil, reject } from 'ramda';
const API_VERSION = '1';
const STATUS_UNAUTHORIZED = 401;
export class ShlinkApiClient {
constructor(axios) {
@ -14,8 +15,6 @@ export class ShlinkApiClient {
/**
* Sets the base URL to be used on any request
* @param {String} baseUrl
* @param {String} apiKey
*/
setConfig = ({ url, apiKey }) => {
this._baseUrl = `${url}/rest/v${API_VERSION}`;
@ -24,27 +23,48 @@ export class ShlinkApiClient {
listShortUrls = (options = {}) =>
this._performRequest('/short-codes', 'GET', options)
.then(resp => resp.data.shortUrls)
.catch(e => this._handleAuthError(e, this.listShortUrls, [options]));
.then((resp) => resp.data.shortUrls)
.catch((e) => this._handleAuthError(e, this.listShortUrls, [ options ]));
createShortUrl = (options) => {
const filteredOptions = reject((value) => isEmpty(value) || isNil(value), options);
createShortUrl = options => {
const filteredOptions = reject(value => isEmpty(value) || isNil(value), options);
return this._performRequest('/short-codes', 'POST', {}, filteredOptions)
.then(resp => resp.data)
.catch(e => this._handleAuthError(e, this.createShortUrl, [filteredOptions]));
.then((resp) => resp.data)
.catch((e) => this._handleAuthError(e, this.createShortUrl, [ filteredOptions ]));
};
getShortUrlVisits = (shortCode, dates) =>
this._performRequest(`/short-codes/${shortCode}/visits`, 'GET', dates)
.then(resp => resp.data.visits.data)
.catch(e => this._handleAuthError(e, this.getShortUrlVisits, [shortCode, dates]));
.then((resp) => resp.data.visits.data)
.catch((e) => this._handleAuthError(e, this.getShortUrlVisits, [ shortCode, dates ]));
getShortUrl = shortCode =>
getShortUrl = (shortCode) =>
this._performRequest(`/short-codes/${shortCode}`, 'GET')
.then(resp => resp.data)
.catch(e => this._handleAuthError(e, this.getShortUrl, [shortCode]));
.then((resp) => resp.data)
.catch((e) => this._handleAuthError(e, this.getShortUrl, [ shortCode ]));
_performRequest = async (url, method = 'GET', params = {}, data = {}) => {
updateShortUrlTags = (shortCode, tags) =>
this._performRequest(`/short-codes/${shortCode}/tags`, 'PUT', {}, { tags })
.then((resp) => resp.data.tags)
.catch((e) => this._handleAuthError(e, this.updateShortUrlTags, [ shortCode, tags ]));
listTags = () =>
this._performRequest('/tags', 'GET')
.then((resp) => resp.data.tags.data)
.catch((e) => this._handleAuthError(e, this.listTags, []));
deleteTags = (tags) =>
this._performRequest('/tags', 'DELETE', { tags })
.then(() => ({ tags }))
.catch((e) => this._handleAuthError(e, this.deleteTags, [ tags ]));
editTag = (oldName, newName) =>
this._performRequest('/tags', 'PUT', {}, { oldName, newName })
.then(() => ({ oldName, newName }))
.catch((e) => this._handleAuthError(e, this.editTag, [ oldName, newName ]));
_performRequest = async (url, method = 'GET', query = {}, body = {}) => {
if (isEmpty(this._token)) {
this._token = await this._authenticate();
}
@ -52,14 +72,16 @@ export class ShlinkApiClient {
return await this.axios({
method,
url: `${this._baseUrl}${url}`,
headers: { 'Authorization': `Bearer ${this._token}` },
params,
data,
paramsSerializer: params => qs.stringify(params, { arrayFormat: 'brackets' })
}).then(resp => {
headers: { Authorization: `Bearer ${this._token}` },
params: query,
data: body,
paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' }),
}).then((resp) => {
// Save new token
const { authorization = '' } = resp.headers;
this._token = authorization.substr('Bearer '.length);
return resp;
});
};
@ -68,15 +90,17 @@ export class ShlinkApiClient {
const resp = await this.axios({
method: 'POST',
url: `${this._baseUrl}/authenticate`,
data: { apiKey: this._apiKey }
data: { apiKey: this._apiKey },
});
return resp.data.token;
};
_handleAuthError = (e, method, args) => {
// If auth failed, reset token to force it to be regenerated, and perform a new request
if (e.response.status === 401) {
if (e.response.status === STATUS_UNAUTHORIZED) {
this._token = '';
return method(...args);
}
@ -85,4 +109,6 @@ export class ShlinkApiClient {
};
}
export default new ShlinkApiClient(axios);
const shlinkApiClient = new ShlinkApiClient(axios);
export default shlinkApiClient;

47
src/common/AsideMenu.js
View file

@ -1,17 +1,33 @@
import listIcon from '@fortawesome/fontawesome-free-solid/faBars';
import createIcon from '@fortawesome/fontawesome-free-solid/faPlus';
import listIcon from '@fortawesome/fontawesome-free-solid/faList';
import createIcon from '@fortawesome/fontawesome-free-solid/faLink';
import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import React from 'react';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import DeleteServerButton from '../servers/DeleteServerButton';
import './AsideMenu.scss';
import PropTypes from 'prop-types';
import { serverType } from '../servers/prop-types';
export default function AsideMenu({ selectedServer }) {
const defaultProps = {
className: '',
showOnMobile: false,
};
const propTypes = {
selectedServer: serverType,
className: PropTypes.string,
showOnMobile: PropTypes.bool,
};
export default function AsideMenu({ selectedServer, className, showOnMobile }) {
const serverId = selectedServer ? selectedServer.id : '';
const asideClass = classnames('aside-menu', className, {
'aside-menu--hidden': !showOnMobile,
});
return (
<aside className="aside-menu col-lg-2 col-md-3">
<aside className={asideClass}>
<nav className="nav flex-column aside-menu__nav">
<NavLink
className="aside-menu__item"
@ -26,10 +42,19 @@ export default function AsideMenu({ selectedServer }) {
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/create-short-url`}
>
<FontAwesomeIcon icon={createIcon} />
<FontAwesomeIcon icon={createIcon} flip="horizontal" />
<span className="aside-menu__item-text">Create short URL</span>
</NavLink>
<NavLink
className="aside-menu__item"
activeClassName="aside-menu__item--selected"
to={`/server/${serverId}/manage-tags`}
>
<FontAwesomeIcon icon={tagsIcon} />
<span className="aside-menu__item-text">Manage tags</span>
</NavLink>
<DeleteServerButton
className="aside-menu__item aside-menu__item--danger"
server={selectedServer}
@ -39,11 +64,5 @@ export default function AsideMenu({ selectedServer }) {
);
}
AsideMenu.propTypes = {
selectedServer: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
url: PropTypes.string,
apiKey: PropTypes.string,
}),
};
AsideMenu.defaultProps = defaultProps;
AsideMenu.propTypes = propTypes;

35
src/common/AsideMenu.scss
View file

@ -1,29 +1,45 @@
@import '../utils/base';
@import '../utils/mixins/box-shadow';
@import '../utils/mixins/vertical-align';
$asideMenuMobileWidth: 280px;
.aside-menu {
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
@media (min-width: $mdMin) {
position: fixed !important;
padding-top: 13px;
padding-bottom: 10px;
top: $headerHeight;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 30px 15px 15px;
z-index: 1010;
overflow-x: hidden;
overflow-y: auto;
@media (min-width: $mdMin) {
padding: 30px 15px 15px;
border-right: 1px solid #eee;
}
@media (max-width: $smMax) {
width: $asideMenuMobileWidth !important;
transition: left 300ms;
top: $headerHeight - 3px;
@include box-shadow(-10px 0 50px 11px rgba(0, 0, 0, .55));
}
}
.aside-menu--hidden {
@media (max-width: $smMax) {
left: -($asideMenuMobileWidth + 35px);
}
}
.aside-menu__nav {
@media(min-width: $smMin) {
height: 100%;
}
}
.aside-menu__item {
padding: 10px 20px;
@ -31,6 +47,7 @@
text-decoration: none !important;
cursor: pointer;
}
.aside-menu__item:hover {
background-color: $lightHoverColor;
}
@ -39,6 +56,7 @@
color: #fff;
background-color: $mainColor;
}
.aside-menu__item--selected:hover {
color: #fff;
background-color: $mainColor;
@ -53,6 +71,7 @@
color: $dangerColor;
margin-top: auto;
}
.aside-menu__item--danger:hover {
color: #fff;
background-color: $dangerColor;

4
src/common/DateInput.scss
View file

@ -12,16 +12,18 @@
.date-input-container__icon {
@include vertical-align();
right: .75rem;
cursor: pointer;
}
.react-datepicker__close-icon.react-datepicker__close-icon {
@include vertical-align();
right: 0;
}
.react-datepicker__close-icon.react-datepicker__close-icon::after {
.react-datepicker__close-icon.react-datepicker__close-icon:after {
right: .75rem;
line-height: 11px;
background-color: #333;

32
src/common/Home.js
View file

@ -1,14 +1,20 @@
import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { isEmpty, pick, values } from 'ramda'
import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { ListGroup, ListGroupItem } from 'reactstrap'
import { resetSelectedServer } from '../servers/reducers/selectedServer'
import './Home.scss'
import chevronIcon from '@fortawesome/fontawesome-free-solid/faChevronRight';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { isEmpty, pick, values } from 'ramda';
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { ListGroup, ListGroupItem } from 'reactstrap';
import PropTypes from 'prop-types';
import { resetSelectedServer } from '../servers/reducers/selectedServer';
import './Home.scss';
export class Home extends React.Component {
const propTypes = {
resetSelectedServer: PropTypes.func,
servers: PropTypes.object,
};
export class HomeComponent extends React.Component {
componentDidMount() {
this.props.resetSelectedServer();
}
@ -45,4 +51,8 @@ export class Home extends React.Component {
}
}
export default connect(pick(['servers']), { resetSelectedServer })(Home);
HomeComponent.propTypes = propTypes;
const Home = connect(pick([ 'servers' ]), { resetSelectedServer })(HomeComponent);
export default Home;

9
src/common/Home.scss
View file

@ -11,7 +11,11 @@
}
.home__title {
font-size: 36px;
font-size: 1.75rem;
@media (min-width: $mdMin) {
font-size: 2.2rem;
}
}
.home__servers-list {
@ -23,10 +27,11 @@
.home__servers-item.home__servers-item {
text-align: left;
position: relative;
padding: .75rem 2.5rem 0.75rem 1rem;
padding: .75rem 2.5rem .75rem 1rem;
}
.home__servers-item-icon {
@include vertical-align();
right: 1rem;
}

39
src/common/MainHeader.js
View file

@ -1,17 +1,24 @@
import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus';
import arrowIcon from '@fortawesome/fontawesome-free-solid/faChevronDown';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import React from 'react';
import { Link, withRouter } from 'react-router-dom'
import { Link, withRouter } from 'react-router-dom';
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import ServersDropdown from '../servers/ServersDropdown';
import './MainHeader.scss';
import shlinkLogo from './shlink-logo-white.png';
export class MainHeader extends React.Component {
const propTypes = {
location: PropTypes.object,
};
export class MainHeaderComponent extends React.Component {
state = { isOpen: false };
toggle = () => {
handleToggle = () => {
this.setState(({ isOpen }) => ({
isOpen: !isOpen
isOpen: !isOpen,
}));
};
@ -22,16 +29,30 @@ export class MainHeader extends React.Component {
}
render() {
const { location } = this.props;
const createServerPath = '/server/create';
const toggleClass = classnames('main-header__toggle-icon', {
'main-header__toggle-icon--opened': this.state.isOpen,
});
return (
<Navbar color="primary" dark fixed="top" className="main-header" expand="md">
<NavbarBrand tag={Link} to="/">
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<NavbarToggler onClick={this.handleToggle}>
<FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
</NavbarToggler>
<Collapse navbar isOpen={this.state.isOpen}>
<Nav navbar className="ml-auto">
<NavItem>
<NavLink tag={Link} to="/server/create">
<NavLink
tag={Link}
to={createServerPath}
active={location.pathname === createServerPath}
>
<FontAwesomeIcon icon={plusIcon} />&nbsp; Add server
</NavLink>
</NavItem>
@ -43,4 +64,8 @@ export class MainHeader extends React.Component {
}
}
export default withRouter(MainHeader);
MainHeaderComponent.propTypes = propTypes;
const MainHeader = withRouter(MainHeaderComponent);
export default MainHeader;

9
src/common/MainHeader.scss
View file

@ -13,3 +13,12 @@
width: 26px;
margin-right: 5px;
}
.main-header__toggle-icon {
width: 20px;
transition: transform 300ms;
}
.main-header__toggle-icon--opened {
transform: rotate(180deg);
}

87
src/common/MenuLayout.js
View file

@ -1,27 +1,80 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { Route, Switch, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { pick } from 'ramda';
import Swipeable from 'react-swipeable';
import burgerIcon from '@fortawesome/fontawesome-free-solid/faBars';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import classnames from 'classnames';
import * as PropTypes from 'prop-types';
import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
import { selectServer } from '../servers/reducers/selectedServer';
import CreateShortUrl from '../short-urls/CreateShortUrl';
import ShortUrls from '../short-urls/ShortUrls';
import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
import './MenuLayout.scss';
import TagsList from '../tags/TagsList';
import { serverType } from '../servers/prop-types';
import AsideMenu from './AsideMenu';
import { pick } from 'ramda';
export class MenuLayout extends React.Component {
const propTypes = {
match: PropTypes.object,
selectServer: PropTypes.func,
location: PropTypes.object,
selectedServer: serverType,
};
export class MenuLayoutComponent extends React.Component {
state = { showSideBar: false };
// FIXME Shouldn't use componentWillMount, but this code has to be run before children components are rendered
/* eslint react/no-deprecated: "off" */
componentWillMount() {
const { serverId } = this.props.match.params;
this.props.selectServer(serverId);
const { match, selectServer } = this.props;
const { params: { serverId } } = match;
selectServer(serverId);
}
componentDidUpdate(prevProps) {
const { location } = this.props;
// Hide sidebar when location changes
if (location !== prevProps.location) {
this.setState({ showSideBar: false });
}
}
render() {
const { selectedServer } = this.props;
const burgerClasses = classnames('menu-layout__burger-icon', {
'menu-layout__burger-icon--active': this.state.showSideBar,
});
return (
<div className="row">
<AsideMenu selectedServer={selectedServer} />
<div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3">
<React.Fragment>
<FontAwesomeIcon
icon={burgerIcon}
className={burgerClasses}
onClick={() => this.setState(({ showSideBar }) => ({ showSideBar: !showSideBar }))}
/>
<Swipeable
delta={40}
className="menu-layout__swipeable"
onSwipedLeft={() => this.setState({ showSideBar: false })}
onSwipedRight={() => this.setState({ showSideBar: true })}
>
<div className="row menu-layout__swipeable-inner">
<AsideMenu
className="col-lg-2 col-md-3"
selectedServer={selectedServer}
showOnMobile={this.state.showSideBar}
/>
<div
className="col-lg-10 offset-lg-2 col-md-9 offset-md-3"
onClick={() => this.setState({ showSideBar: false })}
>
<Switch>
<Route
exact
@ -38,11 +91,25 @@ export class MenuLayout extends React.Component {
path="/server/:serverId/short-code/:shortCode/visits"
component={ShortUrlsVisits}
/>
<Route
exact
path="/server/:serverId/manage-tags"
component={TagsList}
/>
</Switch>
</div>
</div>
</Swipeable>
</React.Fragment>
);
}
}
export default connect(pick(['selectedServer', 'shortUrlsListParams']), { selectServer })(MenuLayout);
MenuLayoutComponent.propTypes = propTypes;
const MenuLayout = compose(
connect(pick([ 'selectedServer', 'shortUrlsListParams' ]), { selectServer }),
withRouter
)(MenuLayoutComponent);
export default MenuLayout;

34
src/common/MenuLayout.scss Normal file
View file

@ -0,0 +1,34 @@
@import '../utils/base';
.menu-layout__swipeable {
$offset: 15px;
height: 100%;
margin-right: -$offset;
margin-left: -$offset;
padding-left: $offset;
padding-right: $offset;
}
.menu-layout__swipeable-inner {
height: 100%;
}
.menu-layout__burger-icon {
display: none;
transition: color 300ms;
position: fixed;
top: 18px;
z-index: 1035;
font-size: 1.5rem;
cursor: pointer;
color: rgba(255, 255, 255, .5);
@media (max-width: $smMax) {
display: inline-block;
}
}
.menu-layout__burger-icon--active {
color: white;
}

27
src/common/ScrollToTop.js
View file

@ -1,12 +1,24 @@
import React from 'react';
import { withRouter } from 'react-router-dom'
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
export class ScrollToTop extends React.Component {
const propTypes = {
location: PropTypes.object,
window: PropTypes.shape({
scrollTo: PropTypes.func,
}),
children: PropTypes.node,
};
const defaultProps = {
window,
};
export class ScrollToTopComponent extends React.Component {
componentDidUpdate(prevProps) {
const { location, window } = this.props;
if (location !== prevProps.location) {
window.scrollTo(0, 0)
window.scrollTo(0, 0);
}
}
@ -15,8 +27,9 @@ export class ScrollToTop extends React.Component {
}
}
ScrollToTop.defaultProps = {
window
};
ScrollToTopComponent.defaultProps = defaultProps;
ScrollToTopComponent.propTypes = propTypes;
export default withRouter(ScrollToTop);
const ScrollToTop = withRouter(ScrollToTopComponent);
export default ScrollToTop;

19
src/common/react-tagsinput.scss
View file

@ -3,34 +3,29 @@
border: 1px solid #ccc;
border-radius: .25rem;
overflow: hidden;
min-height: calc(2.6rem + 2px);
min-height: 2.6rem;
padding: 6px 0 0 6px;
}
.react-tagsinput--focused {
border-color: #80bdff;
-webkit-box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
-webkit-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
-webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
-o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}
.react-tagsinput-tag {
font-size: 1rem;
background-color: #f1f1f1;
border-radius: 2px;
border: 1px solid #d1d1d1;
border-radius: 4px;
display: inline-block;
font-weight: 400;
margin: 0 5px 6px 0;
padding: 6px 8px;
line-height: 1;
}
.react-tagsinput-tag:hover {
border-color: #b1b1b1;
color: #fff;
}
.react-tagsinput-remove {
@ -39,9 +34,9 @@
margin-left: 8px;
}
.react-tagsinput-tag a::before {
.react-tagsinput-tag span:before {
content: "\2715";
color: #aaa;
color: #fff;
}
.react-tagsinput-input {

8
src/index.js
View file

@ -5,15 +5,13 @@ import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { applyMiddleware, compose, createStore } from 'redux';
import ReduxThunk from 'redux-thunk';
import '../node_modules/react-datepicker/dist/react-datepicker.css';
import './common/react-tagsinput.scss';
import App from './App';
import './index.scss';
import ScrollToTop from './common/ScrollToTop'
import ScrollToTop from './common/ScrollToTop';
import reducers from './reducers';
import registerServiceWorker from './registerServiceWorker';
import '../node_modules/react-datepicker/dist/react-datepicker.css';
import './common/react-tagsinput.scss';
const composeEnhancers = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

20
src/index.scss
View file

@ -1,5 +1,11 @@
@import './utils/base';
html,
body,
#root {
height: 100%
}
* {
outline: none !important;
}
@ -15,15 +21,16 @@
.dropdown-item {
cursor: pointer;
}
.dropdown-item.active {
.dropdown-item.active,
.dropdown-item:active {
@extend .bg-main;
}
.short-urls-container {
.shlink-container {
padding: 20px 0;
@media (min-width: $mdMin) {
padding: 30px 30px 30px 20px;
padding: 30px 15px;
}
}
@ -36,3 +43,10 @@
.react-datepicker-wrapper {
display: block !important;
}
.navbar-brand {
@media (max-width: $smMax) {
margin-right: auto !important; // This is needed to override a third party style
margin: 0 auto;
}
}

11
src/reducers/index.js
View file

@ -1,11 +1,14 @@
import { combineReducers } from 'redux';
import serversReducer from '../servers/reducers/server';
import selectedServerReducer from '../servers/reducers/selectedServer';
import shortUrlsListReducer from '../short-urls/reducers/shortUrlsList';
import shortUrlsListParamsReducer from '../short-urls/reducers/shortUrlsListParams';
import shortUrlCreationResultReducer from '../short-urls/reducers/shortUrlCreationResult';
import shortUrlVisitsReducer from '../short-urls/reducers/shortUrlVisits';
import shortUrlTagsReducer from '../short-urls/reducers/shortUrlTags';
import tagsListReducer from '../tags/reducers/tagsList';
import tagDeleteReducer from '../tags/reducers/tagDelete';
import tagEditReducer from '../tags/reducers/tagEdit';
export default combineReducers({
servers: serversReducer,
@ -13,5 +16,9 @@ export default combineReducers({
shortUrlsList: shortUrlsListReducer,
shortUrlsListParams: shortUrlsListParamsReducer,
shortUrlCreationResult: shortUrlCreationResultReducer,
shortUrlVisits: shortUrlVisitsReducer
shortUrlVisits: shortUrlVisitsReducer,
shortUrlTags: shortUrlTagsReducer,
tagsList: tagsListReducer,
tagDelete: tagDeleteReducer,
tagEdit: tagEditReducer,
});

20
src/registerServiceWorker.js
View file

@ -8,10 +8,14 @@
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
/* eslint no-console: "off" */
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
@ -22,6 +26,7 @@ export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
@ -55,9 +60,10 @@ export default function register() {
function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
@ -76,7 +82,7 @@ function registerValidSW(swUrl) {
};
};
})
.catch(error => {
.catch((error) => {
console.error('Error during service worker registration:', error);
});
}
@ -84,14 +90,16 @@ function registerValidSW(swUrl) {
function checkValidServiceWorker(swUrl) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
.then((response) => {
const NOT_FOUND_STATUS = 404;
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.status === NOT_FOUND_STATUS ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
@ -110,7 +118,7 @@ function checkValidServiceWorker(swUrl) {
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister();
});
}

80
src/servers/CreateServer.js
View file

@ -1,17 +1,41 @@
import { assoc, pick } from 'ramda';
import { assoc, dissoc, pick, pipe } from 'ramda';
import React from 'react';
import { connect } from 'react-redux';
import { createServer } from './reducers/server';
import { resetSelectedServer } from './reducers/selectedServer';
import { v4 as uuid } from 'uuid';
import PropTypes from 'prop-types';
import { resetSelectedServer } from './reducers/selectedServer';
import { createServer } from './reducers/server';
import './CreateServer.scss';
import ImportServersBtn from './helpers/ImportServersBtn';
export class CreateServer extends React.Component {
const SHOW_IMPORT_MSG_TIME = 4000;
const propTypes = {
createServer: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
resetSelectedServer: PropTypes.func,
};
export class CreateServerComponent extends React.Component {
state = {
name: '',
url: '',
apiKey: '',
serversImported: false,
};
handleSubmit = (e) => {
e.preventDefault();
const { createServer, history: { push } } = this.props;
const server = pipe(
assoc('id', uuid()),
dissoc('serversImported')
)(this.state);
createServer(server);
push(`/server/${server.id}/list-short-urls/1`);
};
componentDidMount() {
@ -19,15 +43,11 @@ export class CreateServer extends React.Component {
}
render() {
const submit = e => {
e.preventDefault();
const server = assoc('id', uuid(), this.state);
this.props.createServer(server);
this.props.history.push(`/server/${server.id}/list-short-urls/1`)
};
const renderInputGroup = (id, placeholder, type = 'text') =>
const renderInputGroup = (id, placeholder, type = 'text') => (
<div className="form-group row">
<label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">{placeholder}:</label>
<label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
{placeholder}:
</label>
<div className="col-lg-11 col-md-10">
<input
type={type}
@ -35,26 +55,50 @@ export class CreateServer extends React.Component {
id={id}
placeholder={placeholder}
value={this.state[id]}
onChange={e => this.setState({ [id]: e.target.value })}
required
onChange={(e) => this.setState({ [id]: e.target.value })}
/>
</div>
</div>;
</div>
);
return (
<div className="create-server">
<form onSubmit={submit}>
<form onSubmit={this.handleSubmit}>
{renderInputGroup('name', 'Name')}
{renderInputGroup('url', 'URL', 'url')}
{renderInputGroup('apiKey', 'API key')}
<div className="text-right">
<button className="btn btn-primary btn-outline-primary">Create server</button>
<ImportServersBtn
onImport={() => {
this.setState({ serversImported: true });
setTimeout(() => this.setState({ serversImported: false }), SHOW_IMPORT_MSG_TIME);
}}
/>
<button className="btn btn-outline-primary">Create server</button>
</div>
{this.state.serversImported && (
<div className="row create-server__import-success-msg">
<div className="col-md-10 offset-md-1">
<div className="p-2 mt-3 bg-main text-white text-center">
Servers properly imported. You can now select one from the list :)
</div>
</div>
</div>
)}
</form>
</div>
);
}
}
export default connect(pick(['selectedServer']), {createServer, resetSelectedServer })(CreateServer);
CreateServerComponent.propTypes = propTypes;
const CreateServer = connect(
pick([ 'selectedServer' ]),
{ createServer, resetSelectedServer }
)(CreateServerComponent);
export default CreateServer;

6
src/servers/CreateServer.scss
View file

@ -12,3 +12,9 @@
text-align: right;
}
}
.create-server__csv-select {
position: absolute;
left: -9999px;
top: -9999px;
}

28
src/servers/DeleteServerButton.js
View file

@ -1,33 +1,41 @@
import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import React from 'react';
import PropTypes from 'prop-types';
import DeleteServerModal from './DeleteServerModal';
import { serverType } from './prop-types';
const propTypes = {
server: serverType,
className: PropTypes.string,
};
export default class DeleteServerButton extends React.Component {
state = { isModalOpen: false };
render() {
const { server } = this.props;
const { server, className } = this.props;
return [
(
return (
<React.Fragment>
<span
className={this.props.className}
onClick={() => this.setState({ isModalOpen: true })}
className={className}
key="deleteServerBtn"
onClick={() => this.setState({ isModalOpen: true })}
>
<FontAwesomeIcon icon={deleteIcon} />
<span className="aside-menu__item-text">Delete this server</span>
</span>
),
(
<DeleteServerModal
isOpen={this.state.isModalOpen}
toggle={() => this.setState({ isModalOpen: !this.state.isModalOpen })}
toggle={() => this.setState(({ isModalOpen }) => ({ isModalOpen: !isModalOpen }))}
server={server}
key="deleteServerModal"
/>
)
];
</React.Fragment>
);
}
}
DeleteServerButton.propTypes = propTypes;

32
src/servers/DeleteServerModal.js
View file

@ -5,8 +5,19 @@ import { withRouter } from 'react-router-dom';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { compose } from 'redux';
import { deleteServer } from './reducers/server';
import { serverType } from './prop-types';
export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }) => {
const propTypes = {
toggle: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
server: serverType,
deleteServer: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
export const DeleteServerModalComponent = ({ server, toggle, isOpen, deleteServer, history }) => {
const closeModal = () => {
deleteServer(server);
toggle();
@ -14,7 +25,7 @@ export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, histor
};
return (
<Modal isOpen={isOpen} toggle={toggle} centered={true}>
<Modal isOpen={isOpen} toggle={toggle} centered>
<ModalHeader toggle={toggle}><span className="text-danger">Delete server</span></ModalHeader>
<ModalBody>
<p>Are you sure you want to delete server <b>{server ? server.name : ''}</b>?</p>
@ -31,18 +42,11 @@ export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, histor
);
};
DeleteServerModal.propTypes = {
toggle: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
server: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
url: PropTypes.string,
apiKey: PropTypes.string,
}),
};
DeleteServerModalComponent.propTypes = propTypes;
export default compose(
const DeleteServerModal = compose(
withRouter,
connect(null, { deleteServer })
)(DeleteServerModal);
)(DeleteServerModalComponent);
export default DeleteServerModal;

63
src/servers/ServersDropdown.js
View file

@ -1,32 +1,59 @@
import { isEmpty, pick } from 'ramda';
import { isEmpty, pick, values } from 'ramda';
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
import { listServers } from './reducers/server';
import PropTypes from 'prop-types';
import { selectServer } from '../servers/reducers/selectedServer';
import serversExporter from '../servers/services/ServersExporter';
import { listServers } from './reducers/server';
import { serverType } from './prop-types';
export class ServersDropdown extends React.Component {
const defaultProps = {
serversExporter,
};
const propTypes = {
servers: PropTypes.object,
serversExporter: PropTypes.shape({
exportServers: PropTypes.func,
}),
selectedServer: serverType,
selectServer: PropTypes.func,
listServers: PropTypes.func,
};
export class ServersDropdownComponent extends React.Component {
renderServers = () => {
const { servers, selectedServer, selectServer } = this.props;
const { servers, selectedServer, selectServer, serversExporter } = this.props;
if (isEmpty(servers)) {
return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>
return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
}
return Object.values(servers).map(({ name, id }) => (
<span key={id}>
return (
<React.Fragment>
{values(servers).map(({ name, id }) => (
<DropdownItem
key={id}
tag={Link}
to={`/server/${id}/list-short-urls/1`}
active={selectedServer && selectedServer.id === id}
onClick={() => selectServer(id)} // FIXME This should be implicit
// FIXME This should be implicit
onClick={() => selectServer(id)}
>
{name}
</DropdownItem>
</span>
));
))}
<DropdownItem divider />
<DropdownItem
className="servers-dropdown__export-item"
onClick={() => serversExporter.exportServers()}
>
Export servers
</DropdownItem>
</React.Fragment>
);
};
componentDidMount() {
@ -35,12 +62,20 @@ export class ServersDropdown extends React.Component {
render() {
return (
<UncontrolledDropdown nav>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>Servers</DropdownToggle>
<DropdownMenu>{this.renderServers()}</DropdownMenu>
<DropdownMenu right>{this.renderServers()}</DropdownMenu>
</UncontrolledDropdown>
);
}
}
export default connect(pick(['servers', 'selectedServer']), { listServers, selectServer })(ServersDropdown);
ServersDropdownComponent.defaultProps = defaultProps;
ServersDropdownComponent.propTypes = propTypes;
const ServersDropdown = connect(
pick([ 'servers', 'selectedServer' ]),
{ listServers, selectServer }
)(ServersDropdownComponent);
export default ServersDropdown;

66
src/servers/helpers/ImportServersBtn.js Normal file
View file

@ -0,0 +1,66 @@
import React from 'react';
import { connect } from 'react-redux';
import { UncontrolledTooltip } from 'reactstrap';
import { assoc } from 'ramda';
import { v4 as uuid } from 'uuid';
import PropTypes from 'prop-types';
import { createServers } from '../reducers/server';
import serversImporter, { serversImporterType } from '../services/ServersImporter';
const defaultProps = {
serversImporter,
onImport: () => ({}),
};
const propTypes = {
onImport: PropTypes.func,
serversImporter: serversImporterType,
createServers: PropTypes.func,
fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
};
export class ImportServersBtnComponent extends React.Component {
constructor(props) {
super(props);
this.fileRef = props.fileRef || React.createRef();
}
render() {
const { serversImporter: { importServersFromFile }, onImport, createServers } = this.props;
const onChange = (e) =>
importServersFromFile(e.target.files[0])
.then((servers) => servers.map((server) => assoc('id', uuid(), server)))
.then(createServers)
.then(onImport);
return (
<React.Fragment>
<button
type="button"
className="btn btn-outline-secondary mr-2"
id="importBtn"
onClick={() => this.fileRef.current.click()}
>
Import from file
</button>
<UncontrolledTooltip placement="top" target="importBtn">
You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>
</UncontrolledTooltip>
<input
type="file"
accept="text/csv"
className="create-server__csv-select"
ref={this.fileRef}
onChange={onChange}
/>
</React.Fragment>
);
}
}
ImportServersBtnComponent.defaultProps = defaultProps;
ImportServersBtnComponent.propTypes = propTypes;
const ImportServersBtn = connect(null, { createServers })(ImportServersBtnComponent);
export default ImportServersBtn;

8
src/servers/prop-types/index.js Normal file
View file

@ -0,0 +1,8 @@
import PropTypes from 'prop-types';
export const serverType = PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
url: PropTypes.string,
apiKey: PropTypes.string,
});

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

@ -1,10 +1,12 @@
import ShlinkApiClient from '../../api/ShlinkApiClient';
import ServersService from '../../servers/services/ServersService';
import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams'
import { curry } from 'ramda';
import shlinkApiClient from '../../api/ShlinkApiClient';
import serversService from '../../servers/services/ServersService';
import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
/* eslint-disable padding-line-between-statements, newline-after-var */
export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
export const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
/* eslint-enable padding-line-between-statements, newline-after-var */
const defaultState = null;
@ -21,15 +23,17 @@ export default function reducer(state = defaultState, action) {
export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
export const _selectServer = (ShlinkApiClient, ServersService, serverId) => dispatch => {
export const _selectServer = (shlinkApiClient, serversService, serverId) => (dispatch) => {
dispatch(resetShortUrlParams());
const selectedServer = ServersService.findServerById(serverId);
ShlinkApiClient.setConfig(selectedServer);
const selectedServer = serversService.findServerById(serverId);
shlinkApiClient.setConfig(selectedServer);
dispatch({
type: SELECT_SERVER,
selectedServer
})
selectedServer,
});
};
export const selectServer = curry(_selectServer)(ShlinkApiClient, ServersService);
export const selectServer = curry(_selectServer)(shlinkApiClient, serversService);

45
src/servers/reducers/server.js
View file

@ -1,37 +1,44 @@
import ServersService from '../services/ServersService';
import { curry } from 'ramda';
import serversService from '../services/ServersService';
export const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
export const CREATE_SERVER = 'shlink/servers/CREATE_SERVER';
export const DELETE_SERVER = 'shlink/servers/DELETE_SERVER';
export default function reducer(state = {}, action) {
switch (action.type) {
case FETCH_SERVERS:
case DELETE_SERVER:
return action.servers;
case CREATE_SERVER:
const server = action.server;
return { ...state, [server.id]: server };
default:
return state;
}
}
export const _listServers = ServersService => ({
export const _listServers = (serversService) => ({
type: FETCH_SERVERS,
servers: ServersService.listServers(),
servers: serversService.listServers(),
});
export const listServers = () => _listServers(ServersService);
export const _createServer = (ServersService, server) => {
ServersService.createServer(server);
return _listServers(ServersService);
};
export const createServer = curry(_createServer)(ServersService);
export const listServers = () => _listServers(serversService);
export const _deleteServer = (ServersService, server) => {
ServersService.deleteServer(server);
return _listServers(ServersService);
export const _createServer = (serversService, server) => {
serversService.createServer(server);
return _listServers(serversService);
};
export const deleteServer = curry(_deleteServer)(ServersService);
export const createServer = curry(_createServer)(serversService);
export const _deleteServer = (serversService, server) => {
serversService.deleteServer(server);
return _listServers(serversService);
};
export const deleteServer = curry(_deleteServer)(serversService);
export const _createServers = (serversService, servers) => {
serversService.createServers(servers);
return _listServers(serversService);
};
export const createServers = curry(_createServers)(serversService);

55
src/servers/services/ServersExporter.js Normal file
View file

@ -0,0 +1,55 @@
import { dissoc, head, keys, values } from 'ramda';
import csvjson from 'csvjson';
import serversService from './ServersService';
const saveCsv = (window, csv) => {
const { navigator, document } = window;
const filename = 'shlink-servers.csv';
const blob = new Blob([ csv ], { type: 'text/csv;charset=utf-8;' });
// IE10 and IE11
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, filename);
return;
}
// Modern browsers
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
export class ServersExporter {
constructor(serversService, window, csvjson) {
this.serversService = serversService;
this.window = window;
this.csvjson = csvjson;
}
exportServers = async () => {
const servers = values(this.serversService.listServers()).map(dissoc('id'));
try {
const csv = this.csvjson.toCSV(servers, {
headers: keys(head(servers)).join(','),
});
saveCsv(this.window, csv);
} catch (e) {
// FIXME Handle error
/* eslint no-console: "off" */
console.error(e);
}
};
}
const serverExporter = new ServersExporter(serversService, global.window, csvjson);
export default serverExporter;

34
src/servers/services/ServersImporter.js Normal file
View file

@ -0,0 +1,34 @@
import csvjson from 'csvjson';
import PropTypes from 'prop-types';
export const serversImporterType = PropTypes.shape({
importServersFromFile: PropTypes.func,
});
export class ServersImporter {
constructor(csvjson) {
this.csvjson = csvjson;
}
importServersFromFile = (file) => {
if (!file || file.type !== 'text/csv') {
return Promise.reject('No file provided or file is not a CSV');
}
const reader = new FileReader();
return new Promise((resolve) => {
reader.addEventListener('loadend', (e) => {
const content = e.target.result;
const servers = this.csvjson.toObject(content);
resolve(servers);
});
reader.readAsText(file);
});
};
}
const serversImporter = new ServersImporter(csvjson);
export default serversImporter;

44
src/servers/services/ServersService.js
View file

@ -1,5 +1,5 @@
import Storage from '../../utils/Storage';
import { dissoc } from 'ramda';
import { assoc, dissoc, reduce } from 'ramda';
import storage from '../../utils/Storage';
const SERVERS_STORAGE_KEY = 'servers';
@ -8,25 +8,29 @@ export class ServersService {
this.storage = storage;
}
listServers = () => {
return this.storage.get(SERVERS_STORAGE_KEY) || {};
listServers = () => this.storage.get(SERVERS_STORAGE_KEY) || {};
findServerById = (serverId) => this.listServers()[serverId];
createServer = (server) => this.createServers([ server ]);
createServers = (servers) => {
const allServers = reduce(
(serversObj, server) => assoc(server.id, server, serversObj),
this.listServers(),
servers
);
this.storage.set(SERVERS_STORAGE_KEY, allServers);
};
findServerById = serverId => {
const servers = this.listServers();
return servers[serverId];
};
createServer = server => {
const servers = this.listServers();
servers[server.id] = server;
this.storage.set(SERVERS_STORAGE_KEY, servers);
};
deleteServer = server => {
const servers = dissoc(server.id, this.listServers());
this.storage.set(SERVERS_STORAGE_KEY, servers);
};
deleteServer = (server) =>
this.storage.set(
SERVERS_STORAGE_KEY,
dissoc(server.id, this.listServers())
);
}
export default new ServersService(Storage);
const serversService = new ServersService(storage);
export default serversService;

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

@ -4,13 +4,13 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { assoc, dissoc, isNil, pick, pipe, replace, trim } from 'ramda';
import React from 'react';
import { connect } from 'react-redux';
import TagsInput from 'react-tagsinput'
import { Collapse } from 'reactstrap';
import DateInput from '../common/DateInput';
import TagsSelector from '../utils/TagsSelector';
import CreateShortUrlResult from './helpers/CreateShortUrlResult';
import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult';
export class CreateShortUrl extends React.Component {
export class CreateShortUrlComponent extends React.Component {
state = {
longUrl: '',
tags: [],
@ -18,42 +18,44 @@ export class CreateShortUrl extends React.Component {
validSince: undefined,
validUntil: undefined,
maxVisits: undefined,
moreOptionsVisible: false
moreOptionsVisible: false,
};
render() {
const { createShortUrl, shortUrlCreationResult, resetCreateShortUrl } = this.props;
const changeTags = tags => this.setState({ tags: tags.map(pipe(trim, replace(/ /g, '-'))) });
const renderOptionalInput = (id, placeholder, type = 'text', props = {}) =>
const changeTags = (tags) => this.setState({ tags: tags.map(pipe(trim, replace(/ /g, '-'))) });
const renderOptionalInput = (id, placeholder, type = 'text', props = {}) => (
<input
className="form-control"
type={type}
placeholder={placeholder}
value={this.state[id]}
onChange={e => this.setState({ [id]: e.target.value })}
onChange={(e) => this.setState({ [id]: e.target.value })}
{...props}
/>;
const createDateInput = (id, placeholder, props = {}) =>
/>
);
const createDateInput = (id, placeholder, props = {}) => (
<DateInput
selected={this.state[id]}
placeholderText={placeholder}
onChange={date => this.setState({ [id]: date })}
isClearable
onChange={(date) => this.setState({ [id]: date })}
{...props}
/>;
const formatDate = date => isNil(date) ? date : date.format();
const save = e => {
/>
);
const formatDate = (date) => isNil(date) ? date : date.format();
const save = (e) => {
e.preventDefault();
createShortUrl(pipe(
dissoc('moreOptionsVisible'), // Remove moreOptionsVisible property
dissoc('moreOptionsVisible'),
assoc('validSince', formatDate(this.state.validSince)),
assoc('validUntil', formatDate(this.state.validUntil))
)(this.state));
};
return (
<div className="short-urls-container">
<div className="shlink-container">
<form onSubmit={save}>
<div className="form-group">
<input
@ -62,19 +64,13 @@ export class CreateShortUrl extends React.Component {
placeholder="Insert the URL to be shortened"
required
value={this.state.longUrl}
onChange={e => this.setState({ longUrl: e.target.value })}
onChange={(e) => this.setState({ longUrl: e.target.value })}
/>
</div>
<Collapse isOpen={this.state.moreOptionsVisible}>
<div className="form-group">
<TagsInput
value={this.state.tags}
onChange={changeTags}
inputProps={{ placeholder: 'Add tags to the URL' }}
onlyUnique
addOnBlur // FIXME Workaround to be able to add tags on Android
/>
<TagsSelector tags={this.state.tags} onChange={changeTags} />
</div>
<div className="row">
@ -101,7 +97,7 @@ export class CreateShortUrl extends React.Component {
<button
type="button"
className="btn btn-outline-secondary create-short-url__btn"
onClick={() => this.setState({ moreOptionsVisible: !this.state.moreOptionsVisible })}
onClick={() => this.setState(({ moreOptionsVisible }) => ({ moreOptionsVisible: !moreOptionsVisible }))}
>
<FontAwesomeIcon icon={this.state.moreOptionsVisible ? upIcon : downIcon} />
&nbsp;
@ -122,7 +118,9 @@ export class CreateShortUrl extends React.Component {
}
}
export default connect(pick(['shortUrlCreationResult']), {
const CreateShortUrl = connect(pick([ 'shortUrlCreationResult' ]), {
createShortUrl,
resetCreateShortUrl
})(CreateShortUrl);
resetCreateShortUrl,
})(CreateShortUrlComponent);
export default CreateShortUrl;

31
src/short-urls/Paginator.js
View file

@ -1,20 +1,26 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import PropTypes from 'prop-types';
import { range } from 'ramda';
export default class Paginator extends React.Component {
render() {
const { paginator = {}, serverId } = this.props;
const propTypes = {
serverId: PropTypes.string.isRequired,
paginator: PropTypes.shape({
currentPage: PropTypes.number,
pagesCount: PropTypes.number,
}),
};
export default function Paginator({ paginator = {}, serverId }) {
const { currentPage, pagesCount = 0 } = paginator;
if (pagesCount <= 1) {
return null;
}
const renderPages = () => {
const pages = [];
for (let i = 1; i <= pagesCount; i++) {
pages.push(
const renderPages = () =>
range(1, pagesCount + 1).map((i) => (
<PaginationItem key={i} active={currentPage === i}>
<PaginationLink
tag={Link}
@ -23,11 +29,7 @@ export default class Paginator extends React.Component {
{i}
</PaginationLink>
</PaginationItem>
);
}
return pages;
};
));
return (
<Pagination listClassName="flex-wrap">
@ -49,4 +51,5 @@ export default class Paginator extends React.Component {
</Pagination>
);
}
}
Paginator.propTypes = propTypes;

67
src/short-urls/SearchBar.js
View file

@ -1,82 +1,55 @@
import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import React from 'react';
import { connect } from 'react-redux';
import { isEmpty, pick } from 'ramda';
import PropTypes from 'prop-types';
import Tag from '../utils/Tag';
import SearchField from '../utils/SearchField';
import { listShortUrls } from './reducers/shortUrlsList';
import './SearchBar.scss';
import { pick, isEmpty } from 'ramda';
import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
export class SearchBar extends React.Component {
state = {
showClearBtn: false,
searchTerm: '',
const propTypes = {
listShortUrls: PropTypes.func,
shortUrlsListParams: shortUrlsListParamsType,
};
timer = null;
render() {
const { listShortUrls, shortUrlsListParams } = this.props;
export function SearchBarComponent({ listShortUrls, shortUrlsListParams }) {
const selectedTags = shortUrlsListParams.tags || [];
return (
<div className="serach-bar-container">
<div className="search-bar">
<input
type="text"
className="form-control form-control-lg search-bar__input"
placeholder="Search..."
onChange={e => this.searchTermChanged(e.target.value)}
value={this.state.searchTerm}
<SearchField onChange={
(searchTerm) => listShortUrls({ ...shortUrlsListParams, searchTerm })
}
/>
<FontAwesomeIcon icon={searchIcon} className="search-bar__icon" />
<div
className="close search-bar__close"
hidden={! this.state.showClearBtn}
onClick={() => this.searchTermChanged('')}
id="search-bar__close"
>
&times;
</div>
</div>
{!isEmpty(selectedTags) && (
<h4 className="search-bar__selected-tag mt-2">
<FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
&nbsp;
{selectedTags.map(tag => <Tag
{selectedTags.map((tag) => (
<Tag
key={tag}
text={tag}
clearable
onClose={() => listShortUrls(
{
...shortUrlsListParams,
tags: selectedTags.filter(selectedTag => selectedTag !== tag)
tags: selectedTags.filter((selectedTag) => selectedTag !== tag),
}
)}
/>)}
/>
))}
</h4>
)}
</div>
);
}
searchTermChanged(searchTerm) {
this.setState({
showClearBtn: searchTerm !== '',
searchTerm: searchTerm,
});
SearchBarComponent.propTypes = propTypes;
const resetTimer = () => {
clearTimeout(this.timer);
this.timer = null;
};
resetTimer();
const SearchBar = connect(pick([ 'shortUrlsListParams' ]), { listShortUrls })(SearchBarComponent);
this.timer = setTimeout(() => {
this.props.listShortUrls({ ...this.props.shortUrlsListParams, searchTerm });
resetTimer();
}, 500);
}
}
export default connect(pick(['shortUrlsListParams']), { listShortUrls })(SearchBar);
export default SearchBar;

22
src/short-urls/SearchBar.scss
View file

@ -1,25 +1,3 @@
@import '../utils/mixins/vertical-align';
.search-bar {
position: relative;
}
.search-bar__input.search-bar__input {
padding-left: 40px;
padding-right: 40px;
}
.search-bar__icon {
@include vertical-align();
left: 15px;
color: #707581;
}
.search-bar__close {
@include vertical-align();
right: 15px;
}
.search-bar__tags-icon {
vertical-align: bottom;
}

156
src/short-urls/ShortUrlVisits.js
View file

@ -1,33 +1,51 @@
import preloader from '@fortawesome/fontawesome-free-solid/faCircleNotch'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { isEmpty, mapObjIndexed, pick } from 'ramda'
import React from 'react'
import { Doughnut, HorizontalBar } from 'react-chartjs-2'
import Moment from 'react-moment'
import { connect } from 'react-redux'
import { Card, CardBody, CardHeader, UncontrolledTooltip } from 'reactstrap'
import DateInput from '../common/DateInput'
import VisitsParser from '../visits/services/VisitsParser'
import { getShortUrlVisits } from './reducers/shortUrlVisits'
import './ShortUrlVisits.scss'
import preloader from '@fortawesome/fontawesome-free-solid/faCircleNotch';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { isEmpty, mapObjIndexed, pick } from 'ramda';
import React from 'react';
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import Moment from 'react-moment';
import { connect } from 'react-redux';
import { Card, CardBody, CardHeader, UncontrolledTooltip } from 'reactstrap';
import PropTypes from 'prop-types';
import DateInput from '../common/DateInput';
import {
processOsStats,
processBrowserStats,
processCountriesStats,
processReferrersStats,
} from '../visits/services/VisitsParser';
import MutedMessage from '../utils/MuttedMessage';
import ExternalLink from '../utils/ExternalLink';
import { serverType } from '../servers/prop-types';
import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
import './ShortUrlVisits.scss';
const MutedMessage = ({ children }) =>
<div className="col-md-10 offset-md-1">
<Card className="bg-light mt-4" body>
<h3 className="text-center text-muted mb-0">
{children}
</h3>
</Card>
</div>;
const propTypes = {
processOsStats: PropTypes.func,
processBrowserStats: PropTypes.func,
processCountriesStats: PropTypes.func,
processReferrersStats: PropTypes.func,
match: PropTypes.object,
getShortUrlVisits: PropTypes.func,
selectedServer: serverType,
shortUrlVisits: shortUrlVisitsType,
};
const defaultProps = {
processOsStats,
processBrowserStats,
processCountriesStats,
processReferrersStats,
};
export class ShortUrlsVisits extends React.Component {
export class ShortUrlsVisitsComponent extends React.Component {
state = { startDate: undefined, endDate: undefined };
loadVisits = () => {
const { match: { params } } = this.props;
this.props.getShortUrlVisits(params.shortCode, mapObjIndexed(
value => value && value.format ? value.format('YYYY-MM-DD') : value,
const { match: { params }, getShortUrlVisits } = this.props;
getShortUrlVisits(params.shortCode, mapObjIndexed(
(value) => value && value.format ? value.format('YYYY-MM-DD') : value,
this.state
))
));
};
componentDidMount() {
@ -38,8 +56,11 @@ export class ShortUrlsVisits extends React.Component {
const {
match: { params },
selectedServer,
visitsParser,
shortUrlVisits: { visits, loading, error, shortUrl }
processOsStats,
processBrowserStats,
processCountriesStats,
processReferrersStats,
shortUrlVisits: { visits, loading, error, shortUrl },
} = this.props;
const serverUrl = selectedServer ? selectedServer.url : '';
const shortLink = `${serverUrl}/${params.shortCode}`;
@ -56,31 +77,42 @@ export class ShortUrlsVisits extends React.Component {
'#46BFBD',
'#FDB45C',
'#949FB1',
'#4D5360'
'#4D5360',
],
borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
borderWidth: 2
}
]
borderWidth: 2,
},
],
});
const renderGraphCard = (title, stats, isBarChart, label) =>
const renderGraphCard = (title, stats, isBarChart, label) => (
<div className="col-md-6">
<Card className="mt-4">
<CardHeader>{title}</CardHeader>
<CardBody>
{!isBarChart && <Doughnut data={generateGraphData(stats, label || title, isBarChart)} options={{
{!isBarChart && (
<Doughnut
data={generateGraphData(stats, label || title, isBarChart)}
options={{
legend: {
position: 'right'
}
}} />}
{isBarChart && <HorizontalBar data={generateGraphData(stats, label || title, isBarChart)} options={{
position: 'right',
},
}}
/>
)}
{isBarChart && (
<HorizontalBar
data={generateGraphData(stats, label || title, isBarChart)}
options={{
legend: {
display: false
}
}} />}
display: false,
},
}}
/>
)}
</CardBody>
</Card>
</div>;
</div>
);
const renderContent = () => {
if (loading) {
return <MutedMessage><FontAwesomeIcon icon={preloader} spin /> Loading...</MutedMessage>;
@ -100,23 +132,25 @@ export class ShortUrlsVisits extends React.Component {
return (
<div className="row">
{renderGraphCard('Operating systems', visitsParser.processOsStats(visits), false)}
{renderGraphCard('Browsers', visitsParser.processBrowserStats(visits), false)}
{renderGraphCard('Countries', visitsParser.processCountriesStats(visits), true, 'Visits')}
{renderGraphCard('Referrers', visitsParser.processReferrersStats(visits), true, 'Visits')}
{renderGraphCard('Operating systems', processOsStats(visits), false)}
{renderGraphCard('Browsers', processBrowserStats(visits), false)}
{renderGraphCard('Countries', processCountriesStats(visits), true, 'Visits')}
{renderGraphCard('Referrers', processReferrersStats(visits), true, 'Visits')}
</div>
);
};
const renderCreated = () =>
const renderCreated = () => (
<span>
<b id="created"><Moment fromNow>{shortUrl.dateCreated}</Moment></b>
<UncontrolledTooltip placement="bottom" target="created">
<Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
</UncontrolledTooltip>
</span>;
</span>
);
return (
<div className="short-urls-container">
<div className="shlink-container">
<header>
<Card className="bg-light">
<CardBody>
@ -125,20 +159,22 @@ export class ShortUrlsVisits extends React.Component {
shortUrl.visitsCount &&
<span className="badge badge-main float-right">Visits: {shortUrl.visitsCount}</span>
}
Visit stats for <a target="_blank" href={shortLink}>{shortLink}</a>
Visit stats for <ExternalLink href={shortLink}>{shortLink}</ExternalLink>
</h2>
<hr />
{shortUrl.dateCreated && <div>
{shortUrl.dateCreated && (
<div>
Created:
&nbsp;
{loading && <small>Loading...</small>}
{!loading && renderCreated()}
</div>}
</div>
)}
<div>
Long URL:
&nbsp;
{loading && <small>Loading...</small>}
{!loading && <a target="_blank" href={shortUrl.longUrl}>{shortUrl.longUrl}</a>}
{!loading && <ExternalLink href={shortUrl.longUrl}>{shortUrl.longUrl}</ExternalLink>}
</div>
</CardBody>
</Card>
@ -151,7 +187,7 @@ export class ShortUrlsVisits extends React.Component {
selected={this.state.startDate}
placeholderText="Since"
isClearable
onChange={date => this.setState({ startDate: date }, () => this.loadVisits())}
onChange={(date) => this.setState({ startDate: date }, () => this.loadVisits())}
/>
</div>
<div className="col-xl-3 col-lg-4 col-md-6">
@ -159,8 +195,8 @@ export class ShortUrlsVisits extends React.Component {
selected={this.state.endDate}
placeholderText="Until"
isClearable
onChange={date => this.setState({ endDate: date }, () => this.loadVisits())}
className="short-url-visits__date-input"
onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
/>
</div>
</div>
@ -174,8 +210,12 @@ export class ShortUrlsVisits extends React.Component {
}
}
ShortUrlsVisits.defaultProps = {
visitsParser: VisitsParser
};
ShortUrlsVisitsComponent.propTypes = propTypes;
ShortUrlsVisitsComponent.defaultProps = defaultProps;
export default connect(pick(['selectedServer', 'shortUrlVisits']), { getShortUrlVisits })(ShortUrlsVisits);
const ShortUrlsVisits = connect(
pick([ 'selectedServer', 'shortUrlVisits' ]),
{ getShortUrlVisits }
)(ShortUrlsVisitsComponent);
export default ShortUrlsVisits;

2
src/short-urls/ShortUrlVisits.scss
View file

@ -2,6 +2,6 @@
.short-url-visits__date-input {
@media (max-width: $smMax) {
margin-top: 0.5rem;
margin-top: .5rem;
}
}

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

@ -1,17 +1,18 @@
import React from 'react';
import { connect } from 'react-redux';
import { assoc } from 'ramda';
import Paginator from './Paginator';
import SearchBar from './SearchBar';
import ShortUrlsList from './ShortUrlsList';
import { assoc } from 'ramda';
export function ShortUrls(props) {
export function ShortUrlsComponent(props) {
const { match: { params } } = props;
// Using a key on a component makes react to create a new instance every time the key changes
const urlsListKey = `${params.serverId}_${params.page}`;
return (
<div className="short-urls-container">
<div className="shlink-container">
<div className="form-group"><SearchBar /></div>
<ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} key={urlsListKey} />
<Paginator paginator={props.shortUrlsList.pagination} serverId={props.match.params.serverId} />
@ -19,4 +20,8 @@ export function ShortUrls(props) {
);
}
export default connect(state => assoc('shortUrlsList', state.shortUrlsList.shortUrls, state.shortUrlsList))(ShortUrls);
const ShortUrls = connect(
(state) => assoc('shortUrlsList', state.shortUrlsList.shortUrls, state.shortUrlsList)
)(ShortUrlsComponent);
export default ShortUrls;

94
src/short-urls/ShortUrlsList.js
View file

@ -1,13 +1,17 @@
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown'
import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { head, isEmpty, pick, toPairs } from 'ramda'
import React from 'react'
import { connect } from 'react-redux'
import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap'
import { ShortUrlsRow } from './helpers/ShortUrlsRow'
import { listShortUrls } from './reducers/shortUrlsList'
import './ShortUrlsList.scss'
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { head, isEmpty, pick, toPairs, keys, values } from 'ramda';
import React from 'react';
import { connect } from 'react-redux';
import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
import qs from 'qs';
import PropTypes from 'prop-types';
import { serverType } from '../servers/prop-types';
import { ShortUrlsRow } from './helpers/ShortUrlsRow';
import { listShortUrls, shortUrlType } from './reducers/shortUrlsList';
import './ShortUrlsList.scss';
import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
const SORTABLE_FIELDS = {
dateCreated: 'Created at',
@ -16,29 +20,43 @@ const SORTABLE_FIELDS = {
visits: 'Visits',
};
export class ShortUrlsList extends React.Component {
refreshList = extraParams => {
const propTypes = {
listShortUrls: PropTypes.func,
shortUrlsListParams: shortUrlsListParamsType,
match: PropTypes.object,
location: PropTypes.object,
loading: PropTypes.bool,
error: PropTypes.bool,
shortUrlsList: PropTypes.arrayOf(shortUrlType),
selectedServer: serverType,
};
export class ShortUrlsListComponent extends React.Component {
refreshList = (extraParams) => {
const { listShortUrls, shortUrlsListParams } = this.props;
listShortUrls({
...shortUrlsListParams,
...extraParams
...extraParams,
});
};
determineOrderDir = field => {
determineOrderDir = (field) => {
if (this.state.orderField !== field) {
return 'ASC';
}
const newOrderMap = {
'ASC': 'DESC',
'DESC': undefined,
ASC: 'DESC',
DESC: undefined,
};
return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
}
orderBy = field => {
};
orderBy = (field) => {
const newOrderDir = this.determineOrderDir(field);
this.setState({ orderField: newOrderDir !== undefined ? field : undefined, orderDir: newOrderDir });
this.refreshList({ orderBy: { [field]: newOrderDir } })
this.refreshList({ orderBy: { [field]: newOrderDir } });
};
renderOrderIcon = (field, className = 'short-urls-list__header-icon') => {
if (this.state.orderField !== field) {
@ -57,21 +75,29 @@ export class ShortUrlsList extends React.Component {
super(props);
const { orderBy } = props.shortUrlsListParams;
this.state = {
orderField: orderBy ? head(Object.keys(orderBy)) : undefined,
orderDir: orderBy ? head(Object.values(orderBy)) : undefined,
}
orderField: orderBy ? head(keys(orderBy)) : undefined,
orderDir: orderBy ? head(values(orderBy)) : undefined,
};
}
componentDidMount() {
const { match: { params } } = this.props;
this.refreshList({ page: params.page });
const { match: { params }, location } = this.props;
const query = qs.parse(location.search, { ignoreQueryPrefix: true });
this.refreshList({ page: params.page, tags: query.tag ? [ query.tag ] : [] });
}
renderShortUrls() {
const { shortUrlsList, selectedServer, loading, error, shortUrlsListParams } = this.props;
if (error) {
return <tr><td colSpan="6" className="text-center table-danger">Something went wrong while loading short URLs :(</td></tr>;
return (
<tr>
<td colSpan="6" className="text-center table-danger">Something went wrong while loading short URLs :(</td>
</tr>
);
}
if (loading) {
@ -82,7 +108,7 @@ export class ShortUrlsList extends React.Component {
return <tr><td colSpan="6" className="text-center">No results found</td></tr>;
}
return shortUrlsList.map(shortUrl => (
return shortUrlsList.map((shortUrl) => (
<ShortUrlsRow
shortUrl={shortUrl}
selectedServer={selectedServer}
@ -101,11 +127,12 @@ export class ShortUrlsList extends React.Component {
Order by
</DropdownToggle>
<DropdownMenu className="short-urls-list__order-dropdown">
{toPairs(SORTABLE_FIELDS).map(([key, value]) =>
<DropdownItem active={this.state.orderField === key} onClick={() => this.orderBy(key)}>
{toPairs(SORTABLE_FIELDS).map(([ key, value ]) => (
<DropdownItem key={key} active={this.state.orderField === key} onClick={() => this.orderBy(key)}>
{value}
{this.renderOrderIcon(key, 'short-urls-list__header-icon--mobile')}
</DropdownItem>)}
</DropdownItem>
))}
</DropdownMenu>
</UncontrolledDropdown>
</div>
@ -159,4 +186,11 @@ export class ShortUrlsList extends React.Component {
}
}
export default connect(pick(['selectedServer', 'shortUrlsListParams']), { listShortUrls })(ShortUrlsList);
ShortUrlsListComponent.propTypes = propTypes;
const ShortUrlsList = connect(
pick([ 'selectedServer', 'shortUrlsListParams' ]),
{ listShortUrls }
)(ShortUrlsListComponent);
export default ShortUrlsList;

24
src/short-urls/helpers/CreateShortUrlResult.js
View file

@ -3,8 +3,18 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { isNil } from 'ramda';
import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import './CreateShortUrlResult.scss'
import { Card, CardBody, Tooltip } from 'reactstrap';
import PropTypes from 'prop-types';
import { createShortUrlResultType } from '../reducers/shortUrlCreationResult';
import './CreateShortUrlResult.scss';
const TIME_TO_SHOW_COPY_TOOLTIP = 2000;
const propTypes = {
resetCreateShortUrl: PropTypes.func,
error: PropTypes.bool,
result: createShortUrlResultType,
};
export default class CreateShortUrlResult extends React.Component {
state = { showCopyTooltip: false };
@ -30,7 +40,7 @@ export default class CreateShortUrlResult extends React.Component {
const { shortUrl } = result;
const onCopy = () => {
this.setState({ showCopyTooltip: true });
setTimeout(() => this.setState({ showCopyTooltip: false }), 2000);
setTimeout(() => this.setState({ showCopyTooltip: false }), TIME_TO_SHOW_COPY_TOOLTIP);
};
return (
@ -39,7 +49,11 @@ export default class CreateShortUrlResult extends React.Component {
<b>Great!</b> The short URL is <b>{shortUrl}</b>
<CopyToClipboard text={shortUrl} onCopy={onCopy}>
<button className="btn btn-light btn-sm create-short-url-result__copy-btn" id="copyBtn" type="button">
<button
className="btn btn-light btn-sm create-short-url-result__copy-btn"
id="copyBtn"
type="button"
>
<FontAwesomeIcon icon={copyIcon} /> Copy
</button>
</CopyToClipboard>
@ -51,4 +65,6 @@ export default class CreateShortUrlResult extends React.Component {
</Card>
);
}
};
}
CreateShortUrlResult.propTypes = propTypes;

100
src/short-urls/helpers/EditTagsModal.js Normal file
View file

@ -0,0 +1,100 @@
import React from 'react';
import { connect } from 'react-redux';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import PropTypes from 'prop-types';
import { pick } from 'ramda';
import TagsSelector from '../../utils/TagsSelector';
import {
editShortUrlTags,
resetShortUrlsTags,
shortUrlTagsType,
shortUrlTagsEdited,
} from '../reducers/shortUrlTags';
import ExternalLink from '../../utils/ExternalLink';
import { shortUrlType } from '../reducers/shortUrlsList';
const propTypes = {
isOpen: PropTypes.bool.isRequired,
toggle: PropTypes.func.isRequired,
url: PropTypes.string.isRequired,
shortUrl: shortUrlType.isRequired,
shortUrlTags: shortUrlTagsType,
editShortUrlTags: PropTypes.func,
shortUrlTagsEdited: PropTypes.func,
resetShortUrlsTags: PropTypes.func,
};
export class EditTagsModalComponent extends React.Component {
saveTags = () => {
const { editShortUrlTags, shortUrl, toggle } = this.props;
editShortUrlTags(shortUrl.shortCode, this.state.tags)
.then(() => {
this.tagsSaved = true;
toggle();
})
.catch(() => {});
};
refreshShortUrls = () => {
if (!this.tagsSaved) {
return;
}
const { shortUrlTagsEdited, shortUrl } = this.props;
const { tags } = this.state;
shortUrlTagsEdited(shortUrl.shortCode, tags);
};
componentDidMount() {
const { resetShortUrlsTags } = this.props;
resetShortUrlsTags();
this.tagsSaved = false;
}
constructor(props) {
super(props);
this.state = { tags: props.shortUrl.tags };
}
render() {
const { isOpen, toggle, url, shortUrlTags } = this.props;
return (
<Modal isOpen={isOpen} toggle={toggle} centered onClosed={() => this.refreshShortUrls()}>
<ModalHeader toggle={toggle}>
Edit tags for <ExternalLink href={url}>{url}</ExternalLink>
</ModalHeader>
<ModalBody>
<TagsSelector tags={this.state.tags} onChange={(tags) => this.setState({ tags })} />
{shortUrlTags.error && (
<div className="p-2 mt-2 bg-danger text-white text-center">
Something went wrong while saving the tags :(
</div>
)}
</ModalBody>
<ModalFooter>
<button className="btn btn-link" onClick={toggle}>Cancel</button>
<button
className="btn btn-primary"
type="button"
disabled={shortUrlTags.saving}
onClick={() => this.saveTags()}
>
{shortUrlTags.saving ? 'Saving tags...' : 'Save tags'}
</button>
</ModalFooter>
</Modal>
);
}
}
EditTagsModalComponent.propTypes = propTypes;
const EditTagsModal = connect(
pick([ 'shortUrlTags' ]),
{ editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited }
)(EditTagsModalComponent);
export default EditTagsModal;

16
src/short-urls/helpers/PreviewModal.js
View file

@ -1,11 +1,21 @@
import React from 'react'
import React from 'react';
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
import PropTypes from 'prop-types';
import './PreviewModal.scss';
import ExternalLink from '../../utils/ExternalLink';
const propTypes = {
url: PropTypes.string,
toggle: PropTypes.func,
isOpen: PropTypes.bool,
};
export default function PreviewModal({ url, toggle, isOpen }) {
return (
<Modal isOpen={isOpen} toggle={toggle} size="lg">
<ModalHeader toggle={toggle}>Preview for <a target="_blank" href={url}>{url}</a></ModalHeader>
<ModalHeader toggle={toggle}>
Preview for <ExternalLink href={url}>{url}</ExternalLink>
</ModalHeader>
<ModalBody>
<div className="text-center">
<p className="preview-modal__loader">Loading...</p>
@ -15,3 +25,5 @@ export default function PreviewModal ({ url, toggle, isOpen }) {
</Modal>
);
}
PreviewModal.propTypes = propTypes;

18
src/short-urls/helpers/QrCodeModal.js
View file

@ -1,11 +1,21 @@
import React from 'react'
import React from 'react';
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
import PropTypes from 'prop-types';
import './QrCodeModal.scss';
import ExternalLink from '../../utils/ExternalLink';
const propTypes = {
url: PropTypes.string,
toggle: PropTypes.func,
isOpen: PropTypes.bool,
};
export default function QrCodeModal({ url, toggle, isOpen }) {
return (
<Modal isOpen={isOpen} toggle={toggle} centered={true}>
<ModalHeader toggle={toggle}>QR code for <a target="_blank" href={url}>{url}</a></ModalHeader>
<Modal isOpen={isOpen} toggle={toggle} centered>
<ModalHeader toggle={toggle}>
QR code for <ExternalLink href={url}>{url}</ExternalLink>
</ModalHeader>
<ModalBody>
<div className="text-center">
<img src={`${url}/qr-code`} className="qr-code-modal__img" alt="QR code" />
@ -14,3 +24,5 @@ export default function QrCodeModal ({ url, toggle, isOpen }) {
</Modal>
);
}
QrCodeModal.propTypes = propTypes;

39
src/short-urls/helpers/ShortUrlsRow.js
View file

@ -1,9 +1,23 @@
import { isEmpty } from 'ramda';
import React from 'react';
import Moment from 'react-moment';
import PropTypes from 'prop-types';
import Tag from '../../utils/Tag';
import './ShortUrlsRow.scss';
import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams';
import { serverType } from '../../servers/prop-types';
import ExternalLink from '../../utils/ExternalLink';
import { shortUrlType } from '../reducers/shortUrlsList';
import { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
import './ShortUrlsRow.scss';
const COPIED_MSG_TIME = 2000;
const propTypes = {
refreshList: PropTypes.func,
shortUrlsListParams: shortUrlsListParamsType,
selectedServer: serverType,
shortUrl: shortUrlType,
};
export class ShortUrlsRow extends React.Component {
state = { copiedToClipboard: false };
@ -15,9 +29,14 @@ export class ShortUrlsRow extends React.Component {
const { refreshList, shortUrlsListParams } = this.props;
const selectedTags = shortUrlsListParams.tags || [];
return tags.map(
tag => <Tag key={tag} text={tag} onClick={() => refreshList({tags: [ ...selectedTags, tag ] })} />
);
return tags.map((tag) => (
<Tag
key={tag}
text={tag}
onClick={() => refreshList({ tags: [ ...selectedTags, tag ] })}
/>
));
}
render() {
@ -30,10 +49,10 @@ export class ShortUrlsRow extends React.Component {
<Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
</td>
<td className="short-urls-row__cell" data-th="Short URL: ">
<a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
<ExternalLink href={completeShortUrl}>{completeShortUrl}</ExternalLink>
</td>
<td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
<a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
<ExternalLink href={shortUrl.originalUrl}>{shortUrl.originalUrl}</ExternalLink>
</td>
<td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
<td className="short-urls-row__cell text-md-right" data-th="Visits: ">{shortUrl.visitsCount}</td>
@ -45,12 +64,12 @@ export class ShortUrlsRow extends React.Component {
Copied short URL!
</small>
<ShortUrlsRowMenu
shortUrl={completeShortUrl}
completeShortUrl={completeShortUrl}
selectedServer={selectedServer}
shortCode={shortUrl.shortCode}
shortUrl={shortUrl}
onCopyToClipboard={() => {
this.setState({ copiedToClipboard: true });
setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);
setTimeout(() => this.setState({ copiedToClipboard: false }), COPIED_MSG_TIME);
}}
/>
</td>
@ -58,3 +77,5 @@ export class ShortUrlsRow extends React.Component {
);
}
}
ShortUrlsRow.propTypes = propTypes;

47
src/short-urls/helpers/ShortUrlsRowMenu.js
View file

@ -1,5 +1,6 @@
import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy';
import pictureIcon from '@fortawesome/fontawesome-free-regular/faImage';
import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie';
import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV';
import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
@ -8,19 +9,36 @@ import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Link } from 'react-router-dom';
import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
import PropTypes from 'prop-types';
import { serverType } from '../../servers/prop-types';
import { shortUrlType } from '../reducers/shortUrlsList';
import PreviewModal from './PreviewModal';
import QrCodeModal from './QrCodeModal';
import './ShortUrlsRowMenu.scss';
import EditTagsModal from './EditTagsModal';
const propTypes = {
completeShortUrl: PropTypes.string,
onCopyToClipboard: PropTypes.func,
selectedServer: serverType,
shortUrl: shortUrlType,
};
export class ShortUrlsRowMenu extends React.Component {
state = { isOpen: false, isQrModalOpen: false, isPreviewOpen: false };
toggle = () => this.setState({ isOpen: !this.state.isOpen });
state = {
isOpen: false,
isQrModalOpen: false,
isPreviewOpen: false,
isTagsModalOpen: false,
};
toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
render() {
const { shortUrl, onCopyToClipboard, selectedServer, shortCode } = this.props;
const { completeShortUrl, onCopyToClipboard, selectedServer, shortUrl } = this.props;
const serverId = selectedServer ? selectedServer.id : '';
const toggleQrCode = () => this.setState({isQrModalOpen: !this.state.isQrModalOpen});
const togglePreview = () => this.setState({isPreviewOpen: !this.state.isPreviewOpen});
const toggleQrCode = () => this.setState(({ isQrModalOpen }) => ({ isQrModalOpen: !isQrModalOpen }));
const togglePreview = () => this.setState(({ isPreviewOpen }) => ({ isPreviewOpen: !isPreviewOpen }));
const toggleTags = () => this.setState(({ isTagsModalOpen }) => ({ isTagsModalOpen: !isTagsModalOpen }));
return (
<ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
@ -28,9 +46,18 @@ export class ShortUrlsRowMenu extends React.Component {
&nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
</DropdownToggle>
<DropdownMenu>
<DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortCode}/visits`}>
<DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
<FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit Stats
</DropdownItem>
<DropdownItem onClick={toggleTags}>
<FontAwesomeIcon icon={tagsIcon} /> &nbsp;Edit tags
</DropdownItem>
<EditTagsModal
url={completeShortUrl}
shortUrl={shortUrl}
isOpen={this.state.isTagsModalOpen}
toggle={toggleTags}
/>
<DropdownItem divider />
@ -38,7 +65,7 @@ export class ShortUrlsRowMenu extends React.Component {
<FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
</DropdownItem>
<PreviewModal
url={shortUrl}
url={completeShortUrl}
isOpen={this.state.isPreviewOpen}
toggle={togglePreview}
/>
@ -47,14 +74,14 @@ export class ShortUrlsRowMenu extends React.Component {
<FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
</DropdownItem>
<QrCodeModal
url={shortUrl}
url={completeShortUrl}
isOpen={this.state.isQrModalOpen}
toggle={toggleQrCode}
/>
<DropdownItem divider />
<CopyToClipboard text={shortUrl} onCopy={onCopyToClipboard}>
<CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}>
<DropdownItem>
<FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard
</DropdownItem>
@ -64,3 +91,5 @@ export class ShortUrlsRowMenu extends React.Component {
);
}
}
ShortUrlsRowMenu.propTypes = propTypes;

21
src/short-urls/reducers/shortUrlCreationResult.js
View file

@ -1,10 +1,21 @@
import ShlinkApiClient from '../../api/ShlinkApiClient';
import { curry } from 'ramda';
import PropTypes from 'prop-types';
import shlinkApiClient from '../../api/ShlinkApiClient';
/* eslint-disable padding-line-between-statements, newline-after-var */
const CREATE_SHORT_URL_START = 'shlink/createShortUrl/CREATE_SHORT_URL_START';
const CREATE_SHORT_URL_ERROR = 'shlink/createShortUrl/CREATE_SHORT_URL_ERROR';
const CREATE_SHORT_URL = 'shlink/createShortUrl/CREATE_SHORT_URL';
const RESET_CREATE_SHORT_URL = 'shlink/createShortUrl/RESET_CREATE_SHORT_URL';
/* eslint-enable padding-line-between-statements, newline-after-var */
export const createShortUrlResultType = PropTypes.shape({
result: PropTypes.shape({
shortUrl: PropTypes.string,
}),
saving: PropTypes.bool,
error: PropTypes.bool,
});
const defaultState = {
result: null,
@ -38,16 +49,18 @@ export default function reducer(state = defaultState, action) {
}
}
export const _createShortUrl = (ShlinkApiClient, data) => async dispatch => {
export const _createShortUrl = (shlinkApiClient, data) => async (dispatch) => {
dispatch({ type: CREATE_SHORT_URL_START });
try {
const result = await ShlinkApiClient.createShortUrl(data);
const result = await shlinkApiClient.createShortUrl(data);
dispatch({ type: CREATE_SHORT_URL, result });
} catch (e) {
dispatch({ type: CREATE_SHORT_URL_ERROR });
}
};
export const createShortUrl = curry(_createShortUrl)(ShlinkApiClient);
export const createShortUrl = curry(_createShortUrl)(shlinkApiClient);
export const resetCreateShortUrl = () => ({ type: RESET_CREATE_SHORT_URL });

77
src/short-urls/reducers/shortUrlTags.js Normal file
View file

@ -0,0 +1,77 @@
import { curry } from 'ramda';
import PropTypes from 'prop-types';
import shlinkApiClient from '../../api/ShlinkApiClient';
/* eslint-disable padding-line-between-statements, newline-after-var */
export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
export const EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS';
export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
export const SHORT_URL_TAGS_EDITED = 'shlink/shortUrlTags/SHORT_URL_TAGS_EDITED';
/* eslint-enable padding-line-between-statements, newline-after-var */
export const shortUrlTagsType = PropTypes.shape({
shortCode: PropTypes.string,
tags: PropTypes.arrayOf(PropTypes.string).isRequired,
saving: PropTypes.bool.isRequired,
error: PropTypes.bool.isRequired,
});
const defaultState = {
shortCode: null,
tags: [],
saving: false,
error: false,
};
export default function reducer(state = defaultState, action) {
switch (action.type) {
case EDIT_SHORT_URL_TAGS_START:
return {
...state,
saving: true,
error: false,
};
case EDIT_SHORT_URL_TAGS_ERROR:
return {
...state,
saving: false,
error: true,
};
case EDIT_SHORT_URL_TAGS:
return {
shortCode: action.shortCode,
tags: action.tags,
saving: false,
error: false,
};
case RESET_EDIT_SHORT_URL_TAGS:
return defaultState;
default:
return state;
}
}
export const _editShortUrlTags = (shlinkApiClient, shortCode, tags) => async (dispatch) => {
dispatch({ type: EDIT_SHORT_URL_TAGS_START });
try {
// Update short URL tags
await shlinkApiClient.updateShortUrlTags(shortCode, tags);
dispatch({ tags, shortCode, type: EDIT_SHORT_URL_TAGS });
} catch (e) {
dispatch({ type: EDIT_SHORT_URL_TAGS_ERROR });
throw e;
}
};
export const editShortUrlTags = curry(_editShortUrlTags)(shlinkApiClient);
export const resetShortUrlsTags = () => ({ type: RESET_EDIT_SHORT_URL_TAGS });
export const shortUrlTagsEdited = (shortCode, tags) => ({
tags,
shortCode,
type: SHORT_URL_TAGS_EDITED,
});

30
src/short-urls/reducers/shortUrlVisits.js
View file

@ -1,15 +1,26 @@
import ShlinkApiClient from '../../api/ShlinkApiClient';
import { curry } from 'ramda';
import PropTypes from 'prop-types';
import shlinkApiClient from '../../api/ShlinkApiClient';
import { shortUrlType } from './shortUrlsList';
/* eslint-disable padding-line-between-statements, newline-after-var */
const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_ERROR';
const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
/* eslint-enable padding-line-between-statements, newline-after-var */
export const shortUrlVisitsType = PropTypes.shape({
shortUrl: shortUrlType,
visits: PropTypes.array,
loading: PropTypes.bool,
error: PropTypes.bool,
});
const initialState = {
shortUrl: {},
visits: [],
loading: false,
error: false
error: false,
};
export default function dispatch(state = initialState, action) {
@ -17,34 +28,35 @@ export default function dispatch (state = initialState, action) {
case GET_SHORT_URL_VISITS_START:
return {
...state,
loading: true
loading: true,
};
case GET_SHORT_URL_VISITS_ERROR:
return {
...state,
loading: false,
error: true
error: true,
};
case GET_SHORT_URL_VISITS:
return {
shortUrl: action.shortUrl,
visits: action.visits,
loading: false,
error: false
error: false,
};
default:
return state;
}
}
export const _getShortUrlVisits = (ShlinkApiClient, shortCode, dates) => dispatch => {
export const _getShortUrlVisits = (shlinkApiClient, shortCode, dates) => (dispatch) => {
dispatch({ type: GET_SHORT_URL_VISITS_START });
Promise.all([
ShlinkApiClient.getShortUrlVisits(shortCode, dates),
ShlinkApiClient.getShortUrl(shortCode)
shlinkApiClient.getShortUrlVisits(shortCode, dates),
shlinkApiClient.getShortUrl(shortCode),
])
.then(([ visits, shortUrl ]) => dispatch({ visits, shortUrl, type: GET_SHORT_URL_VISITS }))
.catch(() => dispatch({ type: GET_SHORT_URL_VISITS_ERROR }));
};
export const getShortUrlVisits = curry(_getShortUrlVisits)(ShlinkApiClient);
export const getShortUrlVisits = curry(_getShortUrlVisits)(shlinkApiClient);

32
src/short-urls/reducers/shortUrlsList.js
View file

@ -1,8 +1,19 @@
import ShlinkApiClient from '../../api/ShlinkApiClient';
import { assoc, assocPath } from 'ramda';
import PropTypes from 'prop-types';
import shlinkApiClient from '../../api/ShlinkApiClient';
import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
/* eslint-disable padding-line-between-statements, newline-after-var */
const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR';
export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
/* eslint-enable padding-line-between-statements, newline-after-var */
export const shortUrlType = PropTypes.shape({
tags: PropTypes.arrayOf(PropTypes.string),
shortCode: PropTypes.string,
originalUrl: PropTypes.string,
});
const initialState = {
shortUrls: {},
@ -17,27 +28,36 @@ export default function reducer(state = initialState, action) {
return {
loading: false,
error: false,
shortUrls: action.shortUrls
shortUrls: action.shortUrls,
};
case LIST_SHORT_URLS_ERROR:
return {
loading: false,
error: true,
shortUrls: []
shortUrls: [],
};
case SHORT_URL_TAGS_EDITED:
const { data } = state.shortUrls;
return assocPath([ 'shortUrls', 'data' ], data.map((shortUrl) =>
shortUrl.shortCode === action.shortCode
? assoc('tags', action.tags, shortUrl)
: shortUrl), state);
default:
return state;
}
}
export const _listShortUrls = (ShlinkApiClient, params = {}) => async dispatch => {
export const _listShortUrls = (shlinkApiClient, params = {}) => async (dispatch) => {
dispatch({ type: LIST_SHORT_URLS_START });
try {
const shortUrls = await ShlinkApiClient.listShortUrls(params);
const shortUrls = await shlinkApiClient.listShortUrls(params);
dispatch({ type: LIST_SHORT_URLS, shortUrls, params });
} catch (e) {
dispatch({ type: LIST_SHORT_URLS_ERROR, params });
}
};
export const listShortUrls = (params = {}) => _listShortUrls(ShlinkApiClient, params);
export const listShortUrls = (params = {}) => _listShortUrls(shlinkApiClient, params);

7
src/short-urls/reducers/shortUrlsListParams.js
View file

@ -1,7 +1,14 @@
import PropTypes from 'prop-types';
import { LIST_SHORT_URLS } from './shortUrlsList';
export const RESET_SHORT_URL_PARAMS = 'shlink/shortUrlsListParams/RESET_SHORT_URL_PARAMS';
export const shortUrlsListParamsType = PropTypes.shape({
page: PropTypes.string,
tags: PropTypes.arrayOf(PropTypes.string),
searchTerm: PropTypes.string,
});
const defaultState = { page: '1' };
export default function reducer(state = defaultState, action) {

74
src/tags/TagCard.js Normal file
View file

@ -0,0 +1,74 @@
import { Card, CardBody } from 'reactstrap';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
import PropTypes from 'prop-types';
import React from 'react';
import { Link } from 'react-router-dom';
import colorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
import './TagCard.scss';
import DeleteTagConfirmModal from './helpers/DeleteTagConfirmModal';
import EditTagModal from './helpers/EditTagModal';
const propTypes = {
tag: PropTypes.string,
currentServerId: PropTypes.string,
colorGenerator: colorGeneratorType,
};
const defaultProps = {
colorGenerator,
};
export default class TagCard extends React.Component {
state = { isDeleteModalOpen: false, isEditModalOpen: false };
render() {
const { tag, colorGenerator, currentServerId } = this.props;
const toggleDelete = () =>
this.setState(({ isDeleteModalOpen }) => ({ isDeleteModalOpen: !isDeleteModalOpen }));
const toggleEdit = () =>
this.setState(({ isEditModalOpen }) => ({ isEditModalOpen: !isEditModalOpen }));
return (
<Card className="tag-card">
<CardBody className="tag-card__body">
<button
className="btn btn-light btn-sm tag-card__btn tag-card__btn--last"
onClick={toggleDelete}
>
<FontAwesomeIcon icon={deleteIcon} />
</button>
<button
className="btn btn-light btn-sm tag-card__btn"
onClick={toggleEdit}
>
<FontAwesomeIcon icon={editIcon} />
</button>
<h5 className="tag-card__tag-title">
<div
style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
className="tag-card__tag-bullet"
/>
<Link to={`/server/${currentServerId}/list-short-urls/1?tag=${tag}`}>
{tag}
</Link>
</h5>
</CardBody>
<DeleteTagConfirmModal
tag={tag}
toggle={toggleDelete}
isOpen={this.state.isDeleteModalOpen}
/>
<EditTagModal
tag={tag}
toggle={toggleEdit}
isOpen={this.state.isEditModalOpen}
/>
</Card>
);
}
}
TagCard.propTypes = propTypes;
TagCard.defaultProps = defaultProps;

36
src/tags/TagCard.scss Normal file
View file

@ -0,0 +1,36 @@
.tag-card.tag-card {
background-color: #eee;
margin-bottom: .5rem;
}
.tag-card__body.tag-card__body {
padding: .75rem;
}
.tag-card__tag-title {
margin: 0;
line-height: 31px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-right: 5px;
}
.tag-card__tag-bullet {
$width: 20px;
border-radius: 50%;
width: $width;
height: $width;
display: inline-block;
vertical-align: -4px;
margin-right: 7px;
}
.tag-card__btn {
float: right;
}
.tag-card__btn--last {
margin-left: 3px;
}

92
src/tags/TagsList.js Normal file
View file

@ -0,0 +1,92 @@
import React from 'react';
import { connect } from 'react-redux';
import { pick, splitEvery } from 'ramda';
import PropTypes from 'prop-types';
import MuttedMessage from '../utils/MuttedMessage';
import SearchField from '../utils/SearchField';
import { filterTags, listTags } from './reducers/tagsList';
import TagCard from './TagCard';
const { ceil } = Math;
const TAGS_GROUP_SIZE = 4;
const propTypes = {
filterTags: PropTypes.func,
listTags: PropTypes.func,
tagsList: PropTypes.shape({
loading: PropTypes.bool,
}),
match: PropTypes.object,
};
export class TagsListComponent extends React.Component {
componentDidMount() {
const { listTags } = this.props;
listTags();
}
renderContent() {
const { tagsList, match } = this.props;
if (tagsList.loading) {
return <MuttedMessage marginSize={0}>Loading...</MuttedMessage>;
}
if (tagsList.error) {
return (
<div className="col-12">
<div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
</div>
);
}
const tagsCount = tagsList.filteredTags.length;
if (tagsCount < 1) {
return <MuttedMessage>No tags found</MuttedMessage>;
}
const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUP_SIZE), tagsList.filteredTags);
return (
<React.Fragment>
{tagsGroups.map((group, index) => (
<div key={index} className="col-md-6 col-xl-3">
{group.map((tag) => (
<TagCard
key={tag}
tag={tag}
currentServerId={match.params.serverId}
/>
))}
</div>
))}
</React.Fragment>
);
}
render() {
const { filterTags } = this.props;
return (
<div className="shlink-container">
{!this.props.tagsList.loading && (
<SearchField
className="mb-3"
placeholder="Search tags..."
onChange={filterTags}
/>
)}
<div className="row">
{this.renderContent()}
</div>
</div>
);
}
}
TagsListComponent.propTypes = propTypes;
const TagsList = connect(pick([ 'tagsList' ]), { listTags, filterTags })(TagsListComponent);
export default TagsList;

78
src/tags/helpers/DeleteTagConfirmModal.js Normal file
View file

@ -0,0 +1,78 @@
import React from 'react';
import { connect } from 'react-redux';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import PropTypes from 'prop-types';
import { pick } from 'ramda';
import { deleteTag, tagDeleted, tagDeleteType } from '../reducers/tagDelete';
const propTypes = {
tag: PropTypes.string.isRequired,
toggle: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
deleteTag: PropTypes.func,
tagDelete: tagDeleteType,
tagDeleted: PropTypes.func,
};
export class DeleteTagConfirmModalComponent extends React.Component {
doDelete = () => {
const { tag, toggle, deleteTag } = this.props;
deleteTag(tag).then(() => {
this.tagWasDeleted = true;
toggle();
});
};
handleOnClosed = () => {
if (!this.tagWasDeleted) {
return;
}
const { tagDeleted, tag } = this.props;
tagDeleted(tag);
};
componentDidMount() {
this.tagWasDeleted = false;
}
render() {
const { tag, toggle, isOpen, tagDelete } = this.props;
return (
<Modal toggle={toggle} isOpen={isOpen} centered onClosed={this.handleOnClosed}>
<ModalHeader toggle={toggle}>
<span className="text-danger">Delete tag</span>
</ModalHeader>
<ModalBody>
Are you sure you want to delete tag <b>{tag}</b>?
{tagDelete.error && (
<div className="p-2 mt-2 bg-danger text-white text-center">
Something went wrong while deleting the tag :(
</div>
)}
</ModalBody>
<ModalFooter>
<button className="btn btn-link" onClick={toggle}>Cancel</button>
<button
className="btn btn-danger"
disabled={tagDelete.deleting}
onClick={() => this.doDelete()}
>
{tagDelete.deleting ? 'Deleting tag...' : 'Delete tag'}
</button>
</ModalFooter>
</Modal>
);
}
}
DeleteTagConfirmModalComponent.propTypes = propTypes;
const DeleteTagConfirmModal = connect(
pick([ 'tagDelete' ]),
{ deleteTag, tagDeleted }
)(DeleteTagConfirmModalComponent);
export default DeleteTagConfirmModal;

141
src/tags/helpers/EditTagModal.js Normal file
View file

@ -0,0 +1,141 @@
import React from 'react';
import { connect } from 'react-redux';
import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
import { pick } from 'ramda';
import { ChromePicker } from 'react-color';
import colorIcon from '@fortawesome/fontawesome-free-solid/faPalette';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import colorGenerator, { colorGeneratorType } from '../../utils/ColorGenerator';
import { editTag, tagEdited } from '../reducers/tagEdit';
import './EditTagModal.scss';
const propTypes = {
tag: PropTypes.string,
editTag: PropTypes.func,
toggle: PropTypes.func,
tagEdited: PropTypes.func,
colorGenerator: colorGeneratorType,
isOpen: PropTypes.bool,
tagEdit: PropTypes.shape({
error: PropTypes.bool,
editing: PropTypes.bool,
}),
};
const defaultProps = {
colorGenerator,
};
export class EditTagModalComponent extends React.Component {
saveTag = (e) => {
e.preventDefault();
const { tag: oldName, editTag, toggle } = this.props;
const { tag: newName, color } = this.state;
editTag(oldName, newName, color)
.then(() => {
this.tagWasEdited = true;
toggle();
})
.catch(() => {});
};
handleOnClosed = () => {
if (!this.tagWasEdited) {
return;
}
const { tag: oldName, tagEdited } = this.props;
const { tag: newName, color } = this.state;
tagEdited(oldName, newName, color);
};
constructor(props) {
super(props);
const { colorGenerator, tag } = props;
this.state = {
showColorPicker: false,
tag,
color: colorGenerator.getColorForKey(tag),
};
}
componentDidMount() {
this.tagWasEdited = false;
}
render() {
const { isOpen, toggle, tagEdit } = this.props;
const { tag, color } = this.state;
const toggleColorPicker = () =>
this.setState(({ showColorPicker }) => ({ showColorPicker: !showColorPicker }));
return (
<Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.handleOnClosed}>
<form onSubmit={(e) => this.saveTag(e)}>
<ModalHeader toggle={toggle}>Edit tag</ModalHeader>
<ModalBody>
<div className="input-group">
<div
className="input-group-prepend"
id="colorPickerBtn"
onClick={toggleColorPicker}
>
<div
className="input-group-text edit-tag-modal__color-picker-toggle"
style={{
backgroundColor: color,
borderColor: color,
}}
>
<FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
</div>
</div>
<Popover
isOpen={this.state.showColorPicker}
toggle={toggleColorPicker}
target="colorPickerBtn"
placement="right"
>
<ChromePicker
color={color}
disableAlpha
onChange={(color) => this.setState({ color: color.hex })}
/>
</Popover>
<input
type="text"
value={tag}
placeholder="Tag"
required
className="form-control"
onChange={(e) => this.setState({ tag: e.target.value })}
/>
</div>
{tagEdit.error && (
<div className="p-2 mt-2 bg-danger text-white text-center">
Something went wrong while editing the tag :(
</div>
)}
</ModalBody>
<ModalFooter>
<button type="button" className="btn btn-link" onClick={toggle}>Cancel</button>
<button type="submit" className="btn btn-primary" disabled={tagEdit.editing}>
{tagEdit.editing ? 'Saving...' : 'Save'}
</button>
</ModalFooter>
</form>
</Modal>
);
}
}
EditTagModalComponent.propTypes = propTypes;
EditTagModalComponent.defaultProps = defaultProps;
const EditTagModal = connect(pick([ 'tagEdit' ]), { editTag, tagEdited })(EditTagModalComponent);
export default EditTagModal;

7
src/tags/helpers/EditTagModal.scss Normal file
View file

@ -0,0 +1,7 @@
.edit-tag-modal__color-picker-toggle {
cursor: pointer;
}
.edit-tag-modal__color-icon {
color: #fff;
}

59
src/tags/reducers/tagDelete.js Normal file
View file

@ -0,0 +1,59 @@
import { curry } from 'ramda';
import PropTypes from 'prop-types';
import shlinkApiClient from '../../api/ShlinkApiClient';
/* eslint-disable padding-line-between-statements, newline-after-var */
const DELETE_TAG_START = 'shlink/deleteTag/DELETE_TAG_START';
const DELETE_TAG_ERROR = 'shlink/deleteTag/DELETE_TAG_ERROR';
const DELETE_TAG = 'shlink/deleteTag/DELETE_TAG';
export const TAG_DELETED = 'shlink/deleteTag/TAG_DELETED';
/* eslint-enable padding-line-between-statements, newline-after-var */
export const tagDeleteType = PropTypes.shape({
deleting: PropTypes.bool,
error: PropTypes.bool,
});
const defaultState = {
deleting: false,
error: false,
};
export default function reducer(state = defaultState, action) {
switch (action.type) {
case DELETE_TAG_START:
return {
deleting: true,
error: false,
};
case DELETE_TAG_ERROR:
return {
deleting: false,
error: true,
};
case DELETE_TAG:
return {
deleting: false,
error: false,
};
default:
return state;
}
}
export const _deleteTag = (shlinkApiClient, tag) => async (dispatch) => {
dispatch({ type: DELETE_TAG_START });
try {
await shlinkApiClient.deleteTags([ tag ]);
dispatch({ type: DELETE_TAG });
} catch (e) {
dispatch({ type: DELETE_TAG_ERROR });
throw e;
}
};
export const deleteTag = curry(_deleteTag)(shlinkApiClient);
export const tagDeleted = (tag) => ({ type: TAG_DELETED, tag });

67
src/tags/reducers/tagEdit.js Normal file
View file

@ -0,0 +1,67 @@
import { curry, pick } from 'ramda';
import shlinkApiClient from '../../api/ShlinkApiClient';
import colorGenerator from '../../utils/ColorGenerator';
/* eslint-disable padding-line-between-statements, newline-after-var */
const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START';
const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR';
const EDIT_TAG = 'shlink/editTag/EDIT_TAG';
/* eslint-enable padding-line-between-statements, newline-after-var */
export const TAG_EDITED = 'shlink/editTag/TAG_EDITED';
const defaultState = {
oldName: '',
newName: '',
editing: false,
error: false,
};
export default function reducer(state = defaultState, action) {
switch (action.type) {
case EDIT_TAG_START:
return {
...state,
editing: true,
error: false,
};
case EDIT_TAG_ERROR:
return {
...state,
editing: false,
error: true,
};
case EDIT_TAG:
return {
...pick([ 'oldName', 'newName' ], action),
editing: false,
error: false,
};
default:
return state;
}
}
export const _editTag = (shlinkApiClient, colorGenerator, oldName, newName, color) =>
async (dispatch) => {
dispatch({ type: EDIT_TAG_START });
try {
await shlinkApiClient.editTag(oldName, newName);
colorGenerator.setColorForKey(newName, color);
dispatch({ type: EDIT_TAG, oldName, newName });
} catch (e) {
dispatch({ type: EDIT_TAG_ERROR });
throw e;
}
};
export const editTag = curry(_editTag)(shlinkApiClient, colorGenerator);
export const tagEdited = (oldName, newName, color) => ({
type: TAG_EDITED,
oldName,
newName,
color,
});

88
src/tags/reducers/tagsList.js Normal file
View file

@ -0,0 +1,88 @@
import { reject } from 'ramda';
import shlinkApiClient from '../../api/ShlinkApiClient';
import { TAG_DELETED } from './tagDelete';
import { TAG_EDITED } from './tagEdit';
/* eslint-disable padding-line-between-statements, newline-after-var */
const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
const LIST_TAGS = 'shlink/tagsList/LIST_TAGS';
const FILTER_TAGS = 'shlink/tagsList/FILTER_TAGS';
/* eslint-enable padding-line-between-statements, newline-after-var */
const defaultState = {
tags: [],
filteredTags: [],
loading: false,
error: false,
};
export default function reducer(state = defaultState, action) {
switch (action.type) {
case LIST_TAGS_START:
return {
...state,
loading: true,
error: false,
};
case LIST_TAGS_ERROR:
return {
...state,
loading: false,
error: true,
};
case LIST_TAGS:
return {
tags: action.tags,
filteredTags: action.tags,
loading: false,
error: false,
};
case TAG_DELETED:
return {
...state,
// FIXME This should be optimized somehow...
tags: reject((tag) => tag === action.tag, state.tags),
filteredTags: reject((tag) => tag === action.tag, state.filteredTags),
};
case TAG_EDITED:
const renameTag = (tag) => tag === action.oldName ? action.newName : tag;
return {
...state,
// FIXME This should be optimized somehow...
tags: state.tags.map(renameTag).sort(),
filteredTags: state.filteredTags.map(renameTag).sort(),
};
case FILTER_TAGS:
return {
...state,
filteredTags: state.tags.filter(
(tag) => tag.toLowerCase().match(action.searchTerm),
),
};
default:
return state;
}
}
export const _listTags = (shlinkApiClient) => async (dispatch) => {
dispatch({ type: LIST_TAGS_START });
try {
const tags = await shlinkApiClient.listTags();
dispatch({ tags, type: LIST_TAGS });
} catch (e) {
dispatch({ type: LIST_TAGS_ERROR });
}
};
export const listTags = () => _listTags(shlinkApiClient);
export const filterTags = (searchTerm) => ({
type: FILTER_TAGS,
searchTerm,
});

53
src/utils/ColorGenerator.js
View file

@ -1,13 +1,16 @@
import Storage from './Storage';
import { range } from 'ramda';
import PropTypes from 'prop-types';
import storage from './Storage';
const buildRandomColor = () => {
const HEX_COLOR_LENGTH = 6;
const { floor, random } = Math;
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
const buildRandomColor = () =>
`#${
range(0, HEX_COLOR_LENGTH)
.map(() => letters[floor(random() * letters.length)])
.join('')
}`;
export class ColorGenerator {
constructor(storage) {
@ -15,18 +18,30 @@ export class ColorGenerator {
this.colors = this.storage.get('colors') || {};
}
getColorForKey = key => {
let color = this.colors[key];
if (color) {
return color;
}
getColorForKey = (key) => {
const color = this.colors[key];
// If a color has not been set yet, generate a random one and save it
color = buildRandomColor();
this.colors[key] = color;
this.storage.set('colors', this.colors);
return color;
};
if (!color) {
this.setColorForKey(key, buildRandomColor());
return this.getColorForKey(key);
}
export default new ColorGenerator(Storage);
return color;
};
setColorForKey = (key, color) => {
this.colors[key] = color;
this.storage.set('colors', this.colors);
}
}
export const colorGeneratorType = PropTypes.shape({
getColorForKey: PropTypes.func,
setColorForKey: PropTypes.func,
});
const colorGenerator = new ColorGenerator(storage);
export default colorGenerator;

19
src/utils/ExternalLink.js Normal file
View file

@ -0,0 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
const propTypes = {
href: PropTypes.string.isRequired,
children: PropTypes.node,
};
export default function ExternalLink(props) {
const { href, children, ...rest } = props;
return (
<a target="_blank" rel="noopener noreferrer" href={href} {...rest}>
{children}
</a>
);
}
ExternalLink.propTypes = propTypes;

28
src/utils/MuttedMessage.js Normal file
View file

@ -0,0 +1,28 @@
import React from 'react';
import { Card } from 'reactstrap';
import classnames from 'classnames';
import PropTypes from 'prop-types';
const DEFAULT_MARGIN_SIZE = 4;
const propTypes = {
marginSize: PropTypes.number,
children: PropTypes.node,
};
export default function MutedMessage({ children, marginSize = DEFAULT_MARGIN_SIZE }) {
const cardClasses = classnames('bg-light', {
[`mt-${marginSize}`]: marginSize > 0,
});
return (
<div className="col-md-10 offset-md-1">
<Card className={cardClasses} body>
<h3 className="text-center text-muted mb-0">
{children}
</h3>
</Card>
</div>
);
}
MutedMessage.propTypes = propTypes;

69
src/utils/SearchField.js Normal file
View file

@ -0,0 +1,69 @@
import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './SearchField.scss';
const DEFAULT_SEARCH_INTERVAL = 500;
const propTypes = {
onChange: PropTypes.func.isRequired,
className: PropTypes.string,
placeholder: PropTypes.string,
};
const defaultProps = {
className: '',
placeholder: 'Search...',
};
export default class SearchField extends React.Component {
state = { showClearBtn: false, searchTerm: '' };
timer = null;
searchTermChanged(searchTerm, timeout = DEFAULT_SEARCH_INTERVAL) {
this.setState({
showClearBtn: searchTerm !== '',
searchTerm,
});
const resetTimer = () => {
clearTimeout(this.timer);
this.timer = null;
};
resetTimer();
this.timer = setTimeout(() => {
this.props.onChange(searchTerm);
resetTimer();
}, timeout);
}
render() {
const { className, placeholder } = this.props;
return (
<div className={classnames('search-field', className)}>
<input
type="text"
className="form-control form-control-lg search-field__input"
placeholder={placeholder}
value={this.state.searchTerm}
onChange={(e) => this.searchTermChanged(e.target.value)}
/>
<FontAwesomeIcon icon={searchIcon} className="search-field__icon" />
<div
className="close search-field__close"
hidden={!this.state.showClearBtn}
id="search-field__close"
onClick={() => this.searchTermChanged('', 0)}
>
&times;
</div>
</div>
);
}
}
SearchField.propTypes = propTypes;
SearchField.defaultProps = defaultProps;

23
src/utils/SearchField.scss Normal file
View file

@ -0,0 +1,23 @@
@import '../utils/mixins/vertical-align';
.search-field {
position: relative;
}
.search-field__input.search-field__input {
padding-left: 40px;
padding-right: 40px;
}
.search-field__icon {
@include vertical-align();
left: 15px;
color: #707581;
}
.search-field__close {
@include vertical-align();
right: 15px;
}

18
src/utils/Storage.js
View file

@ -1,18 +1,28 @@
const PREFIX = 'shlink';
const buildPath = path => `${PREFIX}.${path}`;
const buildPath = (path) => `${PREFIX}.${path}`;
export class Storage {
constructor(localStorage) {
this.localStorage = localStorage;
}
get = key => {
get = (key) => {
const item = this.localStorage.getItem(buildPath(key));
return item ? JSON.parse(item) : undefined;
};
set = (key, value) => this.localStorage.setItem(buildPath(key), JSON.stringify(value));
}
const storage = typeof localStorage !== 'undefined' ? localStorage : {};
export default new Storage(storage);
const browserStorage = global.localStorage || {
getItem() {
return '';
},
setItem() {
return '';
},
};
const storage = new Storage(browserStorage);
export default storage;

25
src/utils/Tag.js
View file

@ -1,14 +1,28 @@
import React from 'react';
import ColorGenerator from '../utils/ColorGenerator';
import PropTypes from 'prop-types';
import colorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
import './Tag.scss';
const propTypes = {
colorGenerator: colorGeneratorType,
text: PropTypes.string,
children: PropTypes.node,
clearable: PropTypes.bool,
onClick: PropTypes.func,
onClose: PropTypes.func,
};
const defaultProps = {
colorGenerator,
};
export default function Tag(
{
colorGenerator,
text,
children,
clearable,
onClick = () => ({}),
onClose = () => ({})
onClose = () => ({}),
}
) {
return (
@ -17,12 +31,11 @@ export default function Tag (
style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable ? 'auto' : 'pointer' }}
onClick={onClick}
>
{text}
{children || text}
{clearable && <span className="close tag__close-selected-tag" onClick={onClose}>&times;</span>}
</span>
);
}
Tag.defaultProps = {
colorGenerator: ColorGenerator
};
Tag.defaultProps = defaultProps;
Tag.propTypes = propTypes;

44
src/utils/TagsSelector.js Normal file
View file

@ -0,0 +1,44 @@
import React from 'react';
import TagsInput from 'react-tagsinput';
import PropTypes from 'prop-types';
import colorGenerator, { colorGeneratorType } from './ColorGenerator';
const defaultProps = {
colorGenerator,
placeholder: 'Add tags to the URL',
};
const propTypes = {
tags: PropTypes.arrayOf(PropTypes.string).isRequired,
onChange: PropTypes.func.isRequired,
placeholder: PropTypes.string,
colorGenerator: colorGeneratorType,
};
export default function TagsSelector({ tags, onChange, placeholder, colorGenerator }) {
const renderTag = (props) => {
const { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props;
return (
<span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
{getTagDisplayValue(tag)}
{!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
</span>
);
};
return (
<TagsInput
value={tags}
inputProps={{ placeholder }}
onlyUnique
renderTag={renderTag}
// FIXME Workaround to be able to add tags on Android
addOnBlur
onChange={onChange}
/>
);
}
TagsSelector.defaultProps = defaultProps;
TagsSelector.propTypes = propTypes;

108
src/visits/services/VisitsParser.js
View file

@ -1,101 +1,91 @@
import { forEach, isNil, isEmpty } from 'ramda';
import { assoc, isNil, isEmpty, reduce } from 'ramda';
const osFromUserAgent = userAgent => {
const osFromUserAgent = (userAgent) => {
const lowerUserAgent = userAgent.toLowerCase();
switch (true) {
case (lowerUserAgent.indexOf('linux') >= 0):
case lowerUserAgent.indexOf('linux') >= 0:
return 'Linux';
case (lowerUserAgent.indexOf('windows') >= 0):
case lowerUserAgent.indexOf('windows') >= 0:
return 'Windows';
case (lowerUserAgent.indexOf('mac') >= 0):
case lowerUserAgent.indexOf('mac') >= 0:
return 'MacOS';
case (lowerUserAgent.indexOf('mobi') >= 0):
case lowerUserAgent.indexOf('mobi') >= 0:
return 'Mobile';
default:
return 'Others';
}
};
const browserFromUserAgent = userAgent => {
const browserFromUserAgent = (userAgent) => {
const lowerUserAgent = userAgent.toLowerCase();
switch (true) {
case (lowerUserAgent.indexOf('firefox') >= 0):
return 'Firefox';
case (lowerUserAgent.indexOf('chrome') >= 0):
return 'Chrome';
case (lowerUserAgent.indexOf('safari') >= 0):
return 'Safari';
case (lowerUserAgent.indexOf('opera') >= 0):
case lowerUserAgent.indexOf('opera') >= 0 || lowerUserAgent.indexOf('opr') >= 0:
return 'Opera';
case (lowerUserAgent.indexOf('msie') >= 0):
case lowerUserAgent.indexOf('firefox') >= 0:
return 'Firefox';
case lowerUserAgent.indexOf('chrome') >= 0:
return 'Chrome';
case lowerUserAgent.indexOf('safari') >= 0:
return 'Safari';
case lowerUserAgent.indexOf('msie') >= 0:
return 'Internet Explorer';
default:
return 'Others';
}
};
const extractDomain = url => {
const extractDomain = (url) => {
const domain = url.indexOf('://') > -1 ? url.split('/')[2] : url.split('/')[0];
return domain.split(':')[0];
};
// FIXME Refactor these foreach statements which mutate a stats object
export class VisitsParser {
processOsStats = visits => {
const stats = {};
forEach(visit => {
const userAgent = visit.userAgent;
export const processOsStats = (visits) =>
reduce(
(stats, { userAgent }) => {
const os = isNil(userAgent) ? 'Others' : osFromUserAgent(userAgent);
stats[os] = typeof stats[os] === 'undefined' ? 1 : stats[os] + 1;
}, visits);
return assoc(os, (stats[os] || 0) + 1, stats);
},
{},
visits,
);
return stats;
};
processBrowserStats = visits => {
const stats = {};
forEach(visit => {
const userAgent = visit.userAgent;
export const processBrowserStats = (visits) =>
reduce(
(stats, { userAgent }) => {
const browser = isNil(userAgent) ? 'Others' : browserFromUserAgent(userAgent);
stats[browser] = typeof stats[browser] === 'undefined' ? 1 : stats[browser] + 1;
}, visits);
return assoc(browser, (stats[browser] || 0) + 1, stats);
},
{},
visits,
);
return stats;
};
processReferrersStats = visits => {
const stats = {};
forEach(visit => {
export const processReferrersStats = (visits) =>
reduce(
(stats, visit) => {
const notHasDomain = isNil(visit.referer) || isEmpty(visit.referer);
const domain = notHasDomain ? 'Unknown' : extractDomain(visit.referer);
stats[domain] = typeof stats[domain] === 'undefined' ? 1 : stats[domain] + 1;
}, visits);
return assoc(domain, (stats[domain] || 0) + 1, stats);
},
{},
visits,
);
return stats;
};
processCountriesStats = visits => {
const stats = {};
forEach(({ visitLocation }) => {
export const processCountriesStats = (visits) =>
reduce(
(stats, { visitLocation }) => {
const notHasCountry = isNil(visitLocation)
|| isNil(visitLocation.countryName)
|| isEmpty(visitLocation.countryName);
const country = notHasCountry ? 'Unknown' : visitLocation.countryName;
stats[country] = typeof stats[country] === 'undefined' ? 1 : stats[country] + 1;
}, visits);
return stats;
};
}
export default new VisitsParser();
return assoc(country, (stats[country] || 0) + 1, stats);
},
{},
visits,
);

27
test/App.test.js Normal file
View file

@ -0,0 +1,27 @@
import React from 'react';
import { shallow } from 'enzyme';
import { Route } from 'react-router-dom';
import App from '../src/App';
import MainHeader from '../src/common/MainHeader';
describe('<App />', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<App />);
});
afterEach(() => wrapper.unmount());
it('renders a header', () => expect(wrapper.find(MainHeader)).toHaveLength(1));
it('renders app main routes', () => {
const routes = wrapper.find(Route);
const expectedRoutesCount = 3;
const second = 2;
expect(routes).toHaveLength(expectedRoutesCount);
expect(routes.at(0).prop('path')).toEqual('/server/create');
expect(routes.at(1).prop('path')).toEqual('/');
expect(routes.at(second).prop('path')).toEqual('/server/:serverId');
});
});

159
test/api/ShlinkApiClient.test.js
View file

@ -1,26 +1,167 @@
import { ShlinkApiClient } from '../../src/api/ShlinkApiClient'
import sinon from 'sinon';
import { head, last } from 'ramda';
import { ShlinkApiClient } from '../../src/api/ShlinkApiClient';
describe('ShlinkApiClient', () => {
const createApiClient = extraData => {
const axiosMock = () =>
const createAxiosMock = (extraData) => () =>
Promise.resolve({
data: { token: 'foo', ...extraData },
headers: { authorization: 'Bearer abc123' }
headers: { authorization: 'Bearer abc123' },
data: { token: 'abc123' },
...extraData,
});
return new ShlinkApiClient(axiosMock);
};
const createApiClient = (extraData) =>
new ShlinkApiClient(createAxiosMock(extraData));
describe('listShortUrls', () => {
it('properly returns short URLs list', async () => {
const expectedList = [ 'foo', 'bar' ];
const apiClient = createApiClient({
shortUrls: expectedList
data: {
shortUrls: expectedList,
},
});
const actualList = await apiClient.listShortUrls();
expect(expectedList).toEqual(actualList);
});
});
describe('createShortUrl', () => {
const shortUrl = {
bar: 'foo',
};
it('returns create short URL', async () => {
const apiClient = createApiClient({ data: shortUrl });
const result = await apiClient.createShortUrl({});
expect(result).toEqual(shortUrl);
});
it('removes all empty options', async () => {
const axiosSpy = sinon.spy(createAxiosMock({ data: shortUrl }));
const apiClient = new ShlinkApiClient(axiosSpy);
await apiClient.createShortUrl(
{ foo: 'bar', empty: undefined, anotherEmpty: null }
);
const lastAxiosCall = last(axiosSpy.getCalls());
const axiosArgs = head(lastAxiosCall.args);
expect(axiosArgs.data).toEqual({ foo: 'bar' });
});
});
describe('getShortUrlVisits', () => {
it('properly returns short URL visits', async () => {
const expectedVisits = [ 'foo', 'bar' ];
const axiosSpy = sinon.spy(createAxiosMock({
data: {
visits: {
data: expectedVisits,
},
},
}));
const apiClient = new ShlinkApiClient(axiosSpy);
const actualVisits = await apiClient.getShortUrlVisits('abc123', {});
const lastAxiosCall = last(axiosSpy.getCalls());
const axiosArgs = head(lastAxiosCall.args);
expect(expectedVisits).toEqual(actualVisits);
expect(axiosArgs.url).toContain('/short-codes/abc123/visits');
expect(axiosArgs.method).toEqual('GET');
});
});
describe('getShortUrl', () => {
it('properly returns short URL', async () => {
const expectedShortUrl = { foo: 'bar' };
const axiosSpy = sinon.spy(createAxiosMock({
data: expectedShortUrl,
}));
const apiClient = new ShlinkApiClient(axiosSpy);
const result = await apiClient.getShortUrl('abc123');
const lastAxiosCall = last(axiosSpy.getCalls());
const axiosArgs = head(lastAxiosCall.args);
expect(expectedShortUrl).toEqual(result);
expect(axiosArgs.url).toContain('/short-codes/abc123');
expect(axiosArgs.method).toEqual('GET');
});
});
describe('updateShortUrlTags', () => {
it('properly updates short URL tags', async () => {
const expectedTags = [ 'foo', 'bar' ];
const axiosSpy = sinon.spy(createAxiosMock({
data: { tags: expectedTags },
}));
const apiClient = new ShlinkApiClient(axiosSpy);
const result = await apiClient.updateShortUrlTags('abc123', expectedTags);
const lastAxiosCall = last(axiosSpy.getCalls());
const axiosArgs = head(lastAxiosCall.args);
expect(expectedTags).toEqual(result);
expect(axiosArgs.url).toContain('/short-codes/abc123/tags');
expect(axiosArgs.method).toEqual('PUT');
});
});
describe('listTags', () => {
it('properly returns list of tags', async () => {
const expectedTags = [ 'foo', 'bar' ];
const axiosSpy = sinon.spy(createAxiosMock({
data: {
tags: { data: expectedTags },
},
}));
const apiClient = new ShlinkApiClient(axiosSpy);
const result = await apiClient.listTags();
const lastAxiosCall = last(axiosSpy.getCalls());
const axiosArgs = head(lastAxiosCall.args);
expect(expectedTags).toEqual(result);
expect(axiosArgs.url).toContain('/tags');
expect(axiosArgs.method).toEqual('GET');
});
});
describe('deleteTags', () => {
it('properly deletes provided tags', async () => {
const tags = [ 'foo', 'bar' ];
const axiosSpy = sinon.spy(createAxiosMock({}));
const apiClient = new ShlinkApiClient(axiosSpy);
await apiClient.deleteTags(tags);
const lastAxiosCall = last(axiosSpy.getCalls());
const axiosArgs = head(lastAxiosCall.args);
expect(axiosArgs.url).toContain('/tags');
expect(axiosArgs.method).toEqual('DELETE');
expect(axiosArgs.params).toEqual({ tags });
});
});
describe('editTag', () => {
it('properly deletes provided tags', async () => {
const oldName = 'foo';
const newName = 'bar';
const axiosSpy = sinon.spy(createAxiosMock({}));
const apiClient = new ShlinkApiClient(axiosSpy);
await apiClient.editTag(oldName, newName);
const lastAxiosCall = last(axiosSpy.getCalls());
const axiosArgs = head(lastAxiosCall.args);
expect(axiosArgs.url).toContain('/tags');
expect(axiosArgs.method).toEqual('PUT');
expect(axiosArgs.data).toEqual({ oldName, newName });
});
});
});

16
test/common/AsideMenu.test.js
View file

@ -1,6 +1,7 @@
import { shallow } from 'enzyme'
import React from 'react'
import AsideMenu from '../../src/common/AsideMenu'
import { shallow } from 'enzyme';
import React from 'react';
import { NavLink } from 'react-router-dom';
import AsideMenu from '../../src/common/AsideMenu';
describe('<AsideMenu />', () => {
let wrapped;
@ -12,11 +13,12 @@ describe('<AsideMenu />', () => {
wrapped.unmount();
});
it('contains links to selected server', () => {
const links = wrapped.find('NavLink');
it('contains links to different sections', () => {
const links = wrapped.find(NavLink);
const expectedLength = 3;
expect(links).toHaveLength(2);
links.forEach(link => expect(link.prop('to')).toContain('abc123'));
expect(links).toHaveLength(expectedLength);
links.forEach((link) => expect(link.prop('to')).toContain('abc123'));
});
it('contains a button to delete server', () => {

4
test/common/DateInput.test.js
View file

@ -1,16 +1,18 @@
import React from 'react';
import { shallow } from 'enzyme';
import DateInput from '../../src/common/DateInput';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import moment from 'moment';
import DateInput from '../../src/common/DateInput';
describe('<DateInput />', () => {
let wrapped;
const createComponent = (props = {}) => {
wrapped = shallow(<DateInput {...props} />);
return wrapped;
};
afterEach(() => {
if (wrapped !== undefined) {
wrapped.unmount();

14
test/common/Home.test.js
View file

@ -2,17 +2,21 @@ import { shallow } from 'enzyme';
import { values } from 'ramda';
import React from 'react';
import * as sinon from 'sinon';
import { Home } from '../../src/common/Home';
import { HomeComponent } from '../../src/common/Home';
describe('<Home />', () => {
let wrapped;
const defaultProps = {
resetSelectedServer: () => {},
resetSelectedServer() {
return '';
},
servers: {},
};
const createComponent = props => {
const createComponent = (props) => {
const actualProps = { ...defaultProps, ...props };
wrapped = shallow(<Home {...actualProps} />);
wrapped = shallow(<HomeComponent {...actualProps} />);
return wrapped;
};
@ -42,7 +46,7 @@ describe('<Home />', () => {
const servers = {
1: { name: 'foo', id: '123' },
2: { name: 'bar', id: '456' },
}
};
const wrapped = createComponent({ servers });
expect(wrapped.find('Link')).toHaveLength(0);

66
test/servers/CreateServer.test.js Normal file
View file

@ -0,0 +1,66 @@
import React from 'react';
import { shallow } from 'enzyme';
import { identity } from 'ramda';
import sinon from 'sinon';
import { CreateServerComponent } from '../../src/servers/CreateServer';
import ImportServersBtn from '../../src/servers/helpers/ImportServersBtn';
describe('<CreateServer />', () => {
let wrapper;
const createServerMock = sinon.fake();
const historyMock = {
push: sinon.fake(),
};
beforeEach(() => {
createServerMock.resetHistory();
historyMock.push.resetHistory();
wrapper = shallow(
<CreateServerComponent
createServer={createServerMock}
resetSelectedServer={identity}
history={historyMock}
/>
);
});
afterEach(() => wrapper.unmount());
it('renders components', () => {
expect(wrapper.find('#name')).toHaveLength(1);
expect(wrapper.find('#url')).toHaveLength(1);
expect(wrapper.find('#apiKey')).toHaveLength(1);
expect(wrapper.find(ImportServersBtn)).toHaveLength(1);
expect(wrapper.find('.create-server__import-success-msg')).toHaveLength(0);
});
it('shows success message when imported is true', () => {
wrapper.setState({ serversImported: true });
expect(wrapper.find('.create-server__import-success-msg')).toHaveLength(1);
});
it('creates server and redirects to it when form is submitted', () => {
const form = wrapper.find('form');
form.simulate('submit', { preventDefault() {
return '';
} });
expect(createServerMock.callCount).toEqual(1);
expect(historyMock.push.callCount).toEqual(1);
});
it('updates state when inputs are changed', () => {
const nameInput = wrapper.find('#name');
const urlInput = wrapper.find('#url');
const apiKeyInput = wrapper.find('#apiKey');
nameInput.simulate('change', { target: { value: 'the_name' } });
urlInput.simulate('change', { target: { value: 'the_url' } });
apiKeyInput.simulate('change', { target: { value: 'the_api_key' } });
expect(wrapper.state('name')).toEqual('the_name');
expect(wrapper.state('url')).toEqual('the_url');
expect(wrapper.state('apiKey')).toEqual('the_api_key');
});
});

34
test/servers/DeleteServerButton.test.js Normal file
View file

@ -0,0 +1,34 @@
import React from 'react';
import { shallow } from 'enzyme';
import DeleteServerButton from '../../src/servers/DeleteServerButton';
import DeleteServerModal from '../../src/servers/DeleteServerModal';
describe('<DeleteServerButton />', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<DeleteServerButton server={{}} className="button" />);
});
afterEach(() => wrapper.unmount());
it('renders a button and a modal', () => {
expect(wrapper.find('.button')).toHaveLength(1);
expect(wrapper.find(DeleteServerModal)).toHaveLength(1);
});
it('displays modal when button is clicked', () => {
const btn = wrapper.find('.button');
expect(wrapper.state('isModalOpen')).toEqual(false);
btn.simulate('click');
expect(wrapper.state('isModalOpen')).toEqual(true);
});
it('changes modal open state when toggled', () => {
const modal = wrapper.find(DeleteServerModal);
expect(wrapper.state('isModalOpen')).toEqual(false);
modal.prop('toggle')();
expect(wrapper.state('isModalOpen')).toEqual(true);
});
});

65
test/servers/DeleteServerModal.test.js Normal file
View file

@ -0,0 +1,65 @@
import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { DeleteServerModalComponent } from '../../src/servers/DeleteServerModal';
describe('<DeleteServerModal />', () => {
let wrapper;
const deleteServerMock = sinon.fake();
const historyMock = { push: sinon.fake() };
const toggleMock = sinon.fake();
const serverName = 'the_server_name';
beforeEach(() => {
toggleMock.resetHistory();
deleteServerMock.resetHistory();
historyMock.push.resetHistory();
wrapper = shallow(
<DeleteServerModalComponent
server={{ name: serverName }}
toggle={toggleMock}
isOpen={true}
deleteServer={deleteServerMock}
history={historyMock}
/>
);
});
afterEach(() => wrapper.unmount());
it('renders a modal window', () => {
expect(wrapper.find(Modal)).toHaveLength(1);
expect(wrapper.find(ModalHeader)).toHaveLength(1);
expect(wrapper.find(ModalBody)).toHaveLength(1);
expect(wrapper.find(ModalFooter)).toHaveLength(1);
});
it('displays the name of the server as part of the content', () => {
const modalBody = wrapper.find(ModalBody);
expect(modalBody.find('p').first().text()).toEqual(
`Are you sure you want to delete server ${serverName}?`
);
});
it('toggles when clicking cancel button', () => {
const cancelBtn = wrapper.find('button').first();
cancelBtn.simulate('click');
expect(toggleMock.callCount).toEqual(1);
expect(deleteServerMock.callCount).toEqual(0);
expect(historyMock.push.callCount).toEqual(0);
});
it('deletes server when clicking accept button', () => {
const acceptBtn = wrapper.find('button').last();
acceptBtn.simulate('click');
expect(toggleMock.callCount).toEqual(1);
expect(deleteServerMock.callCount).toEqual(1);
expect(historyMock.push.callCount).toEqual(1);
});
});

35
test/servers/ServersDropdown.test.js
View file

@ -1,22 +1,41 @@
import { identity } from 'ramda';
import { identity, values } from 'ramda';
import React from 'react';
import { ServersDropdown } from '../../src/servers/ServersDropdown';
import { shallow } from 'enzyme';
import { DropdownItem, DropdownToggle } from 'reactstrap';
import { ServersDropdownComponent } from '../../src/servers/ServersDropdown';
describe('<ServersDropdown />', () => {
let wrapped;
const servers = [{ name: 'foo', id: 1 }, { name: 'bar', id: 2 }, { name: 'baz', id: 3 }];
const servers = {
'1a': { name: 'foo', id: 1 },
'2b': { name: 'bar', id: 2 },
'3c': { name: 'baz', id: 3 },
};
beforeEach(() => {
wrapped = shallow(<ServersDropdown servers={servers} listServers={identity} />);
wrapped = shallow(<ServersDropdownComponent servers={servers} listServers={identity} />);
});
afterEach(() => wrapped.unmount());
it('contains the list of servers', () => {
expect(wrapped.find('DropdownItem').length).toEqual(servers.length);
it('contains the list of servers', () =>
expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers).length));
it('contains a toggle with proper title', () =>
expect(wrapped.find(DropdownToggle)).toHaveLength(1));
it('contains a button to export servers', () => {
const items = wrapped.find(DropdownItem);
expect(items.filter('[divider]')).toHaveLength(1);
expect(items.filter('.servers-dropdown__export-item')).toHaveLength(1);
});
it('contains a toggle with proper title', () => {
expect(wrapped.find('DropdownToggle').length).toEqual(1);
it('contains a message when no servers exist yet', () => {
wrapped = shallow(<ServersDropdownComponent servers={{}} listServers={identity} />);
const item = wrapped.find(DropdownItem);
expect(item).toHaveLength(1);
expect(item.prop('disabled')).toEqual(true);
expect(item.find('i').text()).toEqual('Add a server first...');
});
});

61
test/servers/helpers/ImportServersBtn.test.js Normal file
View file

@ -0,0 +1,61 @@
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import { UncontrolledTooltip } from 'reactstrap';
import { ImportServersBtnComponent } from '../../../src/servers/helpers/ImportServersBtn';
describe('<ImportServersBtn />', () => {
let wrapper;
const onImportMock = sinon.fake();
const createServersMock = sinon.fake();
const serversImporterMock = {
importServersFromFile: sinon.fake.returns(Promise.resolve([])),
};
const fileRef = {
current: { click: sinon.fake() },
};
beforeEach(() => {
onImportMock.resetHistory();
createServersMock.resetHistory();
serversImporterMock.importServersFromFile.resetHistory();
fileRef.current.click.resetHistory();
wrapper = shallow(
<ImportServersBtnComponent
createServers={createServersMock}
serversImporter={serversImporterMock}
fileRef={fileRef}
onImport={onImportMock}
/>
);
});
afterEach(() => wrapper.unmount());
it('renders a button, a tooltip and a file input', () => {
expect(wrapper.find('#importBtn')).toHaveLength(1);
expect(wrapper.find(UncontrolledTooltip)).toHaveLength(1);
expect(wrapper.find('.create-server__csv-select')).toHaveLength(1);
});
it('triggers click on file ref when button is clicked', () => {
const btn = wrapper.find('#importBtn');
btn.simulate('click');
expect(fileRef.current.click.callCount).toEqual(1);
});
it('imports servers when file input changes', (done) => {
const file = wrapper.find('.create-server__csv-select');
file.simulate('change', { target: { files: [ '' ] } });
setImmediate(() => {
expect(serversImporterMock.importServersFromFile.callCount).toEqual(1);
expect(createServersMock.callCount).toEqual(1);
expect(onImportMock.callCount).toEqual(1);
done();
});
});
});

26
test/servers/reducers/selectedServer.test.js
View file

@ -1,25 +1,24 @@
import reduce, {
import * as sinon from 'sinon';
import reducer, {
_selectServer,
RESET_SELECTED_SERVER,
resetSelectedServer,
SELECT_SERVER,
} from '../../../src/servers/reducers/selectedServer';
import * as sinon from 'sinon';
import { RESET_SHORT_URL_PARAMS } from '../../../src/short-urls/reducers/shortUrlsListParams';
describe('selectedServerReducer', () => {
describe('reduce', () => {
describe('reducer', () => {
it('returns default when action is not handled', () =>
expect(reduce(null, { type: 'unknown' })).toEqual(null)
);
expect(reducer(null, { type: 'unknown' })).toEqual(null));
it('returns default when action is RESET_SELECTED_SERVER', () =>
expect(reduce(null, { type: RESET_SELECTED_SERVER })).toEqual(null)
);
expect(reducer(null, { type: RESET_SELECTED_SERVER })).toEqual(null));
it('returns selected server when action is SELECT_SERVER', () => {
const selectedServer = { id: 'abc123' };
expect(reduce(null, { type: SELECT_SERVER, selectedServer })).toEqual(selectedServer);
expect(reducer(null, { type: SELECT_SERVER, selectedServer })).toEqual(selectedServer);
});
});
@ -31,14 +30,14 @@ describe('selectedServerReducer', () => {
describe('selectServer', () => {
const ShlinkApiClientMock = {
setConfig: sinon.spy()
setConfig: sinon.spy(),
};
const serverId = 'abc123';
const selectedServer = {
id: serverId
id: serverId,
};
const ServersServiceMock = {
findServerById: sinon.fake.returns(selectedServer)
findServerById: sinon.fake.returns(selectedServer),
};
afterEach(() => {
@ -48,14 +47,15 @@ describe('selectedServerReducer', () => {
it('dispatches proper actions', () => {
const dispatch = sinon.spy();
const expectedDispatchCalls = 2;
_selectServer(ShlinkApiClientMock, ServersServiceMock, serverId)(dispatch);
expect(dispatch.callCount).toEqual(2);
expect(dispatch.callCount).toEqual(expectedDispatchCalls);
expect(dispatch.firstCall.calledWith({ type: RESET_SHORT_URL_PARAMS })).toEqual(true);
expect(dispatch.secondCall.calledWith({
type: SELECT_SERVER,
selectedServer
selectedServer,
})).toEqual(true);
});

48
test/servers/reducers/server.test.js
View file

@ -1,43 +1,31 @@
import reduce, {
import * as sinon from 'sinon';
import { values } from 'ramda';
import reducer, {
_createServer,
_deleteServer,
_listServers,
CREATE_SERVER,
DELETE_SERVER,
_createServers,
FETCH_SERVERS,
} from '../../../src/servers/reducers/server';
import * as sinon from 'sinon';
describe('serverReducer', () => {
const servers = {
abc123: { id: 'abc123' },
def456: { id: 'def456' }
def456: { id: 'def456' },
};
const ServersServiceMock = {
listServers: sinon.fake.returns(servers),
createServer: sinon.fake(),
deleteServer: sinon.fake(),
createServers: sinon.fake(),
};
describe('reduce', () => {
describe('reducer', () => {
it('returns servers when action is FETCH_SERVERS', () =>
expect(reduce({}, { type: FETCH_SERVERS, servers })).toEqual(servers)
);
it('returns servers when action is DELETE_SERVER', () =>
expect(reduce({}, { type: DELETE_SERVER, servers })).toEqual(servers)
);
it('adds server to list when action is CREATE_SERVER', () => {
const server = { id: 'abc123' };
expect(reduce({}, { type: CREATE_SERVER, server })).toEqual({
[server.id]: server
})
});
expect(reducer({}, { type: FETCH_SERVERS, servers })).toEqual(servers));
it('returns default when action is unknown', () =>
expect(reduce({}, { type: 'unknown' })).toEqual({})
);
expect(reducer({}, { type: 'unknown' })).toEqual({}));
});
describe('action creators', () => {
@ -45,6 +33,7 @@ describe('serverReducer', () => {
ServersServiceMock.listServers.resetHistory();
ServersServiceMock.createServer.resetHistory();
ServersServiceMock.deleteServer.resetHistory();
ServersServiceMock.createServers.resetHistory();
});
describe('listServers', () => {
@ -55,6 +44,7 @@ describe('serverReducer', () => {
expect(ServersServiceMock.listServers.callCount).toEqual(1);
expect(ServersServiceMock.createServer.callCount).toEqual(0);
expect(ServersServiceMock.deleteServer.callCount).toEqual(0);
expect(ServersServiceMock.createServers.callCount).toEqual(0);
});
});
@ -68,6 +58,7 @@ describe('serverReducer', () => {
expect(ServersServiceMock.createServer.callCount).toEqual(1);
expect(ServersServiceMock.createServer.firstCall.calledWith(serverToCreate)).toEqual(true);
expect(ServersServiceMock.deleteServer.callCount).toEqual(0);
expect(ServersServiceMock.createServers.callCount).toEqual(0);
});
});
@ -79,9 +70,24 @@ describe('serverReducer', () => {
expect(result).toEqual({ type: FETCH_SERVERS, servers });
expect(ServersServiceMock.listServers.callCount).toEqual(1);
expect(ServersServiceMock.createServer.callCount).toEqual(0);
expect(ServersServiceMock.createServers.callCount).toEqual(0);
expect(ServersServiceMock.deleteServer.callCount).toEqual(1);
expect(ServersServiceMock.deleteServer.firstCall.calledWith(serverToDelete)).toEqual(true);
});
});
describe('createServer', () => {
it('creates multiple servers and then fetches servers again', () => {
const serversToCreate = values(servers);
const result = _createServers(ServersServiceMock, serversToCreate);
expect(result).toEqual({ type: FETCH_SERVERS, servers });
expect(ServersServiceMock.listServers.callCount).toEqual(1);
expect(ServersServiceMock.createServer.callCount).toEqual(0);
expect(ServersServiceMock.createServers.callCount).toEqual(1);
expect(ServersServiceMock.createServers.firstCall.calledWith(serversToCreate)).toEqual(true);
expect(ServersServiceMock.deleteServer.callCount).toEqual(0);
});
});
});
});

97
test/servers/services/ServersExporter.test.js Normal file
View file

@ -0,0 +1,97 @@
import sinon from 'sinon';
import { ServersExporter } from '../../../src/servers/services/ServersExporter';
describe('ServersExporter', () => {
const createLinkMock = () => ({
setAttribute: sinon.fake(),
click: sinon.fake(),
style: {},
});
const createWindowMock = (isIe10 = true) => ({
navigator: {
msSaveBlob: isIe10 ? sinon.fake() : undefined,
},
document: {
createElement: sinon.fake.returns(createLinkMock()),
body: {
appendChild: sinon.fake(),
removeChild: sinon.fake(),
},
},
});
const serversServiceMock = {
listServers: sinon.fake.returns({
abc123: {
id: 'abc123',
name: 'foo',
},
def456: {
id: 'def456',
name: 'bar',
},
}),
};
const createCsvjsonMock = (throwError = false) => ({
toCSV: throwError ? sinon.fake.throws('') : sinon.fake.returns(''),
});
describe('exportServers', () => {
let originalConsole;
beforeEach(() => {
originalConsole = global.console;
global.console = { error: sinon.fake() };
global.Blob = class Blob {};
global.URL = { createObjectURL: () => '' };
serversServiceMock.listServers.resetHistory();
});
afterEach(() => {
global.console = originalConsole;
});
it('logs an error if something fails', () => {
const csvjsonMock = createCsvjsonMock(true);
const exporter = new ServersExporter(
serversServiceMock,
createWindowMock(),
csvjsonMock,
);
exporter.exportServers();
expect(global.console.error.callCount).toEqual(1);
expect(csvjsonMock.toCSV.callCount).toEqual(1);
});
it('makes use of msSaveBlob API when available', () => {
const windowMock = createWindowMock();
const exporter = new ServersExporter(
serversServiceMock,
windowMock,
createCsvjsonMock(),
);
exporter.exportServers();
expect(serversServiceMock.listServers.callCount).toEqual(1);
expect(windowMock.navigator.msSaveBlob.callCount).toEqual(1);
expect(windowMock.document.createElement.callCount).toEqual(0);
});
it('makes use of download link API when available', () => {
const windowMock = createWindowMock(false);
const exporter = new ServersExporter(
serversServiceMock,
windowMock,
createCsvjsonMock(),
);
exporter.exportServers();
expect(serversServiceMock.listServers.callCount).toEqual(1);
expect(windowMock.document.createElement.callCount).toEqual(1);
expect(windowMock.document.body.appendChild.callCount).toEqual(1);
expect(windowMock.document.body.removeChild.callCount).toEqual(1);
});
});
});

47
test/servers/services/ServersImporter.test.js Normal file
View file

@ -0,0 +1,47 @@
import sinon from 'sinon';
import { ServersImporter } from '../../../src/servers/services/ServersImporter';
describe('ServersImporter', () => {
const servers = [{ name: 'foo' }, { name: 'bar' }];
const csvjsonMock = {
toObject: sinon.fake.returns(servers),
};
const importer = new ServersImporter(csvjsonMock);
beforeEach(() => csvjsonMock.toObject.resetHistory());
describe('importServersFromFile', () => {
it('rejects with error if no file was provided', async () => {
try {
await importer.importServersFromFile();
} catch (e) {
expect(e).toEqual('No file provided or file is not a CSV');
}
});
it('rejects with error if provided file is not a CSV', async () => {
try {
await importer.importServersFromFile({ type: 'text/html' });
} catch (e) {
expect(e).toEqual('No file provided or file is not a CSV');
}
});
it('reads file when a CSV is provided', async () => {
const readAsText = sinon.fake.returns('');
global.FileReader = class FileReader {
constructor() {
this.readAsText = readAsText;
this.addEventListener = (eventName, listener) =>
listener({ target: { result: '' } });
}
};
await importer.importServersFromFile({ type: 'text/csv' });
expect(readAsText.callCount).toEqual(1);
expect(csvjsonMock.toObject.callCount).toEqual(1);
});
});
});

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