From ecc9eadc67930afc2b69aeec0daae0215b41b566 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 13 Sep 2018 17:25:47 +0200 Subject: [PATCH] Add activeTab to local state --- .../client/stream/components/App.spec.tsx | 12 ++------- src/core/client/stream/components/App.tsx | 18 +++++++------ .../__snapshots__/App.spec.tsx.snap | 13 ++------- .../client/stream/containers/AppContainer.tsx | 6 ++--- .../__snapshots__/initLocalState.spec.ts.snap | 3 ++- .../client/stream/local/initLocalState.ts | 3 +++ src/core/client/stream/local/local.graphql | 5 ++++ .../comments/components/CommentsPane.spec.tsx | 22 +++++++++++++++ .../tabs/comments/components/CommentsPane.tsx | 15 +++++++++++ .../__snapshots__/CommentsPane.spec.tsx.snap | 5 ++++ .../containers/CommentsPaneContainer.tsx | 27 +++++++++++++++++++ .../client/stream/test/comments/create.ts | 13 +++++++++ .../stream/test/comments/editComment.spec.tsx | 2 +- .../stream/test/comments/loadMore.spec.tsx | 2 +- .../test/comments/permalinkView.spec.tsx | 2 +- .../permalinkViewAssetNotFound.spec.tsx | 2 +- .../permalinkViewCommentNotFound.spec.tsx | 2 +- .../stream/test/comments/postComment.spec.tsx | 2 +- .../stream/test/comments/postReply.spec.tsx | 2 +- .../test/comments/renderReplies.spec.tsx | 2 +- .../test/comments/renderStream.spec.tsx | 2 +- .../test/comments/showAllReplies.spec.tsx | 2 +- src/core/client/stream/test/create.tsx | 2 +- 23 files changed, 120 insertions(+), 44 deletions(-) create mode 100644 src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx create mode 100644 src/core/client/stream/tabs/comments/components/CommentsPane.tsx create mode 100644 src/core/client/stream/tabs/comments/components/__snapshots__/CommentsPane.spec.tsx.snap create mode 100644 src/core/client/stream/tabs/comments/containers/CommentsPaneContainer.tsx create mode 100644 src/core/client/stream/test/comments/create.ts diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx index d7dfdc3a7..dcd979099 100644 --- a/src/core/client/stream/components/App.spec.tsx +++ b/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 = { - showPermalinkView: false, - }; - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); -}); - -it("renders permalink view", () => { - const props: PropTypesOf = { - showPermalinkView: true, + activeTab: "COMMENTS", }; 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 1cd0306d1..421e6af9c 100644 --- a/src/core/client/stream/components/App.tsx +++ b/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 = props => { - const view = props.showPermalinkView ? ( - - ) : ( - - ); + let view: React.ReactElement; + switch (props.activeTab) { + case "COMMENTS": + view = ; + break; + default: + throw new Error(`Unknown tab ${props.activeTab}`); + } return ( {view} diff --git a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap index ccb926aaf..d42a5a3d0 100644 --- a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap +++ b/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`] = ` - - -`; - -exports[`renders stream 1`] = ` - - + `; diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx index 533e8e37f..011a0bee8 100644 --- a/src/core/client/stream/containers/AppContainer.tsx +++ b/src/core/client/stream/containers/AppContainer.tsx @@ -11,15 +11,15 @@ interface InnerProps { } const AppContainer: StatelessComponent = ({ - local: { commentID }, + local: { activeTab }, }) => { - return ; + return ; }; const enhanced = withLocalStateContainer( graphql` fragment AppContainerLocal on Local { - commentID + activeTab } ` )(AppContainer); diff --git a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap index c8dda11c7..b7fe1473c 100644 --- a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap +++ b/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\\", diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts index 5b127755d..b2f09b110 100644 --- a/src/core/client/stream/local/initLocalState.ts +++ b/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"); }); } diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql index 37615ec9d..62e52d4e8 100644 --- a/src/core/client/stream/local/local.graphql +++ b/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 { diff --git a/src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx b/src/core/client/stream/tabs/comments/components/CommentsPane.spec.tsx new file mode 100644 index 000000000..cd04ecd31 --- /dev/null +++ b/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 = { + showPermalinkView: false, + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); + +it("renders permalink view", () => { + const props: PropTypesOf = { + showPermalinkView: true, + }; + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/tabs/comments/components/CommentsPane.tsx b/src/core/client/stream/tabs/comments/components/CommentsPane.tsx new file mode 100644 index 000000000..3bb4bc167 --- /dev/null +++ b/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 = props => { + return props.showPermalinkView ? : ; +}; + +export default CommentsPane; diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/CommentsPane.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/CommentsPane.spec.tsx.snap new file mode 100644 index 000000000..2207f2403 --- /dev/null +++ b/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`] = ``; + +exports[`renders stream 1`] = ``; diff --git a/src/core/client/stream/tabs/comments/containers/CommentsPaneContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentsPaneContainer.tsx new file mode 100644 index 000000000..c058adc02 --- /dev/null +++ b/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 = ({ + local: { commentID }, +}) => { + return ; +}; + +const enhanced = withLocalStateContainer( + graphql` + fragment CommentsPaneContainerLocal on Local { + commentID + } + ` +)(CommentsPaneContainer); + +export default enhanced; diff --git a/src/core/client/stream/test/comments/create.ts b/src/core/client/stream/test/comments/create.ts new file mode 100644 index 000000000..090a3e3f1 --- /dev/null +++ b/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); + } + }, + }); +} diff --git a/src/core/client/stream/test/comments/editComment.spec.tsx b/src/core/client/stream/test/comments/editComment.spec.tsx index d9d586f4f..733f30eb2 100644 --- a/src/core/client/stream/test/comments/editComment.spec.tsx +++ b/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 = { diff --git a/src/core/client/stream/test/comments/loadMore.spec.tsx b/src/core/client/stream/test/comments/loadMore.spec.tsx index 1d4cdd652..404d3c702 100644 --- a/src/core/client/stream/test/comments/loadMore.spec.tsx +++ b/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(() => { diff --git a/src/core/client/stream/test/comments/permalinkView.spec.tsx b/src/core/client/stream/test/comments/permalinkView.spec.tsx index e35b75299..0bbe3e260 100644 --- a/src/core/client/stream/test/comments/permalinkView.spec.tsx +++ b/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(() => { diff --git a/src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx index a2f4c7f62..9d2df883e 100644 --- a/src/core/client/stream/test/comments/permalinkViewAssetNotFound.spec.tsx +++ b/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(() => { diff --git a/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx index afa8852e1..9c4517351 100644 --- a/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx +++ b/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(() => { diff --git a/src/core/client/stream/test/comments/postComment.spec.tsx b/src/core/client/stream/test/comments/postComment.spec.tsx index 15f8d6e6f..01f296ffc 100644 --- a/src/core/client/stream/test/comments/postComment.spec.tsx +++ b/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(() => { diff --git a/src/core/client/stream/test/comments/postReply.spec.tsx b/src/core/client/stream/test/comments/postReply.spec.tsx index 791b80b89..6f75b57a8 100644 --- a/src/core/client/stream/test/comments/postReply.spec.tsx +++ b/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(() => { diff --git a/src/core/client/stream/test/comments/renderReplies.spec.tsx b/src/core/client/stream/test/comments/renderReplies.spec.tsx index fe0d32dfa..3c361740d 100644 --- a/src/core/client/stream/test/comments/renderReplies.spec.tsx +++ b/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(() => { diff --git a/src/core/client/stream/test/comments/renderStream.spec.tsx b/src/core/client/stream/test/comments/renderStream.spec.tsx index c9fca006e..2778acb02 100644 --- a/src/core/client/stream/test/comments/renderStream.spec.tsx +++ b/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(() => { diff --git a/src/core/client/stream/test/comments/showAllReplies.spec.tsx b/src/core/client/stream/test/comments/showAllReplies.spec.tsx index 59eb7d442..547ac7b33 100644 --- a/src/core/client/stream/test/comments/showAllReplies.spec.tsx +++ b/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(() => { diff --git a/src/core/client/stream/test/create.tsx b/src/core/client/stream/test/create.tsx index 2eecbc5a1..f105162c4 100644 --- a/src/core/client/stream/test/create.tsx +++ b/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; initLocalState?: (