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

View file

@ -6,10 +6,9 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Card, CardBody, Tooltip } from 'reactstrap'; import { Card, CardBody, Tooltip } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { createShortUrlResultType } from '../reducers/shortUrlCreationResult'; import { createShortUrlResultType } from '../reducers/shortUrlCreationResult';
import { stateFlagTimeout } from '../../utils/utils';
import './CreateShortUrlResult.scss'; import './CreateShortUrlResult.scss';
const TIME_TO_SHOW_COPY_TOOLTIP = 2000;
const propTypes = { const propTypes = {
resetCreateShortUrl: PropTypes.func, resetCreateShortUrl: PropTypes.func,
error: PropTypes.bool, error: PropTypes.bool,
@ -38,10 +37,7 @@ export default class CreateShortUrlResult extends React.Component {
} }
const { shortUrl } = result; const { shortUrl } = result;
const onCopy = () => { const onCopy = () => stateFlagTimeout(this.setState.bind(this), 'showCopyTooltip');
this.setState({ showCopyTooltip: true });
setTimeout(() => this.setState({ showCopyTooltip: false }), TIME_TO_SHOW_COPY_TOOLTIP);
};
return ( return (
<Card inverse className="bg-main mt-3"> <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 { serverType } from '../../servers/prop-types';
import ExternalLink from '../../utils/ExternalLink'; import ExternalLink from '../../utils/ExternalLink';
import { shortUrlType } from '../reducers/shortUrlsList'; import { shortUrlType } from '../reducers/shortUrlsList';
import { stateFlagTimeout } from '../../utils/utils';
import { ShortUrlsRowMenu } from './ShortUrlsRowMenu'; import { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
import './ShortUrlsRow.scss'; import './ShortUrlsRow.scss';
const COPIED_MSG_TIME = 2000;
const propTypes = { const propTypes = {
refreshList: PropTypes.func, refreshList: PropTypes.func,
shortUrlsListParams: shortUrlsListParamsType, shortUrlsListParams: shortUrlsListParamsType,
@ -67,10 +66,7 @@ export class ShortUrlsRow extends React.Component {
completeShortUrl={completeShortUrl} completeShortUrl={completeShortUrl}
selectedServer={selectedServer} selectedServer={selectedServer}
shortUrl={shortUrl} shortUrl={shortUrl}
onCopyToClipboard={() => { onCopyToClipboard={() => stateFlagTimeout(this.setState.bind(this), 'copiedToClipboard')}
this.setState({ copiedToClipboard: true });
setTimeout(() => this.setState({ copiedToClipboard: false }), COPIED_MSG_TIME);
}}
/> />
</td> </td>
</tr> </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);
};