Load images with file-loader, create a component for footer

src/client/components/Footer.js

+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import oxfordLogo from '../img/logos/oxford-logo-white.png';
+import pennLogo from '../img/logos/penn-logo-white.png';
+import cnrsLogo from '../img/logos/cnrs-logo-white-small.png';
+import aaltoLogo from '../img/logos/aalto-logo-white-no-background-small.png';
+
+const logoPadding = 50;
+const logoHeight = 52;
+
+const styles = theme => ({
+  root: {
+    position: 'absolute',
+    borderTop: '4px solid' + theme.palette.primary.main,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    bottom: 0,
+    width: '100%',
+    height: 64,
+    background: theme.palette.primary.main,
+    borderRadius: 0,
+  },
+  oxfordLogo: {
+    //paddingLeft: 24,
+    height: logoHeight
+  },
+  pennLogo: {
+    paddingLeft: logoPadding,
+    height: logoHeight - 8
+  },
+  cnrsLogo: {
+    paddingLeft: logoPadding,
+    height: logoHeight
+  },
+  aaltoLogo: {
+    paddingLeft: logoPadding,
+    height: logoHeight - 10
+  },
+});
+
+const Footer = props => {
+  const { classes } = props;
+  return (
+    <Paper className={classes.root}>
+      <img className={classes.oxfordLogo} src={oxfordLogo} alt='logo' />
+      <img className={classes.pennLogo} src={pennLogo} alt='logo' />
+      <img className={classes.cnrsLogo} src={cnrsLogo} alt='logo' />
+      <img className={classes.aaltoLogo} src={aaltoLogo} alt='logo' />
+    </Paper>
+  );
+};
+
+Footer.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(Footer);

src/client/components/Main.js

@@ -9,6 +9,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import { NavLink } from 'react-router-dom';
+import thumbImage from '../img/thumb.png';
 
 const styles = theme => ({
   root: {
@@ -75,7 +76,7 @@ let Main = props => {
               <CardActionArea component={ManuscriptLink}>
                 <CardMedia
                   className={classes.media}
-                  image="img/thumb.png"
+                  image={thumbImage}
                   title="Manuscripts"
                 />
                 <CardContent className={classes.cardContent}>
@@ -95,7 +96,7 @@ let Main = props => {
               <CardActionArea disabled>
                 <CardMedia
                   className={classes.media}
-                  image="img/thumb.png"
+                  image={thumbImage}
                   title="Manuscripts"
                 />
                 <CardContent className={classes.cardContent}>
@@ -115,7 +116,7 @@ let Main = props => {
               <CardActionArea disabled>
                 <CardMedia
                   className={classes.media}
-                  image="img/thumb.png"
+                  image={thumbImage}
                   title="Manuscripts"
                 />
                 <CardContent className={classes.cardContent}>
@@ -135,7 +136,7 @@ let Main = props => {
               <CardActionArea disabled>
                 <CardMedia
                   className={classes.media}
-                  image="img/thumb.png"
+                  image={thumbImage}
                   title="Manuscripts"
                 />
                 <CardContent className={classes.cardContent}>
@@ -155,7 +156,7 @@ let Main = props => {
               <CardActionArea disabled>
                 <CardMedia
                   className={classes.media}
-                  image="img/thumb.png"
+                  image={thumbImage}
                   title="Manuscripts"
                 />
                 <CardContent className={classes.cardContent}>
@@ -175,7 +176,7 @@ let Main = props => {
               <CardActionArea disabled>
                 <CardMedia
                   className={classes.media}
-                  image="img/thumb.png"
+                  image={thumbImage}
                   title="Manuscripts"
                 />
                 <CardContent className={classes.cardContent}>

src/client/containers/MapApp.js

@@ -5,8 +5,8 @@ import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
 import { withRouter } from 'react-router-dom';
 import compose from 'recompose/compose';
-import Paper from '@material-ui/core/Paper';
 import TopBar from '../components/TopBar';
+import Footer from '../components/Footer';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import Manuscripts from '../components/Manuscripts';
 import Main from '../components/Main';
@@ -24,9 +24,6 @@ import {
   closeFacetDialog
 } from '../actions';
 
-const logoPadding = 50;
-const logoHeight = 52;
-
 const styles = theme => ({
   root: {
     flexGrow: 1,
@@ -58,35 +55,7 @@ const styles = theme => ({
     borderLeft: '4px solid' + theme.palette.primary.main,
     //backgroundColor: 'rgb(238, 238, 238)'
     backgroundColor: theme.palette.background.paper
-  },
-  footer: {
-    position: 'absolute',
-    borderTop: '4px solid' + theme.palette.primary.main,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    bottom: 0,
-    width: '100%',
-    height: 64,
-    background: theme.palette.primary.main,
-    borderRadius: 0,
-  },
-  oxfordLogo: {
-    //paddingLeft: 24,
-    height: logoHeight
-  },
-  pennLogo: {
-    paddingLeft: logoPadding,
-    height: logoHeight - 8
-  },
-  cnrsLogo: {
-    paddingLeft: logoPadding,
-    height: logoHeight
-  },
-  aaltoLogo: {
-    paddingLeft: logoPadding,
-    height: logoHeight - 10
-  },
+  }
 });
 
 let MapApp = (props) => {
@@ -105,7 +74,6 @@ let MapApp = (props) => {
                 path="/manuscripts"
                 render={routeProps =>
                   <Manuscripts
-                    map={props.map}
                     search={props.search}
                     facetFilters={props.facet.facetFilters}
                     fetchManuscripts={props.fetchManuscripts}
@@ -126,12 +94,7 @@ let MapApp = (props) => {
           updatePage={props.updatePage}
           closeFacetDialog={props.closeFacetDialog}
         />
-        <Paper className={classes.footer}>
-          <img className={classes.oxfordLogo} src='img/logos/oxford-logo-white.png' alt='Oxford University logo'/>
-          <img className={classes.pennLogo} src='img/logos/penn-logo-white.png' alt='Oxford University logo'/>
-          <img className={classes.cnrsLogo} src='img/logos/cnrs-logo-white-small.png' alt='CNRS logo'/>
-          <img className={classes.aaltoLogo} src='img/logos/aalto-logo-white-no-background-small.png' alt='Aalto University logo'/>
-        </Paper>
+        <Footer />
       </div>
     </div>
   );

webpack.client.common.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const webpack = require('webpack');
 
 const outputDirectory = 'dist/public';
@@ -18,10 +17,7 @@ module.exports = {
       template: 'src/client/index.html',
     }),
     new webpack.NamedModulesPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new CopyWebpackPlugin([
-      {from: 'src/client/img', to: 'img'}
-    ])
+    new webpack.HotModuleReplacementPlugin()
   ],
   output: {
     filename: '[name].bundle.js',