Merge pull request #2209 from ProjectMirador/1966-load-window-placeholders

Use react-image to provide placeholder images (in case there is no image url, the image doesn't load, etc)

__tests__/src/components/WindowIcon.test.js

-import React from 'react';
-import { shallow } from 'enzyme';
-import WindowIcon from '../../../src/components/WindowIcon';
-
-/** createWrapper */
-function createWrapper(props) {
-  return shallow(
-    <WindowIcon
-      manifestLogo=""
-      classses={{}}
-      {...props}
-    />,
-  ).dive(); // to unwrap HOC created by withStyles();
-}
-
-describe('WindowIcon', () => {
-  it('should render nothing if no manifest logo given', () => {
-    const wrapper = createWrapper();
-    expect(wrapper.find('img').length).toBe(0);
-  });
-
-  it('should render logo if manifest logo is given', () => {
-    const manifestLogo = 'http://foo.bar';
-    const wrapper = createWrapper({ manifestLogo });
-    expect(wrapper.find('img').first().prop('src'))
-      .toEqual(manifestLogo);
-  });
-});

package.json

@@ -52,6 +52,7 @@
     "prop-types": "^15.6.2",
     "react-full-screen": "^0.2.4",
     "react-i18next": "^10.2.0",
+    "react-image": "^2.0.0",
     "react-mosaic-component": "^2.1.0",
     "react-placeholder": "^3.0.1",
     "react-redux": "^6.0.0",

src/components/ManifestListItem.js

@@ -6,8 +6,8 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import ReactPlaceholder from 'react-placeholder';
 import { TextBlock, TextRow, RectShape } from 'react-placeholder/lib/placeholders';
+import Img from 'react-image';
 import ManifestListItemError from '../containers/ManifestListItemError';
-import WindowIcon from '../containers/WindowIcon';
 import ns from '../config/css-ns';
 import 'react-placeholder/lib/reactPlaceholder.css';
 
@@ -41,6 +41,7 @@ export class ManifestListItem extends React.Component {
       ready,
       title,
       thumbnail,
+      manifestLogo,
       addWindow,
       handleClose,
       size,
@@ -94,16 +95,18 @@ export class ManifestListItem extends React.Component {
               >
                 <Grid container spacing={24} className={classes.label}>
                   <Grid item xs={4} sm={3}>
-                    {
-                      <ReactPlaceholder ready={!!thumbnail} type="rect" style={{ width: 120, height: 80 }}>
-                        <img
+                    <Img
                       className={ns('manifest-list-item-thumb')}
-                          src={thumbnail}
+                      src={[thumbnail]}
                       alt=""
                       height="80"
+                      unloader={(
+                        <RectShape
+                          className={classes.placeholder}
+                          style={{ width: 120, height: 80 }}
+                        />
+                      )}
                     />
-                      </ReactPlaceholder>
-                    }
                   </Grid>
                   <Grid item xs={8} sm={9}>
                     <Typography component="span" variant="h6">
@@ -119,7 +122,15 @@ export class ManifestListItem extends React.Component {
             </Grid>
 
             <Grid item xs={4} sm={2}>
-              <WindowIcon className={ns('manifest-list-item-logo')} manifestId={manifestId} />
+              <Img
+                src={[manifestLogo]}
+                alt=""
+                role="presentation"
+                className={classes.logo}
+                unloader={
+                  <RectShape className={classes.placeholder} style={{ width: 60, height: 60 }} />
+                }
+              />
             </Grid>
           </Grid>
         </ReactPlaceholder>
@@ -136,6 +147,7 @@ ManifestListItem.propTypes = {
   title: PropTypes.string,
   thumbnail: PropTypes.string,
   size: PropTypes.number,
+  manifestLogo: PropTypes.string,
   classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   provider: PropTypes.string,
   t: PropTypes.func,
@@ -155,4 +167,5 @@ ManifestListItem.defaultProps = {
   t: key => key,
   error: null,
   isFetching: false,
+  manifestLogo: null,
 };

src/components/WindowIcon.js

-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-/**
- */
-class WindowIcon extends Component {
-  /**
-   * render
-   * @return
-   */
-  render() {
-    const { manifestLogo, classes } = this.props;
-
-    const img = manifestLogo && (
-      <img
-        src={manifestLogo}
-        alt=""
-        role="presentation"
-        className={classes.logo}
-      />
-    );
-
-    return (
-      <>
-        {img}
-      </>
-    );
-  }
-}
-
-WindowIcon.propTypes = {
-  manifestLogo: PropTypes.string,
-  classes: PropTypes.shape({ logo: PropTypes.string }).isRequired,
-};
-
-WindowIcon.defaultProps = {
-  manifestLogo: null,
-};
-
-const styles = {
-  logo: {
-    height: '2.5rem',
-    paddingRight: 8,
-  },
-};
-
-export default withStyles(styles)(WindowIcon);

src/containers/ManifestListItem.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core';
 import {
-  getManifestTitle, getManifestThumbnail, getManifestCanvases, getManifestProvider,
+  getManifestTitle, getManifestThumbnail, getManifestCanvases, getManifestLogo, getManifestProvider,
 } from '../state/selectors';
 import * as actions from '../state/actions';
 import { ManifestListItem } from '../components/ManifestListItem';
@@ -20,6 +20,7 @@ const mapStateToProps = (state, { manifestId }) => {
     thumbnail: getManifestThumbnail(manifest),
     provider: getManifestProvider(manifest),
     size: getManifestCanvases(manifest).length,
+    manifestLogo: getManifestLogo(state.manifests[manifestId]),
   };
 };
 
@@ -43,6 +44,13 @@ const styles = theme => ({
     textTransform: 'initial',
     textAlign: 'left',
   },
+  logo: {
+    height: '2.5rem',
+    paddingRight: 8,
+  },
+  placeholder: {
+    backgroundColor: theme.palette.grey[300],
+  },
 });
 
 const enhance = compose(

src/containers/WindowIcon.js

-import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core';
-import { compose } from 'redux';
-import { getManifestLogo } from '../state/selectors';
-import WindowIcon from '../components/WindowIcon';
-
-/** */
-const mapStateToProps = (state, { manifestId }) => ({
-  manifestLogo: getManifestLogo(state.manifests[manifestId]),
-});
-
-const styles = {
-  logo: {
-    height: '2.5rem',
-    paddingRight: 8,
-  },
-};
-
-const enhance = compose(
-  withStyles(styles),
-  connect(mapStateToProps),
-);
-
-export default enhance(WindowIcon);