From 5dd9d2d5090116910c55e3bde5a4223b916d0333 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Sun, 23 Sep 2018 15:20:11 -0600 Subject: [PATCH 01/12] feat: initial comment count support --- .../server/graph/tenant/resolvers/asset.ts | 1 + .../graph/tenant/resolvers/comment_counts.ts | 14 +++ .../server/graph/tenant/resolvers/index.ts | 2 + .../server/graph/tenant/schema/schema.graphql | 57 +++++++++++- src/core/server/models/asset.ts | 89 +++++++++++++++---- src/core/server/services/comments/index.ts | 25 +++++- 6 files changed, 164 insertions(+), 24 deletions(-) create mode 100644 src/core/server/graph/tenant/resolvers/comment_counts.ts diff --git a/src/core/server/graph/tenant/resolvers/asset.ts b/src/core/server/graph/tenant/resolvers/asset.ts index e5487ba08..95f05daa3 100644 --- a/src/core/server/graph/tenant/resolvers/asset.ts +++ b/src/core/server/graph/tenant/resolvers/asset.ts @@ -6,6 +6,7 @@ const Asset: GQLAssetTypeResolver = { ctx.loaders.Comments.forAsset(asset.id, input), // TODO: implement this. isClosed: () => false, + commentCounts: asset => asset.comment_counts, }; export default Asset; diff --git a/src/core/server/graph/tenant/resolvers/comment_counts.ts b/src/core/server/graph/tenant/resolvers/comment_counts.ts new file mode 100644 index 000000000..b88a54c3b --- /dev/null +++ b/src/core/server/graph/tenant/resolvers/comment_counts.ts @@ -0,0 +1,14 @@ +import { + GQLCOMMENT_STATUS, + GQLCommentCountsTypeResolver, +} from "talk-server/graph/tenant/schema/__generated__/types"; +import { CommentStatusCounts } from "talk-server/models/asset"; + +const CommentCounts: GQLCommentCountsTypeResolver = { + totalVisible: commentCounts => + commentCounts[GQLCOMMENT_STATUS.ACCEPTED] + + commentCounts[GQLCOMMENT_STATUS.NONE], + statuses: commentCounts => commentCounts, +}; + +export default CommentCounts; diff --git a/src/core/server/graph/tenant/resolvers/index.ts b/src/core/server/graph/tenant/resolvers/index.ts index f8754d04b..e1bf08143 100644 --- a/src/core/server/graph/tenant/resolvers/index.ts +++ b/src/core/server/graph/tenant/resolvers/index.ts @@ -4,6 +4,7 @@ import { GQLResolver } from "talk-server/graph/tenant/schema/__generated__/types import Asset from "./asset"; import AuthIntegrations from "./auth_integrations"; import Comment from "./comment"; +import CommentCounts from "./comment_counts"; import Mutation from "./mutation"; import Profile from "./profile"; import Query from "./query"; @@ -12,6 +13,7 @@ const Resolvers: GQLResolver = { Asset, AuthIntegrations, Comment, + CommentCounts, Cursor, Mutation, Profile, diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql index 9b808db0d..b0f30e2b4 100644 --- a/src/core/server/graph/tenant/schema/schema.graphql +++ b/src/core/server/graph/tenant/schema/schema.graphql @@ -265,7 +265,7 @@ type KarmaThreshold { type KarmaThresholds { """ flag represents karma settings in relation to how well a User's flagging - ability aligns with the moderation decicions made by moderators. + ability aligns with the moderation decisions made by moderators. """ flag: KarmaThreshold! @@ -284,7 +284,7 @@ type Karma { """ karmaThresholds contains the currently set thresholds for triggering Trust - beheviour. + behavior. """ thresholds: KarmaThresholds! } @@ -697,6 +697,50 @@ type CommentsConnection { pageInfo: PageInfo! } +################################################################################ +## CommentCounts +################################################################################ + +type CommentStatusCounts { + """ + The comment is not PREMOD, but was not applied a moderation status by a + moderator. + """ + NONE: Int! + + """ + The comment has been accepted by a moderator. + """ + ACCEPTED: Int! + + """ + The comment has been rejected by a moderator. + """ + REJECTED: Int! + + """ + The comment was created while the asset's premoderation option was on, and + new comments that haven't been moderated yet are referred to as + "premoderated" or "premod" comments. + """ + PREMOD: Int! + + """ + SYSTEM_WITHHELD represents a comment that was withheld by the system because + it was flagged by an internal process for further review. + """ + SYSTEM_WITHHELD: Int! +} + +type CommentCounts { + """ + totalVisible will return the count of all visible Comments. + """ + totalVisible: Int! + + statuses: CommentStatusCounts! @auth(roles: [ADMIN, MODERATOR]) +} + ################################################################################ ## Asset ################################################################################ @@ -751,6 +795,11 @@ type Asset { """ isClosed: Boolean! + """ + commentCounts stores all the counts of Comments that are left on the Comment. + """ + commentCounts: CommentCounts! + """ createdAt is the date that the Asset was created at. """ @@ -1080,7 +1129,7 @@ input SettingsKarmaThresholdInput { input SettingsKarmaThresholdsInput { """ flag represents karma settings in relation to how well a User's flagging - ability aligns with the moderation decicions made by moderators. + ability aligns with the moderation decisions made by moderators. """ flag: SettingsKarmaThresholdInput @@ -1099,7 +1148,7 @@ input SettingsKarmaInput { """ karmaThresholds contains the currently set thresholds for triggering Trust - beheviour. + behavior. """ thresholds: SettingsKarmaThresholdsInput } diff --git a/src/core/server/models/asset.ts b/src/core/server/models/asset.ts index 8d412c522..b2d5bd866 100644 --- a/src/core/server/models/asset.ts +++ b/src/core/server/models/asset.ts @@ -1,9 +1,9 @@ -import { defaults } from "lodash"; import { Db } from "mongodb"; import uuid from "uuid"; import { Omit } from "talk-common/types"; import { dotize } from "talk-common/utils/dotize"; +import { GQLCOMMENT_STATUS } from "talk-server/graph/tenant/schema/__generated__/types"; import { ModerationSettings } from "talk-server/models/settings"; import { TenantResource } from "talk-server/models/tenant"; @@ -11,12 +11,24 @@ function collection(db: Db) { return db.collection>("assets"); } +// TODO: (wyattjoh) write a test to verify that this set of counts is always in sync with GQLCOMMENT_STATUS. +export interface CommentStatusCounts { + [GQLCOMMENT_STATUS.ACCEPTED]: number; + [GQLCOMMENT_STATUS.NONE]: number; + [GQLCOMMENT_STATUS.PREMOD]: number; + [GQLCOMMENT_STATUS.REJECTED]: number; + [GQLCOMMENT_STATUS.SYSTEM_WITHHELD]: number; +} + export interface Asset extends TenantResource { readonly id: string; url: string; scraped?: Date; closedAt?: Date; closedMessage?: string; + created_at: Date; + modified_date?: Date; + title?: string; description?: string; image?: string; @@ -24,11 +36,15 @@ export interface Asset extends TenantResource { subsection?: string; author?: string; publication_date?: Date; - modified_date?: Date; - created_at: Date; /** - * settings provides a point where the settings can be overriden for a + * comment_counts stores the different counts for each comment on the Asset + * according to their statuses. + */ + comment_counts: CommentStatusCounts; + + /** + * settings provides a point where the settings can be overridden for a * specific Asset. */ settings?: Partial; @@ -51,23 +67,22 @@ export async function upsertAsset( // Create the asset, optionally sourcing the id from the input, additionally // porting in the tenant_id. const update: { $setOnInsert: Asset } = { - $setOnInsert: defaults( - { - url, - tenant_id: tenantID, - created_at: now, - }, - { id }, - { - id: uuid.v4(), - } - ), + $setOnInsert: { + id: id ? id : uuid.v4(), + url, + tenant_id: tenantID, + created_at: now, + comment_counts: createEmptyCommentCounts(), + }, }; // Perform the find and update operation to try and find and or create the // asset. const { value: asset } = await collection(db).findOneAndUpdate( - { url }, + { + url, + tenant_id: tenantID, + }, update, { // Create the object if it doesn't already exist. @@ -89,6 +104,48 @@ export async function upsertAsset( return asset; } +/** + * updateCommentStatusCount increments the number of status counts for the + * given Asset ID. + * + * @param mongo the database handle + * @param tenantID the tenant that the Asset is on. + * @param id the ID of the Asset. + * @param commentStatusCounts the update document that contains a positive or + * negative number of comments to increment on the given Asset. + */ +export async function updateCommentStatusCount( + mongo: Db, + tenantID: string, + id: string, + commentStatusCounts: Partial +) { + const { value: asset } = await collection(mongo).findOneAndUpdate( + { + id, + tenant_id: tenantID, + }, + // Update all the specific comment status counts that are associated with + // each of the counts. + { $inc: dotize({ comment_counts: commentStatusCounts }) }, + // False to return the updated document instead of the original + // document. + { returnOriginal: false } + ); + + return asset; +} + +function createEmptyCommentCounts(): CommentStatusCounts { + return { + [GQLCOMMENT_STATUS.ACCEPTED]: 0, + [GQLCOMMENT_STATUS.NONE]: 0, + [GQLCOMMENT_STATUS.PREMOD]: 0, + [GQLCOMMENT_STATUS.REJECTED]: 0, + [GQLCOMMENT_STATUS.SYSTEM_WITHHELD]: 0, + }; +} + export interface FindOrCreateAssetInput { id?: string; url?: string; diff --git a/src/core/server/services/comments/index.ts b/src/core/server/services/comments/index.ts index 25a264f5a..cf0317fad 100644 --- a/src/core/server/services/comments/index.ts +++ b/src/core/server/services/comments/index.ts @@ -1,7 +1,10 @@ import { Db } from "mongodb"; import { Omit } from "talk-common/types"; -import { retrieveAsset } from "talk-server/models/asset"; +import { + retrieveAsset, + updateCommentStatusCount, +} from "talk-server/models/asset"; import { createComment, CreateCommentInput, @@ -68,6 +71,11 @@ export async function create( // TODO: update reply count of parent. } + // Increment the status count for the particular status on the Asset. + await updateCommentStatusCount(mongo, tenant.id, asset.id, { + [status]: 1, + }); + return comment; } @@ -84,7 +92,7 @@ export async function edit( req?: Request ) { // Get the comment that we're editing. - let comment = await retrieveComment(mongo, tenant.id, input.id); + const comment = await retrieveComment(mongo, tenant.id, input.id); if (!comment) { // TODO: replace to match error returned by the models/comments.ts throw new Error("comment not found"); @@ -108,7 +116,7 @@ export async function edit( // TODO: (wyattjoh) use the actions somehow. - comment = await editComment(mongo, tenant.id, { + const editedComment = await editComment(mongo, tenant.id, { id: input.id, author_id: author.id, body: input.body, @@ -123,5 +131,14 @@ export async function edit( ), }); - return comment; + if (comment.status !== editedComment.status) { + // Increment the status count for the particular status on the Asset, and + // decrement the status on the comment's previous status. + await updateCommentStatusCount(mongo, tenant.id, asset.id, { + [comment.status]: -1, + [editedComment.status]: 1, + }); + } + + return editedComment; } From aa105061c9a4ed9e653d9b62c01832867d286c69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Thu, 4 Oct 2018 18:31:16 -0300 Subject: [PATCH 02/12] Adding comment count --- src/core/client/stream/components/App.tsx | 13 +++- .../client/stream/containers/AppContainer.tsx | 10 ++- src/core/client/stream/index.tsx | 4 +- .../stream/mutations/CreateCommentMutation.ts | 10 +++ src/core/client/stream/queries/AppQuery.tsx | 73 +++++++++++++++++++ src/locales/en-US/stream.ftl | 2 +- 6 files changed, 104 insertions(+), 8 deletions(-) create mode 100644 src/core/client/stream/queries/AppQuery.tsx diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx index 006914ec8..a17560bcf 100644 --- a/src/core/client/stream/components/App.tsx +++ b/src/core/client/stream/components/App.tsx @@ -20,11 +20,16 @@ type TabValue = "COMMENTS" | "PROFILE" | "%future added value"; export interface AppProps { activeTab: TabValue; onTabClick: (tab: TabValue) => void; + commentCount: number; } -const CommentsTab: StatelessComponent> = props => ( - - Comments +interface CommentsTabProps extends PropTypesOf { + commentCount: number; +} + +const CommentsTab: StatelessComponent = props => ( + + {"{$commentCount} Comments"} ); @@ -40,7 +45,7 @@ const App: StatelessComponent = props => { return ( - + diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx index e3e3918e5..ad96b86dc 100644 --- a/src/core/client/stream/containers/AppContainer.tsx +++ b/src/core/client/stream/containers/AppContainer.tsx @@ -13,6 +13,7 @@ import App from "../components/App"; interface InnerProps { local: Local; setActiveTab: SetActiveTabMutation; + commentCount: number; } class AppContainer extends React.Component { @@ -23,9 +24,16 @@ class AppContainer extends React.Component { public render() { const { local: { activeTab }, + commentCount, } = this.props; - return ; + return ( + + ); } } diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx index 5ba961e83..e9d20d93d 100644 --- a/src/core/client/stream/index.tsx +++ b/src/core/client/stream/index.tsx @@ -4,7 +4,7 @@ import { StatelessComponent } from "react"; import ReactDOM from "react-dom"; import { createManaged } from "talk-framework/lib/bootstrap"; -import AppContainer from "talk-stream/containers/AppContainer"; +import AppQuery from "talk-stream/queries/AppQuery"; import { OnPostMessageAuthError, @@ -34,7 +34,7 @@ async function main() { <> {listeners} - + ); diff --git a/src/core/client/stream/mutations/CreateCommentMutation.ts b/src/core/client/stream/mutations/CreateCommentMutation.ts index 71ea3d894..f2299938f 100644 --- a/src/core/client/stream/mutations/CreateCommentMutation.ts +++ b/src/core/client/stream/mutations/CreateCommentMutation.ts @@ -35,6 +35,16 @@ function sharedUpdater( * update integrates new comment into the CommentConnection. */ function update(store: RecordSourceSelectorProxy, input: CreateCommentInput) { + // Updating Comment Count + const asset = store.get(input.assetID); + if (asset) { + const record = asset.getLinkedRecord("commentCounts"); + if (record) { + const currentCount = record.getValue("totalVisible"); + record.setValue(currentCount + 1, "totalVisible"); + } + } + // Get the payload returned from the server. const payload = store.getRootField("createComment")!; diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx new file mode 100644 index 000000000..b18e8e9d9 --- /dev/null +++ b/src/core/client/stream/queries/AppQuery.tsx @@ -0,0 +1,73 @@ +import { Localized } from "fluent-react/compat"; +import React, { StatelessComponent } from "react"; +import { ReadyState } from "react-relay"; +import { + graphql, + QueryRenderer, + withLocalStateContainer, +} from "talk-framework/lib/relay"; +import { AppQuery as QueryTypes } from "talk-stream/__generated__/AppQuery.graphql"; +import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql"; +import { Spinner } from "talk-ui/components"; +import AppContainer from "../containers/AppContainer"; + +interface InnerProps { + local: Local; +} + +export const render = ({ + error, + props, +}: ReadyState) => { + if (error) { + return
{error.message}
; + } + + if (props) { + if (!props.asset) { + return ( + +
Asset not found
+ + ); + } + + return ( + + ); + } + + return ; +}; + +const AppQuery: StatelessComponent = ({ + local: { assetID, assetURL }, +}) => ( + + query={graphql` + query AppQuery($assetID: ID, $assetURL: String) { + asset(id: $assetID, url: $assetURL) { + commentCounts { + totalVisible + } + } + } + `} + variables={{ + assetID, + assetURL, + }} + render={render} + /> +); + +const enhanced = withLocalStateContainer( + graphql` + fragment AppQueryLocal on Local { + assetID + assetURL + } + ` +)(AppQuery); + +export default enhanced; diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl index 486a7917b..c33aa9566 100644 --- a/src/locales/en-US/stream.ftl +++ b/src/locales/en-US/stream.ftl @@ -12,7 +12,7 @@ general-userBoxAuthenticated-signedInAs = general-userBoxAuthenticated-notYou = Not you? -general-app-commentsTab = Comments +general-app-commentsTab = {$commentCount} Comments general-app-myProfileTab = My Profile ## Comments Tab From d3fb04225c78174b830f173d861f697e23a976f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Thu, 4 Oct 2018 18:35:24 -0300 Subject: [PATCH 03/12] Snapshots updated --- .../__snapshots__/editComment.spec.tsx.snap | 14 +++++++------- .../comments/__snapshots__/loadMore.spec.tsx.snap | 4 ++-- .../__snapshots__/permalinkView.spec.tsx.snap | 4 ++-- .../permalinkViewAssetNotFound.spec.tsx.snap | 2 +- .../permalinkViewCommentNotFound.spec.tsx.snap | 4 ++-- .../__snapshots__/postComment.spec.tsx.snap | 6 +++--- .../__snapshots__/postLocalReply.spec.tsx.snap | 8 ++++---- .../comments/__snapshots__/postReply.spec.tsx.snap | 8 ++++---- .../__snapshots__/renderReplies.spec.tsx.snap | 2 +- .../__snapshots__/renderStream.spec.tsx.snap | 2 +- .../__snapshots__/showAllReplies.spec.tsx.snap | 4 ++-- .../__snapshots__/showConversation.spec.tsx.snap | 4 ++-- 12 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap index 6c88f64cf..fe4e66dce 100644 --- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`cancel edit: edit canceled 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
    • @@ -433,7 +433,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap index e3465217b..370974d1e 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments @@ -158,7 +158,7 @@ exports[`show all comments 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap index e5e570da7..7d82a3165 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view with unknown asset 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap index fb8c8432c..278440fe4 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view with unknown comment 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments @@ -93,7 +93,7 @@ exports[`show all comments 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap index 840b02577..ebeb37d9e 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`post a comment: optimistic response 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
  • - Comments + ⁨commentCount⁩ Comments
    • diff --git a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap index 95386e1ec..0d04969ea 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap index 3a03cfe51..b2eecc114 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments @@ -389,7 +389,7 @@ exports[`show all replies 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap index 2320b73fe..e953357d3 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments @@ -701,7 +701,7 @@ exports[`shows conversation 1`] = ` role="tab" type="button" > - Comments + ⁨commentCount⁩ Comments From 945cdfc298f394e31f3003f56ab26091e3662161 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Thu, 4 Oct 2018 22:34:54 +0000 Subject: [PATCH 04/12] fix: documentation --- src/core/client/stream/mutations/CreateCommentMutation.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/client/stream/mutations/CreateCommentMutation.ts b/src/core/client/stream/mutations/CreateCommentMutation.ts index f2299938f..d2a23a660 100644 --- a/src/core/client/stream/mutations/CreateCommentMutation.ts +++ b/src/core/client/stream/mutations/CreateCommentMutation.ts @@ -40,6 +40,7 @@ function update(store: RecordSourceSelectorProxy, input: CreateCommentInput) { if (asset) { const record = asset.getLinkedRecord("commentCounts"); if (record) { + // TODO: when we have moderation, we'll need to be careful here. const currentCount = record.getValue("totalVisible"); record.setValue(currentCount + 1, "totalVisible"); } From bd7903fc53c4139460c7564220a0aac67817e82d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Thu, 4 Oct 2018 20:27:03 -0300 Subject: [PATCH 05/12] Snapshots updated --- src/core/client/stream/components/App.spec.tsx | 9 --------- .../components/__snapshots__/App.spec.tsx.snap | 3 --- .../__snapshots__/editComment.spec.tsx.snap | 14 +++++++------- .../comments/__snapshots__/loadMore.spec.tsx.snap | 4 ++-- .../__snapshots__/permalinkView.spec.tsx.snap | 4 ++-- .../permalinkViewAssetNotFound.spec.tsx.snap | 2 +- .../permalinkViewCommentNotFound.spec.tsx.snap | 4 ++-- .../__snapshots__/postComment.spec.tsx.snap | 6 +++--- .../__snapshots__/postLocalReply.spec.tsx.snap | 8 ++++---- .../comments/__snapshots__/postReply.spec.tsx.snap | 8 ++++---- .../__snapshots__/renderReplies.spec.tsx.snap | 2 +- .../__snapshots__/renderStream.spec.tsx.snap | 2 +- .../__snapshots__/showAllReplies.spec.tsx.snap | 4 ++-- .../__snapshots__/showConversation.spec.tsx.snap | 4 ++-- src/core/client/stream/test/create.tsx | 3 ++- 15 files changed, 33 insertions(+), 44 deletions(-) delete mode 100644 src/core/client/stream/components/App.spec.tsx delete mode 100644 src/core/client/stream/components/__snapshots__/App.spec.tsx.snap diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx deleted file mode 100644 index 2afc61f74..000000000 --- a/src/core/client/stream/components/App.spec.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { shallow } from "enzyme"; -import React from "react"; - -import AppContainer from "../containers/AppContainer"; - -it("renders comments", () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap deleted file mode 100644 index 9a2441a63..000000000 --- a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders comments 1`] = ``; diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap index fe4e66dce..a6bae295c 100644 --- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`cancel edit: edit canceled 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
    • @@ -433,7 +433,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap index 370974d1e..df6f281c3 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments @@ -158,7 +158,7 @@ exports[`show all comments 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap index 7d82a3165..0cc370719 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view with unknown asset 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap index 278440fe4..7da665351 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view with unknown comment 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments @@ -93,7 +93,7 @@ exports[`show all comments 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap index ebeb37d9e..ee6a14314 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`post a comment: optimistic response 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
  • - ⁨commentCount⁩ Comments + ⁨6⁩ Comments
    • diff --git a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap index 0d04969ea..5672d8ad6 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap index b2eecc114..cf6642c00 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments @@ -389,7 +389,7 @@ exports[`show all replies 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap index e953357d3..87d570681 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments @@ -701,7 +701,7 @@ exports[`shows conversation 1`] = ` role="tab" type="button" > - ⁨commentCount⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/create.tsx b/src/core/client/stream/test/create.tsx index f105162c4..486f01422 100644 --- a/src/core/client/stream/test/create.tsx +++ b/src/core/client/stream/test/create.tsx @@ -15,6 +15,7 @@ import AppContainer from "talk-stream/containers/AppContainer"; import createEnvironment from "./createEnvironment"; import createFluentBundle from "./createFluentBundle"; import createNodeMock from "./createNodeMock"; +import { comments } from "./fixtures"; export interface CreateParams { logNetwork?: boolean; @@ -53,7 +54,7 @@ export default function create(params: CreateParams) { const testRenderer = TestRenderer.create( - + , { createNodeMock } ); From 8dae12b5ab8d02c282d463dc5555d2ddfafd5599 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Fri, 5 Oct 2018 09:54:47 -0300 Subject: [PATCH 06/12] Using fragment and updated fixtures --- .../client/stream/containers/AppContainer.tsx | 35 +++++++++++----- src/core/client/stream/queries/AppQuery.tsx | 8 +--- .../__snapshots__/editComment.spec.tsx.snap | 14 +++---- .../__snapshots__/loadMore.spec.tsx.snap | 2 +- .../__snapshots__/permalinkView.spec.tsx.snap | 2 +- .../permalinkViewAssetNotFound.spec.tsx.snap | 42 +------------------ ...permalinkViewCommentNotFound.spec.tsx.snap | 2 +- .../__snapshots__/postComment.spec.tsx.snap | 6 +-- .../postLocalReply.spec.tsx.snap | 8 ++-- .../__snapshots__/postReply.spec.tsx.snap | 8 ++-- .../__snapshots__/renderReplies.spec.tsx.snap | 2 +- .../__snapshots__/renderStream.spec.tsx.snap | 2 +- .../showAllReplies.spec.tsx.snap | 2 +- .../showConversation.spec.tsx.snap | 4 +- src/core/client/stream/test/create.tsx | 6 +-- src/core/client/stream/test/fixtures.ts | 12 ++++++ 16 files changed, 69 insertions(+), 86 deletions(-) diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx index ad96b86dc..39cfd6084 100644 --- a/src/core/client/stream/containers/AppContainer.tsx +++ b/src/core/client/stream/containers/AppContainer.tsx @@ -1,5 +1,5 @@ import React from "react"; - +import { withFragmentContainer } from "talk-framework/lib/relay"; import { graphql, withLocalStateContainer } from "talk-framework/lib/relay"; import { AppContainerLocal as Local } from "talk-stream/__generated__/AppContainerLocal.graphql"; import { @@ -8,12 +8,13 @@ import { withSetActiveTabMutation, } from "talk-stream/mutations"; +import { AppContainer_asset as AssetData } from "talk-stream/__generated__/AppContainer_asset.graphql"; import App from "../components/App"; interface InnerProps { local: Local; setActiveTab: SetActiveTabMutation; - commentCount: number; + asset: AssetData; } class AppContainer extends React.Component { @@ -24,25 +25,37 @@ class AppContainer extends React.Component { public render() { const { local: { activeTab }, - commentCount, + asset, } = this.props; return ( ); } } -const enhanced = withLocalStateContainer( - graphql` - fragment AppContainerLocal on Local { - activeTab - } - ` -)(withSetActiveTabMutation(AppContainer)); +const enhanced = withSetActiveTabMutation( + withFragmentContainer({ + asset: graphql` + fragment AppContainer_asset on Asset { + commentCounts { + totalVisible + } + } + `, + })( + withLocalStateContainer( + graphql` + fragment AppContainerLocal on Local { + activeTab + } + ` + )(AppContainer) + ) +); export default enhanced; diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx index b18e8e9d9..7e456fe18 100644 --- a/src/core/client/stream/queries/AppQuery.tsx +++ b/src/core/client/stream/queries/AppQuery.tsx @@ -32,9 +32,7 @@ export const render = ({ ); } - return ( - - ); + return ; } return ; @@ -47,9 +45,7 @@ const AppQuery: StatelessComponent = ({ query={graphql` query AppQuery($assetID: ID, $assetURL: String) { asset(id: $assetID, url: $assetURL) { - commentCounts { - totalVisible - } + ...AppContainer_asset } } `} diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap index a6bae295c..d2a122808 100644 --- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`cancel edit: edit canceled 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
    • diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap index df6f281c3..aaab7f1d2 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap index 0cc370719..1099468ac 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap @@ -1,45 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders permalink view with unknown asset 1`] = ` -
    -
      - -
    -
    -
    - Asset not found -
    -
    +
    + Asset not found
    `; diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap index 7da665351..18657738a 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view with unknown comment 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap index ee6a14314..843b01875 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`post a comment: optimistic response 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨3⁩ Comments
  • - ⁨6⁩ Comments + ⁨3⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨3⁩ Comments
  • - ⁨6⁩ Comments + ⁨3⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
    • diff --git a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap index 5672d8ad6..714bba9c7 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap index cf6642c00..84fc3d4eb 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap index 87d570681..6fbd0d02b 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨1⁩ Comments @@ -701,7 +701,7 @@ exports[`shows conversation 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨1⁩ Comments diff --git a/src/core/client/stream/test/create.tsx b/src/core/client/stream/test/create.tsx index 486f01422..4f32b73c7 100644 --- a/src/core/client/stream/test/create.tsx +++ b/src/core/client/stream/test/create.tsx @@ -10,12 +10,12 @@ import { PostMessageService } from "talk-framework/lib/postMessage"; import { RestClient } from "talk-framework/lib/rest"; import { createPromisifiedStorage } from "talk-framework/lib/storage"; import { createUUIDGenerator } from "talk-framework/testHelpers"; -import AppContainer from "talk-stream/containers/AppContainer"; import createEnvironment from "./createEnvironment"; import createFluentBundle from "./createFluentBundle"; import createNodeMock from "./createNodeMock"; -import { comments } from "./fixtures"; + +import AppQuery from "../queries/AppQuery"; export interface CreateParams { logNetwork?: boolean; @@ -54,7 +54,7 @@ export default function create(params: CreateParams) { const testRenderer = TestRenderer.create( - + , { createNodeMock } ); diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts index 159262d22..dc58ac4b8 100644 --- a/src/core/client/stream/test/fixtures.ts +++ b/src/core/client/stream/test/fixtures.ts @@ -93,6 +93,9 @@ export const assets = [ id: "asset-1", url: "http://localhost/assets/asset-1", isClosed: false, + commentCounts: { + totalVisible: 2, + }, comments: { edges: [ { node: comments[0], cursor: comments[0].createdAt }, @@ -160,6 +163,9 @@ export const assetWithReplies = { hasNextPage: false, }, }, + commentCounts: { + totalVisible: 1, + }, }; export const assetWithDeepReplies = { @@ -178,6 +184,9 @@ export const assetWithDeepReplies = { hasNextPage: false, }, }, + commentCounts: { + totalVisible: 1, + }, }; export const commentWithDeepestReplies = { @@ -292,4 +301,7 @@ export const assetWithDeepestReplies = { hasNextPage: false, }, }, + commentCounts: { + totalVisible: 1, + }, }; From 333e1a6dac6469a6b2e5d45da01060e6b016b1fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Fri, 5 Oct 2018 10:05:28 -0300 Subject: [PATCH 07/12] Revert "Using fragment and updated fixtures" This reverts commit 8dae12b5ab8d02c282d463dc5555d2ddfafd5599. --- .../client/stream/containers/AppContainer.tsx | 35 +++++----------- src/core/client/stream/queries/AppQuery.tsx | 8 +++- .../__snapshots__/editComment.spec.tsx.snap | 14 +++---- .../__snapshots__/loadMore.spec.tsx.snap | 2 +- .../__snapshots__/permalinkView.spec.tsx.snap | 2 +- .../permalinkViewAssetNotFound.spec.tsx.snap | 42 ++++++++++++++++++- ...permalinkViewCommentNotFound.spec.tsx.snap | 2 +- .../__snapshots__/postComment.spec.tsx.snap | 6 +-- .../postLocalReply.spec.tsx.snap | 8 ++-- .../__snapshots__/postReply.spec.tsx.snap | 8 ++-- .../__snapshots__/renderReplies.spec.tsx.snap | 2 +- .../__snapshots__/renderStream.spec.tsx.snap | 2 +- .../showAllReplies.spec.tsx.snap | 2 +- .../showConversation.spec.tsx.snap | 4 +- src/core/client/stream/test/create.tsx | 6 +-- src/core/client/stream/test/fixtures.ts | 12 ------ 16 files changed, 86 insertions(+), 69 deletions(-) diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx index 39cfd6084..ad96b86dc 100644 --- a/src/core/client/stream/containers/AppContainer.tsx +++ b/src/core/client/stream/containers/AppContainer.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { withFragmentContainer } from "talk-framework/lib/relay"; + import { graphql, withLocalStateContainer } from "talk-framework/lib/relay"; import { AppContainerLocal as Local } from "talk-stream/__generated__/AppContainerLocal.graphql"; import { @@ -8,13 +8,12 @@ import { withSetActiveTabMutation, } from "talk-stream/mutations"; -import { AppContainer_asset as AssetData } from "talk-stream/__generated__/AppContainer_asset.graphql"; import App from "../components/App"; interface InnerProps { local: Local; setActiveTab: SetActiveTabMutation; - asset: AssetData; + commentCount: number; } class AppContainer extends React.Component { @@ -25,37 +24,25 @@ class AppContainer extends React.Component { public render() { const { local: { activeTab }, - asset, + commentCount, } = this.props; return ( ); } } -const enhanced = withSetActiveTabMutation( - withFragmentContainer({ - asset: graphql` - fragment AppContainer_asset on Asset { - commentCounts { - totalVisible - } - } - `, - })( - withLocalStateContainer( - graphql` - fragment AppContainerLocal on Local { - activeTab - } - ` - )(AppContainer) - ) -); +const enhanced = withLocalStateContainer( + graphql` + fragment AppContainerLocal on Local { + activeTab + } + ` +)(withSetActiveTabMutation(AppContainer)); export default enhanced; diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx index 7e456fe18..b18e8e9d9 100644 --- a/src/core/client/stream/queries/AppQuery.tsx +++ b/src/core/client/stream/queries/AppQuery.tsx @@ -32,7 +32,9 @@ export const render = ({ ); } - return ; + return ( + + ); } return ; @@ -45,7 +47,9 @@ const AppQuery: StatelessComponent = ({ query={graphql` query AppQuery($assetID: ID, $assetURL: String) { asset(id: $assetID, url: $assetURL) { - ...AppContainer_asset + commentCounts { + totalVisible + } } } `} diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap index d2a122808..a6bae295c 100644 --- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`cancel edit: edit canceled 1`] = ` role="tab" type="button" > - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
    • diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap index aaab7f1d2..df6f281c3 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view 1`] = ` role="tab" type="button" > - ⁨2⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap index 1099468ac..0cc370719 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap @@ -1,7 +1,45 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders permalink view with unknown asset 1`] = ` -
    - Asset not found +
    +
      + +
    +
    +
    + Asset not found +
    +
    `; diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap index 18657738a..7da665351 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view with unknown comment 1`] = ` role="tab" type="button" > - ⁨2⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap index 843b01875..ee6a14314 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`post a comment: optimistic response 1`] = ` role="tab" type="button" > - ⁨3⁩ Comments + ⁨6⁩ Comments
  • - ⁨3⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨1⁩ Comments + ⁨6⁩ Comments
  • - ⁨1⁩ Comments + ⁨6⁩ Comments
  • - ⁨1⁩ Comments + ⁨6⁩ Comments
  • - ⁨1⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨3⁩ Comments + ⁨6⁩ Comments
  • - ⁨3⁩ Comments + ⁨6⁩ Comments
  • - ⁨2⁩ Comments + ⁨6⁩ Comments
  • - ⁨1⁩ Comments + ⁨6⁩ Comments
    • diff --git a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap index 714bba9c7..5672d8ad6 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨2⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap index 84fc3d4eb..cf6642c00 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨2⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap index 6fbd0d02b..87d570681 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨1⁩ Comments + ⁨6⁩ Comments @@ -701,7 +701,7 @@ exports[`shows conversation 1`] = ` role="tab" type="button" > - ⁨1⁩ Comments + ⁨6⁩ Comments diff --git a/src/core/client/stream/test/create.tsx b/src/core/client/stream/test/create.tsx index 4f32b73c7..486f01422 100644 --- a/src/core/client/stream/test/create.tsx +++ b/src/core/client/stream/test/create.tsx @@ -10,12 +10,12 @@ import { PostMessageService } from "talk-framework/lib/postMessage"; import { RestClient } from "talk-framework/lib/rest"; import { createPromisifiedStorage } from "talk-framework/lib/storage"; import { createUUIDGenerator } from "talk-framework/testHelpers"; +import AppContainer from "talk-stream/containers/AppContainer"; import createEnvironment from "./createEnvironment"; import createFluentBundle from "./createFluentBundle"; import createNodeMock from "./createNodeMock"; - -import AppQuery from "../queries/AppQuery"; +import { comments } from "./fixtures"; export interface CreateParams { logNetwork?: boolean; @@ -54,7 +54,7 @@ export default function create(params: CreateParams) { const testRenderer = TestRenderer.create( - + , { createNodeMock } ); diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts index dc58ac4b8..159262d22 100644 --- a/src/core/client/stream/test/fixtures.ts +++ b/src/core/client/stream/test/fixtures.ts @@ -93,9 +93,6 @@ export const assets = [ id: "asset-1", url: "http://localhost/assets/asset-1", isClosed: false, - commentCounts: { - totalVisible: 2, - }, comments: { edges: [ { node: comments[0], cursor: comments[0].createdAt }, @@ -163,9 +160,6 @@ export const assetWithReplies = { hasNextPage: false, }, }, - commentCounts: { - totalVisible: 1, - }, }; export const assetWithDeepReplies = { @@ -184,9 +178,6 @@ export const assetWithDeepReplies = { hasNextPage: false, }, }, - commentCounts: { - totalVisible: 1, - }, }; export const commentWithDeepestReplies = { @@ -301,7 +292,4 @@ export const assetWithDeepestReplies = { hasNextPage: false, }, }, - commentCounts: { - totalVisible: 1, - }, }; From 7e7a5856c2e5eade8ea4fb5ea9ac56b167135b2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 8 Oct 2018 08:41:40 -0300 Subject: [PATCH 08/12] Revert "Revert "Using fragment and updated fixtures"" This reverts commit 333e1a6dac6469a6b2e5d45da01060e6b016b1fe. --- .../client/stream/containers/AppContainer.tsx | 35 +++++++++++----- src/core/client/stream/queries/AppQuery.tsx | 8 +--- .../__snapshots__/editComment.spec.tsx.snap | 14 +++---- .../__snapshots__/loadMore.spec.tsx.snap | 2 +- .../__snapshots__/permalinkView.spec.tsx.snap | 2 +- .../permalinkViewAssetNotFound.spec.tsx.snap | 42 +------------------ ...permalinkViewCommentNotFound.spec.tsx.snap | 2 +- .../__snapshots__/postComment.spec.tsx.snap | 6 +-- .../postLocalReply.spec.tsx.snap | 8 ++-- .../__snapshots__/postReply.spec.tsx.snap | 8 ++-- .../__snapshots__/renderReplies.spec.tsx.snap | 2 +- .../__snapshots__/renderStream.spec.tsx.snap | 2 +- .../showAllReplies.spec.tsx.snap | 2 +- .../showConversation.spec.tsx.snap | 4 +- src/core/client/stream/test/create.tsx | 6 +-- src/core/client/stream/test/fixtures.ts | 12 ++++++ 16 files changed, 69 insertions(+), 86 deletions(-) diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx index ad96b86dc..39cfd6084 100644 --- a/src/core/client/stream/containers/AppContainer.tsx +++ b/src/core/client/stream/containers/AppContainer.tsx @@ -1,5 +1,5 @@ import React from "react"; - +import { withFragmentContainer } from "talk-framework/lib/relay"; import { graphql, withLocalStateContainer } from "talk-framework/lib/relay"; import { AppContainerLocal as Local } from "talk-stream/__generated__/AppContainerLocal.graphql"; import { @@ -8,12 +8,13 @@ import { withSetActiveTabMutation, } from "talk-stream/mutations"; +import { AppContainer_asset as AssetData } from "talk-stream/__generated__/AppContainer_asset.graphql"; import App from "../components/App"; interface InnerProps { local: Local; setActiveTab: SetActiveTabMutation; - commentCount: number; + asset: AssetData; } class AppContainer extends React.Component { @@ -24,25 +25,37 @@ class AppContainer extends React.Component { public render() { const { local: { activeTab }, - commentCount, + asset, } = this.props; return ( ); } } -const enhanced = withLocalStateContainer( - graphql` - fragment AppContainerLocal on Local { - activeTab - } - ` -)(withSetActiveTabMutation(AppContainer)); +const enhanced = withSetActiveTabMutation( + withFragmentContainer({ + asset: graphql` + fragment AppContainer_asset on Asset { + commentCounts { + totalVisible + } + } + `, + })( + withLocalStateContainer( + graphql` + fragment AppContainerLocal on Local { + activeTab + } + ` + )(AppContainer) + ) +); export default enhanced; diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx index b18e8e9d9..7e456fe18 100644 --- a/src/core/client/stream/queries/AppQuery.tsx +++ b/src/core/client/stream/queries/AppQuery.tsx @@ -32,9 +32,7 @@ export const render = ({ ); } - return ( - - ); + return ; } return ; @@ -47,9 +45,7 @@ const AppQuery: StatelessComponent = ({ query={graphql` query AppQuery($assetID: ID, $assetURL: String) { asset(id: $assetID, url: $assetURL) { - commentCounts { - totalVisible - } + ...AppContainer_asset } } `} diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap index a6bae295c..d2a122808 100644 --- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`cancel edit: edit canceled 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
    • diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap index df6f281c3..aaab7f1d2 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap index 0cc370719..1099468ac 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap @@ -1,45 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders permalink view with unknown asset 1`] = ` -
    -
      - -
    -
    -
    - Asset not found -
    -
    +
    + Asset not found
    `; diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap index 7da665351..18657738a 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders permalink view with unknown comment 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap index ee6a14314..843b01875 100644 --- a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`post a comment: optimistic response 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨3⁩ Comments
  • - ⁨6⁩ Comments + ⁨3⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨3⁩ Comments
  • - ⁨6⁩ Comments + ⁨3⁩ Comments
  • - ⁨6⁩ Comments + ⁨2⁩ Comments
  • - ⁨6⁩ Comments + ⁨1⁩ Comments
    • diff --git a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap index 5672d8ad6..714bba9c7 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap index cf6642c00..84fc3d4eb 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap index 87d570681..6fbd0d02b 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨1⁩ Comments @@ -701,7 +701,7 @@ exports[`shows conversation 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨1⁩ Comments diff --git a/src/core/client/stream/test/create.tsx b/src/core/client/stream/test/create.tsx index 486f01422..4f32b73c7 100644 --- a/src/core/client/stream/test/create.tsx +++ b/src/core/client/stream/test/create.tsx @@ -10,12 +10,12 @@ import { PostMessageService } from "talk-framework/lib/postMessage"; import { RestClient } from "talk-framework/lib/rest"; import { createPromisifiedStorage } from "talk-framework/lib/storage"; import { createUUIDGenerator } from "talk-framework/testHelpers"; -import AppContainer from "talk-stream/containers/AppContainer"; import createEnvironment from "./createEnvironment"; import createFluentBundle from "./createFluentBundle"; import createNodeMock from "./createNodeMock"; -import { comments } from "./fixtures"; + +import AppQuery from "../queries/AppQuery"; export interface CreateParams { logNetwork?: boolean; @@ -54,7 +54,7 @@ export default function create(params: CreateParams) { const testRenderer = TestRenderer.create( - + , { createNodeMock } ); diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts index 159262d22..dc58ac4b8 100644 --- a/src/core/client/stream/test/fixtures.ts +++ b/src/core/client/stream/test/fixtures.ts @@ -93,6 +93,9 @@ export const assets = [ id: "asset-1", url: "http://localhost/assets/asset-1", isClosed: false, + commentCounts: { + totalVisible: 2, + }, comments: { edges: [ { node: comments[0], cursor: comments[0].createdAt }, @@ -160,6 +163,9 @@ export const assetWithReplies = { hasNextPage: false, }, }, + commentCounts: { + totalVisible: 1, + }, }; export const assetWithDeepReplies = { @@ -178,6 +184,9 @@ export const assetWithDeepReplies = { hasNextPage: false, }, }, + commentCounts: { + totalVisible: 1, + }, }; export const commentWithDeepestReplies = { @@ -292,4 +301,7 @@ export const assetWithDeepestReplies = { hasNextPage: false, }, }, + commentCounts: { + totalVisible: 1, + }, }; From 51b7f5470ee12c61397d470409553116670b16d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 8 Oct 2018 14:58:10 -0300 Subject: [PATCH 09/12] Refactor --- src/core/client/stream/components/App.tsx | 20 ++---- .../stream/components/CommentCountTab.tsx | 21 ++++++ .../client/stream/containers/AppContainer.tsx | 35 +++------- .../containers/CommentsCountContainer.tsx | 0 src/core/client/stream/index.tsx | 4 +- src/core/client/stream/queries/AppQuery.tsx | 69 ------------------- .../stream/queries/CommentsCountQuery.tsx | 66 ++++++++++++++++++ .../IfLoggedInQuery.tsx} | 4 +- src/core/common/config.ts | 2 +- 9 files changed, 107 insertions(+), 114 deletions(-) create mode 100644 src/core/client/stream/components/CommentCountTab.tsx create mode 100644 src/core/client/stream/containers/CommentsCountContainer.tsx delete mode 100644 src/core/client/stream/queries/AppQuery.tsx create mode 100644 src/core/client/stream/queries/CommentsCountQuery.tsx rename src/core/client/stream/{containers/IfLoggedInContainer.tsx => queries/IfLoggedInQuery.tsx} (80%) diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx index a17560bcf..3b6ccac08 100644 --- a/src/core/client/stream/components/App.tsx +++ b/src/core/client/stream/components/App.tsx @@ -10,7 +10,8 @@ import { } from "talk-ui/components"; import { PropTypesOf } from "talk-ui/types"; -import IfLoggedInContainer from "../containers/IfLoggedInContainer"; +import CommentsCountQuery from "../queries/CommentsCountQuery"; +import IfLoggedInQuery from "../queries/IfLoggedInQuery"; import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer"; import ProfileQuery from "../tabs/profile/queries/ProfileQuery"; import * as styles from "./App.css"; @@ -20,32 +21,25 @@ type TabValue = "COMMENTS" | "PROFILE" | "%future added value"; export interface AppProps { activeTab: TabValue; onTabClick: (tab: TabValue) => void; - commentCount: number; } -interface CommentsTabProps extends PropTypesOf { - commentCount: number; -} - -const CommentsTab: StatelessComponent = props => ( - - {"{$commentCount} Comments"} - +const CommentsTab: StatelessComponent> = props => ( + ); const MyProfileTab: StatelessComponent> = props => ( - + My Profile - + ); const App: StatelessComponent = props => { return ( - + diff --git a/src/core/client/stream/components/CommentCountTab.tsx b/src/core/client/stream/components/CommentCountTab.tsx new file mode 100644 index 000000000..d72ce465d --- /dev/null +++ b/src/core/client/stream/components/CommentCountTab.tsx @@ -0,0 +1,21 @@ +import { Localized } from "fluent-react/compat"; +import React, { Component } from "react"; +import { Tab } from "talk-ui/components"; +import { PropTypesOf } from "talk-ui/types"; + +interface CommentCountTabProps extends PropTypesOf { + commentCount: number; +} + +class CommentCountTab extends Component { + public render() { + const { commentCount, ...props } = this.props; + return ( + + {"{$commentCount} Comments"} + + ); + } +} + +export default CommentCountTab; diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx index 39cfd6084..eca6141a0 100644 --- a/src/core/client/stream/containers/AppContainer.tsx +++ b/src/core/client/stream/containers/AppContainer.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { withFragmentContainer } from "talk-framework/lib/relay"; + import { graphql, withLocalStateContainer } from "talk-framework/lib/relay"; import { AppContainerLocal as Local } from "talk-stream/__generated__/AppContainerLocal.graphql"; import { @@ -8,13 +8,11 @@ import { withSetActiveTabMutation, } from "talk-stream/mutations"; -import { AppContainer_asset as AssetData } from "talk-stream/__generated__/AppContainer_asset.graphql"; import App from "../components/App"; interface InnerProps { local: Local; setActiveTab: SetActiveTabMutation; - asset: AssetData; } class AppContainer extends React.Component { @@ -25,37 +23,20 @@ class AppContainer extends React.Component { public render() { const { local: { activeTab }, - asset, } = this.props; - return ( - - ); + return ; } } const enhanced = withSetActiveTabMutation( - withFragmentContainer({ - asset: graphql` - fragment AppContainer_asset on Asset { - commentCounts { - totalVisible - } + withLocalStateContainer( + graphql` + fragment AppContainerLocal on Local { + activeTab } - `, - })( - withLocalStateContainer( - graphql` - fragment AppContainerLocal on Local { - activeTab - } - ` - )(AppContainer) - ) + ` + )(AppContainer) ); export default enhanced; diff --git a/src/core/client/stream/containers/CommentsCountContainer.tsx b/src/core/client/stream/containers/CommentsCountContainer.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx index e9d20d93d..5ba961e83 100644 --- a/src/core/client/stream/index.tsx +++ b/src/core/client/stream/index.tsx @@ -4,7 +4,7 @@ import { StatelessComponent } from "react"; import ReactDOM from "react-dom"; import { createManaged } from "talk-framework/lib/bootstrap"; -import AppQuery from "talk-stream/queries/AppQuery"; +import AppContainer from "talk-stream/containers/AppContainer"; import { OnPostMessageAuthError, @@ -34,7 +34,7 @@ async function main() { <> {listeners} - + ); diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx deleted file mode 100644 index 7e456fe18..000000000 --- a/src/core/client/stream/queries/AppQuery.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Localized } from "fluent-react/compat"; -import React, { StatelessComponent } from "react"; -import { ReadyState } from "react-relay"; -import { - graphql, - QueryRenderer, - withLocalStateContainer, -} from "talk-framework/lib/relay"; -import { AppQuery as QueryTypes } from "talk-stream/__generated__/AppQuery.graphql"; -import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql"; -import { Spinner } from "talk-ui/components"; -import AppContainer from "../containers/AppContainer"; - -interface InnerProps { - local: Local; -} - -export const render = ({ - error, - props, -}: ReadyState) => { - if (error) { - return
    {error.message}
    ; - } - - if (props) { - if (!props.asset) { - return ( - -
    Asset not found
    -     - ); - } - - return ; - } - - return ; -}; - -const AppQuery: StatelessComponent = ({ - local: { assetID, assetURL }, -}) => ( - - query={graphql` - query AppQuery($assetID: ID, $assetURL: String) { - asset(id: $assetID, url: $assetURL) { - ...AppContainer_asset - } - } - `} - variables={{ - assetID, - assetURL, - }} - render={render} - /> -); - -const enhanced = withLocalStateContainer( - graphql` - fragment AppQueryLocal on Local { - assetID - assetURL - } - ` -)(AppQuery); - -export default enhanced; diff --git a/src/core/client/stream/queries/CommentsCountQuery.tsx b/src/core/client/stream/queries/CommentsCountQuery.tsx new file mode 100644 index 000000000..be2a034f7 --- /dev/null +++ b/src/core/client/stream/queries/CommentsCountQuery.tsx @@ -0,0 +1,66 @@ +import React, { Component } from "react"; +import { + graphql, + QueryRenderer, + withLocalStateContainer, +} from "talk-framework/lib/relay"; +import { CommentsCountQuery as QueryTypes } from "talk-stream/__generated__/CommentsCountQuery.graphql"; +import { CommentsCountQueryLocal as Local } from "talk-stream/__generated__/CommentsCountQueryLocal.graphql"; +import { Spinner } from "talk-ui/components"; +import { Tab } from "talk-ui/components"; +import { PropTypesOf } from "talk-ui/types"; +import CommentCountTab from "../components/CommentCountTab"; + +interface InnerProps extends PropTypesOf { + local: Local; +} + +class CommentsCountQuery extends Component { + public render() { + const { assetID, assetURL } = this.props.local; + return ( + + query={graphql` + query CommentsCountQuery($assetID: ID, $assetURL: String) { + asset(id: $assetID, url: $assetURL) { + commentCounts { + totalVisible + } + } + } + `} + variables={{ + assetID, + assetURL, + }} + render={({ error, props }) => { + if (error) { + return
    {error.message}
    ; + } + + if (props && props.asset && props.asset.commentCounts.totalVisible) { + return ( + + ); + } + + return ; + }} + /> + ); + } +} + +const enhanced = withLocalStateContainer( + graphql` + fragment CommentsCountQueryLocal on Local { + assetID + assetURL + } + ` +)(CommentsCountQuery); + +export default enhanced; diff --git a/src/core/client/stream/containers/IfLoggedInContainer.tsx b/src/core/client/stream/queries/IfLoggedInQuery.tsx similarity index 80% rename from src/core/client/stream/containers/IfLoggedInContainer.tsx rename to src/core/client/stream/queries/IfLoggedInQuery.tsx index d22b8b60a..19687f631 100644 --- a/src/core/client/stream/containers/IfLoggedInContainer.tsx +++ b/src/core/client/stream/queries/IfLoggedInQuery.tsx @@ -1,14 +1,14 @@ import React, { Component } from "react"; import { graphql, QueryRenderer } from "talk-framework/lib/relay"; -import { IfLoggedInContainerQuery as QueryTypes } from "talk-stream/__generated__/IfLoggedInContainerQuery.graphql"; +import { IfLoggedInQuery as QueryTypes } from "talk-stream/__generated__/IfLoggedInQuery.graphql"; class IfLoggedInContainer extends Component { public render() { return ( query={graphql` - query IfLoggedInContainerQuery { + query IfLoggedInQuery { me { id } diff --git a/src/core/common/config.ts b/src/core/common/config.ts index e02e44558..972ac9b83 100644 --- a/src/core/common/config.ts +++ b/src/core/common/config.ts @@ -37,7 +37,7 @@ const config = convict({ enable_graphiql: { doc: "When true, this will enable the GraphiQL routes", format: Boolean, - default: false, + default: true, env: "ENABLE_GRAPHIQL", arg: "enableGraphiQL", }, From ec539c2dae9aebbf5ab64980a62cd91a6d7a9d1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 8 Oct 2018 15:01:34 -0300 Subject: [PATCH 10/12] Tests updated --- .../__snapshots__/loadMore.spec.tsx.snap | 2 +- .../__snapshots__/permalinkView.spec.tsx.snap | 2 +- .../permalinkViewAssetNotFound.spec.tsx.snap | 37 ++++++++++++++++++- ...permalinkViewCommentNotFound.spec.tsx.snap | 2 +- .../showAllReplies.spec.tsx.snap | 2 +- src/core/client/stream/test/create.tsx | 4 +- 6 files changed, 41 insertions(+), 8 deletions(-) diff --git a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap index 9fe9c83bd..1bf5a0a05 100644 --- a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap @@ -27,7 +27,7 @@ exports[`loads more comments 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap index aaab7f1d2..dc408c24e 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap @@ -158,7 +158,7 @@ exports[`show all comments 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap index 1099468ac..209fbe533 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap @@ -1,7 +1,40 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders permalink view with unknown asset 1`] = ` -
    - Asset not found +
    +
      + + + +
    +
    +
    + Asset not found +
    +
    `; diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap index 18657738a..a38d7cbb8 100644 --- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap @@ -93,7 +93,7 @@ exports[`show all comments 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap index 84fc3d4eb..1043bdc40 100644 --- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap @@ -389,7 +389,7 @@ exports[`show all replies 1`] = ` role="tab" type="button" > - ⁨6⁩ Comments + ⁨2⁩ Comments diff --git a/src/core/client/stream/test/create.tsx b/src/core/client/stream/test/create.tsx index 4f32b73c7..432d9800a 100644 --- a/src/core/client/stream/test/create.tsx +++ b/src/core/client/stream/test/create.tsx @@ -15,7 +15,7 @@ import createEnvironment from "./createEnvironment"; import createFluentBundle from "./createFluentBundle"; import createNodeMock from "./createNodeMock"; -import AppQuery from "../queries/AppQuery"; +import AppContainer from "../containers/AppContainer"; export interface CreateParams { logNetwork?: boolean; @@ -54,7 +54,7 @@ export default function create(params: CreateParams) { const testRenderer = TestRenderer.create( - + , { createNodeMock } ); From b69313a01ec254b5f99c46e353622bd1901f26c1 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 8 Oct 2018 20:52:52 +0200 Subject: [PATCH 11/12] fix: Readd and fix App unittest --- .../client/stream/components/App.spec.tsx | 16 +++++++++ .../__snapshots__/App.spec.tsx.snap | 34 +++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 src/core/client/stream/components/App.spec.tsx create mode 100644 src/core/client/stream/components/__snapshots__/App.spec.tsx.snap diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx new file mode 100644 index 000000000..01c0bec0b --- /dev/null +++ b/src/core/client/stream/components/App.spec.tsx @@ -0,0 +1,16 @@ +import { shallow } from "enzyme"; +import noop from "lodash"; +import React from "react"; + +import { PropTypesOf } from "talk-framework/types"; + +import App from "./App"; + +it("renders comments", () => { + const props: PropTypesOf = { + activeTab: "COMMENTS", + onTabClick: noop, + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap new file mode 100644 index 000000000..f99caa827 --- /dev/null +++ b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders comments 1`] = ` + + + + + + + + + + + + + + +`; From ae63e9a97599451de105ed8837eec32319c13016 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 8 Oct 2018 16:43:54 -0300 Subject: [PATCH 12/12] tiny refactor --- src/core/client/stream/queries/CommentsCountQuery.tsx | 3 ++- src/core/common/config.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/core/client/stream/queries/CommentsCountQuery.tsx b/src/core/client/stream/queries/CommentsCountQuery.tsx index be2a034f7..f589a26fc 100644 --- a/src/core/client/stream/queries/CommentsCountQuery.tsx +++ b/src/core/client/stream/queries/CommentsCountQuery.tsx @@ -18,6 +18,7 @@ interface InnerProps extends PropTypesOf { class CommentsCountQuery extends Component { public render() { const { assetID, assetURL } = this.props.local; + const { local: _, ...rest } = this.props; return ( query={graphql` @@ -42,7 +43,7 @@ class CommentsCountQuery extends Component { return ( ); } diff --git a/src/core/common/config.ts b/src/core/common/config.ts index 972ac9b83..e02e44558 100644 --- a/src/core/common/config.ts +++ b/src/core/common/config.ts @@ -37,7 +37,7 @@ const config = convict({ enable_graphiql: { doc: "When true, this will enable the GraphiQL routes", format: Boolean, - default: true, + default: false, env: "ENABLE_GRAPHIQL", arg: "enableGraphiQL", },