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 });