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