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 { return (
render() { <dl>
const activity = this.props.activity.filter(a => a.ch === "kaburi"); <dt>かぶり回数</dt>
const count = activity.length; <dd>{count}</dd>
const time = activity <dt>かぶり時間 (ms)</dt>
.map(a => a.endTime - a.startTime) <dd>{time}</dd>
.reduce((a, c) => a + c, 0); </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 { return (
render() { <dl>
const leftActivity = this.props.activity <dt>会話時間 (ms)</dt>
.filter(a => a.ch === "l") <dd>{leftActivity + rightActivity}</dd>
.map(a => a.endTime - a.startTime) <dt>会話の割合</dt>
.reduce((a, c) => a + c, 0); <dd>
const rightActivity = this.props.activity 左{" "}
.filter(a => a.ch === "r") <meter value={leftActivity / (leftActivity + rightActivity)}>
.map(a => a.endTime - a.startTime) {leftActivity / (leftActivity + rightActivity)}
.reduce((a, c) => a + c, 0); </meter>{" "}
右
return ( </dd>
<dl> </dl>
<dt>会話時間 (ms)</dt> );
<dd>{leftActivity + rightActivity}</dd> };
<dt>会話の割合</dt>
<dd>
左{" "}
<meter value={leftActivity / (leftActivity + rightActivity)}>
{leftActivity / (leftActivity + rightActivity)}
</meter>{" "}
右
</dd>
</dl>
);
}
}