Connect the Mechs component to display a list of mechs from the store

Author: markerikson

src/features/mechs/MechDetails/MechDetails.jsx

@@ -6,11 +6,16 @@ import {getWeightClass} from "../mechSelectors";
 const MechDetails = ({mech={}}) => {
     const {
         id = "",
-        name = "",
         type = "",
-        weight = "",
+        mechType = {},
     } = mech;
 
+    const {
+        name = "",
+        weight = "",
+    } = mechType;
+
+
     const weightClass = getWeightClass(weight);
 
     return (

src/features/mechs/Mechs/Mechs.jsx

@@ -1,30 +1,44 @@
 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";
 
-const mechs = [
-    {
-        id : 1,
-        name : "Warhammer",
-        type : "WHM-6R",
-        weight : 70,
-    }
-];
 
-class Mechs extends Component {
-    state = {
-        mechs : mechs,
-    }
+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;
+    });
+
+    return {mechs}
+}
+
+class Mechs extends Component {
     render() {
-        const {mechs} = this.state;
+        const {mechs = []} = this.props;
 
         const currentMech = mechs[0] || {};
 
@@ -46,4 +60,6 @@ class Mechs extends Component {
         );
     }
 }
-export default Mechs;
+
+
+export default connect(mapState)(Mechs);

src/features/mechs/MechsList/MechsListRow.jsx

@@ -7,10 +7,15 @@ import {getWeightClass} from "../mechSelectors";
 const MechsListRow = ({mech={}}) => {
     const {
         id = "",
-        name = "",
         type = "",
-        weight = "",
+        mechType = {},
     } = mech;
+
+    const {
+        name = "",
+        weight = "",
+    } = mechType;
+
     const weightClass = getWeightClass(weight);
 
     return (
@@ -35,4 +40,4 @@ const MechsListRow = ({mech={}}) => {
 }
 
 
-export default MechsListRow;
+export default MechsListRow;