Permalink
Browse files

Extract components from Mechs panel, and add initial test data

Extracted MechsList plus child components
Extracted MechDetails
Added a test data entry to Mechs state, and passed to other components
Added getWeightClass selector, and used for rendering
  • Loading branch information...
markerikson committed Dec 1, 2016
1 parent c404584 commit 6b51219a2273170a29251aeff275c01a7feb849b
@@ -0,0 +1,55 @@
import React from "react";
import {Form} from "semantic-ui-react";
import {getWeightClass} from "../mechSelectors";
const MechDetails = ({mech={}}) => {
const {
id = "",
name = "",
type = "",
weight = "",
} = mech;
const weightClass = getWeightClass(weight);
return (
<Form size="large">
<Form.Field name="id" width={6} >
<label>ID</label>
<input
placeholder="ID"
value={id}
/>
</Form.Field>
<Form.Field name="name" width={16} >
<label>Name</label>
<input
placeholder="Name"
value={name}
/>
</Form.Field>
<Form.Field name="model" width={6} >
<label>Model</label>
<input
placeholder="Model"
value={type}
/>
</Form.Field>
<Form.Field name="weight" width={6} >
<label>Weight</label>
<input
value={weight}
/>
</Form.Field>
<Form.Field name="class" width={6} >
<label>Class</label>
<input
value={weightClass}
/>
</Form.Field>
</Form>
);
}
export default MechDetails;
@@ -0,0 +1 @@
export {default} from "./MechDetails";
@@ -1,107 +1,49 @@
import React from "react";
import React, {Component} from "react";
import {
Grid,
Table,
Segment,
Header,
Form,
} from "semantic-ui-react";
const Mechs = () => {
import MechsList from "../MechsList";
import MechDetails from "../MechDetails";
const mechs = [
{
id : 1,
name : "Warhammer",
type : "WHM-6R",
weight : 70,
}
];
return (
<Segment>
<Grid>
<Grid.Column width={10}>
<Header as="h3">Mechs List</Header>
<Table celled>
class Mechs extends Component {
state = {
mechs : mechs,
}
<Table.Header>
<Table.Row>
<Table.HeaderCell width={1}>
ID
</Table.HeaderCell>
<Table.HeaderCell width={5}>
Name
</Table.HeaderCell>
<Table.HeaderCell width={3}>
Model
</Table.HeaderCell>
<Table.HeaderCell width={3}>
Weight (tons)
</Table.HeaderCell>
<Table.HeaderCell width={2}>
Class
</Table.HeaderCell>
render() {
const {mechs} = this.state;
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
1
</Table.Cell>
<Table.Cell>
Warhammer
</Table.Cell>
<Table.Cell>
WHM-6R
</Table.Cell>
<Table.Cell>
70
</Table.Cell>
<Table.Cell>
Heavy
</Table.Cell>
</Table.Row>
</Table.Body>
const currentMech = mechs[0] || {};
</Table>
</Grid.Column>
<Grid.Column width={6}>
<Header as="h3">Mech Details</Header>
<Segment >
<Form size="large">
<Form.Field name="id" width={6} >
<label>ID</label>
<input
placeholder="ID"
value="1"
/>
</Form.Field>
<Form.Field name="name" width={16} >
<label>Name</label>
<input
placeholder="Name"
value="Warhammer"
/>
</Form.Field>
<Form.Field name="model" width={6} >
<label>Model</label>
<input
placeholder="Model"
value="WHM-6R"
/>
</Form.Field>
<Form.Field name="weight" width={6} >
<label>Weight</label>
<input
value="70"
/>
</Form.Field>
<Form.Field name="class" width={6} >
<label>Class</label>
<input
value="Heavy"
/>
</Form.Field>
</Form>
</Segment>
</Grid.Column>
</Grid>
</Segment>
)
return (
<Segment>
<Grid>
<Grid.Column width={10}>
<Header as="h3">Mechs List</Header>
<MechsList mechs={mechs}/>
</Grid.Column>
<Grid.Column width={6}>
<Header as="h3">Mech Details</Header>
<Segment >
<MechDetails mech={currentMech} />
</Segment>
</Grid.Column>
</Grid>
</Segment>
);
}
}
export default Mechs;
@@ -0,0 +1,28 @@
import React, {Component} from "react";
import {Table} from "semantic-ui-react";
import MechsListHeader from "./MechsListHeader";
import MechsListRow from "./MechsListRow";
export default class MechsList extends Component {
render() {
const {mechs = []} = this.props;
const mechRows = mechs.map(mech => (
<MechsListRow mech={mech} key={mech.id} />
));
return (
<Table celled>
<MechsListHeader />
<Table.Body>
{mechRows}
</Table.Body>
</Table>
);
}
}
@@ -0,0 +1,29 @@
import React from "react";
import {Table} from "semantic-ui-react";
const MechsListHeader = () => (
<Table.Header>
<Table.Row>
<Table.HeaderCell width={1}>
IDs
</Table.HeaderCell>
<Table.HeaderCell width={5}>
Name
</Table.HeaderCell>
<Table.HeaderCell width={3}>
Model
</Table.HeaderCell>
<Table.HeaderCell width={3}>
Weight (tons)
</Table.HeaderCell>
<Table.HeaderCell width={2}>
Class
</Table.HeaderCell>
</Table.Row>
</Table.Header>
);
export default MechsListHeader;
@@ -0,0 +1,38 @@
import React from "react";
import {Table} from "semantic-ui-react";
import {getWeightClass} from "../mechSelectors";
const MechsListRow = ({mech={}}) => {
const {
id = "",
name = "",
type = "",
weight = "",
} = mech;
const weightClass = getWeightClass(weight);
return (
<Table.Row>
<Table.Cell>
{id}
</Table.Cell>
<Table.Cell>
{name}
</Table.Cell>
<Table.Cell>
{type}
</Table.Cell>
<Table.Cell>
{weight}
</Table.Cell>
<Table.Cell>
{weightClass}
</Table.Cell>
</Table.Row>
);
}
export default MechsListRow;
@@ -0,0 +1 @@
export {default} from "./MechsList";
@@ -0,0 +1,13 @@
const WEIGHT_CLASSES = [
{name : "Light", weights : [20, 25, 30, 35]},
{name : "Medium", weights : [40, 45, 50, 55]},
{name : "Heavy", weights : [60, 65, 70, 75]},
{name : "Assault", weights : [80, 85, 90, 95, 100]},
];
export function getWeightClass(weight) {
const weightClass = WEIGHT_CLASSES.find(wc => wc.weights.includes(weight)) || {name : "Unknown"};
return weightClass.name;
}

0 comments on commit 6b51219

Please sign in to comment.