diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx index 8913855f4..cb084e4e5 100644 --- a/src/core/client/stream/components/App.tsx +++ b/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 = props => { return ( - props.onActiveTab({ tab })} - > + Comments My Profile diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx index e55048586..e3e3918e5 100644 --- a/src/core/client/stream/containers/AppContainer.tsx +++ b/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 = ({ - local: { activeTab }, - setActiveTab, -}) => { - return ; -}; +class AppContainer extends React.Component { + private handleSetActiveTab = (tab: SetActiveTabInput["tab"]) => { + this.props.setActiveTab({ tab }); + }; + + public render() { + const { + local: { activeTab }, + } = this.props; + + return ; + } +} const enhanced = withLocalStateContainer( graphql` diff --git a/src/core/client/stream/mutations/SetActiveTabMutation.ts b/src/core/client/stream/mutations/SetActiveTabMutation.ts index a15eebc1a..e7e742042 100644 --- a/src/core/client/stream/mutations/SetActiveTabMutation.ts +++ b/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; diff --git a/src/core/client/stream/mutations/index.ts b/src/core/client/stream/mutations/index.ts index 5b39e4e78..3f83af22d 100644 --- a/src/core/client/stream/mutations/index.ts +++ b/src/core/client/stream/mutations/index.ts @@ -27,6 +27,7 @@ export { SetAuthPopupStateMutation, } from "./SetAuthPopupStateMutation"; export { + SetActiveTabInput, withSetActiveTabMutation, SetActiveTabMutation, } from "./SetActiveTabMutation"; diff --git a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx b/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx index 228d48b4c..23855b1ce 100644 --- a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx +++ b/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 = props => { - const comments = props.me.comments.edges.map(edge => edge.node); return ( Comment History - {comments.map(comment => ( + {props.comments.map(comment => ( edge.node); return ( );