From 60d61d40b63050a3e853019e7c38fa6d4569bc28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Fri, 14 Sep 2018 11:35:01 -0300 Subject: [PATCH] Comment History --- src/core/client/stream/components/App.tsx | 4 +-- .../profile/components/CommentHistory.tsx | 14 ++++++++ .../tabs/profile/components/Profile.tsx | 7 +++- .../containers/CommentHistoryContainer.tsx | 35 +++++++++++++++++++ .../profile/containers/ProfileContainer.tsx | 6 +++- .../server/graph/tenant/schema/schema.graphql | 11 +++++- 6 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 src/core/client/stream/tabs/profile/components/CommentHistory.tsx create mode 100644 src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx index d78881430..faaad4fa4 100644 --- a/src/core/client/stream/components/App.tsx +++ b/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 = props => { - + diff --git a/src/core/client/stream/tabs/profile/components/CommentHistory.tsx b/src/core/client/stream/tabs/profile/components/CommentHistory.tsx new file mode 100644 index 000000000..b2804adf8 --- /dev/null +++ b/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 = props => { + return Comments; +}; + +export default CommentHistory; diff --git a/src/core/client/stream/tabs/profile/components/Profile.tsx b/src/core/client/stream/tabs/profile/components/Profile.tsx index b8223f70d..516b7ac74 100644 --- a/src/core/client/stream/tabs/profile/components/Profile.tsx +++ b/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["me"] | null; + me: + | PropTypesOf["me"] & + PropTypesOf["me"] + | null; } const Profile: StatelessComponent = props => { @@ -13,6 +17,7 @@ const Profile: StatelessComponent = props => { + {props.me && } ); diff --git a/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx b/src/core/client/stream/tabs/profile/containers/CommentHistoryContainer.tsx new file mode 100644 index 000000000..d46cec7d4 --- /dev/null +++ b/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 ; + } +} +const enhanced = withFragmentContainer({ + me: graphql` + fragment CommentHistoryContainer_me on User { + comments { + edges { + node { + id + body + } + } + } + } + `, +})(CommentHistoryContainer); + +export default enhanced; diff --git a/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx index 50570f913..6ece17835 100644 --- a/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx +++ b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx @@ -12,13 +12,17 @@ interface ProfileContainerProps { export class StreamContainer extends React.Component { public render() { - return ; + if (this.props.me) { + return ; + } + return null; } } const enhanced = withFragmentContainer({ me: graphql` fragment ProfileContainer_me on User { ...UserBoxContainer_me + ...CommentHistoryContainer_me } `, })(StreamContainer); diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql index 9b808db0d..e8f4cc42f 100644 --- a/src/core/server/graph/tenant/schema/schema.graphql +++ b/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! } ################################################################################