Progress

app/javascript/gabsocial/components/image.js

@@ -1,8 +1,9 @@
 import classNames from 'classnames/bind'
-import { autoPlayGif } from '../initial_state'
 
 // : testing :
-const placeholderSource = 'https://via.placeholder.com/150'
+// : todo :
+const placeholderSource = 'https://source.unsplash.com/random'
+const imageUnavailable = 'https://source.unsplash.com/random'
 
 const cx = classNames.bind(_s)
 
@@ -14,6 +15,7 @@ export default class Image extends PureComponent {
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
+    nullable: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -21,20 +23,37 @@ export default class Image extends PureComponent {
     fit: 'cover',
   }
 
-  render() {
-    const { src, fit, className, ...otherProps } = this.props
+  state = {
+    error: false,
+  }
 
-    const source = src || placeholderSource
+  handleOnError = () => {
+    this.setState({ error: true })
+  }
+
+  render() {
+    const { src, fit, className, nullable, ...otherProps } = this.props
+    const { error } = this.state
+
+    let source = src || placeholderSource
     const classes = cx(className, {
       default: 1,
       objectFitCover: fit === 'cover'
     })
 
+    //If error and not our own image
+    if (error && nullable) {
+      return null
+    } else if (error) {
+      source = imageUnavailable
+    }
+    
     return (
       <img
         className={classes}
         {...otherProps}
         src={source}
+        onError={this.handleOnError}
       />
     )
   }