New: Goodreads Shelves + Owned Books notifications

frontend/src/Components/Form/BookshelfInput.css

@@ -1,4 +1,4 @@
-.playlistInputWrapper {
+.bookshelfInputWrapper {
   display: flex;
   flex-direction: column;
 }

frontend/src/Components/Form/BookshelfInput.js

@@ -11,7 +11,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
-import styles from './PlaylistInput.css';
+import styles from './BookshelfInput.css';
 
 const columns = [
   {
@@ -22,7 +22,7 @@ const columns = [
   }
 ];
 
-class PlaylistInput extends Component {
+class BookshelfInput extends Component {
 
   //
   // Lifecycle
@@ -82,6 +82,7 @@ class PlaylistInput extends Component {
   render() {
     const {
       className,
+      helptext,
       items,
       user,
       isFetching,
@@ -104,7 +105,7 @@ class PlaylistInput extends Component {
         {
           !isPopulated && !isFetching &&
             <div>
-              Authenticate with Goodreads to retrieve bookshelves to import.
+              Authenticate with Goodreads to retrieve bookshelves.
             </div>
         }
 
@@ -125,7 +126,7 @@ class PlaylistInput extends Component {
         {
           isPopulated && !isFetching && user && !!items.length &&
             <div className={className}>
-              Select bookshelves to import from Goodreads user {user}.
+              {helptext}
               <Table
                 columns={columns}
                 selectAll={true}
@@ -165,10 +166,11 @@ class PlaylistInput extends Component {
   }
 }
 
-PlaylistInput.propTypes = {
+BookshelfInput.propTypes = {
   className: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
+  helptext: PropTypes.string.isRequired,
   user: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
   hasError: PropTypes.bool,
@@ -178,9 +180,9 @@ PlaylistInput.propTypes = {
   onChange: PropTypes.func.isRequired
 };
 
-PlaylistInput.defaultProps = {
-  className: styles.playlistInputWrapper,
+BookshelfInput.defaultProps = {
+  className: styles.bookshelfInputWrapper,
   inputClassName: styles.input
 };
 
-export default PlaylistInput;
+export default BookshelfInput;

frontend/src/Components/Form/BookshelfInputConnector.js

@@ -4,19 +4,21 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchOptions, clearOptions } from 'Store/Actions/providerOptionActions';
-import PlaylistInput from './PlaylistInput';
+import BookshelfInput from './BookshelfInput';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.providerOptions,
-    (state) => {
+    (state, props) => props.name,
+    (state, name) => {
       const {
         items,
         ...otherState
       } = state;
       return ({
+        helptext: items.helptext && items.helptext[name] ? items.helptext[name] : '',
         user: items.user ? items.user : '',
-        items: items.playlists ? items.playlists : [],
+        items: items.shelves ? items.shelves : [],
         ...otherState
       });
     }
@@ -28,7 +30,7 @@ const mapDispatchToProps = {
   dispatchClearOptions: clearOptions
 };
 
-class PlaylistInputConnector extends Component {
+class BookshelfInputConnector extends Component {
 
   //
   // Lifecycle
@@ -58,11 +60,13 @@ class PlaylistInputConnector extends Component {
     const {
       provider,
       providerData,
-      dispatchFetchOptions
+      dispatchFetchOptions,
+      name
     } = this.props;
 
     dispatchFetchOptions({
-      action: 'getPlaylists',
+      action: 'getBookshelves',
+      queryParams: { name },
       provider,
       providerData
     });
@@ -77,7 +81,7 @@ class PlaylistInputConnector extends Component {
 
   render() {
     return (
-      <PlaylistInput
+      <BookshelfInput
         {...this.props}
         onRefreshPress={this.onRefreshPress}
       />
@@ -85,7 +89,7 @@ class PlaylistInputConnector extends Component {
   }
 }
 
-PlaylistInputConnector.propTypes = {
+BookshelfInputConnector.propTypes = {
   provider: PropTypes.string.isRequired,
   providerData: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
@@ -94,4 +98,4 @@ PlaylistInputConnector.propTypes = {
   dispatchClearOptions: PropTypes.func.isRequired
 };
 
-export default connect(createMapStateToProps, mapDispatchToProps)(PlaylistInputConnector);
+export default connect(createMapStateToProps, mapDispatchToProps)(BookshelfInputConnector);

frontend/src/Components/Form/FormInputGroup.js

@@ -6,7 +6,7 @@ import AutoCompleteInput from './AutoCompleteInput';
 import CaptchaInputConnector from './CaptchaInputConnector';
 import CheckInput from './CheckInput';
 import DeviceInputConnector from './DeviceInputConnector';
-import PlaylistInputConnector from './PlaylistInputConnector';
+import BookshelfInputConnector from './BookshelfInputConnector';
 import KeyValueListInput from './KeyValueListInput';
 import MonitorBooksSelectInput from './MonitorBooksSelectInput';
 import NumberInput from './NumberInput';
@@ -39,8 +39,8 @@ function getComponent(type) {
     case inputTypes.DEVICE:
       return DeviceInputConnector;
 
-    case inputTypes.PLAYLIST:
-      return PlaylistInputConnector;
+    case inputTypes.BOOKSHELF:
+      return BookshelfInputConnector;
 
     case inputTypes.KEY_VALUE_LIST:
       return KeyValueListInput;

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -14,8 +14,8 @@ function getType(type) {
       return inputTypes.CHECK;
     case 'device':
       return inputTypes.DEVICE;
-    case 'playlist':
-      return inputTypes.PLAYLIST;
+    case 'bookshelf':
+      return inputTypes.BOOKSHELF;
     case 'password':
       return inputTypes.PASSWORD;
     case 'number':