Add activeTab to local state

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

@@ -5,17 +5,9 @@ import { PropTypesOf } from "talk-framework/types";
 
 import App from "./App";
 
-it("renders stream", () => {
+it("renders comments", () => {
   const props: PropTypesOf<typeof App> = {
-    showPermalinkView: false,
-  };
-  const wrapper = shallow(<App {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
-
-it("renders permalink view", () => {
-  const props: PropTypesOf<typeof App> = {
-    showPermalinkView: true,
+    activeTab: "COMMENTS",
   };
   const wrapper = shallow(<App {...props} />);
   expect(wrapper).toMatchSnapshot();

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

@@ -3,20 +3,22 @@ import { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
 
-import PermalinkViewQuery from "../tabs/comments/queries/PermalinkViewQuery";
-import StreamQuery from "../tabs/comments/queries/StreamQuery";
+import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer";
 import * as styles from "./App.css";
 
 export interface AppProps {
-  showPermalinkView: boolean;
+  activeTab: "COMMENTS" | "%future added value";
 }
 
 const App: StatelessComponent<AppProps> = props => {
-  const view = props.showPermalinkView ? (
-    <PermalinkViewQuery />
-  ) : (
-    <StreamQuery />
-  );
+  let view: React.ReactElement<any>;
+  switch (props.activeTab) {
+    case "COMMENTS":
+      view = <CommentsPaneContainer />;
+      break;
+    default:
+      throw new Error(`Unknown tab ${props.activeTab}`);
+  }
   return (
     <Flex justifyContent="center" className={styles.root}>
       {view}

src/core/client/stream/components/__snapshots__/App.spec.tsx.snap

@@ -1,19 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders permalink view 1`] = `
+exports[`renders comments 1`] = `
 <withPropsOnChange(Flex)
   className="App-root"
   justifyContent="center"
 >
-  <withContext(withLocalStateContainer(PermalinkViewQuery)) />
-</withPropsOnChange(Flex)>
-`;
-
-exports[`renders stream 1`] = `
-<withPropsOnChange(Flex)
-  className="App-root"
-  justifyContent="center"
->
-  <withContext(withLocalStateContainer(StreamQuery)) />
+  <withContext(withLocalStateContainer(CommentsPaneContainer)) />
 </withPropsOnChange(Flex)>
 `;

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

@@ -11,15 +11,15 @@ interface InnerProps {
 }
 
 const AppContainer: StatelessComponent<InnerProps> = ({
-  local: { commentID },
+  local: { activeTab },
 }) => {
-  return <App showPermalinkView={!!commentID} />;
+  return <App activeTab={activeTab} />;
 };
 
 const enhanced = withLocalStateContainer(
   graphql`
     fragment AppContainerLocal on Local {
-      commentID
+      activeTab
     }
   `
 )(AppContainer);

src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap

@@ -18,7 +18,8 @@ exports[`init local state 1`] = `
     },
     \\"authPopup\\": {
       \\"__ref\\": \\"client:root.local.authPopup\\"
-    }
+    },
+    \\"activeTab\\": \\"COMMENTS\\"
   },
   \\"client:root.local.network\\": {
     \\"__id\\": \\"client:root.local.network\\",

src/core/client/stream/local/initLocalState.ts

@@ -75,5 +75,8 @@ export default async function initLocalState(
     authPopupRecord.setValue(false, "focus");
     authPopupRecord.setValue("", "href");
     localRecord.setLinkedRecord(authPopupRecord, "authPopup");
+
+    // Set active tab
+    localRecord.setValue("COMMENTS", "activeTab");
   });
 }

src/core/client/stream/local/local.graphql

@@ -9,6 +9,10 @@ enum View {
   FORGOT_PASSWORD
 }
 
+enum Tab {
+  COMMENTS
+}
+
 type AuthPopup {
   open: Boolean!
   focus: Boolean!
@@ -26,6 +30,7 @@ type Local {
   commentID: String
   authPopup: AuthPopup!
   authToken: String
+  activeTab: Tab!
 }
 
 extend type Query {

src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx

@@ -0,0 +1,22 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import CommentsPane from "./CommentsPane";
+
+it("renders stream", () => {
+  const props: PropTypesOf<typeof CommentsPane> = {
+    showPermalinkView: false,
+  };
+  const wrapper = shallow(<CommentsPane {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders permalink view", () => {
+  const props: PropTypesOf<typeof CommentsPane> = {
+    showPermalinkView: true,
+  };
+  const wrapper = shallow(<CommentsPane {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/tabs/comments/components/CommentsPane.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import PermalinkViewQuery from "../queries/PermalinkViewQuery";
+import StreamQuery from "../queries/StreamQuery";
+
+export interface CommentsPaneProps {
+  showPermalinkView: boolean;
+}
+
+const CommentsPane: StatelessComponent<CommentsPaneProps> = props => {
+  return props.showPermalinkView ? <PermalinkViewQuery /> : <StreamQuery />;
+};
+
+export default CommentsPane;

src/core/client/stream/tabs/comments/components/__snapshots__/CommentsPane.spec.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders permalink view 1`] = `<withContext(withLocalStateContainer(PermalinkViewQuery)) />`;
+
+exports[`renders stream 1`] = `<withContext(withLocalStateContainer(StreamQuery)) />`;

src/core/client/stream/tabs/comments/containers/CommentsPaneContainer.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+import { CommentsPaneContainerLocal as Local } from "talk-stream/__generated__/CommentsPaneContainerLocal.graphql";
+
+import CommentsPane from "../components/CommentsPane";
+
+interface InnerProps {
+  local: Local;
+}
+
+const CommentsPaneContainer: StatelessComponent<InnerProps> = ({
+  local: { commentID },
+}) => {
+  return <CommentsPane showPermalinkView={!!commentID} />;
+};
+
+const enhanced = withLocalStateContainer(
+  graphql`
+    fragment CommentsPaneContainerLocal on Local {
+      commentID
+    }
+  `
+)(CommentsPaneContainer);
+
+export default enhanced;

src/core/client/stream/test/comments/create.ts

@@ -0,0 +1,13 @@
+import createTopLevel, { CreateParams } from "../create";
+
+export default function create(params: CreateParams) {
+  return createTopLevel({
+    ...params,
+    initLocalState: (localRecord, source, environment) => {
+      if (params.initLocalState) {
+        localRecord.setValue("COMMENTS", "activeTab");
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+}

src/core/client/stream/test/comments/editComment.spec.tsx

@@ -3,8 +3,8 @@ import timekeeper from "timekeeper";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, users } from "../fixtures";
+import create from "./create";
 
 function createTestRenderer() {
   const resolvers = {

src/core/client/stream/test/comments/loadMore.spec.tsx

@@ -3,8 +3,8 @@ import { ReactTestRenderer } from "react-test-renderer";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, comments } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

src/core/client/stream/test/comments/permalinkView.spec.tsx

@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, comments } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx

@@ -2,7 +2,7 @@ import { ReactTestRenderer } from "react-test-renderer";
 
 import { timeout } from "talk-common/utils";
 
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx

@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, comments } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

src/core/client/stream/test/comments/postComment.spec.tsx

@@ -4,8 +4,8 @@ import timekeeper from "timekeeper";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, users } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

src/core/client/stream/test/comments/postReply.spec.tsx

@@ -4,8 +4,8 @@ import timekeeper from "timekeeper";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, users } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

src/core/client/stream/test/comments/renderReplies.spec.tsx

@@ -3,8 +3,8 @@ import { ReactTestRenderer } from "react-test-renderer";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assetWithReplies } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

src/core/client/stream/test/comments/renderStream.spec.tsx

@@ -3,8 +3,8 @@ import { ReactTestRenderer } from "react-test-renderer";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

src/core/client/stream/test/comments/showAllReplies.spec.tsx

@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import create from "../create";
 import { assets, comments } from "../fixtures";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {

src/core/client/stream/test/create.tsx

@@ -16,7 +16,7 @@ import createEnvironment from "./createEnvironment";
 import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
 
-interface CreateParams {
+export interface CreateParams {
   logNetwork?: boolean;
   resolvers: IResolvers<any, any>;
   initLocalState?: (