Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
RestTableComponent is now using mobx, no more isMounted
- Loading branch information
1 parent
734a43a
commit c1fd87f
Showing
7 changed files
with
139 additions
and
164 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,163 +1,138 @@ | ||
| import React, {PropTypes} from 'react'; | ||
| import React from 'react'; | ||
| import { | ||
| Table | ||
| Table | ||
| } from 'reactabular'; | ||
| import tr from 'i18next'; | ||
| import mobx from 'mobx'; | ||
| import {observer} from 'mobx-react'; | ||
| import Paginator from 'react-pagify'; | ||
| import segmentize from 'segmentize'; | ||
| import Spinner from 'components/spinner'; | ||
| import Alert from 'components/alert' | ||
| import alertAjax from 'components/alertAjax'; | ||
| import Debug from 'debug'; | ||
| let debug = new Debug("components:resttable"); | ||
|
|
||
| import 'react-pagify/style.css'; | ||
|
|
||
| export default React.createClass({ | ||
| propTypes: { | ||
| getData: PropTypes.func.isRequired, | ||
| columns: PropTypes.array.isRequired, | ||
| onRow: PropTypes.func | ||
| export default (context, {getData, columns}) => { | ||
| const {tr} = context; | ||
| const AlertAjax = alertAjax(context); | ||
| const store = mobx.observable({ | ||
| loading: false, | ||
| count: 0, | ||
| data: [], | ||
| error: null, | ||
| pagination: { | ||
| page: 1, | ||
| perPage: 100 | ||
| }, | ||
| getInitialState () { | ||
| return { | ||
| loading: false, | ||
| count: 0, | ||
| data: [], | ||
| pagination: { | ||
| page: 1, | ||
| perPage: 100 | ||
| } | ||
| }; | ||
| }, | ||
| componentDidMount () { | ||
| //debug('componentDidMount ', this.props); | ||
| this.onSelectPage(1, this.props); | ||
| }, | ||
| componentWillReceiveProps(props){ | ||
| //debug('componentWillReceiveProps ', props); | ||
| this.onSelectPage(1, props); | ||
| }, | ||
| renderLoading(){ | ||
| if(this.state.loading){ | ||
| return (<Spinner/>); | ||
| } | ||
| }, | ||
| renderError(){ | ||
| let {error} = this.state; | ||
| if(!error) return; | ||
| return ( | ||
| <Alert | ||
| type="danger" | ||
| name={error.name} | ||
| message={error.statusText} | ||
| code={error.status} | ||
| /> | ||
| ); | ||
| }, | ||
| render() { | ||
| //debug('render ', this.state); | ||
| return ( | ||
| <div> | ||
| {this.renderError()} | ||
| {this.renderTable()} | ||
| {this.renderLoading()} | ||
| </div> | ||
| ); | ||
| }, | ||
| renderPagination(){ | ||
| let {count, pagination} = this.state; | ||
| let pages = Math.ceil(count / pagination.perPage); | ||
| if(pages <= 1){ | ||
| return; | ||
| } | ||
| return ( | ||
| <div className='controls'> | ||
| <div className='pagination'> | ||
| <Paginator.Context | ||
| className="pagify-pagination" | ||
| segments={segmentize({ | ||
| page: pagination.page, | ||
| pages: pages, | ||
| beginPages: 3, | ||
| endPages: 3, | ||
| sidePages: 2 | ||
| })} | ||
| onSelect={this.onSelectPage}> | ||
| <Paginator.Button page={pagination.page - 1}>{tr.t('Previous')}</Paginator.Button> | ||
|
|
||
| <Paginator.Segment field="beginPages" /> | ||
|
|
||
| <Paginator.Ellipsis className="ellipsis" | ||
| previousField="beginPages" nextField="previousPages" /> | ||
|
|
||
| <Paginator.Segment field="previousPages" /> | ||
| <Paginator.Segment field="centerPage" className="selected" /> | ||
| <Paginator.Segment field="nextPages" /> | ||
|
|
||
| <Paginator.Ellipsis className="ellipsis" | ||
| previousField="nextPages" nextField="endPages" /> | ||
|
|
||
| <Paginator.Segment field="endPages" /> | ||
|
|
||
| <Paginator.Button page={pagination.page + 1}>{tr.t('Next')}</Paginator.Button> | ||
| </Paginator.Context> | ||
|
|
||
| </div> | ||
| </div> | ||
| ); | ||
| }, | ||
| renderTable () { | ||
| let {data} = this.state; | ||
| //console.log("renderTable props:", this.props) | ||
| //console.log("renderTable state:", this.state) | ||
| if(this.state.error) return; | ||
| return ( | ||
| <div> | ||
| {this.renderPagination()} | ||
| <Table.Provider | ||
| className="table" | ||
| columns={this.props.columns} | ||
| > | ||
| <Table.Header /> | ||
| <Table.Body rows={data} rowKey="id" onRow={this.props.onRow}/> | ||
| </Table.Provider> | ||
| </div> | ||
| ); | ||
| }, | ||
| onSelectPage(page){ | ||
| this.setSelectPage(page, this.props); | ||
| }, | ||
| setSelectPage(page, props){ | ||
| debug('onSelectPage ', page); | ||
| let {pagination} = this.state; | ||
| if(page <= 0){ | ||
| return; | ||
| } | ||
| this.setState({loading: true}); | ||
| props.getData({ | ||
| offset: pagination.perPage * (page - 1), | ||
| limit: pagination.perPage | ||
| }) | ||
| .then(result => { | ||
| pagination.page = page; | ||
| if (this.isMounted()) { | ||
| this.setState({ | ||
| count: result.count, | ||
| data: result.data, | ||
| pagination: pagination, | ||
| loading: false | ||
| }); | ||
| } | ||
| return true; | ||
| selectPage: mobx.action(async function (page) { | ||
| debug('onSelectPage ', page); | ||
| if (page <= 0) { | ||
| return; | ||
| } | ||
| this.loading = true; | ||
|
|
||
| try { | ||
| const result = await getData({ | ||
| offset: this.pagination.perPage * (page - 1), | ||
| limit: this.pagination.perPage | ||
| }) | ||
| .catch(err => { | ||
| debug('error: ', err); | ||
| if (this.isMounted()) { | ||
| this.setState({ | ||
| error: err, | ||
| loading: false | ||
| }); | ||
| } | ||
| }); | ||
| console.log("rx DATA ", result.data.length) | ||
| this.pagination.page = page; | ||
| this.count = result.count; | ||
| this.data = result.data; | ||
| this.loading = false; | ||
| } catch (error) { | ||
| this.error = error; | ||
| this.loading = false; | ||
| } | ||
| }), | ||
| }) | ||
|
|
||
| store.selectPage(1); | ||
|
|
||
| const Loading = observer(() => { | ||
| return store.loading ? <Spinner/> : null; | ||
| }) | ||
|
|
||
| const Error = observer(() => { | ||
| let {error} = store; | ||
| if (!error) return null; | ||
| return <AlertAjax error={error} className='rest-table-error-view'/> | ||
| }) | ||
|
|
||
| const Pagination = observer(() => { | ||
| console.log("Pagination:", store.count) | ||
| let {count, pagination} = store; | ||
| let pages = Math.ceil(count / pagination.perPage); | ||
| if (pages <= 1) { | ||
| return null; | ||
| } | ||
| }); | ||
| return ( | ||
| <div className='controls'> | ||
| <div className='pagination'> | ||
| <Paginator.Context | ||
| className="pagify-pagination" | ||
| segments={segmentize({ | ||
| page: pagination.page, | ||
| pages: pages, | ||
| beginPages: 3, | ||
| endPages: 3, | ||
| sidePages: 2 | ||
| }) } | ||
| onSelect={page => store.selectPage(page, getData)}> | ||
| <Paginator.Button page={pagination.page - 1}>{tr.t('Previous') }</Paginator.Button> | ||
|
|
||
| <Paginator.Segment field="beginPages" /> | ||
|
|
||
| <Paginator.Ellipsis className="ellipsis" | ||
| previousField="beginPages" nextField="previousPages" /> | ||
|
|
||
| <Paginator.Segment field="previousPages" /> | ||
| <Paginator.Segment field="centerPage" className="selected" /> | ||
| <Paginator.Segment field="nextPages" /> | ||
|
|
||
| <Paginator.Ellipsis className="ellipsis" | ||
| previousField="nextPages" nextField="endPages" /> | ||
|
|
||
| <Paginator.Segment field="endPages" /> | ||
|
|
||
| <Paginator.Button page={pagination.page + 1}>{tr.t('Next') }</Paginator.Button> | ||
| </Paginator.Context> | ||
|
|
||
| </div> | ||
| </div> | ||
| ); | ||
| }) | ||
|
|
||
| const TableView = observer(({onRow}) => { | ||
| const {error} = store; | ||
| const data = mobx.toJS(store.data) | ||
| if (error) return null; | ||
| return ( | ||
| <div> | ||
| <Pagination/> | ||
| <Table.Provider | ||
| className="table" | ||
| columns={columns} | ||
| > | ||
| <Table.Header /> | ||
| {data && <Table.Body rows={data} rowKey="id" onRow={onRow}/>} | ||
| </Table.Provider> | ||
| </div> | ||
| ); | ||
| }) | ||
|
|
||
| function RestTable(props) { | ||
| debug('RestTable: ', props) | ||
| return ( | ||
| <div> | ||
| <Error/> | ||
| <Loading/> | ||
| <TableView {...props}/> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return observer(RestTable); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters