RecentCreated.jsx 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import { apiv3Get } from '~/client/util/apiv3-client';
  4. import PageListItemS from '../PageList/PageListItemS';
  5. import PaginationWrapper from '../PaginationWrapper';
  6. class RecentCreated extends React.Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. pages: [],
  11. activePage: 1,
  12. totalPages: 0,
  13. pagingLimit: 10,
  14. };
  15. this.handlePage = this.handlePage.bind(this);
  16. }
  17. componentWillMount() {
  18. this.getRecentCreatedList(1);
  19. }
  20. async handlePage(selectedPage) {
  21. await this.getRecentCreatedList(selectedPage);
  22. }
  23. async getRecentCreatedList(selectedPage) {
  24. const { userId } = this.props;
  25. const page = selectedPage;
  26. // pagesList get and pagination calculate
  27. const res = await apiv3Get(`/users/${userId}/recent`, { page });
  28. const { totalCount, pages, limit } = res.data;
  29. this.setState({
  30. pages,
  31. activePage: selectedPage,
  32. totalPages: totalCount,
  33. pagingLimit: limit,
  34. });
  35. }
  36. /**
  37. * generate Elements of Page
  38. *
  39. * @param {any} pages Array of pages Model Obj
  40. *
  41. */
  42. generatePageList(pages) {
  43. return pages.map(page => (
  44. <li key={`recent-created:list-view:${page._id}`} className="mt-4">
  45. <PageListItemS page={page} />
  46. </li>
  47. ));
  48. }
  49. render() {
  50. const pageList = this.generatePageList(this.state.pages);
  51. return (
  52. <div className="page-list-container-create">
  53. <ul className="page-list-ul page-list-ul-flat mb-3">
  54. {pageList}
  55. </ul>
  56. <PaginationWrapper
  57. align="center"
  58. activePage={this.state.activePage}
  59. changePage={this.handlePage}
  60. totalItemsCount={this.state.totalPages}
  61. pagingLimit={this.state.pagingLimit}
  62. size="sm"
  63. />
  64. </div>
  65. );
  66. }
  67. }
  68. RecentCreated.propTypes = {
  69. userId: PropTypes.string.isRequired,
  70. };
  71. export default RecentCreated;