Implemented short URLs creation

src/api/ShlinkApiClient.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
-import { isEmpty } from 'ramda';
 import qs from 'qs';
+import { isEmpty, isNil, pipe, reject } from 'ramda';
 
 const API_VERSION = '1';
 
@@ -27,17 +27,16 @@ export class ShlinkApiClient {
    * @param options
    * @returns {Promise<Array>}
    */
-  listShortUrls = (options = {}) => {
-    return this._performRequest('/short-codes', 'GET', options)
+  listShortUrls = (options = {}) =>
+    this._performRequest('/short-codes', 'GET', options)
       .then(resp => resp.data.shortUrls)
       .catch(e => this._handleAuthError(e, this.listShortUrls, [options]));
-  };
 
   createShortUrl = options => {
-    console.log(options);
-    // this._performRequest('/short-codes', 'POST', options)
-    //   .then(resp => resp.data)
-    //   .catch(e => this._handleAuthError(e, this.listShortUrls, [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.listShortUrls, [filteredOptions]));
   };
 
   _performRequest = async (url, method = 'GET', params = {}, data = {}) => {

src/short-urls/CreateShortUrl.js

@@ -2,16 +2,16 @@ import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
 import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
 import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { assoc, replace, pick } from 'ramda';
+import { assoc, dissoc, isNil, pick, pipe, pluck, replace } from 'ramda';
 import React from 'react';
 import DatePicker from 'react-datepicker';
+import { connect } from 'react-redux';
 import ReactTags from 'react-tag-autocomplete';
 import { Collapse } from 'reactstrap';
 import '../../node_modules/react-datepicker/dist/react-datepicker.css';
 import './CreateShortUrl.scss';
 import CreateShortUrlResult from './helpers/CreateShortUrlResult';
 import { createShortUrl } from './reducers/shortUrlCreationResult';
-import { connect } from 'react-redux';
 
 export class CreateShortUrl extends React.Component {
   state = {
@@ -52,8 +52,15 @@ export class CreateShortUrl extends React.Component {
         readOnly
         {...props}
       />;
+    const formatDate = date => isNil(date) ? date : date.format();
     const save = e => {
       e.preventDefault();
+      this.props.createShortUrl(pipe(
+        dissoc('moreOptionsVisible'), // Remove moreOptionsVisible property
+        assoc('tags', pluck('name', this.state.tags)), // Map tags array to use only their names
+        assoc('validSince', formatDate(this.state.validSince)),
+        assoc('validUntil', formatDate(this.state.validUntil))
+      )(this.state));
     };
 
     return (
@@ -116,7 +123,7 @@ export class CreateShortUrl extends React.Component {
             <button className="btn btn-outline-primary create-short-url__btn float-right">Create</button>
           </div>
 
-          <CreateShortUrlResult creationResult={this.props.shortUrlCreationResult} />
+          <CreateShortUrlResult {...this.props.shortUrlCreationResult} />
         </form>
       </div>
     );

src/short-urls/helpers/CreateShortUrlResult.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { isNil } from 'ramda';
 
-export default function CreateShortUrlResult ({ creationResult }) {
-  if (creationResult.loading) {
+export default function CreateShortUrlResult ({ loading, error, result }) {
+  if (loading) {
     return <div className="text-center">Loading...</div>
   }
 
-  if (creationResult.error) {
+  if (error) {
     return <div className="text-center color-danger">An error occurred while creating the URL :(</div>
   }
 
-  if (isNil(creationResult.result)) {
+  if (isNil(result)) {
     return null;
   }