diff --git a/src/api/ShlinkApiClient.js b/src/api/ShlinkApiClient.js index b9158802..071cf186 100644 --- a/src/api/ShlinkApiClient.js +++ b/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} */ - 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 = {}) => { diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js index c3374cd5..91aa6c5a 100644 --- a/src/short-urls/CreateShortUrl.js +++ b/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 { - + ); diff --git a/src/short-urls/helpers/CreateShortUrlResult.js b/src/short-urls/helpers/CreateShortUrlResult.js index c03067b2..3d8459a6 100644 --- a/src/short-urls/helpers/CreateShortUrlResult.js +++ b/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
Loading...
} - if (creationResult.error) { + if (error) { return
An error occurred while creating the URL :(
} - if (isNil(creationResult.result)) { + if (isNil(result)) { return null; }