From 65a212b531603103fc8cf8f205315c1a640edf16 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Fri, 24 Aug 2018 11:17:09 +0200 Subject: [PATCH] Fix UserBox --- .../client/auth/mutations/SignOffMutation.ts | 28 -------- src/core/client/auth/mutations/index.ts | 1 - .../framework/mutations/SignOutMutation.ts | 14 ++++ src/core/client/framework/mutations/index.ts | 1 + src/core/client/framework/rest/index.ts | 2 +- src/core/client/framework/rest/signOff.ts | 7 -- src/core/client/framework/rest/signOut.ts | 7 ++ .../components/UserBoxAuthenticated.tsx | 9 ++- .../UserBoxUnauthenticated.spec.1.tsx | 16 ----- .../UserBoxAuthenticatedContainer.tsx | 25 ------- .../containers/UserBoxContainer.spec.tsx | 3 + .../stream/containers/UserBoxContainer.tsx | 71 +++++++++++-------- 12 files changed, 70 insertions(+), 114 deletions(-) delete mode 100644 src/core/client/auth/mutations/SignOffMutation.ts create mode 100644 src/core/client/framework/mutations/SignOutMutation.ts delete mode 100644 src/core/client/framework/rest/signOff.ts create mode 100644 src/core/client/framework/rest/signOut.ts delete mode 100644 src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx delete mode 100644 src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx diff --git a/src/core/client/auth/mutations/SignOffMutation.ts b/src/core/client/auth/mutations/SignOffMutation.ts deleted file mode 100644 index d406631c4..000000000 --- a/src/core/client/auth/mutations/SignOffMutation.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { commitLocalUpdate, Environment } from "relay-runtime"; -import { TalkContext } from "talk-framework/lib/bootstrap"; -import { createMutationContainer } from "talk-framework/lib/relay"; -import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer"; - -export type SignOffMutation = () => Promise; - -export async function commit( - environment: Environment, - { localStorage }: TalkContext -) { - return commitLocalUpdate(environment, store => { - const record = store.get(LOCAL_ID)!; - record.setValue("", "authToken"); - localStorage.removeItem("authToken"); - - // Force gc to trigger. - environment - .retain({ - dataID: "tmp", - node: { selections: [] }, - variables: {}, - }) - .dispose(); - }); -} - -export const withSignOffMutation = createMutationContainer("signOff", commit); diff --git a/src/core/client/auth/mutations/index.ts b/src/core/client/auth/mutations/index.ts index e83f7aabf..46e02df95 100644 --- a/src/core/client/auth/mutations/index.ts +++ b/src/core/client/auth/mutations/index.ts @@ -1,4 +1,3 @@ export { withSetViewMutation, SetViewMutation } from "./SetViewMutation"; export { withSignInMutation, SignInMutation } from "./SignInMutation"; export { withSignUpMutation, SignUpMutation } from "./SignUpMutation"; -export { withSignOffMutation, SignOffMutation } from "./SignOffMutation"; diff --git a/src/core/client/framework/mutations/SignOutMutation.ts b/src/core/client/framework/mutations/SignOutMutation.ts new file mode 100644 index 000000000..41d2a987c --- /dev/null +++ b/src/core/client/framework/mutations/SignOutMutation.ts @@ -0,0 +1,14 @@ +import { Environment } from "relay-runtime"; +import { TalkContext } from "talk-framework/lib/bootstrap"; +import { createMutationContainer } from "talk-framework/lib/relay"; +import signOut from "../rest/signOut"; +import { commit as setAuthToken } from "./SetAuthTokenMutation"; + +export type SignOutMutation = () => Promise; + +export async function commit(environment: Environment, ctx: TalkContext) { + await setAuthToken(environment, { authToken: "" }, ctx); + await signOut(ctx.rest); +} + +export const withSignOutMutation = createMutationContainer("signOut", commit); diff --git a/src/core/client/framework/mutations/index.ts b/src/core/client/framework/mutations/index.ts index 21875e6d8..b128402e6 100644 --- a/src/core/client/framework/mutations/index.ts +++ b/src/core/client/framework/mutations/index.ts @@ -3,3 +3,4 @@ export { SetAuthTokenMutation, SetAuthTokenInput, } from "./SetAuthTokenMutation"; +export { withSignOutMutation, SignOutMutation } from "./SignOutMutation"; diff --git a/src/core/client/framework/rest/index.ts b/src/core/client/framework/rest/index.ts index 7216d255f..b50cbdbe9 100644 --- a/src/core/client/framework/rest/index.ts +++ b/src/core/client/framework/rest/index.ts @@ -1,3 +1,3 @@ export { default as signIn, SignInInput } from "./signIn"; export { default as signUp, SignUpInput } from "./signUp"; -export { default as signOff } from "./signOff"; +export { default as signOut } from "./signOut"; diff --git a/src/core/client/framework/rest/signOff.ts b/src/core/client/framework/rest/signOff.ts deleted file mode 100644 index 5a1904d7c..000000000 --- a/src/core/client/framework/rest/signOff.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { RestClient } from "../lib/rest"; - -export default function signOff(rest: RestClient) { - return rest.fetch("/tenant/auth/local", { - method: "DELETE", - }); -} diff --git a/src/core/client/framework/rest/signOut.ts b/src/core/client/framework/rest/signOut.ts new file mode 100644 index 000000000..0df1be920 --- /dev/null +++ b/src/core/client/framework/rest/signOut.ts @@ -0,0 +1,7 @@ +import { RestClient } from "../lib/rest"; + +export default function signOut(rest: RestClient) { + return rest.fetch("/tenant/auth", { + method: "DELETE", + }); +} diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx index dc58ebafa..f271d80b7 100644 --- a/src/core/client/stream/components/UserBoxAuthenticated.tsx +++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx @@ -4,12 +4,11 @@ import React, { StatelessComponent } from "react"; import { Button, Flex, Typography } from "talk-ui/components"; import MatchMedia from "talk-ui/components/MatchMedia"; -import { User } from "../containers/UserBoxContainer"; import * as styles from "./UserBoxAuthenticated.css"; export interface UserBoxAuthenticatedProps { - onSignOff: () => void; - user: User; + onSignOut: () => void; + username: string; } const UserBoxAuthenticated: StatelessComponent< @@ -25,7 +24,7 @@ const UserBoxAuthenticated: StatelessComponent< - {props.user.username} + {props.username} @@ -40,7 +39,7 @@ const UserBoxAuthenticated: StatelessComponent< color="primary" size="small" variant="underlined" - onClick={props.onSignOff} + onClick={props.onSignOut} > Sign Out diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx deleted file mode 100644 index f9683c1e8..000000000 --- a/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { shallow } from "enzyme"; -import { noop } from "lodash"; -import React from "react"; - -import { PropTypesOf } from "talk-framework/types"; - -import UserBoxUnauthenticated from "./UserBoxUnauthenticated"; - -it("renders correctly", () => { - const props: PropTypesOf = { - onSignIn: noop, - onRegister: noop, - }; - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); -}); diff --git a/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx b/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx deleted file mode 100644 index 53fd7c8cc..000000000 --- a/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { Component } from "react"; -import UserBoxAuthenticated from "talk-stream/components/UserBoxAuthenticated"; -import { SignOffMutation, withSignOffMutation } from "../../auth/mutations"; -import { User } from "../containers/UserBoxContainer"; - -interface UserBoxAuthenticatedProps { - signOff: SignOffMutation; - user: User; -} - -class UserBoxAuthenticatedContainer extends Component< - UserBoxAuthenticatedProps -> { - private onSignOff = () => { - this.props.signOff(); - }; - public render() { - return ( - - ); - } -} - -const enhanced = withSignOffMutation(UserBoxAuthenticatedContainer); -export default enhanced; diff --git a/src/core/client/stream/containers/UserBoxContainer.spec.tsx b/src/core/client/stream/containers/UserBoxContainer.spec.tsx index 122b4e987..d40d0878a 100644 --- a/src/core/client/stream/containers/UserBoxContainer.spec.tsx +++ b/src/core/client/stream/containers/UserBoxContainer.spec.tsx @@ -14,10 +14,13 @@ it("renders correctly", () => { view: "SIGN_IN", }, }, + user: null, // tslint:disable-next-line:no-empty showAuthPopup: async () => {}, // tslint:disable-next-line:no-empty setAuthPopupState: async () => {}, + // tslint:disable-next-line:no-empty + signOut: async () => {}, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx index 23b388f7a..0ebad7cd9 100644 --- a/src/core/client/stream/containers/UserBoxContainer.tsx +++ b/src/core/client/stream/containers/UserBoxContainer.tsx @@ -1,6 +1,11 @@ import * as React from "react"; import { Component } from "react"; -import { graphql, withLocalStateContainer } from "talk-framework/lib/relay"; +import { + graphql, + withFragmentContainer, + withLocalStateContainer, +} from "talk-framework/lib/relay"; +import { UserBoxContainer_user as UserData } from "talk-stream/__generated__/UserBoxContainer_user.graphql"; import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql"; import { SetAuthPopupStateMutation, @@ -8,30 +13,18 @@ import { withSetAuthPopupStateMutation, withShowAuthPopupMutation, } from "talk-stream/mutations"; +import { SignOutMutation, withSignOutMutation } from "talk-framework/mutations"; import { Popup } from "talk-ui/components"; import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated"; -import UserBoxAuthenticatedContainer from "../containers/UserBoxAuthenticatedContainer"; - -export type USER_ROLE = - | "ADMIN" - | "COMMENTER" - | "MODERATOR" - | "STAFF" - | "%future added value"; - -export interface User { - id?: string; - username?: string | null; - displayName?: string | null; - role?: USER_ROLE; -} +import UserBoxAuthenticated from "../components/UserBoxAuthenticated"; interface InnerProps { local: Local; - user: User | null | undefined; + user: UserData | null; showAuthPopup: ShowAuthPopupMutation; setAuthPopupState: SetAuthPopupStateMutation; + signOut: SignOutMutation; } export class UserBoxContainer extends Component { @@ -47,10 +40,17 @@ export class UserBoxContainer extends Component { authPopup: { open, focus, view }, }, user, + signOut, } = this.props; if (user) { - return ; + return ( + + ); } return ( @@ -74,21 +74,30 @@ export class UserBoxContainer extends Component { } } -const enhanced = withSetAuthPopupStateMutation( - withShowAuthPopupMutation( - withLocalStateContainer( - graphql` - fragment UserBoxContainerLocal on Local { - authPopup { - open - focus - view +const enhanced = withSignOutMutation( + withSetAuthPopupStateMutation( + withShowAuthPopupMutation( + withLocalStateContainer( + graphql` + fragment UserBoxContainerLocal on Local { + authPopup { + open + focus + view + } } - } - ` - )(UserBoxContainer) + ` + )( + withFragmentContainer<{ user: UserData | null }>({ + user: graphql` + fragment UserBoxContainer_user on User { + username + } + `, + })(UserBoxContainer) + ) + ) ) ); -// TODO: (bc) Add fragment here if composing is doable. export default enhanced;