Adding the mutation

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

@@ -6,14 +6,16 @@ import { Button, Flex, Typography } from "talk-ui/components";
 import CommentContainer from "../../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
 
-export interface InnerProps {
+export interface PermalinkViewProps {
   comment: {} | null;
   assetURL: string | null;
+  onShowAllComments: () => void;
 }
 
-const PermalinkView: StatelessComponent<InnerProps> = ({
+const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
   assetURL,
   comment,
+  onShowAllComments,
 }) => {
   if (comment) {
     return (
@@ -23,9 +25,7 @@ const PermalinkView: StatelessComponent<InnerProps> = ({
           <Button
             variant="outlined"
             color="primary"
-            onClick={() => {
-              window.location.href = assetURL;
-            }}
+            onClick={onShowAllComments}
             fullWidth
           >
             Show all Comments

src/core/client/stream/containers/PermalinkViewContainer.tsx

@@ -1,42 +1,62 @@
-import React, { StatelessComponent } from "react";
+import React from "react";
 import { graphql } from "react-relay";
-import { withFragmentContainer } from "talk-framework/lib/relay";
-import { withLocalStateContainer } from "talk-framework/lib/relay";
-import { PropTypesOf } from "talk-framework/types";
+import {
+  withFragmentContainer,
+  withLocalStateContainer,
+} from "talk-framework/lib/relay";
 import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql";
 import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql";
+import {
+  SetCommentIDMutation,
+  withSetCommentIDMutation,
+} from "talk-stream/mutations";
 import PermalinkView from "../components/Permalink/PermalinkView";
 
-interface InnerProps {
+interface PermalinkViewContainerProps {
   data: Data;
   local: Local;
+  setCommentID: SetCommentIDMutation;
 }
 
-export const PermalinkViewContainer: StatelessComponent<InnerProps> = ({
-  local,
-  data,
-}) => {
-  return <PermalinkView {...data} assetURL={local.assetURL} />;
-};
+class PermalinkViewContainer extends React.Component<
+  PermalinkViewContainerProps
+> {
+  private showAllComments = () => {
+    const { local } = this.props;
+    window.location.href = local.assetURL!;
+    // mutation
+  };
+  public render() {
+    const { data, local } = this.props;
+    return (
+      <PermalinkView
+        {...data}
+        assetURL={local.assetURL}
+        onShowAllComments={this.showAllComments}
+      />
+    );
+  }
+}
 
-const enhanced = withFragmentContainer<{ data: Data }>({
-  data: graphql`
-    fragment PermalinkViewContainerQuery on Query
-      @argumentDefinitions(commentID: { type: "ID!" }) {
-      comment(id: $commentID) {
-        ...CommentContainer
+const enhanced = withSetCommentIDMutation(
+  withFragmentContainer<{ data: Data }>({
+    data: graphql`
+      fragment PermalinkViewContainerQuery on Query
+        @argumentDefinitions(commentID: { type: "ID!" }) {
+        comment(id: $commentID) {
+          ...CommentContainer
+        }
       }
-    }
-  `,
-})(
-  withLocalStateContainer<Local>(
-    graphql`
-      fragment PermalinkViewContainerLocal on Local {
-        assetURL
-      }
-    `
-  )(PermalinkViewContainer)
+    `,
+  })(
+    withLocalStateContainer<Local>(
+      graphql`
+        fragment PermalinkViewContainerLocal on Local {
+          assetURL
+        }
+      `
+    )(PermalinkViewContainer)
+  )
 );
 
-export type PermalinkViewContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

src/core/client/stream/local/constants.ts

@@ -4,3 +4,4 @@
 
 export const NETWORK_TYPE = "Network";
 export const NETWORK_ID = "client:root.local.network";
+export const LOCAL_ID = "client:root.local";

src/core/client/stream/mutations/SetCommentIDMutation.ts

@@ -0,0 +1,21 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+import { createMutationContainer } from "talk-framework/lib/relay";
+import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
+
+export interface SetCommentIDInput {
+  commentID: string | null;
+}
+
+export type SetCommentIDMutation = (input: SetCommentIDInput) => void;
+
+async function commit(environment: Environment, input: SetCommentIDInput) {
+  return commitLocalUpdate(environment, store => {
+    const record = store.get(LOCAL_ID)!;
+    record.setValue(input.commentID, "commentID");
+  });
+}
+
+export const withSetCommentIDMutation = createMutationContainer(
+  "setCommentID",
+  commit
+);

src/core/client/stream/mutations/index.ts

@@ -1,2 +1,3 @@
 export * from "./CreateCommentMutation";
 export * from "./SetNetworkStatusMutation";
+export * from "./SetCommentIDMutation";