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

Implemented short URLs creation

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-28 18:59:32 +02:00
parent 0a5c20e3ee
commit f7249cfe6e
3 changed files with 21 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/api/ShlinkApiClient.js
View file

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

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

@ -2,16 +2,16 @@ import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown'; import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp'; import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'; 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 React from 'react';
import DatePicker from 'react-datepicker'; import DatePicker from 'react-datepicker';
import { connect } from 'react-redux';
import ReactTags from 'react-tag-autocomplete'; import ReactTags from 'react-tag-autocomplete';
import { Collapse } from 'reactstrap'; import { Collapse } from 'reactstrap';
import '../../node_modules/react-datepicker/dist/react-datepicker.css'; import '../../node_modules/react-datepicker/dist/react-datepicker.css';
import './CreateShortUrl.scss'; import './CreateShortUrl.scss';
import CreateShortUrlResult from './helpers/CreateShortUrlResult'; import CreateShortUrlResult from './helpers/CreateShortUrlResult';
import { createShortUrl } from './reducers/shortUrlCreationResult'; import { createShortUrl } from './reducers/shortUrlCreationResult';
import { connect } from 'react-redux';
export class CreateShortUrl extends React.Component { export class CreateShortUrl extends React.Component {
state = { state = {
@ -52,8 +52,15 @@ export class CreateShortUrl extends React.Component {
readOnly readOnly
{...props} {...props}
/>; />;
const formatDate = date => isNil(date) ? date : date.format();
const save = e => { const save = e => {
e.preventDefault(); 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 ( 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> <button className="btn btn-outline-primary create-short-url__btn float-right">Create</button>
</div> </div>
<CreateShortUrlResult creationResult={this.props.shortUrlCreationResult} /> <CreateShortUrlResult {...this.props.shortUrlCreationResult} />
</form> </form>
</div> </div>
); );

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

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