mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-22 17:10:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fixed problem while 'reloading' a page with different route params not making the server to be hit

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-18 19:01:43 +02:00
parent 22406d1253
commit 5a7ac69aff
2 changed files with 6 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/short-urls/Paginator.js
View file

@ -2,7 +2,6 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import { connect } from 'react-redux';
import { updateShortUrlsList } from './reducers/shortUrlsList';
export class Paginator extends React.Component {
render() {
@ -21,7 +20,6 @@ export class Paginator extends React.Component {
<PaginationLink
tag={Link}
to={`/server/${serverId}/list-short-urls/${i}`}
onClick={() => this.updatePage(i)}
>
{i}
</PaginationLink>
@ -39,7 +37,6 @@ export class Paginator extends React.Component {
previous
tag={Link}
to={`/server/${serverId}/list-short-urls/${currentPage - 1}`}
onClick={() => this.updatePage(currentPage - 1)}
/>
</PaginationItem>
{renderPages()}
@ -48,18 +45,11 @@ export class Paginator extends React.Component {
next
tag={Link}
to={`/server/${serverId}/list-short-urls/${currentPage + 1}`}
onClick={() => this.updatePage(currentPage + 1)}
/>
</PaginationItem>
</Pagination>
);
}
updatePage(page) {
this.props.updateShortUrlsList({ ...this.props.shortUrlsListParams, page })
}
}
export default connect(state => ({
shortUrlsListParams: state.shortUrlsListParams,
}), { updateShortUrlsList })(Paginator);
export default connect()(Paginator);

6
src/short-urls/ShortUrls.js
View file

@ -6,10 +6,14 @@ import './ShortUrls.scss';
import ShortUrlsList from './ShortUrlsList';
export function ShortUrls(props) {
const { match: { params } } = props;
// Using a key on a component makes react to create a new instance every time the key changes
const urlsListKey = `${params.serverId}_${params.page}`;
return (
<div className="short-urls-container">
<div className="form-group"><SearchBar /></div>
<ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} />
<ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} key={urlsListKey} />
<Paginator paginator={props.shortUrlsList.pagination} serverId={props.match.params.serverId} />
</div>
);