Presentational components, events, tabs and more

src/core/client/stream/components/App.tsx

@@ -9,24 +9,19 @@ import {
   TabPane,
 } from "talk-ui/components";
 
-import { SetActiveTabMutation } from "talk-stream/mutations";
-
 import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer";
 import ProfileQuery from "../tabs/profile/queries/ProfileQuery";
 import * as styles from "./App.css";
 
 export interface AppProps {
-  activeTab: "COMMENTS" | "PROFILE" | "%future added value" | string;
-  onActiveTab: SetActiveTabMutation;
+  activeTab: "COMMENTS" | "PROFILE" | "%future added value";
+  onTabClick: (tab: string) => void;
 }
 
 const App: StatelessComponent<AppProps> = props => {
   return (
     <HorizontalGutter className={styles.root}>
-      <TabBar
-        activeTab={props.activeTab}
-        onTabClick={tab => props.onActiveTab({ tab })}
-      >
+      <TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
         <Tab tabId="COMMENTS">Comments</Tab>
         <Tab tabId="PROFILE">My Profile</Tab>
       </TabBar>

src/core/client/stream/containers/AppContainer.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React from "react";
 
 import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
 import { AppContainerLocal as Local } from "talk-stream/__generated__/AppContainerLocal.graphql";
 import {
+  SetActiveTabInput,
   SetActiveTabMutation,
   withSetActiveTabMutation,
 } from "talk-stream/mutations";
@@ -15,12 +15,19 @@ interface InnerProps {
   setActiveTab: SetActiveTabMutation;
 }
 
-const AppContainer: StatelessComponent<InnerProps> = ({
-  local: { activeTab },
-  setActiveTab,
-}) => {
-  return <App activeTab={activeTab} onActiveTab={setActiveTab} />;
-};
+class AppContainer extends React.Component<InnerProps> {
+  private handleSetActiveTab = (tab: SetActiveTabInput["tab"]) => {
+    this.props.setActiveTab({ tab });
+  };
+
+  public render() {
+    const {
+      local: { activeTab },
+    } = this.props;
+
+    return <App activeTab={activeTab} onTabClick={this.handleSetActiveTab} />;
+  }
+}
 
 const enhanced = withLocalStateContainer(
   graphql`

src/core/client/stream/mutations/SetActiveTabMutation.ts

@@ -3,7 +3,7 @@ import { commitLocalUpdate, Environment } from "relay-runtime";
 import { createMutationContainer, LOCAL_ID } from "talk-framework/lib/relay";
 
 export interface SetActiveTabInput {
-  tab: "COMMENTS" | "PROFILE" | "%future added value" | string;
+  tab: "COMMENTS" | "PROFILE" | "%future added value";
 }
 
 export type SetActiveTabMutation = (input: SetActiveTabInput) => Promise<void>;

src/core/client/stream/mutations/index.ts

@@ -27,6 +27,7 @@ export {
   SetAuthPopupStateMutation,
 } from "./SetAuthPopupStateMutation";
 export {
+  SetActiveTabInput,
   withSetActiveTabMutation,
   SetActiveTabMutation,
 } from "./SetActiveTabMutation";

src/core/client/stream/tabs/profile/components/CommentsHistory.tsx

@@ -4,35 +4,28 @@ import { StatelessComponent } from "react";
 import { HorizontalGutter, Typography } from "talk-ui/components";
 import HistoryComment from "./HistoryComment";
 
-interface Me {
-  readonly comments: {
-    readonly edges: ReadonlyArray<{
-      readonly node: {
-        readonly id: string;
-        readonly body: string | null;
-        readonly createdAt: any;
-        readonly replyCount: number | null;
-        readonly asset: {
-          readonly title: string | null;
-        };
-      };
-    }>;
+interface Comment {
+  readonly id: string;
+  readonly body: string | null;
+  readonly createdAt: any;
+  readonly replyCount: number | null;
+  readonly asset: {
+    readonly title: string | null;
   };
 }
 
 interface CommentsHistoryProps {
   onGoToConversation: (id: string) => void;
-  me: Me;
+  comments: Comment[];
 }
 
 const CommentsHistory: StatelessComponent<CommentsHistoryProps> = props => {
-  const comments = props.me.comments.edges.map(edge => edge.node);
   return (
     <HorizontalGutter>
       <Localized id="profile-historyComment-commentHistory">
         <Typography variant="heading3">Comment History</Typography>
       </Localized>
-      {comments.map(comment => (
+      {props.comments.map(comment => (
         <HistoryComment
           key={comment.id}
           comment={comment}

src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx

@@ -20,9 +20,10 @@ export class CommentsHistoryContainer extends React.Component<
     this.props.setCommentID({ id });
   };
   public render() {
+    const comments = this.props.me.comments.edges.map(edge => edge.node);
     return (
       <CommentsHistory
-        me={this.props.me}
+        comments={comments}
         onGoToConversation={this.onGoToConversation}
       />
     );