mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-10-23 13:06:09 +03:00
Code Issues Projects Releases Packages Wiki Activity

Converted ShortUrlsRow component into a functional component

Browse source
This commit is contained in:
Alejandro Celaya 2020-03-06 21:44:03 +01:00
parent 972eafab34
commit f55d3a66aa
5 changed files with 49 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/short-urls/helpers/ShortUrlsRow.js
View file

@ -13,26 +13,25 @@ import Tag from '../../tags/helpers/Tag';
import ShortUrlVisitsCount from './ShortUrlVisitsCount';
import './ShortUrlsRow.scss';
const ShortUrlsRow = (
ShortUrlsRowMenu,
colorGenerator,
stateFlagTimeout
) => class ShortUrlsRow extends React.Component {
static propTypes = {
const propTypes = {
refreshList: PropTypes.func,
shortUrlsListParams: shortUrlsListParamsType,
selectedServer: serverType,
shortUrl: shortUrlType,
};
state = { copiedToClipboard: false };
renderTags(tags) {
const ShortUrlsRow = (
ShortUrlsRowMenu,
colorGenerator,
useStateFlagTimeout
) => {
const ShortUrlsRowComp = ({ shortUrl, selectedServer, refreshList, shortUrlsListParams }) => {
const [ copiedToClipboard, setCopiedToClipboard ] = useStateFlagTimeout(false);
const renderTags = (tags) => {
if (isEmpty(tags)) {
return <i className="indivisible"><small>No tags</small></i>;
}
const { refreshList, shortUrlsListParams } = this.props;
const selectedTags = shortUrlsListParams.tags || [];
return tags.map((tag) => (
@ -43,10 +42,7 @@ const ShortUrlsRow = (
onClick={() => refreshList({ tags: [ ...selectedTags, tag ] })}
/>
));
}
render() {
const { shortUrl, selectedServer } = this.props;
};
return (
<tr className="short-urls-row">
@ -56,16 +52,10 @@ const ShortUrlsRow = (
<td className="short-urls-row__cell" data-th="Short URL: ">
<span className="indivisible short-urls-row__cell--relative">
<ExternalLink href={shortUrl.shortUrl} />
<CopyToClipboard
text={shortUrl.shortUrl}
onCopy={() => stateFlagTimeout(this.setState.bind(this), 'copiedToClipboard')}
>
<CopyToClipboard text={shortUrl.shortUrl} onCopy={setCopiedToClipboard}>
<FontAwesomeIcon icon={copyIcon} className="ml-2 short-urls-row__copy-btn" />
</CopyToClipboard>
<span
className="badge badge-warning short-urls-row__copy-hint"
hidden={!this.state.copiedToClipboard}
>
<span className="badge badge-warning short-urls-row__copy-hint" hidden={!copiedToClipboard}>
Copied short URL!
</span>
</span>
@ -73,7 +63,7 @@ const ShortUrlsRow = (
<td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
<ExternalLink href={shortUrl.longUrl} />
</td>
<td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
<td className="short-urls-row__cell" data-th="Tags: ">{renderTags(shortUrl.tags)}</td>
<td className="short-urls-row__cell text-md-right" data-th="Visits: ">
<ShortUrlVisitsCount
visitsCount={shortUrl.visitsCount}
@ -86,7 +76,11 @@ const ShortUrlsRow = (
</td>
</tr>
);
}
};
ShortUrlsRowComp.propTypes = propTypes;
return ShortUrlsRowComp;
};
export default ShortUrlsRow;

2
src/short-urls/services/provideServices.js
View file

@ -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',

3
src/utils/services/provideServices.js
View file

@ -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;

10
src/utils/utils.js
View file

@ -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';

13
test/short-urls/helpers/ShortUrlsRow.test.js
View file

@ -12,7 +12,8 @@ describe('<ShortUrlsRow />', () => {
let wrapper;
const mockFunction = () => '';
const ShortUrlsRowMenu = mockFunction;
const stateFlagTimeout = jest.fn();
const stateFlagTimeout = jest.fn(() => true);
const useStateFlagTimeout = jest.fn(() => [ false, stateFlagTimeout ]);
const colorGenerator = {
getColorForKey: mockFunction,
setColorForKey: mockFunction,
@ -30,7 +31,7 @@ describe('<ShortUrlsRow />', () => {
};
beforeEach(() => {
const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, stateFlagTimeout);
const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useStateFlagTimeout);
wrapper = shallow(
<ShortUrlsRow shortUrlsListParams={{}} refreshList={mockFunction} selecrtedServer={server} shortUrl={shortUrl} />
@ -96,12 +97,4 @@ describe('<ShortUrlsRow />', () => {
menu.simulate('copy');
expect(stateFlagTimeout).toHaveBeenCalledTimes(1);
});
it('shows copy hint when state prop is true', () => {
const isHidden = () => wrapper.find('td').at(1).find('.short-urls-row__copy-hint').prop('hidden');
expect(isHidden()).toEqual(true);
wrapper.setState({ copiedToClipboard: true });
expect(isHidden()).toEqual(false);
});
});