nebel/_
1
0
Fork 0
mirror of https://github.com/kou029w/_.git synced 2025-01-30 22:08:02 +00:00
Code Issues Projects Releases Wiki Activity

refactor: Stateless Functional Componentに変更

Browse source
This commit is contained in:
kohei 2018-11-19 17:26:42 +09:00
parent 535ab0cd42
commit 9bea9c2e25
2 changed files with 39 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
components/kaburi.jsx
View file

@ -1,20 +1,16 @@
import { Component } from "react";
export default ({ activity }) => {
const kaburiActivity = activity.filter(a => a.ch === "kaburi");
const count = kaburiActivity.length;
const time = kaburiActivity
.map(a => a.endTime - a.startTime)
.reduce((a, c) => a + c, 0);
export default class extends Component {
render() {
const activity = this.props.activity.filter(a => a.ch === "kaburi");
const count = activity.length;
const time = activity
.map(a => a.endTime - a.startTime)
.reduce((a, c) => a + c, 0);
return (
<dl>
<dt>かぶり回数</dt>
<dd>{count}</dd>
<dt>かぶり時間 (ms)</dt>
<dd>{time}</dd>
</dl>
);
}
}
return (
<dl>
<dt>かぶり回数</dt>
<dd>{count}</dd>
<dt>かぶり時間 (ms)</dt>
<dd>{time}</dd>
</dl>
);
};

52
components/percentage.jsx
View file

@ -1,29 +1,25 @@
import { Component } from "react";
export default ({ activity }) => {
const leftActivity = activity
.filter(a => a.ch === "l")
.map(a => a.endTime - a.startTime)
.reduce((a, c) => a + c, 0);
const rightActivity = activity
.filter(a => a.ch === "r")
.map(a => a.endTime - a.startTime)
.reduce((a, c) => a + c, 0);
export default class extends Component {
render() {
const leftActivity = this.props.activity
.filter(a => a.ch === "l")
.map(a => a.endTime - a.startTime)
.reduce((a, c) => a + c, 0);
const rightActivity = this.props.activity
.filter(a => a.ch === "r")
.map(a => a.endTime - a.startTime)
.reduce((a, c) => a + c, 0);
return (
<dl>
<dt>会話時間 (ms)</dt>
<dd>{leftActivity + rightActivity}</dd>
<dt>会話の割合</dt>
<dd>
左{" "}
<meter value={leftActivity / (leftActivity + rightActivity)}>
{leftActivity / (leftActivity + rightActivity)}
</meter>{" "}
右
</dd>
</dl>
);
}
}
return (
<dl>
<dt>会話時間 (ms)</dt>
<dd>{leftActivity + rightActivity}</dd>
<dt>会話の割合</dt>
<dd>
左{" "}
<meter value={leftActivity / (leftActivity + rightActivity)}>
{leftActivity / (leftActivity + rightActivity)}
</meter>{" "}
右
</dd>
</dl>
);
};