Merge pull request #8 from codeBelt/map-breakout

move maps out of the render method

Author: codeBelt

src/views/episodes-page/EpisodesPage.jsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Table, Header, Image } from 'semantic-ui-react';
 import ShowsAction from '../../stores/shows/ShowsAction';
 import { selectEpisodes } from '../../selectors/episodes/EpisodesSelector';
 import LoadingIndicator from '../components/loading-indicator/LoadingIndicator';
 import { selectRequesting } from '../../selectors/requesting/RequestingSelector';
+import EpisodesTable from './components/episodes-table/EpisodesTable';
 
 const mapStateToProps = (state, ownProps) => ({
   episodeTables: selectEpisodes(state),
@@ -17,37 +17,13 @@ class EpisodesPage extends React.Component {
   }
 
   render() {
-    const { episodeTables, isRequesting } = this.props;
+    const { isRequesting, episodeTables } = this.props;
 
     return (
       <>
         <LoadingIndicator isActive={isRequesting} />
         {episodeTables.map((model) => (
-          <div key={model.title}>
-            <Header as="h2">{model.title}</Header>
-            <Table>
-              <Table.Header>
-                <Table.Row>
-                  <Table.HeaderCell width={1}>Scene</Table.HeaderCell>
-                  <Table.HeaderCell>Episode</Table.HeaderCell>
-                  <Table.HeaderCell>Date</Table.HeaderCell>
-                  <Table.HeaderCell>Name</Table.HeaderCell>
-                </Table.Row>
-              </Table.Header>
-              <Table.Body>
-                {model.rows.map((row) => (
-                  <Table.Row key={row.episode}>
-                    <Table.Cell>
-                      <Image src={row.image} rounded={true} size="small" />
-                    </Table.Cell>
-                    <Table.Cell>{row.episode}</Table.Cell>
-                    <Table.Cell>{row.date}</Table.Cell>
-                    <Table.Cell>{row.name}</Table.Cell>
-                  </Table.Row>
-                ))}
-              </Table.Body>
-            </Table>
-          </div>
+          <EpisodesTable key={model.title} tableData={model} />
         ))}
       </>
     );

src/views/episodes-page/components/episodes-table-row/EpisodesTableRow.jsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Image, Table } from 'semantic-ui-react';
+
+export default class EpisodesTableRow extends React.PureComponent {
+  render() {
+    const { rowData } = this.props;
+
+    return (
+      <Table.Row key={rowData.episode}>
+        <Table.Cell>
+          <Image src={rowData.image} rounded={true} size="small" />
+        </Table.Cell>
+        <Table.Cell>{rowData.episode}</Table.Cell>
+        <Table.Cell>{rowData.date}</Table.Cell>
+        <Table.Cell>{rowData.name}</Table.Cell>
+      </Table.Row>
+    );
+  }
+}

src/views/episodes-page/components/episodes-table-row/EpisodesTableRow.module.scss

@@ -0,0 +1,2 @@
+.wrapper {
+}

src/views/episodes-page/components/episodes-table/EpisodesTable.jsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Header, Table } from 'semantic-ui-react';
+import EpisodesTableRow from '../episodes-table-row/EpisodesTableRow';
+
+export default class EpisodesTable extends React.PureComponent {
+  render() {
+    const { tableData } = this.props;
+
+    return (
+      <div key={tableData.title}>
+        <Header as="h2">{tableData.title}</Header>
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell width={1}>Scene</Table.HeaderCell>
+              <Table.HeaderCell>Episode</Table.HeaderCell>
+              <Table.HeaderCell>Date</Table.HeaderCell>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {tableData.rows.map((model) => (
+              <EpisodesTableRow key={model.episode} rowData={model} />
+            ))}
+          </Table.Body>
+        </Table>
+      </div>
+    );
+  }
+}

src/views/episodes-page/components/episodes-table/EpisodesTable.module.scss

@@ -0,0 +1,2 @@
+.wrapper {
+}

src/views/home-page/components/actors/Actors.jsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Card, Image } from 'semantic-ui-react';
-import { oc } from 'ts-optchain';
+import { Card } from 'semantic-ui-react';
 import ShowsAction from '../../../../stores/shows/ShowsAction';
+import ActorCard from './components/ActorCard';
 
 const mapStateToProps = (state, ownProps) => ({
   actors: state.shows.actors,
@@ -18,23 +18,9 @@ class Actors extends React.Component {
 
     return (
       <Card.Group centered={true}>
-        {actors.map((model) => {
-          const image = oc(model).character.image.medium('');
-          const missingImage = 'https://react.semantic-ui.com/images/wireframe/image.png';
-
-          return (
-            <Card key={model.person.name}>
-              <Card.Content>
-                <Image floated="right" size="mini" src={image || missingImage} />
-                <Card.Header>{model.person.name}</Card.Header>
-                <Card.Meta>as {model.character.name}</Card.Meta>
-                <Card.Description>
-                  <strong>Birth date:</strong> {model.person.birthday}
-                </Card.Description>
-              </Card.Content>
-            </Card>
-          );
-        })}
+        {actors.map((model) => (
+          <ActorCard key={model.person.name} cardData={model} />
+        ))}
       </Card.Group>
     );
   }

src/views/home-page/components/actors/Actors.module.scss

@@ -1,4 +1,2 @@
 .wrapper {
-  display: flex;
-  flex-wrap: wrap;
 }

src/views/home-page/components/actors/components/ActorCard.jsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Card, Image } from 'semantic-ui-react';
+import { oc } from 'ts-optchain';
+
+export default class ActorCard extends React.PureComponent {
+  render() {
+    const { cardData } = this.props;
+    const image = oc(cardData).character.image.medium('');
+    const missingImage = 'https://react.semantic-ui.com/images/wireframe/image.png';
+
+    return (
+      <Card key={cardData.person.name}>
+        <Card.Content>
+          <Image floated="right" size="mini" src={image || missingImage} />
+          <Card.Header>{cardData.person.name}</Card.Header>
+          <Card.Meta>as {cardData.character.name}</Card.Meta>
+          <Card.Description>
+            <strong>Birth date:</strong> {cardData.person.birthday}
+          </Card.Description>
+        </Card.Content>
+      </Card>
+    );
+  }
+}

src/views/home-page/components/actors/components/ActorCard.module.scss

@@ -0,0 +1,2 @@
+.wrapper {
+}