Merge pull request #141 from cofacts/url-preview-img

Add image and handle error in URL previews
cofacts · Oct 16, 2018 · a71708c · a71708c
2 parents c3ab282 + f61bc91
commit a71708c
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 15 deletions.
diff --git a/components/Hyperlinks.js b/components/Hyperlinks.js
@@ -3,34 +3,76 @@ import { List, Map } from 'immutable';
 
 /**
  *
- * @param {Map} props.hyperlink -
+ * @param {string} error - One of ResolveError https://github.com/cofacts/url-resolver/blob/master/src/typeDefs/ResolveError.graphql
+ */
+function getErrorText(error) {
+  switch (error) {
+    case 'NAME_NOT_RESOLVED':
+      return 'Domain name cannot be resolved';
+    case 'UNSUPPORTED':
+    case 'INVALID_URL':
+      return 'URL is malformed or not supported';
+    case 'NOT_REACHABLE':
+      return 'Cannot get data from URL';
+    case 'HTTPS_ERROR':
+      return 'Target site contains HTTPS error';
+    default:
+      return 'Unknown error';
+  }
+}
+
+/**
+ * @param {Map} props.hyperlink
  */
 function Hyperlink({ hyperlink = Map() }) {
   const title = hyperlink.get('title');
   const summary = (hyperlink.get('summary') || '').slice(0, 200);
+  const topImageUrl = hyperlink.get('topImageUrl');
+  const error = hyperlink.get('error');
 
   return (
     <article className="link">
-      <h1 title={title}>{title}</h1>
-      <a
-        className="url"
-        href={hyperlink.get('url')}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {hyperlink.get('url')}
-      </a>
-      <p className="summary" title={summary}>
-        {summary}
-      </p>
+      {topImageUrl && (
+        <figure
+          className="preview"
+          style={{ backgroundImage: `url(${topImageUrl})` }}
+        />
+      )}
+      <div className="info">
+        <h1 title={title}>{title}</h1>
+        <a
+          className="url"
+          href={hyperlink.get('url')}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {hyperlink.get('url')}
+        </a>
+        <p className="summary" title={summary}>
+          {summary}
+        </p>
+        {error && <p className="error">{getErrorText(error)}</p>}
+      </div>
       <style jsx>{`
         .link {
-          max-width: 240px;
-          padding: 16px;
+          display: flex;
           border: 1px solid rgba(0, 0, 0, 0.2);
           margin: 0 8px 8px 0;
         }
 
+        .preview {
+          margin: 0;
+          width: 144px;
+          border-right: 1px solid rgba(0, 0, 0, 0.2);
+          background: #ccc center center no-repeat;
+          background-size: cover;
+        }
+
+        .info {
+          padding: 16px;
+          max-width: 240px;
+        }
+
         .link h1 {
           font-size: 14px;
           white-space: nowrap;
@@ -56,6 +98,12 @@ function Hyperlink({ hyperlink = Map() }) {
           overflow: hidden;
           margin: 0;
         }
+
+        .error {
+          color: firebrick;
+          font-size: 12px;
+          font-style: italic;
+        }
       `}</style>
     </article>
   );

diff --git a/ducks/articleDetail.js b/ducks/articleDetail.js
@@ -82,6 +82,8 @@ const fragments = {
       title
       url
       summary
+      topImageUrl
+      error
     }
   `,
 };

diff --git a/ducks/replyDetail.js b/ducks/replyDetail.js
@@ -64,6 +64,8 @@ export const load = id => dispatch => {
       title
       url
       summary
+      topImageUrl
+      error
     }
   `({ id }).then(resp => {
     dispatch(loadData(resp.getIn(['data', 'GetReply'])));