Merge branch 'middleclick' into 'develop'

Middle-click account to open it in a new tab, fixes #603

Closes #603

See merge request soapbox-pub/soapbox-fe!459

app/soapbox/actions/auth.js

@@ -190,8 +190,8 @@ export function logOut() {
   };
 }
 
-export function switchAccount(accountId) {
+export function switchAccount(accountId, reload = true) {
-  return { type: SWITCH_ACCOUNT, accountId };
+  return { type: SWITCH_ACCOUNT, accountId, reload };
 }
 
 export function fetchOwnAccounts() {

app/soapbox/components/dropdown_menu.js

@@ -117,21 +117,40 @@ class DropdownMenu extends React.PureComponent {
     }
   }
 
+  handleMiddleClick = e => {
+    const i = Number(e.currentTarget.getAttribute('data-index'));
+    const { middleClick } = this.props.items[i];
+
+    this.props.onClose();
+
+    if (e.button === 1 && typeof middleClick === 'function') {
+      e.preventDefault();
+      middleClick(e);
+    }
+  }
+
+  handleAuxClick = e => {
+    if (e.button === 1) {
+      this.handleMiddleClick(e);
+    }
+  }
+
   renderItem(option, i) {
     if (option === null) {
       return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
     }
 
-    const { text, href = '#', newTab, isLogout } = option;
+    const { text, href, to, newTab, isLogout } = option;
 
     return (
       <li className='dropdown-menu__item' key={`${text}-${i}`}>
         <a
-          href={href}
+          href={href || to || '#'}
           role='button'
           tabIndex='0'
           ref={i === 0 ? this.setFocusRef : null}
           onClick={this.handleClick}
+          onAuxClick={this.handleAuxClick}
           onKeyDown={this.handleItemKeyDown}
           data-index={i}
           target={newTab ? '_blank' : null}

app/soapbox/features/ui/components/profile_dropdown.js

@@ -64,6 +64,14 @@ class ProfileDropdown extends React.PureComponent {
     };
   }
 
+  handleMiddleClick = account => {
+    return e => {
+      this.props.dispatch(switchAccount(account.get('id'), false));
+      window.open('/', '_blank', 'noopener,noreferrer');
+      e.preventDefault();
+    };
+  }
+
   fetchOwnAccounts = throttle(() => {
     this.props.dispatch(fetchOwnAccounts());
   }, 2000);
@@ -80,7 +88,7 @@ class ProfileDropdown extends React.PureComponent {
     return (
       <div className='account'>
         <div className='account__wrapper'>
-          <div className='account__display-name' title={account.get('acct')} href={`/@${account.get('acct')}`} to={`/@${account.get('acct')}`}>
+          <div className='account__display-name'>
             <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
             <DisplayName account={account} />
           </div>
@@ -98,7 +106,7 @@ class ProfileDropdown extends React.PureComponent {
     menu.push({ text: this.renderAccount(account), to: `/@${account.get('acct')}` });
 
     otherAccounts.forEach(account => {
-      menu.push({ text: this.renderAccount(account), action: this.handleSwitchAccount(account) });
+      menu.push({ text: this.renderAccount(account), action: this.handleSwitchAccount(account), href: '/', middleClick: this.handleMiddleClick(account) });
     });
 
     menu.push(null);

app/soapbox/reducers/auth.js

@@ -54,9 +54,12 @@ const migrateLegacy = state => {
   });
 };
 
+const persistAuth = state => localStorage.setItem('soapbox:auth', JSON.stringify(state.toJS()));
+const persistSession = state => sessionStorage.setItem('soapbox:auth:me', state.get('me'));
+
 const persistState = state => {
-  localStorage.setItem('soapbox:auth', JSON.stringify(state.toJS()));
+  persistAuth(state);
-  sessionStorage.setItem('soapbox:auth:me', state.get('me'));
+  persistSession(state);
 };
 
 const initialize = state => {
@@ -151,6 +154,7 @@ const userSwitched = (oldState, state) => {
 };
 
 const maybeReload = (oldState, state, action) => {
+  if (action.reload === false) return;
   if (userSwitched(oldState, state)) {
     reload(state);
   }
@@ -159,9 +163,14 @@ const maybeReload = (oldState, state, action) => {
 export default function auth(oldState = initialState, action) {
   const state = reducer(oldState, action);
 
-  // Persist the state in localStorage
   if (!state.equals(oldState)) {
-    persistState(state);
+    // Persist the state in localStorage
+    persistAuth(state);
+
+    // Persist the session
+    if (action.reload !== false) {
+      persistSession(state);
+    }
 
     // Reload the page under some conditions
     maybeReload(oldState, state, action);