Skip to content
Snippets Groups Projects
Unverified Commit 93e83505 authored by Luca Moser's avatar Luca Moser
Browse files

use @computed for grid

parent ec23f194
No related branches found
No related tags found
No related merge requests found
import * as React from 'react'; import * as React from 'react';
import NodeStore from "app/stores/NodeStore"; import NodeStore from "app/stores/NodeStore";
import {inject, observer} from "mobx-react"; import {inject, observer} from "mobx-react";
import {FPCStore, LightenDarkenColor, Node} from "app/stores/FPCStore"; import {FPCStore} from "app/stores/FPCStore";
import Row from "react-bootstrap/Row"; import Row from "react-bootstrap/Row";
import Container from "react-bootstrap/Container"; import Container from "react-bootstrap/Container";
import Col from "react-bootstrap/Col";
interface Props { interface Props {
nodeStore?: NodeStore; nodeStore?: NodeStore;
...@@ -16,23 +15,11 @@ interface Props { ...@@ -16,23 +15,11 @@ interface Props {
@observer @observer
export default class FPC extends React.Component<Props, any> { export default class FPC extends React.Component<Props, any> {
render() { render() {
let {nodes} = this.props.fpcStore; let {nodeGrid} = this.props.fpcStore;
let nodeSquares = [];
nodes.forEach((node: Node, id: number, obj: Map<number, Node>) => {
nodeSquares.push(
<Col xs={1} key={id.toString()} style={{
height: 50,
width: 50,
background: LightenDarkenColor("#707070", node.opinion),
}}>
{node.opinion}
</Col>
)
})
return ( return (
<Container> <Container>
<Row> <Row>
{nodeSquares} {nodeGrid}
</Row> </Row>
</Container> </Container>
); );
......
import {RouterStore} from "mobx-react-router"; import {RouterStore} from "mobx-react-router";
import {action, observable, ObservableMap} from "mobx"; import {action, computed, observable, ObservableMap} from "mobx";
import Col from "react-bootstrap/Col";
import * as React from "react";
export class Node { export class Node {
id: number; id: number;
...@@ -48,6 +50,23 @@ export class FPCStore { ...@@ -48,6 +50,23 @@ export class FPCStore {
} }
} }
@computed
get nodeGrid(){
let nodeSquares = [];
this.nodes.forEach((node: Node, id: number, obj: Map<number, Node>) => {
nodeSquares.push(
<Col xs={1} key={id.toString()} style={{
height: 50,
width: 50,
background: LightenDarkenColor("#707070", node.opinion),
}}>
{node.opinion}
</Col>
)
})
return nodeSquares;
}
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment