From 325f4534768361d946cc2cfc1db150eb3e91c072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 26 Jul 2018 11:27:22 -0300
Subject: [PATCH] Back to the stream if comment not found

---
 .../components/Permalink/PermalinkView.css    |  3 +-
 .../components/Permalink/PermalinkView.tsx    | 28 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/core/client/stream/components/Permalink/PermalinkView.css b/src/core/client/stream/components/Permalink/PermalinkView.css
index c2147d4ce..03b9e55dd 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.css
+++ b/src/core/client/stream/components/Permalink/PermalinkView.css
@@ -4,6 +4,7 @@
   margin: 20px auto;
 }
 
-.comment {
+.comment,
+.commentNotFound {
   margin: 20px auto;
 }
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index ad10de179..1d21a5032 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 
 import Logo from "talk-stream/components/Logo";
-import { Button, Flex } from "talk-ui/components";
+import { Button, Flex, Typography } from "talk-ui/components";
 import CommentContainer from "../../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
 
@@ -12,20 +12,22 @@ export interface InnerProps {
 }
 
 const PermalinkView: StatelessComponent<InnerProps> = props => {
+  let assetURL: string = "";
   const query = qs.parse(location.search);
 
   if (!query.assetID && !query.commentID) {
     return <div>Bad url: `assetID` and `commentID` params are needed</div>;
   }
 
-  if (props.comment) {
+  if (query.assetID) {
     // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
     // returns the correct asset url
-    let assetURL: string = "";
     if (query.assetID) {
       assetURL = `${location.origin}/?assetID=${query.assetID}`;
     }
+  }
 
+  if (props.comment) {
     return (
       <div className={styles.root}>
         <Logo />
@@ -47,7 +49,25 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
     );
   }
 
-  return <div>Comment not found</div>;
+  return (
+    <div className={styles.root}>
+      <Logo />
+      <Typography className={styles.commentNotFound}>
+        Comment not found
+      </Typography>
+      {assetURL && (
+        <Button
+          variant="filled"
+          color="primary"
+          onClick={() => {
+            window.location.href = assetURL;
+          }}
+        >
+          Back to the Stream
+        </Button>
+      )}
+    </div>
+  );
 };
 
 export default PermalinkView;