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", },