| commit | author | age | ||
| 993a7b | 1 | import React, { Component } from 'react'; |
| PSV | 2 | import { Table, TableHeader, TableBody } from '@patternfly/react-table'; |
| 3 | import { EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateVariant, Bullseye, Title } from '@patternfly/react-core'; | |
| 4 | import { ErrorCircleOIcon } from '@patternfly/react-icons' | |
| 5 | ||
| 6 | class NewsBoard extends Component { | |
| 7 | ||
| 8 | normalize(data) { | |
| 9 | return data.map(function (element) { | |
| 10 | return { | |
| 11 | cells: [element.timestamp, element.title] | |
| 12 | } | |
| 13 | }); | |
| 14 | } | |
| 15 | ||
| 16 | componentDidMount() { | |
| 17 | fetch(`http://${process.env.REACT_APP_GW_ENDPOINT}/news`) | |
| 18 | .then(res => res.json()) | |
| 19 | .then((data) => { | |
| 20 | this.setState({ rows: this.normalize(data) }); | |
| 21 | }) | |
| 22 | .catch(console.log) | |
| 23 | } | |
| 24 | ||
| 25 | constructor(props) { | |
| 26 | super(props); | |
| 27 | this.state = { | |
| 28 | columns: ['Timestamp', 'Story'], | |
| 29 | rows: [{ | |
| 30 | heightAuto: true, | |
| 31 | cells: [ | |
| 32 | { | |
| 33 | props: { colSpan: 2 }, | |
| 34 | title: ( | |
| 35 | <Bullseye> | |
| 36 | <EmptyState variant={EmptyStateVariant.small}> | |
| 37 | <EmptyStateIcon icon={ErrorCircleOIcon} /> | |
| 38 | <Title headingLevel="h2" size="lg"> | |
| 39 | No results found | |
| 40 | </Title> | |
| 41 | <EmptyStateBody> | |
| 42 | Unable to get news from external feed. | |
| 43 | </EmptyStateBody> | |
| 44 | </EmptyState> | |
| 45 | </Bullseye> | |
| 46 | ) | |
| 47 | }, | |
| 48 | ] | |
| 49 | }] | |
| 50 | } | |
| 51 | } | |
| 52 | ||
| 53 | render() { | |
| 54 | const { columns, rows } = this.state; | |
| 55 | ||
| 56 | return ( | |
| 57 | <Table caption="Latest News" rows={rows} cells={columns}> | |
| 58 | <TableHeader /> | |
| 59 | <TableBody /> | |
| 60 | </Table> | |
| 61 | ) | |
| 62 | } | |
| 63 | } | |
| 64 | ||
| 65 | export default NewsBoard; | |
