Merge branch 'next-edit' of github.com:coralproject/talk into next-profile

* 'next-edit' of github.com:coralproject/talk:
  Implement SetActiveTabMutation
  Change translation strings
  Add activeTab to local state
  Move files into tab structure

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 "../queries/PermalinkViewQuery";
-import StreamQuery from "../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/UserBoxAuthenticated.tsx

@@ -20,7 +20,7 @@ const UserBoxAuthenticated: StatelessComponent<
   return (
     <Flex itemGutter="half" wrap>
       <Localized
-        id="comments-userBoxAuthenticated-signedInAs"
+        id="general-userBoxAuthenticated-signedInAs"
         username={<Username />}
       >
         <Typography variant="bodyCopy" container="div">
@@ -28,7 +28,7 @@ const UserBoxAuthenticated: StatelessComponent<
         </Typography>
       </Localized>
       <Localized
-        id="comments-userBoxAuthenticated-notYou"
+        id="general-userBoxAuthenticated-notYou"
         button={
           <Button
             color="primary"

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

@@ -17,7 +17,7 @@ const UserBoxUnauthenticated: StatelessComponent<
   return (
     <Flex itemGutter alignItems="center">
       <MatchMedia gteWidth="sm">
-        <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
+        <Localized id="general-userBoxUnauthenticated-joinTheConversation">
           <Typography
             className={styles.joinText}
             variant="bodyCopyBold"
@@ -30,7 +30,7 @@ const UserBoxUnauthenticated: StatelessComponent<
           |
         </Typography>
       </MatchMedia>
-      <Localized id="comments-userBoxUnauthenticated-signIn">
+      <Localized id="general-userBoxUnauthenticated-signIn">
         <Button
           color="primary"
           size="small"
@@ -40,7 +40,7 @@ const UserBoxUnauthenticated: StatelessComponent<
           Sign in
         </Button>
       </Localized>
-      <Localized id="comments-userBoxUnauthenticated-register">
+      <Localized id="general-userBoxUnauthenticated-register">
         <Button
           color="primary"
           size="small"

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/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`renders correctly 1`] = `
   wrap={true}
 >
   <Localized
-    id="comments-userBoxAuthenticated-signedInAs"
+    id="general-userBoxAuthenticated-signedInAs"
     username={<Username />}
   >
     <withPropsOnChange(Typography)
@@ -25,7 +25,7 @@ exports[`renders correctly 1`] = `
         variant="underlined"
       />
     }
-    id="comments-userBoxAuthenticated-notYou"
+    id="general-userBoxAuthenticated-notYou"
   >
     <withPropsOnChange(Typography)
       container={[Function]}

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

@@ -9,7 +9,7 @@ exports[`renders correctly 1`] = `
     gteWidth="sm"
   >
     <Localized
-      id="comments-userBoxUnauthenticated-joinTheConversation"
+      id="general-userBoxUnauthenticated-joinTheConversation"
     >
       <withPropsOnChange(Typography)
         className="UserBoxUnauthenticated-joinText"
@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
     </withPropsOnChange(Typography)>
   </MatchMediaWithContext>
   <Localized
-    id="comments-userBoxUnauthenticated-signIn"
+    id="general-userBoxUnauthenticated-signIn"
   >
     <withPropsOnChange(Button)
       color="primary"
@@ -39,7 +39,7 @@ exports[`renders correctly 1`] = `
     </withPropsOnChange(Button)>
   </Localized>
   <Localized
-    id="comments-userBoxUnauthenticated-register"
+    id="general-userBoxUnauthenticated-register"
   >
     <withPropsOnChange(Button)
       color="primary"

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/mutations/SetActiveTabMutation.spec.ts

@@ -0,0 +1,21 @@
+import { Environment, RecordSource } from "relay-runtime";
+
+import { LOCAL_ID } from "talk-framework/lib/relay";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+import { commit } from "./SetActiveTabMutation";
+
+let environment: Environment;
+const source: RecordSource = new RecordSource();
+
+beforeAll(() => {
+  environment = createRelayEnvironment({
+    source,
+  });
+});
+
+it("Sets activeTab", () => {
+  const tab = "COMMENTS";
+  commit(environment, { tab });
+  expect(source.get(LOCAL_ID)!.activeTab).toEqual(tab);
+});

src/core/client/stream/mutations/SetActiveTabMutation.ts

@@ -0,0 +1,24 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import { createMutationContainer, LOCAL_ID } from "talk-framework/lib/relay";
+
+export interface SetActiveTabInput {
+  tab: "COMMENTS";
+}
+
+export type SetActiveTabMutation = (input: SetActiveTabInput) => Promise<void>;
+
+export async function commit(
+  environment: Environment,
+  input: SetActiveTabInput
+) {
+  return commitLocalUpdate(environment, store => {
+    const record = store.get(LOCAL_ID)!;
+    record.setValue(input.tab, "activeTab");
+  });
+}
+
+export const withSetActiveTabMutation = createMutationContainer(
+  "setActiveTab",
+  commit
+);

src/core/client/stream/mutations/index.ts

@@ -26,3 +26,7 @@ export {
   withSetAuthPopupStateMutation,
   SetAuthPopupStateMutation,
 } from "./SetAuthPopupStateMutation";
+export {
+  withSetActiveTabMutation,
+  SetActiveTabMutation,
+} from "./SetActiveTabMutation";

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

@@ -1,11 +1,11 @@
 import React, { StatelessComponent } from "react";
 
+import HTMLContent from "talk-stream/components/HTMLContent";
+import Timestamp from "talk-stream/components/Timestamp";
 import { Flex } from "talk-ui/components";
 
 import * as styles from "./Comment.css";
 import EditedMarker from "./EditedMarker";
-import HTMLContent from "./HTMLContent";
-import Timestamp from "./Timestamp";
 import TopBarLeft from "./TopBarLeft";
 import Username from "./Username";
 

src/core/client/stream/tabs/comments/components/Comment/index.ts

@@ -1,4 +1,3 @@
 export { default, default as IndentedComment } from "./IndentedComment";
 export { default as TopBarLeft } from "./TopBarLeft";
 export { default as Username } from "./Username";
-export { default as Timestamp } from "./Timestamp";

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/EditCommentForm.tsx

@@ -10,6 +10,7 @@ import { Field, Form } from "react-final-form";
 
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
+import Timestamp from "talk-stream/components/Timestamp";
 import {
   AriaInfo,
   Button,
@@ -22,7 +23,7 @@ import {
   ValidationMessage,
 } from "talk-ui/components";
 
-import { Timestamp, TopBarLeft, Username } from "./Comment";
+import { TopBarLeft, Username } from "./Comment";
 import RTE from "./RTE";
 
 interface FormProps {

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

@@ -3,12 +3,12 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
+import UserBoxContainer from "talk-stream/containers/UserBoxContainer";
 import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
-import UserBoxContainer from "../containers/UserBoxContainer";
 import PostCommentFormFake from "./PostCommentFormFake";
 import * as styles from "./Stream.css";
 

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/tabs/comments/containers/EditCommentFormContainer.tsx

@@ -9,11 +9,14 @@ import { withFragmentContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
 
 import { EditCommentFormContainer_comment as CommentData } from "talk-stream/__generated__/EditCommentFormContainer_comment.graphql";
+import {
+  EditCommentMutation,
+  withEditCommentMutation,
+} from "talk-stream/mutations";
 
 import EditCommentForm, {
   EditCommentFormProps,
 } from "../components/EditCommentForm";
-import { EditCommentMutation, withEditCommentMutation } from "../mutations";
 
 interface InnerProps {
   editComment: EditCommentMutation;

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

@@ -5,10 +5,13 @@ import { BadUserInputError } from "talk-framework/lib/errors";
 import { PromisifiedStorage } from "talk-framework/lib/storage";
 import { PropTypesOf } from "talk-framework/types";
 
+import {
+  CreateCommentMutation,
+  withCreateCommentMutation,
+} from "talk-stream/mutations";
 import PostCommentForm, {
   PostCommentFormProps,
 } from "../components/PostCommentForm";
-import { CreateCommentMutation, withCreateCommentMutation } from "../mutations";
 
 interface InnerProps {
   createComment: CreateCommentMutation;

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

@@ -9,11 +9,14 @@ import { PromisifiedStorage } from "talk-framework/lib/storage";
 import { PropTypesOf } from "talk-framework/types";
 import { ReplyCommentFormContainer_asset as AssetData } from "talk-stream/__generated__/ReplyCommentFormContainer_asset.graphql";
 import { ReplyCommentFormContainer_comment as CommentData } from "talk-stream/__generated__/ReplyCommentFormContainer_comment.graphql";
+import {
+  CreateCommentMutation,
+  withCreateCommentMutation,
+} from "talk-stream/mutations";
 
 import ReplyCommentForm, {
   ReplyCommentFormProps,
 } from "../components/ReplyCommentForm";
-import { CreateCommentMutation, withCreateCommentMutation } from "../mutations";
 
 interface InnerProps {
   createComment: CreateCommentMutation;