SessionButtonTypes -> SessionButtonType and create enum for registration tabs

ts/components/session/RegistrationTabs.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { LocalizerType } from '../../types/Util';
 import { SessionInput } from './SessionInput';
-import { SessionButton, SessionButtonTypes } from './SessionButton';
+import { SessionButton, SessionButtonType } from './SessionButton';
 import { trigger } from '../../shims/events';
 
 interface Props {
@@ -11,17 +11,23 @@ interface Props {
 }
 
 enum SignInMode {
-  Default = 'Default',
+  Default,
-  UsingSeed = 'UsingSeed',
+  UsingSeed,
-  LinkingDevice = 'LinkingDevice',
+  LinkingDevice,
 }
 
 enum SignUpMode {
-  Default = 'Default',
+  Default,
-  SessionIDGenerated = 'SessionIDGenerated',
+  SessionIDGenerated,
 }
+
+enum TabType {
+  Create,
+  SignIn,
+}
+
 interface State {
-  selectedTab: 'create' | 'signin';
+  selectedTab: TabType;
   signInMode: SignInMode;
   signUpMode: SignUpMode;
   displayName: string;
@@ -34,7 +40,7 @@ interface State {
 }
 
 interface TabSelectEvent {
-  type: 'create' | 'signin';
+  type: TabType;
 }
 
 const Tab = ({
@@ -46,12 +52,12 @@ const Tab = ({
   isSelected: boolean;
   label: string;
   onSelect?: (event: TabSelectEvent) => void;
-  type: 'create' | 'signin';
+  type: TabType;
 }) => {
   const handleClick = onSelect
     ? () => {
-        onSelect({ type });
+      onSelect({ type });
-      }
+    }
     : undefined;
 
   return (
@@ -84,7 +90,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
     this.onSignUpGetStartedClick = this.onSignUpGetStartedClick.bind(this);
 
     this.state = {
-      selectedTab: 'create',
+      selectedTab: TabType.Create,
       signInMode: SignInMode.Default,
       signUpMode: SignUpMode.Default,
       displayName: '',
@@ -111,20 +117,22 @@ export class RegistrationTabs extends React.Component<Props, State> {
 
     const createAccount = i18n('createAccount');
     const signIn = i18n('signIn');
+    const isCreateSelected = selectedTab === TabType.Create;
+    const isSignInSelected = selectedTab === TabType.SignIn;
 
     return (
       <div className="session-registration-container">
         <div className="session-registration__tab-container">
           <Tab
             label={createAccount}
-            type="create"
+            type={TabType.Create}
-            isSelected={selectedTab === 'create'}
+            isSelected={isCreateSelected}
             onSelect={this.handleTabSelect}
           />
           <Tab
             label={signIn}
-            type="signin"
+            type={TabType.SignIn}
-            isSelected={selectedTab === 'signin'}
+            isSelected={isSignInSelected}
             onSelect={this.handleTabSelect}
           />
         </div>
@@ -157,7 +165,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
 
   private renderSections() {
     const { selectedTab } = this.state;
-    if (selectedTab === 'create') {
+    if (selectedTab === TabType.Create) {
       return this.renderSignUp();
     }
 
@@ -191,18 +199,14 @@ export class RegistrationTabs extends React.Component<Props, State> {
 
   private getRenderTermsConditionAgreement() {
     const { selectedTab, signInMode, signUpMode } = this.state;
-    if (selectedTab === 'create') {
+    if (selectedTab === TabType.Create) {
-      if (signUpMode !== SignUpMode.Default) {
+      return signUpMode !== SignUpMode.Default
-        return this.renderTermsConditionAgreement();
+        ? this.renderTermsConditionAgreement()
-      } else {
+        : null;
-        return null;
-      }
     } else {
-      if (signInMode !== SignInMode.Default) {
+      return signInMode !== SignInMode.Default
-        return this.renderTermsConditionAgreement();
+        ? this.renderTermsConditionAgreement()
-      } else {
+        : null;
-        return null;
-      }
     }
   }
 
@@ -219,18 +223,18 @@ export class RegistrationTabs extends React.Component<Props, State> {
     let buttonType: any;
     let buttonText: string;
     if (signUpMode !== SignUpMode.Default) {
-      buttonType = SessionButtonTypes.FullGreen;
+      buttonType = SessionButtonType.FullGreen;
       buttonText = i18n('getStarted');
     } else {
-      buttonType = SessionButtonTypes.Green;
+      buttonType = SessionButtonType.Green;
       buttonText = i18n('generateSessionID');
     }
 
     return (
       <SessionButton
-        onClick={async () => {
+        onClick={() => {
           if (signUpMode === SignUpMode.Default) {
-            await this.onSignUpGenerateSessionIDClick();
+            void this.onSignUpGenerateSessionIDClick();
           } else {
             this.onSignUpGetStartedClick();
           }
@@ -272,7 +276,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
 
   private onSignUpGetStartedClick() {
     this.setState({
-      selectedTab: 'signin',
+      selectedTab: TabType.SignIn,
       signInMode: SignInMode.UsingSeed,
     });
   }
@@ -343,7 +347,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
         </div>
       );
     } else {
-      return <div />;
+      return undefined;
     }
   }
 
@@ -371,7 +375,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
     if (signInMode === SignInMode.Default) {
       return (
         <div>
-          {this.renderRestoreUsingSeedButton(SessionButtonTypes.Green)}
+          {this.renderRestoreUsingSeedButton(SessionButtonType.Green)}
           <div className="session-registration__or">{or}</div>
           {this.renderLinkDeviceToExistingAccountButton()}
         </div>
@@ -383,7 +387,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
         <div>
           {this.renderContinueYourSessionButton()}
           <div className="session-registration__or">{or}</div>
-          {this.renderRestoreUsingSeedButton(SessionButtonTypes.White)}
+          {this.renderRestoreUsingSeedButton(SessionButtonType.White)}
         </div>
       );
     }
@@ -412,17 +416,16 @@ export class RegistrationTabs extends React.Component<Props, State> {
   private renderContinueYourSessionButton() {
     return (
       <SessionButton
-        // tslint:disable-next-line: no-empty
+        onClick={() => {
-        onClick={async () => {
+          void this.register('english');
-          await this.register('english');
         }}
-        buttonType={SessionButtonTypes.FullGreen}
+        buttonType={SessionButtonType.FullGreen}
         text={this.props.i18n('continueYourSession')}
       />
     );
   }
 
-  private renderRestoreUsingSeedButton(buttonType: SessionButtonTypes) {
+  private renderRestoreUsingSeedButton(buttonType: SessionButtonType) {
     return (
       <SessionButton
         onClick={() => {
@@ -452,7 +455,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
             signUpMode: SignUpMode.Default,
           });
         }}
-        buttonType={SessionButtonTypes.White}
+        buttonType={SessionButtonType.White}
         text={this.props.i18n('linkDeviceToExistingAccount')}
       />
     );

ts/components/session/SessionButton.tsx

@@ -46,9 +46,7 @@ export class SessionButton extends React.PureComponent<Props> {
       <div
         className={classNames('session-button', buttonType, buttonColor)}
         role="button"
-        onClick={e => {
+        onClick={this.clickHandler}
-          this.clickHandler(e);
-        }}
       >
         {text}
       </div>