Add UserBox

2026-07-28 11:27:05 +08:00 · 2018-08-08 01:04:25 +02:00
parent 34fb53b3b0
commit fe7b734b2c
41 changed files with 773 additions and 84 deletions
@@ -0,0 +1,72 @@
+import * as React from "react";
+import { Component } from "react";
+
+import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
+import {
+  SetAuthPopupStateMutation,
+  ShowAuthPopupMutation,
+  withSetAuthPopupStateMutation,
+  withShowAuthPopupMutation,
+} from "talk-stream/mutations";
+import { Popup } from "talk-ui/components";
+
+import UserBox from "../components/UserBox";
+
+interface InnerProps {
+  local: Local;
+  showAuthPopup: ShowAuthPopupMutation;
+  setAuthPopupState: SetAuthPopupStateMutation;
+}
+
+class UserBoxContainer extends Component<InnerProps> {
+  private handleFocus = () => this.props.setAuthPopupState({ focus: true });
+  private handleBlur = () => this.props.setAuthPopupState({ focus: false });
+  private handleClose = () => this.props.setAuthPopupState({ open: false });
+  private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
+  private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
+
+  public render() {
+    const {
+      local: {
+        authPopup: { open, focus, view },
+      },
+    } = this.props;
+    return (
+      <>
+        <Popup
+          href={`/auth.html?view=${view}`}
+          title="Talk Auth"
+          features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+          open={open}
+          focus={focus}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          onClose={this.handleClose}
+        />
+        <UserBox
+          onSignIn={this.handleSignIn}
+          onRegister={this.handleRegister}
+        />
+      </>
+    );
+  }
+}
+
+const enhanced = withSetAuthPopupStateMutation(
+  withShowAuthPopupMutation(
+    withLocalStateContainer<Local>(
+      graphql`
+        fragment UserBoxContainerLocal on Local {
+          authPopup {
+            open
+            focus
+            view
+          }
+        }
+      `
+    )(UserBoxContainer)
+  )
+);
+
+export default enhanced;