Extension 2.1.0 (#432)

* update package extension version

* add logout button

* fix loading spinner

* remember active extension tab

* update content script

* new extension version

* expand when data is missing

* update package version

* add button styles

* update package lock version

_source/organisms/customize/Customize.scss

@@ -21,3 +21,16 @@
 .customize__max-columns {
   width: 5rem;
 }
+
+.customize__logout {
+  &:hover,
+  &:focus {
+    background-color: $color-font--primary;
+    color: $color-font--white;
+  }
+
+  &:hover .icon,
+  &:focus .icon {
+    color: $color-font--white;
+  }
+}

_source/pages/add/Add.js

@@ -267,7 +267,11 @@ class Add extends Component {
             <Expandable
               headline={<FormattedMessage id="extension.data" />}
               className="add__section"
-              open={localStorage.getItem('showData') === 'true'}
+              open={Boolean(
+                localStorage.getItem('showData') === 'true' ||
+                  !stateName ||
+                  !stateUrl
+              )}
               onClick={this.toggleData}
             >
               <>

_source/pages/customize/Customize.js

@@ -1,14 +1,46 @@
 import React, { Component } from 'react';
-import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
+import { postMessage } from '../../_utils/extension';
 import Extension from '../../templates/extension';
 import Section from '../../molecules/section';
 import CustomizeComponent from '../../organisms/customize';
 import LanguageSwitcher from '../../molecules/language-switcher';
 import { H3 } from '../../atoms/headline';
+import { ButtonSmallPrimary } from '../../atoms/button';
+
+class Customize extends Component {
+  static propTypes = {
+    history: PropTypes.object.isRequired,
+    logout: PropTypes.func.isRequired
+  };
+
+  state = {
+    logoutPending: false
+  };
+
+  handleLogout = () => {
+    const { history, logout } = this.props;
+
+    this.setState({
+      logoutPending: true
+    });
+
+    logout({
+      onSuccess: () => {
+        postMessage({
+          darkMode: false
+        });
+
+        history.push('/extension/login');
+      }
+    });
+  };
 
-export default class Customize extends Component {
   render() {
+    const { logoutPending } = this.state;
+
     return (
       <Extension>
         <Section noMargin className="customize--extension">
@@ -17,8 +49,19 @@ export default class Customize extends Component {
             <FormattedMessage id="customize.language" />
           </H3>
           <LanguageSwitcher />
+          <ButtonSmallPrimary
+            className="customize__logout"
+            contentBefore
+            onClick={this.handleLogout}
+            icon="logout"
+            pending={logoutPending}
+          >
+            <FormattedMessage id="menu.logout" />
+          </ButtonSmallPrimary>
         </Section>
       </Extension>
     );
   }
 }
+
+export default injectIntl(Customize);

_source/pages/customize/CustomizeContainer.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import Component from './Customize';
+import { logout } from '../../_state/user/actions';
+
+const mapDispatchToProps = {
+  logout
+};
+const Container = connect(null, mapDispatchToProps)(Component);
+
+export default Container;

_source/pages/customize/index.js

@@ -1,3 +1,3 @@
-import component from './Customize';
+import component from './CustomizeContainer';
 
 export default component;

_source/pages/login/Login.js

@@ -142,8 +142,12 @@ class Login extends Component {
 
         if (action) {
           history.push('/account');
+        } else if (isExtension) {
+          const activeTab = localStorage.getItem('activeTab') || 'add';
+
+          history.push(`/extension/${activeTab}`);
         } else {
-          history.push(isExtension ? '/extension/add' : '/');
+          history.push('/');
         }
       },
       onError: (error) => {
@@ -155,6 +159,7 @@ class Login extends Component {
     });
   };
 
+  // eslint-disable-next-line complexity
   render() {
     const { intl, match, isExtension } = this.props;
     const { token, action } = match.params;
@@ -236,42 +241,27 @@ class Login extends Component {
                 pending={pending}
                 disabled={pending}
                 contentBefore
+                className="login__button"
               >
                 <FormattedMessage
                   id="header.login"
                   values={{ b: (msg) => <b>{msg}</b> }}
                 />
               </ButtonLargeBlue>
               {error && <ErrorMessage message={error} hasIcon />}
-              {isExtension ? (
-                <>
-                  <Link
-                    className="login__forgot"
-                    href="/forgot"
-                    target="_blank"
-                  >
-                    <FormattedMessage id="login.forgot" />
-                  </Link>
-                  <P className="login__join">
-                    <FormattedMessage id="login.new" />{' '}
-                    <Link href="/join" target="_blank">
-                      <FormattedMessage id="login.join" />
-                    </Link>
-                  </P>
-                </>
-              ) : (
-                <>
-                  <Link className="login__forgot" to="/forgot">
-                    <FormattedMessage id="login.forgot" />
-                  </Link>
-                  <P className="login__join">
-                    <FormattedMessage id="login.new" />{' '}
-                    <Link to="/join">
-                      <FormattedMessage id="login.join" />
-                    </Link>
-                  </P>
-                </>
-              )}
+              <Link
+                className="login__forgot"
+                to="/forgot"
+                target={isExtension ? '_blank' : '_self'}
+              >
+                <FormattedMessage id="login.forgot" />
+              </Link>
+              <P className="login__join">
+                <FormattedMessage id="login.new" />{' '}
+                <Link to="/join" target={isExtension ? '_blank' : '_self'}>
+                  <FormattedMessage id="login.join" />
+                </Link>
+              </P>
             </Form>
           )}
         </Section>

_source/pages/login/Login.scss

@@ -16,3 +16,17 @@
   margin-top: calc(3rem + 6px);
   left: calc(50% - 18px);
 }
+
+.login__button {
+  &:hover,
+  &:focus,
+  &.button--pending {
+    background-color: lighten($color--blue, 5%);
+    color: $color-font--white;
+
+    .icon,
+    .icon__svg {
+      color: $color-font--white;
+    }
+  }
+}

_source/templates/extension/Extension.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 
-// import { config } from '../../config';
 import { postMessage } from '../../_utils/extension';
 import Link from '../../atoms/link';
 import Icon from '../../atoms/icon';
@@ -36,19 +35,26 @@ export default class Extension extends PureComponent {
     });
   }
 
