Merge pull request #18 from acelaya/feature/0.2.0

Feature/0.2.0

CHANGELOG.md

@@ -1,5 +1,31 @@
 # CHANGELOG
 
+## 0.2.0 - 2018-08-12
+
+#### Added
+
+* [#12](https://github.com/shlinkio/shlink-web-client/issues/12) Improved code coverage
+* [#20](https://github.com/shlinkio/shlink-web-client/issues/20) Added servers list in welcome page, as well as added link to create one when none exist.
+
+#### Changed
+
+* [#11](https://github.com/shlinkio/shlink-web-client/issues/11) Improved app icons fro progressive web apps.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#19](https://github.com/shlinkio/shlink-web-client/issues/19) Added workaround in tags input so that it is possible to add tags on Android devices.
+* [#17](https://github.com/shlinkio/shlink-web-client/issues/17) Fixed short URLs list not being sortable in mobile resolutions.
+* [#13](https://github.com/shlinkio/shlink-web-client/issues/13) Improved visits page on mobile resolutions.
+
+
 ## 0.1.1 - 2018-08-06
 
 #### Added

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom"
+    "test": "node scripts/test.js --env=jsdom --colors"
   },
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
@@ -18,6 +18,7 @@
     "chart.js": "^2.7.2",
     "moment": "^2.22.2",
     "promise": "8.0.1",
+    "prop-types": "^15.6.2",
     "qs": "^6.5.2",
     "ramda": "^0.25.0",
     "react": "^16.3.2",
@@ -28,7 +29,7 @@
     "react-moment": "^0.7.6",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
-    "react-tag-autocomplete": "^5.5.1",
+    "react-tagsinput": "^3.19.0",
     "reactstrap": "^6.0.1",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
@@ -70,6 +71,7 @@
     "react-dev-utils": "^5.0.1",
     "resolve": "1.6.0",
     "sass-loader": "^7.0.1",
+    "sinon": "^6.1.5",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",

public/manifest.json

@@ -1,35 +1,45 @@
 {
   "short_name": "Shlink",
-  "name": "Shlink web client",
+  "name": "Shlink",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#4696e5",
+  "background_color": "#4696e5",
   "icons": [
     {
-      "src": "./icons/shlink-128.png",
+      "src": "./icons/icon-72x72.png",
+      "type": "image/png",
+      "sizes": "72x72"
+    },
+    {
+      "src": "./icons/icon-96x96.png",
+      "type": "image/png",
+      "sizes": "96x96"
+    },
+    {
+      "src": "./icons/icon-128x128.png",
       "type": "image/png",
       "sizes": "128x128"
     },
     {
-      "src": "./icons/shlink-64.png",
+      "src": "./icons/icon-144x144.png",
       "type": "image/png",
-      "sizes": "64x64"
+      "sizes": "144x144"
     },
     {
-      "src": "./icons/shlink-32.png",
+      "src": "./icons/icon-152x152.png",
       "type": "image/png",
-      "sizes": "32x32"
+      "sizes": "152x152"
     },
     {
-      "src": "./icons/shlink-24.png",
+      "src": "./icons/icon-192x192.png",
       "type": "image/png",
-      "sizes": "24x24"
+      "sizes": "192x192"
     },
     {
-      "src": "./icons/shlink-16.png",
+      "src": "./icons/icon-384x384.png",
       "type": "image/png",
-      "sizes": "16x16"
+      "sizes": "384x384"
     }
-  ],
-  "start_url": "/",
-  "display": "standalone",
-  "theme_color": "#4696e5",
-  "background_color": "#4696e5"
+  ]
 }

src/common/AsideMenu.js

@@ -5,14 +5,10 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import DeleteServerButton from '../servers/DeleteServerButton';
 import './AsideMenu.scss';
+import PropTypes from 'prop-types';
 
-export default function AsideMenu({ selectedServer, history }) {
+export default function AsideMenu({ selectedServer }) {
   const serverId = selectedServer ? selectedServer.id : '';
-  const isListShortUrlsActive = (match, { pathname }) => {
-    // FIXME. Should use the 'match' params, but they are not being properly resolved. Investigate
-    const serverIdFromPathname = pathname.split('/')[2];
-    return serverIdFromPathname === serverId && pathname.indexOf('list-short-urls') !== -1;
-  };
 
   return (
     <aside className="aside-menu col-lg-2 col-md-3">
@@ -21,7 +17,6 @@ export default function AsideMenu({ selectedServer, history }) {
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
           to={`/server/${serverId}/list-short-urls/1`}
-          isActive={isListShortUrlsActive}
         >
           <FontAwesomeIcon icon={listIcon} />
           <span className="aside-menu__item-text">List short URLs</span>
@@ -37,10 +32,18 @@ export default function AsideMenu({ selectedServer, history }) {
 
         <DeleteServerButton
           className="aside-menu__item aside-menu__item--danger"
-          history={history}
           server={selectedServer}
         />
       </nav>
     </aside>
   );
 }
+
+AsideMenu.propTypes = {
+  selectedServer: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    url: PropTypes.string,
+    apiKey: PropTypes.string,
+  }),
+};

src/common/DateInput.js

@@ -3,6 +3,7 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import DatePicker from 'react-datepicker';
 import './DateInput.scss';
+import { isNil } from 'ramda';
 
 export default class DateInput extends React.Component {
   constructor(props) {
@@ -11,6 +12,9 @@ export default class DateInput extends React.Component {
   }
 
   render() {
+    const { isClearable, selected } = this.props;
+    const showCalendarIcon = !isClearable || isNil(selected);
+
     return (
       <div className="date-input-container">
         <DatePicker
@@ -20,11 +24,13 @@ export default class DateInput extends React.Component {
           readOnly
           ref={this.inputRef}
         />
-        <FontAwesomeIcon
-          icon={calendarIcon}
-          className="date-input-container__icon"
-          onClick={() => this.inputRef.current.input.focus()}
-        />
+        {showCalendarIcon && (
+          <FontAwesomeIcon
+            icon={calendarIcon}
+            className="date-input-container__icon"
+            onClick={() => this.inputRef.current.input.focus()}
+          />
+        )}
       </div>
     );
   }

src/common/DateInput.scss

@@ -1,4 +1,5 @@
 @import '../utils/mixins/vertical-align';
+@import '../utils/base';
 
 .date-input-container {
   position: relative;
@@ -11,6 +12,18 @@
 
 .date-input-container__icon {
   @include vertical-align();
-  right: 15px;
+  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 {
+  right: .75rem;
+  line-height: 11px;
+  background-color: #333;
+  font-size: 14px;
+}

src/common/Home.js

@@ -1,21 +1,48 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import './Home.scss';
-import { resetSelectedServer } from '../servers/reducers/selectedServer';
+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'
 
 export class Home extends React.Component {
   componentDidMount() {
     this.props.resetSelectedServer();
   }
 
   render() {
+    const servers = values(this.props.servers);
+    const hasServers = !isEmpty(servers);
+
     return (
-      <div className="home-container">
-        <h1 className="home-container__title">Welcome to Shlink</h1>
-        <h5 className="home-container__intro">Please, select a server.</h5>
+      <div className="home">
+        <h1 className="home__title">Welcome to Shlink</h1>
+        <h5 className="home__intro">
+          {hasServers && <span>Please, select a server.</span>}
+          {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+        </h5>
+
+        {hasServers && (
+          <ListGroup className="home__servers-list">
+            {servers.map(({ name, id }) => (
+              <ListGroupItem
+                key={id}
+                tag={Link}
+                to={`/server/${id}/list-short-urls/1`}
+                className="home__servers-item"
+              >
+                {name}
+                <FontAwesomeIcon icon={chevronIcon} className="home__servers-item-icon" />
+              </ListGroupItem>
+            ))}
+          </ListGroup>
+        )}
       </div>
     );
   }
 }
 
-export default connect(null, { resetSelectedServer })(Home);
+export default connect(pick(['servers']), { resetSelectedServer })(Home);

src/common/Home.scss

@@ -1,6 +1,7 @@
 @import '../utils/base';
+@import '../utils/mixins/vertical-align';
 
-.home-container {
+.home {
   text-align: center;
   height: calc(100vh - #{$headerHeight});
   display: flex;
@@ -9,6 +10,23 @@
   flex-flow: column;
 }
 
-.home-container__title {
+.home__title {
   font-size: 36px;
 }
+
+.home__servers-list {
+  margin-top: 1rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+.home__servers-item.home__servers-item {
+  text-align: left;
+  position: relative;
+  padding: .75rem 2.5rem 0.75rem 1rem;
+}
+
+.home__servers-item-icon {
+  @include vertical-align();
+  right: 1rem;
+}

src/common/MenuLayout.js

@@ -16,9 +16,11 @@ export class MenuLayout extends React.Component {
   }
 
   render() {
+    const { selectedServer } = this.props;
+
     return (
       <div className="row">
-        <AsideMenu {...this.props} />
+        <AsideMenu selectedServer={selectedServer} />
         <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3">
           <Switch>
             <Route

src/common/react-tagsinput.scss

@@ -0,0 +1,54 @@
+.react-tagsinput {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: .25rem;
+  overflow: hidden;
+  min-height: calc(2.6rem + 2px);
+  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-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;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0 5px 6px 0;
+  padding: 6px 8px;
+  line-height: 1;
+}
+.react-tagsinput-tag:hover {
+  border-color: #b1b1b1;
+}
+
+.react-tagsinput-remove {
+  cursor: pointer;
+  font-weight: bold;
+  margin-left: 8px;
+}
+
+.react-tagsinput-tag a::before {
+  content: "\2715";
+  color: #aaa;
+}
+
+.react-tagsinput-input {
+  background: transparent;
+  border: 0;
+  outline: none;
+  padding: 3px 5px;
+  width: 155px;
+  margin-bottom: 6px;
+}