From 93e83505962c45d5c2efc1b645eaa3849df1f5a2 Mon Sep 17 00:00:00 2001
From: Luca Moser <moser.luca@gmail.com>
Date: Tue, 12 May 2020 10:59:35 +0200
Subject: [PATCH] use @computed for grid
---
.../frontend/src/app/components/FPC.tsx | 19 +++--------------
.../frontend/src/app/stores/FPCStore.tsx | 21 ++++++++++++++++++-
2 files changed, 23 insertions(+), 17 deletions(-)
diff --git a/plugins/dashboard/frontend/src/app/components/FPC.tsx b/plugins/dashboard/frontend/src/app/components/FPC.tsx
index 4359d2bc..b6e095f8 100644
--- a/plugins/dashboard/frontend/src/app/components/FPC.tsx
+++ b/plugins/dashboard/frontend/src/app/components/FPC.tsx
@@ -1,10 +1,9 @@
import * as React from 'react';
import NodeStore from "app/stores/NodeStore";
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 Container from "react-bootstrap/Container";
-import Col from "react-bootstrap/Col";
interface Props {
nodeStore?: NodeStore;
@@ -16,23 +15,11 @@ interface Props {
@observer
export default class FPC extends React.Component<Props, any> {
render() {
- let {nodes} = 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>
- )
- })
+ let {nodeGrid} = this.props.fpcStore;
return (
<Container>
<Row>
- {nodeSquares}
+ {nodeGrid}
</Row>
</Container>
);
diff --git a/plugins/dashboard/frontend/src/app/stores/FPCStore.tsx b/plugins/dashboard/frontend/src/app/stores/FPCStore.tsx
index dac9df94..4df80a35 100644
--- a/plugins/dashboard/frontend/src/app/stores/FPCStore.tsx
+++ b/plugins/dashboard/frontend/src/app/stores/FPCStore.tsx
@@ -1,5 +1,7 @@
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 {
id: number;
@@ -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;
+ }
+
}
--
GitLab