@@ -9,6 +9,7 @@ import PageSpinner from './ui/PageSpinner';
9
9
import { fetchEvents , archiveEvent } from '../actions' ;
10
10
import BreadcrumbFragment from './fragments/BreadcrumbFragment' ;
11
11
import DialogModal from './ui/DialogModal' ;
12
+ import ScrollLoader from './fragments/ScollLoader' ;
12
13
13
14
import * as utils from '../utils' ;
14
15
import * as Constants from '../Constants' ;
@@ -20,14 +21,29 @@ class EventList extends Component {
20
21
eventFormInitialValues : null ,
21
22
showConfirmDialog : false ,
22
23
confirmDialogOptions : { } ,
24
+ searchTerm : undefined ,
25
+ page : 0 ,
26
+ pageSize : 3 ,
27
+ pageCount : 1 ,
23
28
} ;
24
29
25
30
componentDidMount ( ) {
26
- this . props . fetchEvents ( ) . then ( ( ) => {
27
- this . setState ( { loading : false } ) ;
28
- } ) ;
31
+ this . loadData ( ) ;
29
32
}
30
33
34
+ loadData = ( ) => {
35
+ const nextPage = this . state . page + 1 ;
36
+ if ( this . state . page < this . state . pageCount ) {
37
+ this . props . fetchEvents ( this . state . searchTerm , nextPage , this . state . pageSize ) . then ( pageCount => {
38
+ this . setState ( { loading : false , page : nextPage , pageCount } ) ;
39
+ } ) ;
40
+ }
41
+ } ;
42
+
43
+ loadMoreData = ( ) => {
44
+ if ( this . state . page <= this . state . pageCount ) this . loadData ( ) ;
45
+ } ;
46
+
31
47
showAddEventForm = ( ) => {
32
48
this . setState ( { showEventForm : true , eventFormType : Constants . FORM_TYPE . ADD , eventFormInitialValues : null } ) ;
33
49
} ;
@@ -102,7 +118,20 @@ class EventList extends Component {
102
118
return (
103
119
< React . Fragment >
104
120
{ this . renderAddEventButton ( ) }
105
- { this . state . loading ? < PageSpinner /> : this . renderEventList ( ) }
121
+ { this . state . loading ? (
122
+ < PageSpinner />
123
+ ) : (
124
+ < ScrollLoader loader = { this . loadData } >
125
+ { this . renderEventList ( ) }
126
+ { this . state . page < this . state . pageCount && (
127
+ < div className = "text-center mb-5" >
128
+ < Button color = "primary" onClick = { this . loadData } >
129
+ More
130
+ </ Button >
131
+ </ div >
132
+ ) }
133
+ </ ScrollLoader >
134
+ ) }
106
135
</ React . Fragment >
107
136
) ;
108
137
}
0 commit comments