Removed duplicated code by creating a helper function

This commit is contained in:
Alejandro Celaya 2018-08-27 16:45:22 +02:00
parent 8534c4b7bd
commit 34c5a0ef8f
4 changed files with 20 additions and 25 deletions

View file

@ -3,21 +3,23 @@ import React from 'react';
import { connect } from 'react-redux';
import { v4 as uuid } from 'uuid';
import PropTypes from 'prop-types';
import { stateFlagTimeout } from '../utils/utils';
import { resetSelectedServer } from './reducers/selectedServer';
import { createServer } from './reducers/server';
import './CreateServer.scss';
import ImportServersBtn from './helpers/ImportServersBtn';
const SHOW_IMPORT_MSG_TIME = 4000;
const propTypes = {
createServer: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
resetSelectedServer: PropTypes.func,
};
export class CreateServerComponent extends React.Component {
static propTypes = {
createServer: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
resetSelectedServer: PropTypes.func,
};
state = {
name: '',
url: '',
@ -71,10 +73,7 @@ export class CreateServerComponent extends React.Component {
<div className="text-right">
<ImportServersBtn
onImport={() => {
this.setState({ serversImported: true });
setTimeout(() => this.setState({ serversImported: false }), SHOW_IMPORT_MSG_TIME);
}}
onImport={() => stateFlagTimeout(this.setState.bind(this), 'serversImported', true, SHOW_IMPORT_MSG_TIME)}
/>
<button className="btn btn-outline-primary">Create server</button>
</div>
@ -94,8 +93,6 @@ export class CreateServerComponent extends React.Component {
}
}
CreateServerComponent.propTypes = propTypes;
const CreateServer = connect(
pick([ 'selectedServer' ]),
{ createServer, resetSelectedServer }

View file

@ -6,10 +6,9 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Card, CardBody, Tooltip } from 'reactstrap';
import PropTypes from 'prop-types';
import { createShortUrlResultType } from '../reducers/shortUrlCreationResult';
import { stateFlagTimeout } from '../../utils/utils';
import './CreateShortUrlResult.scss';
const TIME_TO_SHOW_COPY_TOOLTIP = 2000;
const propTypes = {
resetCreateShortUrl: PropTypes.func,
error: PropTypes.bool,
@ -38,10 +37,7 @@ export default class CreateShortUrlResult extends React.Component {
}
const { shortUrl } = result;
const onCopy = () => {
this.setState({ showCopyTooltip: true });
setTimeout(() => this.setState({ showCopyTooltip: false }), TIME_TO_SHOW_COPY_TOOLTIP);
};
const onCopy = () => stateFlagTimeout(this.setState.bind(this), 'showCopyTooltip');
return (
<Card inverse className="bg-main mt-3">

View file

@ -7,11 +7,10 @@ import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams';
import { serverType } from '../../servers/prop-types';
import ExternalLink from '../../utils/ExternalLink';
import { shortUrlType } from '../reducers/shortUrlsList';
import { stateFlagTimeout } from '../../utils/utils';
import { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
import './ShortUrlsRow.scss';
const COPIED_MSG_TIME = 2000;
const propTypes = {
refreshList: PropTypes.func,
shortUrlsListParams: shortUrlsListParamsType,
@ -67,10 +66,7 @@ export class ShortUrlsRow extends React.Component {
completeShortUrl={completeShortUrl}
selectedServer={selectedServer}
shortUrl={shortUrl}
onCopyToClipboard={() => {
this.setState({ copiedToClipboard: true });
setTimeout(() => this.setState({ copiedToClipboard: false }), COPIED_MSG_TIME);
}}
onCopyToClipboard={() => stateFlagTimeout(this.setState.bind(this), 'copiedToClipboard')}
/>
</td>
</tr>

6
src/utils/utils.js Normal file
View file

@ -0,0 +1,6 @@
const DEFAULT_TIMEOUT_DELAY = 2000;
export const stateFlagTimeout = (setState, flagName, initialValue = true, delay = DEFAULT_TIMEOUT_DELAY) => {
setState({ [flagName]: initialValue });
setTimeout(() => setState({ [flagName]: !initialValue }), delay);
};