forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-02 05:36:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created CreateShortUrl test

Browse Source
This commit is contained in:
Alejandro Celaya
2018-11-01 13:15:09 +01:00
parent c774a00610
commit 53132fa900
4 changed files with 128 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/short-urls/CreateShortUrl.js
View File

@@ -5,12 +5,22 @@ import { assoc, dissoc, isNil, pick, pipe, replace, trim } from 'ramda';
import React from 'react';
import { connect } from 'react-redux';
import { Collapse } from 'reactstrap';
import * as PropTypes from 'prop-types';
import DateInput from '../utils/DateInput';
import TagsSelector from '../tags/helpers/TagsSelector';
import CreateShortUrlResult from './helpers/CreateShortUrlResult';
import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreation';
import { createShortUrl, createShortUrlResultType, resetCreateShortUrl } from './reducers/shortUrlCreation';
const normalizeTag = pipe(trim, replace(/ /g, '-'));
const formatDate = (date) => isNil(date) ? date : date.format();
export class CreateShortUrlComponent extends React.Component {
static propTypes = {
createShortUrl: PropTypes.func,
shortUrlCreationResult: createShortUrlResultType,
resetCreateShortUrl: PropTypes.func,
};
state = {
longUrl: '',
tags: [],
@@ -24,27 +34,31 @@ export class CreateShortUrlComponent extends React.Component {
render() {
const { createShortUrl, shortUrlCreationResult, resetCreateShortUrl } = this.props;
const changeTags = (tags) => this.setState({ tags: tags.map(pipe(trim, replace(/ /g, '-'))) });
const changeTags = (tags) => this.setState({ tags: tags.map(normalizeTag) });
const renderOptionalInput = (id, placeholder, type = 'text', props = {}) => (
<input
className="form-control"
type={type}
placeholder={placeholder}
value={this.state[id]}
onChange={(e) => this.setState({ [id]: e.target.value })}
{...props}
/>
<div className="form-group">
<input
className="form-control"
id={id}
type={type}
placeholder={placeholder}
value={this.state[id]}
onChange={(e) => this.setState({ [id]: e.target.value })}
{...props}
/>
</div>
);
const createDateInput = (id, placeholder, props = {}) => (
<DateInput
selected={this.state[id]}
placeholderText={placeholder}
isClearable
onChange={(date) => this.setState({ [id]: date })}
{...props}
/>
const renderDateInput = (id, placeholder, props = {}) => (
<div className="form-group">
<DateInput
selected={this.state[id]}
placeholderText={placeholder}
isClearable
onChange={(date) => this.setState({ [id]: date })}
{...props}
/>
</div>
);
const formatDate = (date) => isNil(date) ? date : date.format();
const save = (e) => {
e.preventDefault();
createShortUrl(pipe(
@@ -75,20 +89,12 @@ export class CreateShortUrlComponent extends React.Component {
<div className="row">
<div className="col-sm-6">
<div className="form-group">
{renderOptionalInput('customSlug', 'Custom slug')}
</div>
<div className="form-group">
{renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
</div>
{renderOptionalInput('customSlug', 'Custom slug')}
{renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
</div>
<div className="col-sm-6">
<div className="form-group">
{createDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
</div>
<div className="form-group">
{createDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
</div>
{renderDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
{renderDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
</div>
</div>
</Collapse>

28
src/short-urls/helpers/PreviewModal.js
View File

@@ -10,21 +10,19 @@ const propTypes = {
isOpen: PropTypes.bool,
};
const PreviewModal = ({ url, toggle, isOpen }) => {
return (
<Modal isOpen={isOpen} toggle={toggle} size="lg">
<ModalHeader toggle={toggle}>
Preview for <ExternalLink href={url}>{url}</ExternalLink>
</ModalHeader>
<ModalBody>
<div className="text-center">
<p className="preview-modal__loader">Loading...</p>
<img src={`${url}/preview`} className="preview-modal__img" alt="Preview" />
</div>
</ModalBody>
</Modal>
);
};
const PreviewModal = ({ url, toggle, isOpen }) => (
<Modal isOpen={isOpen} toggle={toggle} size="lg">
<ModalHeader toggle={toggle}>
Preview for <ExternalLink href={url}>{url}</ExternalLink>
</ModalHeader>
<ModalBody>
<div className="text-center">
<p className="preview-modal__loader">Loading...</p>
<img src={`${url}/preview`} className="preview-modal__img" alt="Preview" />
</div>
</ModalBody>
</Modal>
);
PreviewModal.propTypes = propTypes;

26
src/short-urls/helpers/QrCodeModal.js
View File

@@ -10,20 +10,18 @@ const propTypes = {
isOpen: PropTypes.bool,
};
const QrCodeModal = ({ url, toggle, isOpen }) => {
return (
<Modal isOpen={isOpen} toggle={toggle} centered>
<ModalHeader toggle={toggle}>
QR code for <ExternalLink href={url}>{url}</ExternalLink>
</ModalHeader>
<ModalBody>
<div className="text-center">
<img src={`${url}/qr-code`} className="qr-code-modal__img" alt="QR code" />
</div>
</ModalBody>
</Modal>
);
};
const QrCodeModal = ({ url, toggle, isOpen }) => (
<Modal isOpen={isOpen} toggle={toggle} centered>
<ModalHeader toggle={toggle}>
QR code for <ExternalLink href={url}>{url}</ExternalLink>
</ModalHeader>
<ModalBody>
<div className="text-center">
<img src={`${url}/qr-code`} className="qr-code-modal__img" alt="QR code" />
</div>
</ModalBody>
</Modal>
);
QrCodeModal.propTypes = propTypes;