Merge pull request #41 from acelaya/feature/1.1.0

Feature/1.1.0
shlinkio · Sep 16, 2018 · 606397b · 606397b
2 parents 47e6e1c + bc8eaaa
commit 606397b
Show file tree

Hide file tree

Showing 63 changed files with 1,495 additions and 576 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -2,6 +2,7 @@
   "extends": [
     "adidas-env/browser",
     "adidas-env/module",
+    "adidas-env/node",
     "adidas-es6",
     "adidas-babel",
     "adidas-react"
@@ -35,6 +36,7 @@
     "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"
+    "react/no-did-update-set-state": "off",
+    "react/display-name": "off"
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,32 @@
 # CHANGELOG
 
+## 1.1.0 - 2018-09-16
+
+#### Added
+
+* [#47](https://github.com/shlinkio/shlink-web-client/issues/47) Added support to delete short URLs (requires [shlink v1.12.0](https://github.com/shlinkio/shlink/releases/tag/v1.12.0) or greater).
+
+#### Changed
+
+* [#35](https://github.com/shlinkio/shlink-web-client/issues/35) Visits component split into two, which makes the header not to be refreshed when filtering by date, and also the visits global counter now reflects the actual number of visits which fulfill current filter.
+* [#36](https://github.com/shlinkio/shlink-web-client/issues/36) Tags selector now autocompletes existing tag names, to prevent typos and ease reusing existing tags.
+* [#39](https://github.com/shlinkio/shlink-web-client/issues/39) Defined `propTypes` as static properties in class components.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#49](https://github.com/shlinkio/shlink-web-client/issues/49) Ensured filtering parameters are reseted when list component is unmounted so that params are not mixed when coming back.
+* [#45](https://github.com/shlinkio/shlink-web-client/issues/45) Ensured graphs x-axis start at `0` and don't use decimals.
+* [#51](https://github.com/shlinkio/shlink-web-client/issues/51) When editing short URL tags, the value returned form server is used when refreshing the list, which is normalized.
+
+
 ## 1.0.1 - 2018-09-02
 
 #### Added
@@ -33,7 +60,7 @@
     * 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.
+* [#3](https://github.com/shlinkio/shlink-web-client/issues/3) Added tags management.
 
     * List existing tags, and filter the list.
     * Change their name and color.

diff --git a/README.md b/README.md
@@ -5,6 +5,7 @@
 [![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)
+[![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://acel.me/donate)
 
 A ReactJS-based progressive web application for [Shlink](https://shlink.io).
 

diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,33 @@
+module.exports = {
+  coverageDirectory: '<rootDir>/coverage',
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,mjs}',
+    '!src/registerServiceWorker.js',
+    '!src/index.js',
+  ],
+  setupFiles: [
+    '<rootDir>/config/polyfills.js',
+    '<rootDir>/config/setupEnzyme.js',
+  ],
+  testMatch: [ '<rootDir>/test/**/*.test.{js,jsx,mjs}' ],
+  testEnvironment: 'node',
+  testURL: 'http://localhost',
+  transform: {
+    '^.+\\.(js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
+    '^(?!.*\\.(js|jsx|mjs|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
+  },
+  transformIgnorePatterns: [ '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$' ],
+  moduleNameMapper: {
+    '^react-native$': 'react-native-web',
+  },
+  moduleFileExtensions: [
+    'web.js',
+    'js',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node',
+    'mjs',
+  ],
+};
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "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": "stylelint src/*.scss src/**/*.scss",
     "lint:css:fix": "yarn lint:css --fix",
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
@@ -31,6 +31,7 @@
     "qs": "^6.5.2",
     "ramda": "^0.25.0",
     "react": "^16.3.2",
+    "react-autosuggest": "^9.4.0",
     "react-chartjs-2": "^2.7.4",
     "react-color": "^2.14.1",
     "react-copy-to-clipboard": "^5.0.1",
@@ -101,41 +102,6 @@
     "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3"
   },
-  "jest": {
-    "coverageDirectory": "<rootDir>/coverage",
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,mjs}"
-    ],
-    "setupFiles": [
-      "<rootDir>/config/polyfills.js",
-      "<rootDir>/config/setupEnzyme.js"
-    ],
-    "testMatch": [
-      "<rootDir>/test/**/*.test.{js,jsx,mjs}"
-    ],
-    "testEnvironment": "node",
-    "testURL": "http://localhost",
-    "transform": {
-      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
-    ],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node",
-      "mjs"
-    ]
-  },
   "babel": {
     "presets": [
       "react-app"

diff --git a/src/api/ShlinkApiClient.js b/src/api/ShlinkApiClient.js
@@ -44,6 +44,11 @@ export class ShlinkApiClient {
       .then((resp) => resp.data)
       .catch((e) => this._handleAuthError(e, this.getShortUrl, [ shortCode ]));
 
+  deleteShortUrl = (shortCode) =>
+    this._performRequest(`/short-codes/${shortCode}`, 'DELETE')
+      .then(() => ({}))
+      .catch((e) => this._handleAuthError(e, this.deleteShortUrl, [ shortCode ]));
+
   updateShortUrlTags = (shortCode, tags) =>
     this._performRequest(`/short-codes/${shortCode}/tags`, 'PUT', {}, { tags })
       .then((resp) => resp.data.tags)

diff --git a/src/common/DateInput.js b/src/common/DateInput.js
@@ -2,24 +2,24 @@ import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import DatePicker from 'react-datepicker';
-import './DateInput.scss';
 import { isNil } from 'ramda';
+import './DateInput.scss';
 
 export default class DateInput extends React.Component {
   constructor(props) {
     super(props);
-    this.inputRef = React.createRef();
+    this.inputRef = props.ref || React.createRef();
   }
 
   render() {
-    const { isClearable, selected } = this.props;
+    const { className, isClearable, selected } = this.props;
     const showCalendarIcon = !isClearable || isNil(selected);
 
     return (
       <div className="date-input-container">
         <DatePicker
           {...this.props}
-          className={`date-input-container__input form-control ${this.props.className || ''}`}
+          className={`date-input-container__input form-control ${className || ''}`}
           dateFormat="YYYY-MM-DD"
           readOnly
           ref={this.inputRef}

diff --git a/src/common/Home.js b/src/common/Home.js
@@ -9,12 +9,12 @@ import PropTypes from 'prop-types';
 import { resetSelectedServer } from '../servers/reducers/selectedServer';
 import './Home.scss';
 
-const propTypes = {
-  resetSelectedServer: PropTypes.func,
-  servers: PropTypes.object,
-};
-
 export class HomeComponent extends React.Component {
+  static propTypes = {
+    resetSelectedServer: PropTypes.func,
+    servers: PropTypes.object,
+  };
+
   componentDidMount() {
     this.props.resetSelectedServer();
   }
@@ -51,8 +51,6 @@ export class HomeComponent extends React.Component {
   }
 }
 
-HomeComponent.propTypes = propTypes;
-
 const Home = connect(pick([ 'servers' ]), { resetSelectedServer })(HomeComponent);
 
 export default Home;
diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js
@@ -10,11 +10,11 @@ import ServersDropdown from '../servers/ServersDropdown';
 import './MainHeader.scss';
 import shlinkLogo from './shlink-logo-white.png';
 
-const propTypes = {
-  location: PropTypes.object,
-};
-
 export class MainHeaderComponent extends React.Component {
+  static propTypes = {
+    location: PropTypes.object,
+  };
+
   state = { isOpen: false };
   handleToggle = () => {
     this.setState(({ isOpen }) => ({
@@ -64,8 +64,6 @@ export class MainHeaderComponent extends React.Component {
   }
 }
 
-MainHeaderComponent.propTypes = propTypes;
-
 const MainHeader = withRouter(MainHeaderComponent);
 
 export default MainHeader;
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
@@ -8,7 +8,7 @@ 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 ShortUrlsVisits from '../visits/ShortUrlVisits';
 import { selectServer } from '../servers/reducers/selectedServer';
 import CreateShortUrl from '../short-urls/CreateShortUrl';
 import ShortUrls from '../short-urls/ShortUrls';
@@ -17,14 +17,14 @@ import TagsList from '../tags/TagsList';
 import { serverType } from '../servers/prop-types';
 import AsideMenu from './AsideMenu';
 
-const propTypes = {
-  match: PropTypes.object,
-  selectServer: PropTypes.func,
-  location: PropTypes.object,
-  selectedServer: serverType,
-};
-
 export class MenuLayoutComponent extends React.Component {
+  static propTypes = {
+    match: PropTypes.object,
+    selectServer: PropTypes.func,
+    location: PropTypes.object,
+    selectedServer: serverType,
+  };
+
   state = { showSideBar: false };
 
   // FIXME Shouldn't use componentWillMount, but this code has to be run before children components are rendered
@@ -105,8 +105,6 @@ export class MenuLayoutComponent extends React.Component {
   }
 }
 
-MenuLayoutComponent.propTypes = propTypes;
-
 const MenuLayout = compose(
   connect(pick([ 'selectedServer', 'shortUrlsListParams' ]), { selectServer }),
   withRouter

diff --git a/src/common/ScrollToTop.js b/src/common/ScrollToTop.js
@@ -2,18 +2,18 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-const propTypes = {
-  location: PropTypes.object,
-  window: PropTypes.shape({
-    scrollTo: PropTypes.func,
-  }),
-  children: PropTypes.node,
-};
-const defaultProps = {
-  window,
-};
-
 export class ScrollToTopComponent extends React.Component {
+  static propTypes = {
+    location: PropTypes.object,
+    window: PropTypes.shape({
+      scrollTo: PropTypes.func,
+    }),
+    children: PropTypes.node,
+  };
+  static defaultProps = {
+    window,
+  };
+
   componentDidUpdate(prevProps) {
     const { location, window } = this.props;
 
@@ -27,9 +27,6 @@ export class ScrollToTopComponent extends React.Component {
   }
 }
 
-ScrollToTopComponent.defaultProps = defaultProps;
-ScrollToTopComponent.propTypes = propTypes;
-
 const ScrollToTop = withRouter(ScrollToTopComponent);
 
 export default ScrollToTop;
diff --git a/src/common/react-tagsinput.scss b/src/common/react-tagsinput.scss
@@ -5,15 +5,12 @@
   overflow: hidden;
   min-height: 2.6rem;
   padding: 6px 0 0 6px;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }
 
 .react-tagsinput--focused {
   border-color: #80bdff;
-  -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;
-  -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, -webkit-box-shadow .15s ease-in-out;
 }
 
 .react-tagsinput-tag {
@@ -44,6 +41,6 @@
   border: 0;
   outline: none;
   padding: 3px 5px;
-  width: 155px;
+  width: 100%;
   margin-bottom: 6px;
 }
diff --git a/src/index.scss b/src/index.scss
@@ -3,7 +3,7 @@
 html,
 body,
 #root {
-  height: 100%
+  height: 100%;
 }
 
 * {
@@ -21,9 +21,11 @@ body,
 .dropdown-item {
   cursor: pointer;
 }
+
 .dropdown-item.active,
 .dropdown-item:active {
-  @extend .bg-main;
+  background-color: $lightGrey !important;
+  color: inherit !important;
 }
 
 .shlink-container {
@@ -46,7 +48,6 @@ body,
 
 .navbar-brand {
   @media (max-width: $smMax) {
-    margin-right: auto !important; // This is needed to override a third party style
-    margin: 0 auto;
+    margin: 0 auto !important;
   }
 }