diff --git a/src/core/client/embed/index.html b/src/core/client/embed/index.html index 2eedfea25..297768c75 100644 --- a/src/core/client/embed/index.html +++ b/src/core/client/embed/index.html @@ -10,7 +10,7 @@

Talk 5.0 – Embed Stream

-
+
diff --git a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx index 9eaeb0ce8..421eb7d71 100644 --- a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx +++ b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx @@ -1,8 +1,14 @@ import * as React from "react"; -import { compose, hoistStatics, InferableComponentEnhancer } from "recompose"; +import { + compose, + hoistStatics, + InferableComponentEnhancer, + wrapDisplayName, +} from "recompose"; import { CSelector, CSnapshot, + Disposable, Environment, GraphQLTaggedNode, } from "relay-runtime"; @@ -36,6 +42,12 @@ function withLocalStateContainer( withContext(({ relayEnvironment }) => ({ relayEnvironment })), hoistStatics((BaseComponent: React.ComponentType) => { class LocalStateContainer extends React.Component { + public static displayName = wrapDisplayName( + BaseComponent, + "withLocalStateContainer" + ); + private subscription: Disposable; + constructor(props: Props) { super(props); const fragment = (fragmentSpec as any).data().default; @@ -53,7 +65,10 @@ function withLocalStateContainer( variables: {}, }; const snapshot = props.relayEnvironment.lookup(selector); - props.relayEnvironment.subscribe(snapshot, this.updateSnapshot); + this.subscription = props.relayEnvironment.subscribe( + snapshot, + this.updateSnapshot + ); this.state = { data: snapshot.data, }; @@ -63,6 +78,10 @@ function withLocalStateContainer( this.setState({ data: snapshot.data }); }; + public componentWillUnmount() { + this.subscription.dispose(); + } + public render() { const { relayEnvironment: _, ...rest } = this.props; return ; diff --git a/src/core/client/stream/components/App.css b/src/core/client/stream/components/App.css index 68c4e29c4..3f61a7cae 100644 --- a/src/core/client/stream/components/App.css +++ b/src/core/client/stream/components/App.css @@ -11,4 +11,5 @@ } .root { + width: 100%; } diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx index 9b91a8974..d7dfdc3a7 100644 --- a/src/core/client/stream/components/App.spec.tsx +++ b/src/core/client/stream/components/App.spec.tsx @@ -5,17 +5,17 @@ import { PropTypesOf } from "talk-framework/types"; import App from "./App"; -it("renders correctly", () => { +it("renders stream", () => { const props: PropTypesOf = { - asset: {}, + showPermalinkView: false, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); -it("renders correctly when asset is null", () => { +it("renders permalink view", () => { const props: PropTypesOf = { - asset: null, + showPermalinkView: true, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx index 14659585a..39272cb17 100644 --- a/src/core/client/stream/components/App.tsx +++ b/src/core/client/stream/components/App.tsx @@ -3,23 +3,26 @@ import { StatelessComponent } from "react"; import { Flex } from "talk-ui/components"; -import StreamContainer from "../containers/StreamContainer"; +import PermalinkViewQuery from "../queries/PermalinkViewQuery"; +import StreamQuery from "../queries/StreamQuery"; import * as styles from "./App.css"; export interface AppProps { - asset: {} | null; + showPermalinkView: boolean; } const App: StatelessComponent = props => { - if (props.asset) { - return ( - - - - ); - } - return
Asset not found
; + const view = props.showPermalinkView ? ( + + ) : ( + + ); + return ( + + {view} + + ); }; export default App; diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap index b92b29a8e..c86fc9284 100644 --- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap +++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap @@ -18,7 +18,7 @@ exports[`renders username and body 1`] = `
-
diff --git a/src/core/client/stream/components/PermalinkView.css b/src/core/client/stream/components/PermalinkView.css index 1e9f3ca45..a71a33af8 100644 --- a/src/core/client/stream/components/PermalinkView.css +++ b/src/core/client/stream/components/PermalinkView.css @@ -1,7 +1,5 @@ .root { width: 100%; - max-width: 400px; - margin: calc(0.5 * var(--spacing-unit)) auto; } .button { diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx index 68396ac74..b7ea70370 100644 --- a/src/core/client/stream/components/PermalinkView.tsx +++ b/src/core/client/stream/components/PermalinkView.tsx @@ -20,6 +20,7 @@ const PermalinkView: StatelessComponent = ({
{assetURL && ( +
+
+
+ + Markus + + +
+

+ Joining Too +

+
+
+
+
+
+`; + +exports[`show all comments 1`] = ` +
+
+
+
+