From 89472bfe9f4f2f7f22cc098e717cff96f0ae7c03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 26 Jul 2018 10:56:00 -0300
Subject: [PATCH] Missing imports, redirects Back to the Stream, Share Button,
 Full func

---
 .../stream/components/Comment/Comment.css     |  3 ++
 .../stream/components/Comment/Comment.tsx     |  3 +-
 .../stream/components/Permalink/Permalink.tsx | 10 ++++--
 .../components/Permalink/PermalinkView.css    |  9 ++++++
 .../components/Permalink/PermalinkView.tsx    | 31 ++++++++++++++++---
 .../stream/containers/PermalinkContainer.tsx  |  9 +++++-
 src/core/client/stream/queries/AppQuery.tsx   |  2 +-
 src/core/client/ui/components/index.ts        |  1 +
 8 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 src/core/client/stream/components/Comment/Comment.css
 create mode 100644 src/core/client/stream/components/Permalink/PermalinkView.css

diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
new file mode 100644
index 000000000..a9f4d2273
--- /dev/null
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -0,0 +1,3 @@
+.footer {
+  margin: 6px 0;
+}
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 10a6c9659..5afe6f61c 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
+import * as styles from "./Comment.css";
 
 import PermalinkContainer from "../../containers/PermalinkContainer";
 import Timestamp from "./Timestamp";
@@ -25,7 +26,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
         <Timestamp>{props.createdAt}</Timestamp>
       </TopBar>
       <Typography>{props.body}</Typography>
-      <div>
+      <div className={styles.footer}>
         <PermalinkContainer commentID={props.id} />
       </div>
     </div>
diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx
index 20b9c3a5c..eefd8859d 100644
--- a/src/core/client/stream/components/Permalink/Permalink.tsx
+++ b/src/core/client/stream/components/Permalink/Permalink.tsx
@@ -1,22 +1,25 @@
 import { Localized } from "fluent-react/compat";
 import React from "react";
-import { Button, Popover } from "talk-ui/components";
+import { Button, ButtonIcon, Popover } from "talk-ui/components";
 import PermalinkPopover from "./PermalinkPopover";
 
 interface InnerProps {
   commentID: string;
   origin: string | null;
+  assetID: string | null;
 }
 
 class Permalink extends React.Component<InnerProps> {
   public render() {
-    const { commentID, origin } = this.props;
+    const { commentID, origin, assetID } = this.props;
     return (
       <Popover
         placement="top"
         body={({ toggleVisibility, forwardRef }) => (
           <PermalinkPopover
-            permalinkUrl={`${origin}/?commentID=${commentID}`}
+            // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
+            // returns the correct asset url
+            permalinkUrl={`${origin}/?commentID=${commentID}&assetID=${assetID}`}
             forwardRef={forwardRef}
             toggleVisibility={toggleVisibility}
           />
@@ -24,6 +27,7 @@ class Permalink extends React.Component<InnerProps> {
       >
         {({ toggleVisibility, forwardRef }) => (
           <Button onClick={toggleVisibility} forwardRef={forwardRef}>
+            <ButtonIcon>share</ButtonIcon>
             <Localized id="comments-permalink-share">
               <span>Share</span>
             </Localized>
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.css b/src/core/client/stream/components/Permalink/PermalinkView.css
new file mode 100644
index 000000000..c2147d4ce
--- /dev/null
+++ b/src/core/client/stream/components/Permalink/PermalinkView.css
@@ -0,0 +1,9 @@
+.root {
+  width: 100%;
+  max-width: 400px;
+  margin: 20px auto;
+}
+
+.comment {
+  margin: 20px auto;
+}
diff --git a/src/core/client/stream/components/Permalink/PermalinkView.tsx b/src/core/client/stream/components/Permalink/PermalinkView.tsx
index 7e4a29177..a5e6b76db 100644
--- a/src/core/client/stream/components/Permalink/PermalinkView.tsx
+++ b/src/core/client/stream/components/Permalink/PermalinkView.tsx
@@ -1,21 +1,44 @@
+import qs from "query-string";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Flex } from "talk-ui/components";
+import Logo from "talk-stream/components/Logo";
+import { Button, Flex } from "talk-ui/components";
 import CommentContainer from "../../containers/CommentContainer";
+import * as styles from "./PermalinkView.css";
 
 export interface InnerProps {
   comment: {} | null;
 }
 
 const PermalinkView: StatelessComponent<InnerProps> = props => {
+  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) {
+    // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
+    // returns the correct asset url
+    const assetURL = `${location.origin}/?assetID=${query.assetID}`;
+
     return (
-      <Flex justifyContent="center">
-        <Flex direction="column">
+      <div className={styles.root}>
+        <Logo />
+        <Flex direction="column" className={styles.comment}>
           <CommentContainer data={props.comment} />
+          <Button
+            variant="filled"
+            color="primary"
+            onClick={() => {
+              window.location.href = assetURL;
+            }}
+          >
+            Back to the Stream
+          </Button>
         </Flex>
-      </Flex>
+      </div>
     );
   }
 
diff --git a/src/core/client/stream/containers/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkContainer.tsx
index 46a646600..a203dedcc 100644
--- a/src/core/client/stream/containers/PermalinkContainer.tsx
+++ b/src/core/client/stream/containers/PermalinkContainer.tsx
@@ -11,12 +11,19 @@ interface InnerProps {
 }
 
 export const PermalinkContainer: StatelessComponent<InnerProps> = props => {
-  return <Permalink {...props} origin={props.local.origin} />;
+  return (
+    <Permalink
+      {...props}
+      origin={props.local.origin}
+      assetID={props.local.assetID}
+    />
+  );
 };
 
 const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment PermalinkContainerLocal on Local {
+      assetID
       origin
     }
   `
diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx
index 07601ed1d..64a005795 100644
--- a/src/core/client/stream/queries/AppQuery.tsx
+++ b/src/core/client/stream/queries/AppQuery.tsx
@@ -24,7 +24,7 @@ interface WrappedProps {
   data: any;
 }
 
-// TODO (bc) refactor this into another component. break down the needs of each component.
+// TODO (bc) Break down the needs of each component into another file (maybe).
 // (careful porting QueryRenderer into another stateless component)
 
 export const renderWrapper = (
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 0b2032cb5..ae57fd4e4 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -1,5 +1,6 @@
 export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
+export { default as ButtonIcon } from "./Button/ButtonIcon";
 export { default as Typography } from "./Typography";
 export { default as Popover } from "./Popover";
 export { default as TextField } from "./TextField";