diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx index 28713f4e5..14043aa3b 100644 --- a/src/core/client/stream/components/App.tsx +++ b/src/core/client/stream/components/App.tsx @@ -1,3 +1,4 @@ +import { Localized } from "fluent-react/compat"; import * as React from "react"; import { StatelessComponent } from "react"; @@ -9,6 +10,7 @@ import { TabPane, } from "talk-ui/components"; +import { PropTypesOf } from "talk-ui/types"; import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer"; import ProfileQuery from "../tabs/profile/queries/ProfileQuery"; import * as styles from "./App.css"; @@ -20,12 +22,24 @@ export interface AppProps { onTabClick: (tab: TabValue) => void; } +const CommentsTab: StatelessComponent> = props => ( + + Comments + +); + +const MyProfileTab: StatelessComponent> = props => ( + + My Profile + +); + const App: StatelessComponent = props => { return ( - Comments - My Profile + + diff --git a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx b/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx index 23855b1ce..90cec49ff 100644 --- a/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx +++ b/src/core/client/stream/tabs/profile/components/CommentsHistory.tsx @@ -5,17 +5,18 @@ import { HorizontalGutter, Typography } from "talk-ui/components"; import HistoryComment from "./HistoryComment"; interface Comment { - readonly id: string; - readonly body: string | null; - readonly createdAt: any; - readonly replyCount: number | null; - readonly asset: { - readonly title: string | null; + id: string; + body: string | null; + createdAt: any; + replyCount: number | null; + asset: { + title: string | null; }; + conversationURL: string; + onGotoConversation: (e: React.MouseEvent) => void; } interface CommentsHistoryProps { - onGoToConversation: (id: string) => void; comments: Comment[]; } @@ -26,11 +27,7 @@ const CommentsHistory: StatelessComponent = props => { Comment History {props.comments.map(comment => ( - props.onGoToConversation(comment.id)} - /> + ))} ); diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx index c806a193b..920a5f380 100644 --- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx +++ b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx @@ -3,25 +3,24 @@ import * as React from "react"; import { StatelessComponent } from "react"; import Timestamp from "talk-stream/components/Timestamp"; import { - BaseButton, - ButtonIcon, + Button, Flex, HorizontalGutter, + Icon, Typography, } from "talk-ui/components"; import HTMLContent from "../../../components/HTMLContent"; import * as styles from "./HistoryComment.css"; export interface HistoryCommentProps { - comment: { - body: string | null; - createdAt: string; - replyCount: number | null; - asset: { - title: string | null; - }; + body: string | null; + createdAt: string; + replyCount: number | null; + asset: { + title: string | null; }; - onGoToConversation: () => void; + conversationURL: string; + onGotoConversation: (e: React.MouseEvent) => void; } const HistoryComment: StatelessComponent = props => { @@ -29,60 +28,50 @@ const HistoryComment: StatelessComponent = props => { - {props.comment.body && ( - - {props.comment.body} - + {props.body && ( + {props.body} )} - launch - - - View Conversation - - + - schedule - {props.comment.createdAt} + schedule + {props.createdAt} - {!!props.comment.replyCount && ( + {!!props.replyCount && ( - reply + reply {"Replies {$replyCount}"} )} - - - {"Story: {$title}"} - - + + {"Story: {$title}"} + ); }; diff --git a/src/core/client/stream/tabs/profile/components/Profile.tsx b/src/core/client/stream/tabs/profile/components/Profile.tsx index ff2450690..04e448a23 100644 --- a/src/core/client/stream/tabs/profile/components/Profile.tsx +++ b/src/core/client/stream/tabs/profile/components/Profile.tsx @@ -6,17 +6,18 @@ import { HorizontalGutter } from "talk-ui/components"; import CommentsHistoryContainer from "../containers/CommentsHistoryContainer"; export interface ProfileProps { - me: - | PropTypesOf["me"] & - PropTypesOf["me"] - | null; + asset: PropTypesOf["asset"]; + me: PropTypesOf["me"] & + PropTypesOf["me"]; } const Profile: StatelessComponent = props => { return ( - {props.me && } + {props.me && ( + + )} ); }; diff --git a/src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx b/src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx index ee9a04f96..3056a488b 100644 --- a/src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx +++ b/src/core/client/stream/tabs/profile/containers/CommentsHistoryContainer.tsx @@ -1,6 +1,9 @@ import React from "react"; import { graphql } from "react-relay"; + +import { getURLWithCommentID } from "talk-framework/helpers"; import { withFragmentContainer } from "talk-framework/lib/relay"; +import { CommentsHistoryContainer_asset as AssetData } from "talk-stream/__generated__/CommentsHistoryContainer_asset.graphql"; import { CommentsHistoryContainer_me as CommentsData } from "talk-stream/__generated__/CommentsHistoryContainer_me.graphql"; import { SetCommentIDMutation, @@ -11,6 +14,7 @@ import CommentsHistory from "../components/CommentsHistory"; interface CommentsHistoryContainerProps { setCommentID: SetCommentIDMutation; me: CommentsData; + asset: AssetData; } export class CommentsHistoryContainer extends React.Component< @@ -20,18 +24,27 @@ export class CommentsHistoryContainer extends React.Component< this.props.setCommentID({ id }); }; public render() { - const comments = this.props.me.comments.edges.map(edge => edge.node); - return ( - - ); + const comments = this.props.me.comments.edges.map(edge => ({ + ...edge.node, + conversationURL: getURLWithCommentID(edge.node.asset.url, edge.node.id), + onGotoConversation: (e: React.MouseEvent) => { + if (this.props.asset.id === edge.node.asset.id) { + this.onGoToConversation(edge.node.id); + e.preventDefault(); + } + }, + })); + return ; } } const enhanced = withSetCommentIDMutation( withFragmentContainer({ + asset: graphql` + fragment CommentsHistoryContainer_asset on Asset { + id + } + `, me: graphql` fragment CommentsHistoryContainer_me on User { comments { @@ -42,7 +55,9 @@ const enhanced = withSetCommentIDMutation( createdAt replyCount asset { + id title + url } } } diff --git a/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx index 3b91aec77..716ce75bc 100644 --- a/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx +++ b/src/core/client/stream/tabs/profile/containers/ProfileContainer.tsx @@ -2,23 +2,27 @@ import React from "react"; import { graphql } from "react-relay"; import { withFragmentContainer } from "talk-framework/lib/relay"; +import { ProfileContainer_asset as AssetData } from "talk-stream/__generated__/ProfileContainer_asset.graphql"; import { ProfileContainer_me as MeData } from "talk-stream/__generated__/ProfileContainer_me.graphql"; import Profile from "../components/Profile"; interface ProfileContainerProps { - me: MeData | null; + me: MeData; + asset: AssetData; } export class StreamContainer extends React.Component { public render() { - if (this.props.me) { - return ; - } - return null; + return ; } } const enhanced = withFragmentContainer({ + asset: graphql` + fragment ProfileContainer_asset on Asset { + ...CommentsHistoryContainer_asset + } + `, me: graphql` fragment ProfileContainer_me on User { ...UserBoxContainer_me diff --git a/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx b/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx index 7662343e1..e98212f77 100644 --- a/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx +++ b/src/core/client/stream/tabs/profile/queries/ProfileQuery.tsx @@ -1,10 +1,22 @@ +import { Localized } from "fluent-react/compat"; import React, { StatelessComponent } from "react"; import { ReadyState } from "react-relay"; -import { graphql, QueryRenderer } from "talk-framework/lib/relay"; + +import { + graphql, + QueryRenderer, + withLocalStateContainer, +} from "talk-framework/lib/relay"; import { ProfileQuery as QueryTypes } from "talk-stream/__generated__/ProfileQuery.graphql"; +import { ProfileQueryLocal as Local } from "talk-stream/__generated__/ProfileQueryLocal.graphql"; import { Spinner } from "talk-ui/components"; + import ProfileContainer from "../containers/ProfileContainer"; +interface InnerProps { + local: Local; +} + export const render = ({ error, props, @@ -15,26 +27,54 @@ export const render = ({ if (props) { if (!props.me) { - return
Error loading profile
; + return ( + +
Error loading profile
+
+ ); } - return ; + if (!props.asset) { + return ( + +
Asset not found
+
+ ); + } + return ; } return ; }; -const ProfileQuery: StatelessComponent = () => ( +const ProfileQuery: StatelessComponent = ({ + local: { assetID, assetURL }, +}) => ( query={graphql` - query ProfileQuery { + query ProfileQuery($assetID: ID, $assetURL: String) { + asset(id: $assetID, url: $assetURL) { + ...ProfileContainer_asset + } me { ...ProfileContainer_me } } `} - variables={{}} + variables={{ + assetID, + assetURL, + }} render={render} /> ); -export default ProfileQuery; +const enhanced = withLocalStateContainer( + graphql` + fragment ProfileQueryLocal on Local { + assetID + assetURL + } + ` +)(ProfileQuery); + +export default enhanced; diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl index cb13d23b5..81a9e6b9f 100644 --- a/src/locales/en-US/stream.ftl +++ b/src/locales/en-US/stream.ftl @@ -12,6 +12,9 @@ general-userBoxAuthenticated-signedInAs = general-userBoxAuthenticated-notYou = Not you? +general-app-commentsTab = Comments +general-app-myProfileTab = My Profile + ## Comments Tab comments-streamQuery-assetNotFound = Asset not found @@ -75,4 +78,5 @@ profile-historyComment-viewConversation = View Conversation profile-historyComment-replies = Replies {$replyCount} profile-historyComment-commentHistory = Comment History profile-historyComment-story = Story: {$title} - +profile-historyComment-errorLoadingProfile = Error loading profile +profile-historyComment-assetNotFound = Asset not found