+  setActiveTab = (tab) => {
+    localStorage.setItem('activeTab', tab);
+    postMessage({
+      activeTab: tab
+    });
+  };
+
   render() {
     const { children, className, darkMode, color } = this.props;
 
     return (
       <>
-        <Modal />
         <header className={`extension__header header--color${color}`}>
           <nav className="extension__nav">
             <Link
               to="/extension/add"
               isNavLink
               className="extension__nav-item"
               activeClassName="extension__nav-item--active"
+              onClick={() => this.setActiveTab('add')}
             >
               <Icon icon="add-link" color="light" />
               <FormattedMessage id="extension.add" />
@@ -58,6 +64,7 @@ export default class Extension extends PureComponent {
               isNavLink
               className="extension__nav-item"
               activeClassName="extension__nav-item--active"
+              onClick={() => this.setActiveTab('open')}
             >
               <Icon icon="open" color="light" />
               <FormattedMessage id="extension.open" />
@@ -67,6 +74,7 @@ export default class Extension extends PureComponent {
               isNavLink
               className="extension__nav-item"
               activeClassName="extension__nav-item--active"
+              onClick={() => this.setActiveTab('customize')}
             >
               <Icon icon="customize" color="light" />
               <FormattedMessage id="extension.customize" />
@@ -82,6 +90,7 @@ export default class Extension extends PureComponent {
         >
           <ErrorBoundary>{children}</ErrorBoundary>
         </main>
+        <Modal />
       </>
     );
   }

extension/_source/content.js

@@ -1,13 +1,13 @@
 /* eslint-disable no-var */
-function getDescription() {
+function getDescriptionForBooky() {
   var meta = document.querySelector('meta[name=description]'),
     description = meta ? meta.getAttribute('content') : '';
 
   return description;
 }
 
 chrome.runtime.connect().postMessage({
-  description: getDescription()
+  description: getDescriptionForBooky()
 });
 
 /* eslint-enable no-var */

extension/_source/manifest.json

@@ -1,11 +1,11 @@
 {
   "name": "__MSG_appName__",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "author": "Nico Thiebes",
   "description": "__MSG_appDesc__",
   "default_locale": "en",
   "content_security_policy": "default-src 'self'; frame-src 'self' http://localhost:3000 https://*.booky.io https://booky.io",
-  "permissions": ["activeTab", "management"],
+  "permissions": ["activeTab", "management", "storage"],
   "browser_action": {
     "default_title": "booky.io Extension",
     "default_popup": "popup.html",

extension/_source/popup.css

@@ -67,8 +67,8 @@ body {
   position: absolute;
   color: #657786;
   pointer-events: none;
-  left: calc(50vw - 18px);
-  top: calc(50vh);
+  left: calc(50% - 18px);
+  top: 50%;
 }
 
 .loading__spinner--hide {

extension/_source/popup.js

@@ -13,7 +13,9 @@ chrome.management.getSelf(function (extensionInfo) {
     host = devHost;
   }
 
-  iframe.src = host + '/extension/add';
+  chrome.storage.local.get(['activeTab'], function ({ activeTab }) {
+    iframe.src = host + `/extension/${activeTab || 'add'}`;
+  });
 });
 
 function transitionEndCallback() {
@@ -68,6 +70,10 @@ window.addEventListener('message', function (event) {
     if (message.close) {
       window.close();
     }
+
+    if (message.activeTab) {
+      chrome.storage.local.set({ activeTab: message.activeTab });
+    }
   }
 });
 

extension/manifest.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 browser="$1"
-version="$2"
+version="2.1.0"
 
 if [ "$browser" == "chrome" ]
 then
@@ -45,7 +45,7 @@ manifest="{
   \"description\": \"__MSG_appDesc__\",
   \"default_locale\": \"en\",
   \"content_security_policy\": \"default-src 'self'; frame-src 'self' http://localhost:3000 https://*.booky.io https://booky.io\",
-  \"permissions\": [\"activeTab\", \"management\"],${applications}
+  \"permissions\": [\"activeTab\", \"management\", \"storage\"],${applications}
   \"browser_action\": {
     \"default_title\": \"booky.io Extension\",
     \"default_popup\": \"popup.html\",

package.json

@@ -1,7 +1,6 @@
 {
   "name": "booky.io",
-  "version": "2.7.0",
-  "extensionVersion": "2.0.5",
+  "version": "2.8.0",
   "description": "Online bookmarking service with high focus on performance, mobile support and customizability.",
   "homepage": "https://booky.io",
   "email": "hello@booky.io",
@@ -27,11 +26,11 @@
     "test:watch": "jest --watchAll",
     "qa": "npm-run-all test lint",
     "prettier": "prettier --write .",
-    "extension": "cd extension && ./manifest.sh firefox $npm_package_extensionVersion && ./manifest.sh opera $npm_package_extensionVersion && ./manifest.sh edge $npm_package_extensionVersion && ./manifest.sh chrome $npm_package_extensionVersion",
-    "extension:chrome": "cd extension && ./manifest.sh chrome $npm_package_extensionVersion",
-    "extension:firefox": "cd extension && ./manifest.sh firefox $npm_package_extensionVersion",
-    "extension:opera": "cd extension && ./manifest.sh opera $npm_package_extensionVersion",
-    "extension:edge": "cd extension && ./manifest.sh edge $npm_package_extensionVersion",
+    "extensions": "cd extension && ./manifest.sh firefox && ./manifest.sh opera && ./manifest.sh edge && ./manifest.sh chrome",
+    "extension:chrome": "cd extension && ./manifest.sh chrome",
+    "extension:firefox": "cd extension && ./manifest.sh firefox",
+    "extension:opera": "cd extension && ./manifest.sh opera",
+    "extension:edge": "cd extension && ./manifest.sh edge",
     "cypress:open": "./node_modules/.bin/cypress open"
   },
   "proxy": "http://localhost:8001/",