Update MechsList to be connected

Connected the MechsList and MechsList Row components MechsList now extracts a list of mech IDs instead of objects Disconnected Mechs, which is now effectively presentational again

Author: markerikson

src/features/mechs/Mechs/Mechs.jsx

@@ -1,64 +1,23 @@
 import React, {Component} from "react";
-import {connect} from "react-redux";
 
 import {
  Grid,
  Segment,
  Header,
 } from "semantic-ui-react";
 
-import schema from "app/schema";
-
 import MechsList from "../MechsList";
 import MechDetails from "../MechDetails";
 
-import {selectMech} from "../mechsActions";
-import {selectCurrentMech} from "../mechSelectors";
-
-
-const mapState = (state) => {
- const session = schema.from(state.entities);
- const {Mech} = session;
-
- const mechs = Mech.all().withModels.map(mechModel => {
- const mech = {
- // Copy the data from the plain JS object
- ...mechModel.ref,
- // Provide a default empty object for the relation
- mechType : {},
- };
-
- if(mechModel.type) {
- // Replace the default object with a copy of the relation's data
- mech.mechType = {...mechModel.type.ref};
- }
-
- return mech;
- });
- 
- const currentMech = selectCurrentMech(state);
 
- return {mechs, currentMech}
-}
-
-const actions = {
- selectMech,
-};
-
-class Mechs extends Component {
+export default class Mechs extends Component {
  render() {
- const {mechs = [], selectMech, currentMech} = this.props;
-
  return (
  <Segment>
  <Grid>
  <Grid.Column width={10}>
  <Header as="h3">Mechs List</Header>
- <MechsList
- mechs={mechs}
- onMechClicked={selectMech}
- currentMech={currentMech}
- />
+ <MechsList />
  </Grid.Column>
  <Grid.Column width={6}>
  <Header as="h3">Mech Details</Header>
@@ -71,6 +30,3 @@ class Mechs extends Component {
  );
  }
 }
-
-
-export default connect(mapState, actions)(Mechs);

src/features/mechs/MechsList/MechsList.jsx

@@ -1,22 +1,44 @@
 import React, {Component} from "react";
+import {connect} from "react-redux";
 import {Table} from "semantic-ui-react";
 
 import MechsListHeader from "./MechsListHeader";
 import MechsListRow from "./MechsListRow";
 
+import schema from "app/schema";
 
+import {selectMech} from "../mechsActions";
+import {selectCurrentMech} from "../mechSelectors";
 
-export default class MechsList extends Component {
+
+const mapState = (state) => {
+ const session = schema.from(state.entities);
+ const {Mech} = session;
+
+ const mechs = Mech.all().withModels.map(mechModel => mechModel.getId());
+
+ const currentMech = selectCurrentMech(state);
+
+ return {mechs, currentMech}
+}
+
+const actions = {
+ selectMech,
+};
+
+
+
+export class MechsList extends Component {
 
  render() {
- const {mechs = [], onMechClicked, currentMech} = this.props;
+ const {mechs = [], currentMech, selectMech} = this.props;
 
- const mechRows = mechs.map(mech => (
+ const mechRows = mechs.map(mechID => (
  <MechsListRow
- mech={mech}
- key={mech.id}
- onMechClicked={onMechClicked}
- selected={mech.id === currentMech}
+ mechID={mechID}
+ key={mechID}
+ onMechClicked={selectMech}
+ selected={mechID === currentMech}
  />
  ));
 
@@ -31,3 +53,5 @@ export default class MechsList extends Component {
  );
  }
 }
+
+export default connect(mapState, actions)(MechsList);

src/features/mechs/MechsList/MechsListRow.jsx

@@ -1,10 +1,39 @@
 import React from "react";
+import {connect} from "react-redux";
 import {Table} from "semantic-ui-react";
 
 import {getWeightClass} from "../mechSelectors";
 
 
-const MechsListRow = ({mech, onMechClicked, selected}) => {
+import schema from "app/schema";
+
+const mapState = (state, ownProps) => {
+ const session = schema.from(state.entities);
+ const {Mech} = session;
+
+ let mech;
+
+ if(Mech.hasId(ownProps.mechID)) {
+ const mechModel = Mech.withId(ownProps.mechID);
+
+ mech = {
+ // Copy the data from the plain JS object
+ ...mechModel.ref,
+ // Provide a default empty object for the relation
+ mechType : {},
+ };
+
+ if(mechModel.type) {
+ // Replace the default object with a copy of the relation's data
+ mech.mechType = {...mechModel.type.ref};
+ }
+ }
+
+ return {mech};
+}
+
+
+const MechsListRow = ({mech = {}, onMechClicked, selected}) => {
  const {
  id = null,
  type = "",
@@ -40,4 +69,4 @@ const MechsListRow = ({mech, onMechClicked, selected}) => {
 }
 
 
-export default MechsListRow;
+export default connect(mapState)(MechsListRow);