lift common state management above card and list view

asauber · asauber · commit 2f1ae4e581b7 · 2018-03-01T18:15:23.000-05:00
diff --git a/src/features/linodes/ListLinodes/LinodeCard.tsx b/src/features/linodes/ListLinodes/LinodeCard.tsx
@@ -1,7 +1,4 @@
 import * as React from 'react';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { pathOr } from 'ramda';
 import * as copy from 'copy-to-clipboard';
 
 import {
@@ -52,8 +49,6 @@ type CSSClasses =
   'cardSection'
   | 'distroIcon'
   | 'rightMargin'
-  | 'regionIndicator'
-  | 'flagImg'
   | 'cardActions'
   | 'button'
   | 'consoleButton'
@@ -70,12 +65,6 @@ const styles: StyleRulesCallback<CSSClasses> = (theme: Theme) => ({
   rightMargin: {
     marginRight: theme.spacing.unit,
   },
-  regionIndicator: {
-    alignItems: 'center',
-  },
-  flagImg: {
-    marginRight: theme.spacing.unit,
-  },
   cardActions: {
     backgroundColor: '#f9f9f9',
     padding: 0,
@@ -97,8 +86,8 @@ const styles: StyleRulesCallback<CSSClasses> = (theme: Theme) => ({
 
 interface Props {
   linode: Linode.Linode;
-  image: Linode.Image;
-  type: Linode.LinodeType;
+  image?: Linode.Image;
+  type?: Linode.LinodeType;
 }
 
 class LinodeCard extends React.Component<Props & WithStyles<CSSClasses> > {
@@ -124,21 +113,23 @@ class LinodeCard extends React.Component<Props & WithStyles<CSSClasses> > {
             <div>
               {tags.map((tag: string, idx) => <Tag key={idx} label={tag} />)}
             </div>
-            <div className={classes.cardSection}>
-              <Grid container>
-                <Grid item className="tac" xs={2}>
-                  <img src={distroIcons[image.vendor]} className={classes.distroIcon}/>
-                </Grid>
-                <Grid item xs={9}>
-                  <Typography variant="subheading">
-                    {image.label}
-                  </Typography>
-                  <Typography>
-                    {typeLabelLong(type.memory, type.disk, type.vcpus)}
-                  </Typography>
+            {image && type &&
+              <div className={classes.cardSection}>
+                <Grid container>
+                  <Grid item className="tac" xs={2}>
+                    <img src={distroIcons[image.vendor]} className={classes.distroIcon}/>
+                  </Grid>
+                  <Grid item xs={9}>
+                    <Typography variant="subheading">
+                      {image.label}
+                    </Typography>
+                    <Typography>
+                      {typeLabelLong(type.memory, type.disk, type.vcpus)}
+                    </Typography>
+                  </Grid>
                 </Grid>
-              </Grid>
-            </div>
+              </div>
+            }
             <div className={classes.cardSection}>
               <div>
                 <Typography variant="body2">
@@ -180,18 +171,4 @@ class LinodeCard extends React.Component<Props & WithStyles<CSSClasses> > {
   }
 }
 
-const mapStateToProps = (state: Linode.AppState, ownProps: Props) => {
-  const typesCollection = pathOr([], ['api', 'linodeTypes', 'data'], state);
-  const imagesCollection = pathOr([], ['api', 'images', 'data'], state);
-  const { type, image } = ownProps.linode as Linode.Linode;
-
-  return {
-    image: imagesCollection.find((i: Linode.Image) => i.id === image),
-    type: typesCollection.find((t: Linode.LinodeType) => t.id === type),
-  };
-};
-
-export default compose<Linode.TodoAny, Linode.TodoAny, Linode.TodoAny>(
-  connect(mapStateToProps),
-  withStyles(styles, { withTheme: true }),
-)(LinodeCard);
+export default withStyles(styles, { withTheme: true })(LinodeCard);
diff --git a/src/features/linodes/ListLinodes/LinodeRow.tsx b/src/features/linodes/ListLinodes/LinodeRow.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
 import * as copy from 'copy-to-clipboard';
-import { pathOr } from 'ramda';
 
 import {
   withStyles,
@@ -39,16 +36,16 @@ function clip(value: string): void {
 
 interface Props {
   linode: Linode.Linode;
-  type: Linode.LinodeType;
-  image: Linode.Image;
+  type?: Linode.LinodeType;
+  image?: Linode.Image;
 }
 
 type PropsWithStyles = Props & WithStyles<CSSClasses>;
 
 class LinodeRow extends React.Component<PropsWithStyles> {
   render() {
     const { classes, linode, type, image } = this.props;
-    const label = displayLabel(type.memory, image.label);
+    const specsLabel = type && image && displayLabel(type.memory, image.label);
 
     /**
      * @todo Until tags are implemented we're using the group as a faux tag.
@@ -66,7 +63,7 @@ class LinodeRow extends React.Component<PropsWithStyles> {
                 </Typography>
               </Link>
             </div>
-            {label && <div>{label}</div>}
+            {specsLabel && <div>{specsLabel}</div>}
           </div>
         </TableCell>
         <TableCell>
@@ -107,18 +104,4 @@ class LinodeRow extends React.Component<PropsWithStyles> {
   }
 }
 
-const mapStateToProps = (state: Linode.AppState, ownProps: Props) => {
-  const typesCollection = pathOr([], ['api', 'linodeTypes', 'data'], state);
-  const imagesCollection = pathOr([], ['api', 'images', 'data'], state);
-  const { type, image } = ownProps.linode as Linode.Linode;
-
-  return {
-    image: imagesCollection.find((i: Linode.Image) => i.id === image),
-    type: typesCollection.find((t: Linode.LinodeType) => t.id === type),
-  };
-};
-
-export default compose<Linode.TodoAny, Linode.TodoAny, Linode.TodoAny>(
-  connect(mapStateToProps),
-  withStyles(styles, { withTheme: true }),
-)(LinodeRow);
+export default withStyles(styles, { withTheme: true })(LinodeRow);
diff --git a/src/features/linodes/ListLinodes/index.tsx b/src/features/linodes/ListLinodes/index.tsx
@@ -69,6 +69,8 @@ const styles: StyleRulesCallback<CSSClasses> = (theme: Theme) => ({
 
 interface Props {
   linodes: Linode.Linode[];
+  images: Linode.Image[];
+  types: Linode.LinodeType[];
 }
 
 type CombinedProps = Props & WithStyles<CSSClasses> & RouteComponentProps<{}>;
@@ -111,7 +113,7 @@ class ListLinodes extends React.Component<CombinedProps> {
   }
 
   linodeList() {
-    const { linodes } = this.props;
+    const { linodes, images, types } = this.props;
 
     return (
       <Paper elevation={1}>
@@ -128,7 +130,14 @@ class ListLinodes extends React.Component<CombinedProps> {
                 </TableRow>
               </TableHead>
               <TableBody>
-                {linodes.map(linode => <LinodeRow key={linode.id} linode={linode} />)}
+                {linodes.map(linode => 
+                  <LinodeRow
+                    key={linode.id}
+                    linode={linode}
+                    image={images.find(image => linode.image === image.id)}
+                    type={types.find(type => linode.type === type.id)}
+                  />,
+                )}
               </TableBody>
             </Table>
           </Grid>
@@ -138,11 +147,18 @@ class ListLinodes extends React.Component<CombinedProps> {
   }
 
   linodeGrid() {
-    const { linodes } = this.props;
+    const { linodes, images, types } = this.props;
 
     return (
       <Grid container>
-        {linodes.map(linode => <LinodeCard key={linode.id} linode={linode}/>)}
+        {linodes.map(linode => 
+          <LinodeCard
+            key={linode.id}
+            linode={linode}
+            image={images.find(image => linode.image === image.id)}
+            type={types.find(type => linode.type === type.id)}
+          />,
+        )}
       </Grid>
     );
   }
@@ -209,6 +225,8 @@ class ListLinodes extends React.Component<CombinedProps> {
 
 const mapStateToProps = (state: any) => ({
   linodes: pathOr([], ['api', 'linodes', 'data'], state),
+  types: pathOr([], ['api', 'linodeTypes', 'data'], state),
+  images: pathOr([], ['api', 'images', 'data'], state),
 });
 
 export default compose(
