diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx index 64cefb266..8f8553fce 100644 --- a/src/core/client/stream/components/Comment/Comment.tsx +++ b/src/core/client/stream/components/Comment/Comment.tsx @@ -2,7 +2,7 @@ import React from "react"; import { StatelessComponent } from "react"; import { Typography } from "talk-ui/components"; -import Permalink from "../Permalink/Permalink"; +import PermalinkContainer from "../Permalink/PermalinkContainer"; import Timestamp from "./Timestamp"; import TopBar from "./TopBar"; import Username from "./Username"; @@ -26,7 +26,7 @@ const Comment: StatelessComponent = props => { {props.body}
- +
); diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx index f50c5d505..20b9c3a5c 100644 --- a/src/core/client/stream/components/Permalink/Permalink.tsx +++ b/src/core/client/stream/components/Permalink/Permalink.tsx @@ -5,17 +5,18 @@ import PermalinkPopover from "./PermalinkPopover"; interface InnerProps { commentID: string; + origin: string | null; } class Permalink extends React.Component { public render() { - const { commentID } = this.props; + const { commentID, origin } = this.props; return ( ( diff --git a/src/core/client/stream/components/Permalink/PermalinkContainer.tsx b/src/core/client/stream/components/Permalink/PermalinkContainer.tsx new file mode 100644 index 000000000..4364a8e0b --- /dev/null +++ b/src/core/client/stream/components/Permalink/PermalinkContainer.tsx @@ -0,0 +1,25 @@ +import React, { StatelessComponent } from "react"; +import { graphql } from "react-relay"; +import { withLocalStateContainer } from "talk-framework/lib/relay"; +import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql"; + +import Permalink from "./Permalink"; + +interface InnerProps { + local: Local; + commentID: string; +} + +export const PermalinkContainer: StatelessComponent = props => { + return ; +}; + +const enhanced = withLocalStateContainer( + graphql` + fragment PermalinkContainerLocal on Local { + origin + } + ` +)(PermalinkContainer); + +export default enhanced; diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx index a5ff7301f..bb83aeb74 100644 --- a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx +++ b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx @@ -6,7 +6,7 @@ import { Button, Flex, TextField } from "talk-ui/components"; import * as styles from "./PermalinkPopover.css"; interface InnerProps { - commentID: string; + permalinkUrl: string; style?: CSSProperties; forwardRef?: RefHandler; toggleVisibility?: () => any; @@ -35,12 +35,12 @@ class PermalinkPopover extends React.Component { }; public render() { - const { commentID } = this.props; + const { permalinkUrl } = this.props; const { copied } = this.state; return ( - - + + + + )} - ); - } - - if (props.comments) { - return ( -
- - - - {props.comments.map(comment => ( - - - - - ))} - {props.hasMore && ( - - - - )} - -
- ); - } - - return
Error
; + + ); }; export default Stream; diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx index f090ba128..90eb1e1c6 100644 --- a/src/core/client/stream/containers/AppContainer.tsx +++ b/src/core/client/stream/containers/AppContainer.tsx @@ -12,7 +12,6 @@ interface InnerProps { } export const AppContainer: StatelessComponent = props => { - console.log("App query render", props); return ; }; diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx index 0316112d1..bda790209 100644 --- a/src/core/client/stream/containers/CommentContainer.tsx +++ b/src/core/client/stream/containers/CommentContainer.tsx @@ -7,7 +7,7 @@ import { CommentContainer as Data } from "talk-stream/__generated__/CommentConta import Comment from "../components/Comment"; -interface InnerProps { +export interface InnerProps { data: Data; } diff --git a/src/core/client/stream/containers/PermalinkViewContainer.tsx b/src/core/client/stream/containers/PermalinkViewContainer.tsx index 8cd464b81..6e0545383 100644 --- a/src/core/client/stream/containers/PermalinkViewContainer.tsx +++ b/src/core/client/stream/containers/PermalinkViewContainer.tsx @@ -1,32 +1,28 @@ import React, { StatelessComponent } from "react"; import { graphql } from "react-relay"; - import { withFragmentContainer } from "talk-framework/lib/relay"; import { PropTypesOf } from "talk-framework/types"; - +import { PermalinkViewContainerQuery as Data } from "talk-stream/__generated__/PermalinkViewContainerQuery.graphql"; import PermalinkView from "../components/PermalinkView"; -import { PermalinkViewContainer as Data } from "talk-stream/__generated__/PermalinkViewContainer.graphql"; - interface InnerProps { data: Data; } export const PermalinkViewContainer: StatelessComponent = props => { - console.log("App query render", props); return ; }; const enhanced = withFragmentContainer<{ data: Data }>({ data: graphql` - fragment PermalinkViewContainer on Query + fragment PermalinkViewContainerQuery on Query @argumentDefinitions(commentID: { type: "ID!" }) { comment(id: $commentID) { id - body author { username } + body createdAt } } diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts index 2786b3ef2..f43b14406 100644 --- a/src/core/client/stream/local/initLocalState.ts +++ b/src/core/client/stream/local/initLocalState.ts @@ -22,6 +22,12 @@ export default async function initLocalState(environment: Environment) { // Parse query params const query = qs.parse(location.search); + // Saving location host for permalink until we get the asset url - the url now points to the tenant + if (location) { + localRecord.setValue(location.host, "host"); + localRecord.setValue(location.origin, "origin"); + } + if (query.assetID) { localRecord.setValue(query.assetID, "assetID"); } diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql index 59c829490..f7152b2ce 100644 --- a/src/core/client/stream/local/local.graphql +++ b/src/core/client/stream/local/local.graphql @@ -7,6 +7,8 @@ type Local { network: Network! assetID: String commentID: String + host: String + origin: String } extend type Query { diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx index 3e6072c27..1cb252899 100644 --- a/src/core/client/stream/queries/AppQuery.tsx +++ b/src/core/client/stream/queries/AppQuery.tsx @@ -13,26 +13,41 @@ import { } from "talk-stream/__generated__/AppQuery.graphql"; import { AppQueryLocal as Local } from "talk-stream/__generated__/AppQueryLocal.graphql"; +import PermalinkViewContainer from "talk-stream/containers/PermalinkViewContainer"; import AppContainer from "../containers/AppContainer"; -import PermalinkViewQuery from "./PermalinkViewQuery"; - -export const render = ({ error, props }: ReadyState) => { - if (error) { - return
{error.message}
; - } - if (props) { - return ; - } - return
Loading
; -}; interface InnerProps { local: Local; } -const AppQuery: StatelessComponent = props => { - if (props.local.commentID) { - return ; +// TODO (bc) refactor this into another component. break down the needs of each component. +// (careful porting QueryRenderer into another stateless component) + +const AppQuery: StatelessComponent = ({ + local: { commentID, assetID }, +}) => { + if (commentID) { + return ( + + query={graphql` + query AppQuery_PermalinkViewContainer_Query($commentID: ID!) { + ...PermalinkViewContainerQuery @arguments(commentID: $commentID) + } + `} + variables={{ + commentID, + }} + render={({ error, props }: ReadyState) => { + if (error) { + return
{error.message}
; + } + if (props) { + return ; + } + return
Loading
; + }} + /> + ); } return ( @@ -43,9 +58,17 @@ const AppQuery: StatelessComponent = props => { } `} variables={{ - assetID: props.local.assetID, + assetID, + }} + render={({ error, props }: ReadyState) => { + if (error) { + return
{error.message}
; + } + if (props) { + return ; + } + return
Loading
; }} - render={render} /> ); }; @@ -55,6 +78,7 @@ const enhanced = withLocalStateContainer( fragment AppQueryLocal on Local { assetID commentID + origin } ` )(AppQuery); diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/queries/PermalinkViewQuery.tsx deleted file mode 100644 index d48caf00f..000000000 --- a/src/core/client/stream/queries/PermalinkViewQuery.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from "react"; -import { StatelessComponent } from "react"; -import { ReadyState } from "react-relay"; - -import { graphql, QueryRenderer } from "talk-framework/lib/relay"; - -import { - PermalinkViewQueryResponse, - PermalinkViewQueryVariables, -} from "talk-stream/__generated__/PermalinkViewQuery.graphql"; -import { PermalinkViewContainer } from "talk-stream/containers/PermalinkViewContainer"; - -export interface CommentData { - id: string; - author: { - username: string; - } | null; - body: string | null; - createdAt: string; -} - -export const render = ({ - error, - props, -}: ReadyState<{ - comment: CommentData; -}>) => { - if (error) { - return
{error.message}
; - } - if (props) { - return ; - } - return
Loading
; -}; - -interface InnerProps { - commentID: string; -} - -const PermalinkViewQuery: StatelessComponent = props => { - return ( - - query={graphql` - query PermalinkViewQuery($commentID: ID!) { - ...PermalinkViewContainer @arguments(commentID: $commentID) - } - `} - variables={{ - commentID: props.commentID, - }} - render={render} - /> - ); -}; - -export default PermalinkViewQuery;