@@ -56,16 +52,10 @@ const ShortUrlsRow = (
- stateFlagTimeout(this.setState.bind(this), 'copiedToClipboard')}
- >
+
-
+
Copied short URL!
@@ -73,7 +63,7 @@ const ShortUrlsRow = (
|
|
- {this.renderTags(shortUrl.tags)} |
+ {renderTags(shortUrl.tags)} |
| |
);
- }
+ };
+
+ ShortUrlsRowComp.propTypes = propTypes;
+
+ return ShortUrlsRowComp;
};
export default ShortUrlsRow;
diff --git a/src/short-urls/services/provideServices.js b/src/short-urls/services/provideServices.js
index 014ecd74..3c3c258f 100644
--- a/src/short-urls/services/provideServices.js
+++ b/src/short-urls/services/provideServices.js
@@ -33,7 +33,7 @@ const provideServices = (bottle, connect) => {
[ 'listShortUrls', 'resetShortUrlParams' ]
));
- bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'stateFlagTimeout');
+ bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useStateFlagTimeout');
bottle.serviceFactory(
'ShortUrlsRowMenu',
diff --git a/src/utils/services/provideServices.js b/src/utils/services/provideServices.js
index 4c165f37..0efe06cd 100644
--- a/src/utils/services/provideServices.js
+++ b/src/utils/services/provideServices.js
@@ -1,5 +1,5 @@
import axios from 'axios';
-import { stateFlagTimeout } from '../utils';
+import { stateFlagTimeout, useStateFlagTimeout } from '../utils';
import Storage from './Storage';
import ColorGenerator from './ColorGenerator';
import buildShlinkApiClient from './ShlinkApiClientBuilder';
@@ -14,6 +14,7 @@ const provideServices = (bottle) => {
bottle.constant('setTimeout', global.setTimeout);
bottle.serviceFactory('stateFlagTimeout', stateFlagTimeout, 'setTimeout');
+ bottle.serviceFactory('useStateFlagTimeout', useStateFlagTimeout, 'setTimeout');
};
export default provideServices;
diff --git a/src/utils/utils.js b/src/utils/utils.js
index d3118236..78d50daa 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -19,6 +19,16 @@ export const stateFlagTimeout = (setTimeout) => (
setTimeout(() => setState({ [flagName]: !initialValue }), delay);
};
+export const useStateFlagTimeout = (setTimeout) => (initialValue = true, delay = DEFAULT_TIMEOUT_DELAY) => {
+ const [ flag, setFlag ] = useState(initialValue);
+ const callback = () => {
+ setFlag(!initialValue);
+ setTimeout(() => setFlag(initialValue), delay);
+ };
+
+ return [ flag, callback ];
+};
+
export const determineOrderDir = (clickedField, currentOrderField, currentOrderDir) => {
if (currentOrderField !== clickedField) {
return 'ASC';
diff --git a/test/short-urls/helpers/ShortUrlsRow.test.js b/test/short-urls/helpers/ShortUrlsRow.test.js
index dd12a39f..4c0d022c 100644
--- a/test/short-urls/helpers/ShortUrlsRow.test.js
+++ b/test/short-urls/helpers/ShortUrlsRow.test.js
@@ -12,7 +12,8 @@ describe('