Fix handling for failed linkpreview.net requests

app/components/ResourceCard.jsx

@@ -127,6 +127,7 @@ export default class extends Component {
             title={this.state.title}
             actAsExpander={true}
             showExpandableButton={true}
+            className="resource-card-header"
           />
           <CardMedia style={{ padding: 15 }}>
             <img

app/components/ResourceForm.jsx

@@ -36,24 +36,34 @@ export default class extends Component {
       dataType: 'jsonp',
       data: {q: target, key: '59546c0da716e80a54030151e45fe4e025d32430c753a'},
       success: response => {
-        let key = resourcesRef.push().key
+        const key = resourcesRef.push().key
         if (this.props.milestoneRef) {
           // Add resource URL to parent goal's uploads:
           this.props.goalRef.child('resources').child(key).set({
-            resourceURL: response.url,
+            resourceURL: target,
             milestoneId: this.props.milestoneId
           })
           // Add resource URL to milestone:
           this.props.milestoneRef.child(key).set({
-            resourceURL: response.url
+            resourceURL: target
           })
         } else {
           // Otherwise, just add resource directly to goal
           this.props.goalRef.child(key).set({
-            resourceURL: response.url
+            resourceURL: target
+          })
+        }
+
+        if (!response.error) {
+          resourcesRef.child(key).set(response)
+        } else {
+          resourcesRef.child(key).set({
+            ...response,
+            url: response.url || target,
+            title: response.title || target,
+            description: '',
           })
         }
-        resourcesRef.child(key).set(response)
       }
     })
     this.setState({url: ''})

public/style.css

@@ -41,6 +41,13 @@ h1, h2, h3, h4 {
   left: 50% !important;
 }
 
+/* Make resource titles with long words break the
+words rather than spill out */
+.resource-card-header > * {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
 .flexy-columns {
   display: flex;
   flex-wrap: wrap;