diff --git a/src/index.scss b/src/index.scss index fb19aa8f..024226ce 100644 --- a/src/index.scss +++ b/src/index.scss @@ -8,11 +8,15 @@ white-space: nowrap; } +.bg-main { + background-color: $mainColor !important; +} + .dropdown-item { cursor: pointer; } .dropdown-item.active { - background-color: $mainColor !important; + @extend .bg-main; } .short-urls-container { diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js index 91aa6c5a..291e0a16 100644 --- a/src/short-urls/CreateShortUrl.js +++ b/src/short-urls/CreateShortUrl.js @@ -11,7 +11,7 @@ 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 { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult'; export class CreateShortUrl extends React.Component { state = { @@ -25,6 +25,8 @@ export class CreateShortUrl extends React.Component { }; render() { + const { createShortUrl, shortUrlCreationResult, resetCreateShortUrl } = this.props; + const addTag = tag => this.setState({ tags: [].concat(this.state.tags, assoc('name', replace(/ /g, '-', tag.name), tag)) }); @@ -55,7 +57,7 @@ export class CreateShortUrl extends React.Component { const formatDate = date => isNil(date) ? date : date.format(); const save = e => { e.preventDefault(); - this.props.createShortUrl(pipe( + 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)), @@ -120,14 +122,22 @@ export class CreateShortUrl extends React.Component {   {this.state.moreOptionsVisible ? 'Less' : 'More'} options - + - + ); } } -export default connect(pick(['shortUrlCreationResult']), { createShortUrl })(CreateShortUrl); +export default connect(pick(['shortUrlCreationResult']), { + createShortUrl, + resetCreateShortUrl +})(CreateShortUrl); diff --git a/src/short-urls/helpers/CreateShortUrlResult.js b/src/short-urls/helpers/CreateShortUrlResult.js index 3d8459a6..7ef07c2c 100644 --- a/src/short-urls/helpers/CreateShortUrlResult.js +++ b/src/short-urls/helpers/CreateShortUrlResult.js @@ -1,18 +1,48 @@ -import React from 'react'; +import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy'; +import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import { isNil } from 'ramda'; +import React from 'react'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import './CreateShortUrlResult.scss' +import { Tooltip } from 'reactstrap'; -export default function CreateShortUrlResult ({ loading, error, result }) { - if (loading) { - return
Loading...
+export default class CreateShortUrlResult extends React.Component { + state = { showCopyTooltip: false }; + + componentDidMount() { + this.props.resetCreateShortUrl(); } - if (error) { - return
An error occurred while creating the URL :(
- } + render() { + const { error, result } = this.props; - if (isNil(result)) { - return null; - } + if (error) { + return
An error occurred while creating the URL :(
+ } + if (isNil(result)) { + return null; + } - return
Great!
; + const { shortUrl } = result; + const onCopy = () => { + this.setState({ showCopyTooltip: true }); + setTimeout(() => this.setState({ showCopyTooltip: false }), 2000); + }; + + return ( +
+ Great! The short URL is {shortUrl} + + + + + + + Copied! + +
+ ); + } }; diff --git a/src/short-urls/helpers/CreateShortUrlResult.scss b/src/short-urls/helpers/CreateShortUrlResult.scss new file mode 100644 index 00000000..97ba3d87 --- /dev/null +++ b/src/short-urls/helpers/CreateShortUrlResult.scss @@ -0,0 +1,4 @@ +.create-short-url-result__copy-btn { + margin-left: 10px; + vertical-align: inherit; +} diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js index 9bdfad9a..29b36e55 100644 --- a/src/short-urls/helpers/ShortUrlsRow.js +++ b/src/short-urls/helpers/ShortUrlsRow.js @@ -38,8 +38,8 @@ export class ShortUrlsRow extends React.Component { display={this.state.displayMenu} shortUrl={completeShortUrl} onCopyToClipboard={() => { - this.setState({copiedToClipboard: true}); - setTimeout(() => this.setState({copiedToClipboard: false}), 2000); + this.setState({ copiedToClipboard: true }); + setTimeout(() => this.setState({ copiedToClipboard: false }), 2000); }} /> diff --git a/src/short-urls/reducers/shortUrlCreationResult.js b/src/short-urls/reducers/shortUrlCreationResult.js index 7622a190..88675f6c 100644 --- a/src/short-urls/reducers/shortUrlCreationResult.js +++ b/src/short-urls/reducers/shortUrlCreationResult.js @@ -3,6 +3,7 @@ import ShlinkApiClient from '../../api/ShlinkApiClient'; const CREATE_SHORT_URL_START = 'shlink/createShortUrl/CREATE_SHORT_URL_START'; const CREATE_SHORT_URL_ERROR = 'shlink/createShortUrl/CREATE_SHORT_URL_ERROR'; const CREATE_SHORT_URL = 'shlink/createShortUrl/CREATE_SHORT_URL'; +const RESET_CREATE_SHORT_URL = 'shlink/createShortUrl/RESET_CREATE_SHORT_URL'; const defaultState = { result: null, @@ -27,8 +28,10 @@ export default function reducer(state = defaultState, action) { return { result: action.result, saving: false, - error: true, + error: false, }; + case RESET_CREATE_SHORT_URL: + return defaultState; default: return state; } @@ -44,3 +47,5 @@ export const createShortUrl = data => async dispatch => { dispatch({ type: CREATE_SHORT_URL_ERROR }); } }; + +export const resetCreateShortUrl = () => ({ type: RESET_CREATE_SHORT_URL });