Refactor

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<typeof Tab> {
-  commentCount: number;
-}
-
-const CommentsTab: StatelessComponent<CommentsTabProps> = props => (
-  <Localized id="general-app-commentsTab" $commentCount={props.commentCount}>
-    <Tab {...props}>{"{$commentCount} Comments"}</Tab>
-  </Localized>
+const CommentsTab: StatelessComponent<PropTypesOf<typeof Tab>> = props => (
+  <CommentsCountQuery {...props} />
 );
 
 const MyProfileTab: StatelessComponent<PropTypesOf<typeof Tab>> = props => (
-  <IfLoggedInContainer>
+  <IfLoggedInQuery>
     <Localized id="general-app-myProfileTab">
       <Tab {...props}>My Profile</Tab>
     </Localized>
-  </IfLoggedInContainer>
+  </IfLoggedInQuery>
 );
 
 const App: StatelessComponent<AppProps> = props => {
   return (
     <HorizontalGutter className={styles.root}>
       <TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
-        <CommentsTab tabId="COMMENTS" commentCount={props.commentCount} />
+        <CommentsTab tabId="COMMENTS" />
         <MyProfileTab tabId="PROFILE" />
       </TabBar>
       <TabContent activeTab={props.activeTab} className={styles.tabContent}>

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<typeof Tab> {
+  commentCount: number;
+}
+
+class CommentCountTab extends Component<CommentCountTabProps> {
+  public render() {
+    const { commentCount, ...props } = this.props;
+    return (
+      <Localized id="general-app-commentsTab" $commentCount={commentCount}>
+        <Tab {...props}>{"{$commentCount} Comments"}</Tab>
+      </Localized>
+    );
+  }
+}
+
+export default CommentCountTab;

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<InnerProps> {
@@ -25,37 +23,20 @@ class AppContainer extends React.Component<InnerProps> {
   public render() {
     const {
       local: { activeTab },
-      asset,
     } = this.props;
 
-    return (
-      <App
-        activeTab={activeTab}
-        onTabClick={this.handleSetActiveTab}
-        commentCount={asset.commentCounts.totalVisible}
-      />
-    );
+    return <App activeTab={activeTab} onTabClick={this.handleSetActiveTab} />;
   }
 }
 
 const enhanced = withSetActiveTabMutation(
-  withFragmentContainer<InnerProps>({
-    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;

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() {
     <ManagedTalkContextProvider>
       <>
         {listeners}
-        <AppQuery />
+        <AppContainer />
       </>
     </ManagedTalkContextProvider>
   );

src/core/client/stream/queries/AppQuery.tsx

@@ -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<QueryTypes["response"]>) => {
-  if (error) {
-    return <div>{error.message}</div>;
-  }
-
-  if (props) {
-    if (!props.asset) {
-      return (
-        <Localized id="comments-streamQuery-assetNotFound">
-          <div>Asset not found</div>
-        </Localized>
-      );
-    }
-
-    return <AppContainer asset={props.asset} />;
-  }
-
-  return <Spinner />;
-};
-
-const AppQuery: StatelessComponent<InnerProps> = ({
-  local: { assetID, assetURL },
-}) => (
-  <QueryRenderer<QueryTypes>
-    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;

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<typeof Tab> {
+  local: Local;
+}
+
+class CommentsCountQuery extends Component<InnerProps> {
+  public render() {
+    const { assetID, assetURL } = this.props.local;
+    return (
+      <QueryRenderer<QueryTypes>
+        query={graphql`
+          query CommentsCountQuery($assetID: ID, $assetURL: String) {
+            asset(id: $assetID, url: $assetURL) {
+              commentCounts {
+                totalVisible
+              }
+            }
+          }
+        `}
+        variables={{
+          assetID,
+          assetURL,
+        }}
+        render={({ error, props }) => {
+          if (error) {
+            return <div>{error.message}</div>;
+          }
+
+          if (props && props.asset && props.asset.commentCounts.totalVisible) {
+            return (
+              <CommentCountTab
+                commentCount={props.asset.commentCounts.totalVisible}
+                {...this.props}
+              />
+            );
+          }
+
+          return <Spinner />;
+        }}
+      />
+    );
+  }
+}
+
+const enhanced = withLocalStateContainer(
+  graphql`
+    fragment CommentsCountQueryLocal on Local {
+      assetID
+      assetURL
+    }
+  `
+)(CommentsCountQuery);
+
+export default enhanced;

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 (
       <QueryRenderer<QueryTypes>
         query={graphql`
-          query IfLoggedInContainerQuery {
+          query IfLoggedInQuery {
             me {
               id
             }

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