Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Moved Pagination to newer React syntax

Browse source
This commit is contained in:
Simon Backx 2022-07-08 12:49:56 +02:00
parent 2837f67f97
commit 99f0038633
1 changed files with 18 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
apps/comments-ui/src/components/Pagination.js
View file

@ -1,39 +1,28 @@
import React from 'react';
import React, {useContext} from 'react';
import AppContext from '../AppContext';
class Pagination extends React.Component {
static contextType = AppContext;
const Pagination = (props) => {
const {pagination, dispatchAction} = useContext(AppContext);
constructor(props) {
super(props);
this.state = {
message: ''
};
const loadMore = () => {
dispatchAction('loadMoreComments');
};
this.loadMore = this.loadMore.bind(this);
if (!pagination) {
return null;
}
loadMore() {
this.context.onAction('loadMoreComments');
const left = pagination.total - pagination.page * pagination.limit;
if (left <= 0) {
return null;
}
render() {
if (!this.context.pagination) {
return null;
}
return (
<button className="w-full rounded-md bg-neutral-100 text-neutral-700 font-semibold px-3 py-3.5 mb-12 font-sans text-md text-center dark:bg-[rgba(255,255,255,0.08)] dark:text-white" onClick={loadMore}>
↑ Show {left} previous comments
</button>
);
};
const left = this.context.pagination.total - this.context.pagination.page * this.context.pagination.limit;
if (left <= 0) {
return null;
}
return (
<button className="w-full rounded-md bg-neutral-100 text-neutral-700 font-semibold px-3 py-3.5 mb-12 font-sans text-md text-center dark:bg-[rgba(255,255,255,0.08)] dark:text-white" onClick={this.loadMore}>
↑ Show {left} previous comments
</button>
);
}
}
export default Pagination;