139 lines
4.1 KiB
JavaScript
139 lines
4.1 KiB
JavaScript
import Griddle from "griddle-react";
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import { connect } from "react-redux";
|
|
import fetch from 'isomorphic-unfetch'
|
|
|
|
import api from '../../data/api'
|
|
import GriddleCustomTable from "../organisms/GriddleCustomTableComponent";
|
|
|
|
|
|
const CustomTableBody = ({ rowIds, Row, style, className }) => (
|
|
<div style={style} className={className}>
|
|
{rowIds && rowIds.valueSeq().map(r => <Row key={r} griddleKey={r} />)}
|
|
</div>
|
|
);
|
|
|
|
class Grid extends Component {
|
|
|
|
state = {
|
|
loading: true,
|
|
success: false,
|
|
data: {},
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
recordCount: 0,
|
|
filterText: ""
|
|
};
|
|
|
|
async componentDidMount() {
|
|
// this.props.fetchUserGamesRequest(
|
|
// this.state.currentPage,
|
|
// this.state.pageSize
|
|
// );
|
|
|
|
// var obj = {
|
|
// method: 'GET',
|
|
// //mode : 'no-cors',
|
|
// headers: {
|
|
// // 'Access-Control-Request-Headers': 'Authorization',
|
|
// // 'Authorization': 'Basic amFzcGVyYWRtaW46amFzcGVyYWRtaW4=',
|
|
// 'Content-Type': 'application/json',
|
|
// 'Origin': ''
|
|
// },
|
|
// credentials: 'include'
|
|
// };
|
|
|
|
try {
|
|
let data = await api.ads.fetchAds(10);
|
|
this.setState({ data });
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
//this.setState({ data: nextProps.games });
|
|
// this.setState({ currentPage: nextProps.currentPage });
|
|
// this.setState({ recordCount: nextProps.recordCount });
|
|
}
|
|
|
|
_onNext = () => {
|
|
const { currentPage, pageSize, filterText } = this.state;
|
|
//this.props.fetchUserGamesRequest(currentPage + 1, pageSize, filterText);
|
|
};
|
|
|
|
_onPrevious = () => {
|
|
const { currentPage, pageSize, filterText } = this.state;
|
|
//this.props.fetchUserGamesRequest(currentPage - 1, pageSize, filterText);
|
|
};
|
|
|
|
_onGetPage = pageNumber => {
|
|
const { pageSize, filterText } = this.state;
|
|
// this.props.fetchUserGamesRequest(pageNumber, pageSize, filterText);
|
|
};
|
|
|
|
_onFilter = filterText => {
|
|
this.setState({ currentPage: 1 });
|
|
const { currentPage, pageSize } = this.state;
|
|
this.setState({ filterText });
|
|
//this.props.fetchUserGamesRequest(currentPage, pageSize, filterText);
|
|
};
|
|
|
|
render() {
|
|
const { data, currentPage, pageSize, recordCount } = this.state;
|
|
|
|
const NewLayout = ({ Table, Pagination, Filter }) => (
|
|
<div>
|
|
<Table />
|
|
</div>
|
|
);
|
|
|
|
const rowDataSelector = (state, { griddleKey }) =>
|
|
state
|
|
.get("data")
|
|
.find(rowMap => rowMap.get("griddleKey") === griddleKey)
|
|
.toJSON();
|
|
|
|
const enhancedWithRowData = connect((state, props) => ({
|
|
// rowData will be available into MyCustomComponent
|
|
rowData: rowDataSelector(state, props),
|
|
|
|
}));
|
|
|
|
return (
|
|
<div>
|
|
<Griddle
|
|
data={data}
|
|
pageProperties={{
|
|
currentPage,
|
|
pageSize,
|
|
recordCount
|
|
}}
|
|
components={{
|
|
Layout: NewLayout,
|
|
Row: enhancedWithRowData(this.props.CustomRowComponent),
|
|
TableContainer: GriddleCustomTable,
|
|
TableBody: CustomTableBody
|
|
}}
|
|
events={{
|
|
// onNext: this._onNext,
|
|
// onPrevious: this._onPrevious,
|
|
// onGetPage: this._onGetPage,
|
|
// onFilter: this._onFilter
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
Grid.propTypes = {
|
|
//dataFetcher: PropTypes.func.isRequired,
|
|
CustomRowComponent: PropTypes.func.isRequired,
|
|
}
|
|
|
|
export default Grid; |