Progress:

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

@@ -0,0 +1,26 @@
+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;
+}
+
+const PermalinkView: StatelessComponent<AppProps> = props => {
+  if (props.comment) {
+    return (
+      <Flex justifyContent="center">
+        <Flex direction="column" itemGutter>
+          <CommentContainer data={props.comment} />
+        </Flex>
+      </Flex>
+    );
+  }
+
+  return <div> Error </div>;
+};
+
+export default PermalinkView;

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

@@ -10,50 +10,67 @@ 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;
-  isClosed: boolean;
-  comments: ReadonlyArray<{ id: string }>;
-  onLoadMore: () => void;
-  hasMore: boolean;
-  disableLoadMore: boolean;
+  comment?: CommentProps;
+  isClosed?: boolean;
+  comments?: ReadonlyArray<{ id: string }>;
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  disableLoadMore?: boolean;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
-  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>
-        )}
+  if (props.comment) {
+    return (
+      <Flex justifyContent="center" className={styles.root}>
+        <Flex direction="column" itemGutter>
+          <Comment {...props.comment} />
+        </Flex>
       </Flex>
-    </div>
-  );
+    );
+  }
+
+  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>;
 };
 
 export default Stream;