Working single comment view

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

@@ -2,7 +2,7 @@ import React from "react";
 import { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
-import Permalink from "../Permalink/Permalink";
+import PermalinkContainer from "../Permalink/PermalinkContainer";
 import Timestamp from "./Timestamp";
 import TopBar from "./TopBar";
 import Username from "./Username";
@@ -26,7 +26,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       </TopBar>
       <Typography>{props.body}</Typography>
       <div>
-        <Permalink commentID={props.id} />
+        <PermalinkContainer commentID={props.id} />
       </div>
     </div>
   );

src/core/client/stream/components/Permalink/Permalink.tsx

@@ -5,17 +5,18 @@ import PermalinkPopover from "./PermalinkPopover";
 
 interface InnerProps {
   commentID: string;
+  origin: string | null;
 }
 
 class Permalink extends React.Component<InnerProps> {
   public render() {
-    const { commentID } = this.props;
+    const { commentID, origin } = this.props;
     return (
       <Popover
         placement="top"
         body={({ toggleVisibility, forwardRef }) => (
           <PermalinkPopover
-            commentID={commentID}
+            permalinkUrl={`${origin}/?commentID=${commentID}`}
             forwardRef={forwardRef}
             toggleVisibility={toggleVisibility}
           />

src/core/client/stream/components/Permalink/PermalinkContainer.tsx

@@ -0,0 +1,25 @@
+import React, { StatelessComponent } from "react";
+import { graphql } from "react-relay";
+import { withLocalStateContainer } from "talk-framework/lib/relay";
+import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
+
+import Permalink from "./Permalink";
+
+interface InnerProps {
+  local: Local;
+  commentID: string;
+}
+
+export const PermalinkContainer: StatelessComponent<InnerProps> = props => {
+  return <Permalink {...props} origin={props.local.origin} />;
+};
+
+const enhanced = withLocalStateContainer<Local>(
+  graphql`
+    fragment PermalinkContainerLocal on Local {
+      origin
+    }
+  `
+)(PermalinkContainer);
+
+export default enhanced;

src/core/client/stream/components/Permalink/PermalinkPopover.tsx

@@ -6,7 +6,7 @@ import { Button, Flex, TextField } from "talk-ui/components";
 import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
-  commentID: string;
+  permalinkUrl: string;
   style?: CSSProperties;
   forwardRef?: RefHandler;
   toggleVisibility?: () => any;
@@ -35,12 +35,12 @@ class PermalinkPopover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { commentID } = this.props;
+    const { permalinkUrl } = this.props;
     const { copied } = this.state;
     return (
       <Flex>
-        <TextField defaultValue={commentID} className={styles.textField} />
-        <CopyToClipboard text={commentID} onCopy={this.onCopy}>
+        <TextField defaultValue={permalinkUrl} className={styles.textField} />
+        <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
           <Button color="primary" variant="filled">
             {copied ? (
               <Localized id="comments-permalink-copied">

src/core/client/stream/components/PermalinkView.tsx

@@ -1,26 +1,25 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { CommentProps } from "talk-stream/components/Comment";
 import { Flex } from "talk-ui/components";
 import CommentContainer from "../containers/CommentContainer";
 
-export interface AppProps {
-  comment: CommentProps | null;
+export interface InnerProps {
+  comment: {} | null;
 }
 
-const PermalinkView: StatelessComponent<AppProps> = props => {
+const PermalinkView: StatelessComponent<InnerProps> = props => {
   if (props.comment) {
     return (
       <Flex justifyContent="center">
-        <Flex direction="column" itemGutter>
+        <Flex direction="column">
           <CommentContainer data={props.comment} />
         </Flex>
       </Flex>
     );
   }
 
-  return <div> Error </div>;
+  return <div>Comment not found</div>;
 };
 
 export default PermalinkView;

src/core/client/stream/components/Stream.tsx

@@ -10,67 +10,50 @@ import ReplyListContainer from "../containers/ReplyListContainer";
 import Logo from "./Logo";
 import * as styles from "./Stream.css";
 
-import { Comment, CommentProps } from "talk-stream/components/Comment";
-
 export interface StreamProps {
   assetID: string;
-  comment?: CommentProps;
   isClosed?: boolean;
-  comments?: ReadonlyArray<{ id: string }>;
+  comments: ReadonlyArray<{ id: string }>;
   onLoadMore?: () => void;
   hasMore?: boolean;
   disableLoadMore?: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
-  if (props.comment) {
-    return (
-      <Flex justifyContent="center" className={styles.root}>
-        <Flex direction="column" itemGutter>
-          <Comment {...props.comment} />
-        </Flex>
+  return (
+    <div className={styles.root}>
+      <Logo gutterBottom />
+      <PostCommentFormContainer assetID={props.assetID} />
+      <Flex
+        direction="column"
+        id="talk-comments-stream-log"
+        role="log"
+        aria-live="polite"
+        itemGutter
+      >
+        {props.comments.map(comment => (
+          <Flex direction="column" key={comment.id} itemGutter>
+            <CommentContainer data={comment} />
+            <ReplyListContainer comment={comment} />
+          </Flex>
+        ))}
+        {props.hasMore && (
+          <Localized id="comments-stream-loadMore">
+            <Button
+              id={"talk-comments-stream-loadMore"}
+              onClick={props.onLoadMore}
+              variant="outlined"
+              fullWidth
+              disabled={props.disableLoadMore}
+              aria-controls="talk-comments-stream-log"
+            >
+              Load More
+            </Button>
+          </Localized>
+        )}
       </Flex>
-    );
-  }
-
-  if (props.comments) {
-    return (
-      <div className={styles.root}>
-        <Logo gutterBottom />
-        <PostCommentFormContainer assetID={props.assetID} />
-        <Flex
-          direction="column"
-          id="talk-comments-stream-log"
-          role="log"
-          aria-live="polite"
-          itemGutter
-        >
-          {props.comments.map(comment => (
-            <Flex direction="column" key={comment.id} itemGutter>
-              <CommentContainer data={comment} />
-              <ReplyListContainer comment={comment} />
-            </Flex>
-          ))}
-          {props.hasMore && (
-            <Localized id="comments-stream-loadMore">
-              <Button
-                id={"talk-comments-stream-loadMore"}
-                onClick={props.onLoadMore}
-                variant="outlined"
-                fullWidth
-                disabled={props.disableLoadMore}
-                aria-controls="talk-comments-stream-log"
-              >
-                Load More
-              </Button>
-            </Localized>
-          )}
-        </Flex>
-      </div>
-    );
-  }
-
-  return <div>Error</div>;
+    </div>
+  );
 };
 
 export default Stream;