Comment History

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

@@ -12,7 +12,7 @@ import {
 import { SetActiveTabMutation } from "talk-stream/mutations";
 
 import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer";
-import ProfileContainer from "../tabs/profile/containers/ProfileContainer";
+import ProfileQuery from "../tabs/profile/queries/ProfileQuery";
 import * as styles from "./App.css";
 
 export interface AppProps {
@@ -35,7 +35,7 @@ const App: StatelessComponent<AppProps> = props => {
           <CommentsPaneContainer />
         </TabPane>
         <TabPane tabId="PROFILE">
-          <ProfileContainer />
+          <ProfileQuery />
         </TabPane>
       </TabContent>
     </HorizontalGutter>

src/core/client/stream/tabs/profile/components/CommentHistory.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { CommentHistoryContainer_me as MeData } from "talk-stream/__generated__/CommentHistoryContainer_me.graphql";
+import { HorizontalGutter } from "talk-ui/components";
+
+export interface CommentHistoryProps {
+  me: MeData;
+}
+
+const CommentHistory: StatelessComponent<CommentHistoryProps> = props => {
+  return <HorizontalGutter size="double">Comments</HorizontalGutter>;
+};
+
+export default CommentHistory;

src/core/client/stream/tabs/profile/components/Profile.tsx

@@ -3,9 +3,13 @@ import { StatelessComponent } from "react";
 import { PropTypesOf } from "talk-framework/types";
 import UserBoxContainer from "talk-stream/containers/UserBoxContainer";
 import { HorizontalGutter } from "talk-ui/components";
+import CommentHistoryContainer from "../containers/CommentHistoryContainer";
 
 export interface ProfileProps {
-  me: PropTypesOf<typeof UserBoxContainer>["me"] | null;
+  me:
+    | PropTypesOf<typeof UserBoxContainer>["me"] &
+        PropTypesOf<typeof CommentHistoryContainer>["me"]
+    | null;
 }
 
 const Profile: StatelessComponent<ProfileProps> = props => {
@@ -13,6 +17,7 @@ const Profile: StatelessComponent<ProfileProps> = props => {
     <HorizontalGutter size="double">
       <HorizontalGutter size="half">
         <UserBoxContainer me={props.me} />
+        {props.me && <CommentHistoryContainer me={props.me} />}
       </HorizontalGutter>
     </HorizontalGutter>
   );

src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { CommentHistoryContainer_me as CommentsData } from "talk-stream/__generated__/CommentHistoryContainer_me.graphql";
+
+import CommentHistory from "../components/CommentHistory";
+
+interface CommentHistoryContainerProps {
+  me: CommentsData;
+}
+
+export class CommentHistoryContainer extends React.Component<
+  CommentHistoryContainerProps
+> {
+  public render() {
+    return <CommentHistory me={this.props.me} />;
+  }
+}
+const enhanced = withFragmentContainer<CommentHistoryContainerProps>({
+  me: graphql`
+    fragment CommentHistoryContainer_me on User {
+      comments {
+        edges {
+          node {
+            id
+            body
+          }
+        }
+      }
+    }
+  `,
+})(CommentHistoryContainer);
+
+export default enhanced;

src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx

@@ -12,13 +12,17 @@ interface ProfileContainerProps {
 
 export class StreamContainer extends React.Component<ProfileContainerProps> {
   public render() {
-    return <Profile me={this.props.me} />;
+    if (this.props.me) {
+      return <Profile me={this.props.me} />;
+    }
+    return null;
   }
 }
 const enhanced = withFragmentContainer<ProfileContainerProps>({
   me: graphql`
     fragment ProfileContainer_me on User {
       ...UserBoxContainer_me
+      ...CommentHistoryContainer_me
     }
   `,
 })(StreamContainer);

src/core/server/graph/tenant/schema/schema.graphql

@@ -5,7 +5,7 @@
 """
 auth is a directive that will enforce authorization rules on the schema
 definition. It will restrict the viewer of the field based on roles or if the
-`userIDField` is specified, it will see if the current users ID equals the field
+`userIDField` is specified, it  will see if the current users ID equals the field
 specified. This allows users that own a specific resource (like a comment, or a
 flag) see their own content, but restrict it to everyone else. If the directive
 is used without options, it simply requires a logged in user.
@@ -546,6 +546,15 @@ type User {
   role is the current role of the User.
   """
   role: USER_ROLE! @auth(roles: [ADMIN, MODERATOR], userIDField: "id")
+
+  """
+  comments are the comments of the User.
+  """
+  comments(
+    first: Int = 10
+    orderBy: COMMENT_SORT = CREATED_AT_DESC
+    after: Cursor
+  ): CommentsConnection!
 }
 
 ################################################################################