Missing imports, redirects Back to the Stream, Share Button, Full func

src/core/client/stream/components/Comment/Comment.css

@@ -0,0 +1,3 @@
+.footer {
+  margin: 6px 0;
+}

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>

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>

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;
+}

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>
     );
   }
 

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
     }
   `

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 = (

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";