feat(lets-go): support switch friend codes (#316)

pokedextracker · Jan 13, 2019 · d2a1a85 · d2a1a85
1 parent 2250d55
commit d2a1a85
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 36 deletions.
diff --git a/app/components/account.jsx b/app/components/account.jsx
@@ -3,14 +3,14 @@ import DocumentTitle from 'react-document-title';
 import { connect }   from 'react-redux';
 import { push }      from 'react-router-redux';
 
-import { AlertComponent }  from './alert';
-import { FooterComponent } from './footer';
-import { NavComponent }    from './nav';
-import { ReactGA }         from '../utils/analytics';
-import { ReloadComponent } from './reload';
-import { checkVersion }    from '../actions/utils';
-import { friendCode }      from '../utils/formatting';
-import { updateUser }      from '../actions/user';
+import { AlertComponent }                  from './alert';
+import { FooterComponent }                 from './footer';
+import { NavComponent }                    from './nav';
+import { ReactGA }                         from '../utils/analytics';
+import { ReloadComponent }                 from './reload';
+import { checkVersion }                    from '../actions/utils';
+import { friendCode3DS, friendCodeSwitch } from '../utils/formatting';
+import { updateUser }                      from '../actions/user';
 
 export class Account extends Component {
 
@@ -52,7 +52,8 @@ export class Account extends Component {
       payload: {
         password: this._password && this._password.value || undefined,
         password_confirm: this._password_confirm && this._password_confirm.value || undefined,
-        friend_code: this._friend_code.value
+        friend_code_3ds: this._friend_code_3ds.value,
+        friend_code_switch: this._friend_code_switch.value
       }
     };
 
@@ -72,12 +73,22 @@ export class Account extends Component {
 
   render () {
     const { session } = this.props;
+    let { user } = this.props;
     const { error, loading, password, success } = this.state;
 
     if (!session) {
       return null;
     }
 
+    // If the session user hasn't been loaded yet, temporarily substitute it
+    // with the normal session. If there are things that are expected to be in
+    // the session user that isn't in the normal session (e.g. dexes), this
+    // could cause some problems and might need to be reworked, but right now,
+    // it works.
+    if (!user) {
+      user = session;
+    }
+
     let passwordInputs = null;
 
     if (password) {
@@ -101,7 +112,7 @@ export class Account extends Component {
           <NavComponent />
           <ReloadComponent />
           <div className="form" ref={(c) => this._form = c}>
-            <h1>{session.username}'s Account</h1>
+            <h1>{user.username}'s Account</h1>
             <form onSubmit={this.onSubmit} className="form-column">
               <AlertComponent message={error} type="error" />
               <AlertComponent message={success} type="success" />
@@ -113,8 +124,12 @@ export class Account extends Component {
               </div>
               {passwordInputs}
               <div className="form-group">
-                <label htmlFor="friend_code">Friend Code</label>
-                <input className="form-control" ref={(c) => this._friend_code = c} defaultValue={session.friend_code} name="friend_code" id="friend_code" type="text" placeholder="XXXX-XXXX-XXXX" onChange={(e) => this._friend_code.value = friendCode(e.target.value)} />
+                <label htmlFor="friend_code_3ds">3DS Friend Code</label>
+                <input className="form-control" ref={(c) => this._friend_code_3ds = c} defaultValue={user.friend_code_3ds} name="friend_code_3ds" id="friend_code_3ds" type="text" placeholder="XXXX-XXXX-XXXX" onChange={(e) => this._friend_code_3ds.value = friendCode3DS(e.target.value)} />
+              </div>
+              <div className="form-group">
+                <label htmlFor="friend_code_switch">Switch Friend Code</label>
+                <input className="form-control" ref={(c) => this._friend_code_switch = c} defaultValue={user.friend_code_switch} name="friend_code_switch" id="friend_code_switch" type="text" placeholder="SW-XXXX-XXXX-XXXX" onChange={(e) => this._friend_code_switch.value = friendCodeSwitch(e.target.value)} />
               </div>
               <div className="form-group">
                 <label htmlFor="language">Pokémon Name Language</label>
@@ -137,8 +152,8 @@ export class Account extends Component {
 
 }
 
-function mapStateToProps ({ session }) {
-  return { session };
+function mapStateToProps ({ session, sessionUser }) {
+  return { session, user: sessionUser };
 }
 
 function mapDispatchToProps (dispatch) {

diff --git a/app/components/friend-code.jsx b/app/components/friend-code.jsx
@@ -6,11 +6,23 @@ import { ReactGA } from '../utils/analytics';
 export function FriendCode ({ session, user }) {
   const ownPage = session && session.id === user.id;
 
+  let editAccountBtn = null;
+
+  if (ownPage) {
+    editAccountBtn = (
+      <Link to="/account" onClick={() => ReactGA.event({ action: 'click edit friend code', category: 'User' })}><i className="fa fa-pencil" /></Link>
+    );
+  }
+
   return (
-    <h2>
-      FC: <span className={user.friend_code ? '' : 'fc-missing'}>{user.friend_code || 'XXXX-XXXX-XXXX'}</span>
-      {ownPage ? <Link to="/account" onClick={() => ReactGA.event({ action: 'click edit friend code', category: 'User' })}><i className="fa fa-pencil" /></Link> : null}
-    </h2>
+    <div>
+      <h2>
+        <b>3DS FC</b>: <span className={user.friend_code_3ds ? '' : 'fc-missing'}>{user.friend_code_3ds || 'XXXX-XXXX-XXXX'}</span> {editAccountBtn}
+      </h2>
+      <h2>
+        <b>Switch FC</b>: <span className={user.friend_code_switch ? '' : 'fc-missing'}>{user.friend_code_switch || 'SW-XXXX-XXXX-XXXX'}</span> {editAccountBtn}
+      </h2>
+    </div>
   );
 }
 

diff --git a/app/components/register.jsx b/app/components/register.jsx
@@ -4,15 +4,15 @@ import { Link }      from 'react-router';
 import { connect }   from 'react-redux';
 import { push }      from 'react-router-redux';
 
-import { AlertComponent }                from './alert';
-import { FooterComponent }               from './footer';
-import { NavComponent }                  from './nav';
-import { ReactGA }                       from '../utils/analytics';
-import { ReloadComponent }               from './reload';
-import { checkVersion, setNotification } from '../actions/utils';
-import { createUser }                    from '../actions/user';
-import { friendCode }                    from '../utils/formatting';
-import { listGames }                     from '../actions/game';
+import { AlertComponent }                  from './alert';
+import { FooterComponent }                 from './footer';
+import { NavComponent }                    from './nav';
+import { ReactGA }                         from '../utils/analytics';
+import { ReloadComponent }                 from './reload';
+import { checkVersion, setNotification }   from '../actions/utils';
+import { createUser }                      from '../actions/user';
+import { friendCode3DS, friendCodeSwitch } from '../utils/formatting';
+import { listGames }                       from '../actions/game';
 
 export class Register extends Component {
 
@@ -70,13 +70,14 @@ export class Register extends Component {
     const username = this._username.value;
     const password = this._password.value;
     const password_confirm = this._password_confirm.value;
-    const friend_code = this._friend_code.value;
+    const friend_code_3ds = this._friend_code_3ds.value;
+    const friend_code_switch = this._friend_code_switch.value;
     const title = this._title.value;
     const shiny = this._shiny.checked;
 
     this.setState({ error: null });
 
-    register({ username, password, password_confirm, friend_code, title, shiny, game, regional })
+    register({ username, password, password_confirm, friend_code_3ds, friend_code_switch, title, shiny, game, regional })
     .then(() => {
       ReactGA.event({ action: 'register', category: 'Session' });
       setNotification(true);
@@ -126,8 +127,12 @@ export class Register extends Component {
                     <i className="fa fa-asterisk" />
                   </div>
                   <div className="form-group">
-                    <label htmlFor="friend_code">Friend Code</label>
-                    <input className="form-control" ref={(c) => this._friend_code = c} name="friend_code" id="friend_code" type="text" placeholder="XXXX-XXXX-XXXX" onChange={(e) => this._friend_code.value = friendCode(e.target.value)} />
+                    <label htmlFor="friend_code_3ds">3DS Friend Code</label>
+                    <input className="form-control" ref={(c) => this._friend_code_3ds = c} name="friend_code_3ds" id="friend_code_3ds" type="text" placeholder="XXXX-XXXX-XXXX" onChange={(e) => this._friend_code_3ds.value = friendCode3DS(e.target.value)} />
+                  </div>
+                  <div className="form-group">
+                    <label htmlFor="friend_code_switch">Switch Friend Code</label>
+                    <input className="form-control" ref={(c) => this._friend_code_switch = c} name="friend_code_switch" id="friend_code_switch" type="text" placeholder="SW-XXXX-XXXX-XXXX" onChange={(e) => this._friend_code_switch.value = friendCodeSwitch(e.target.value)} />
                   </div>
                 </div>
 

diff --git a/app/styles/tracker.scss b/app/styles/tracker.scss
@@ -418,12 +418,16 @@ header {
 
   h2 {
     margin: 0;
-    font-size: 17px;
+    font-size: 15px;
     font-family: $font-secondary;
     font-weight: 400;
 
     span.fc-missing {
-      color: $gray-light;
+      color: $gray-medium;
+    }
+
+    b {
+      font-weight: 500;
     }
   }
 }

diff --git a/app/utils/formatting.js b/app/utils/formatting.js
@@ -1,4 +1,5 @@
-const FRIEND_CODE_REGEX = /(\d{4})(?=\d)/g;
+const FRIEND_CODE_3DS_REGEX = /(\d{4})(?=\d)/g;
+const FRIEND_CODE_SWITCH_REGEX = /(^[a-zA-Z]{2}|\d{4})(?=\d)/g;
 
 export function capitalize (input) {
   return input.replace(/([^\W_]+[^\s-]*) */g, (word) => word[0].toUpperCase() + word.substr(1).toLowerCase());
@@ -19,8 +20,28 @@ export function dollar (amount) {
   return `$${decimal(number, 2)}`;
 }
 
-export function friendCode (code) {
-  return code && code.replace(FRIEND_CODE_REGEX, '$1-');
+export function friendCode3DS (code) {
+  return code && code.replace(FRIEND_CODE_3DS_REGEX, '$1-');
+}
+
+export function friendCodeSwitch (code) {
+  if (!code) {
+    return code;
+  }
+
+  code = code.toUpperCase();
+
+  // Allow the user to type in `SW-`, but if they start typing something else
+  // in, force `SW-` in front of whatever it was that they were typing. This
+  // will make it so that if they follow the formatting rules, nothing will
+  // self-correct, but if they don't, it will.
+  ['S', 'W', '-'].forEach((letter, i) => {
+    if (code[i] && code[i] !== letter) {
+      code = code.slice(0, i) + letter + code.slice(i);
+    }
+  });
+
+  return code.replace(FRIEND_CODE_SWITCH_REGEX, '$1-');
 }
 
 export function padding (number, digits, value = '0') {