New: Readarr 0.1

frontend/src/Artist/History/ArtistHistoryContentConnector.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchArtistHistory, clearArtistHistory, artistHistoryMarkAsFailed } from 'Store/Actions/artistHistoryActions';
-import ArtistHistoryModalContent from './ArtistHistoryModalContent';
 
 function createMapStateToProps() {
   return createSelector(
@@ -20,20 +19,20 @@ const mapDispatchToProps = {
   artistHistoryMarkAsFailed
 };
 
-class ArtistHistoryModalContentConnector extends Component {
+class ArtistHistoryContentConnector extends Component {
 
   //
   // Lifecycle
 
   componentDidMount() {
     const {
-      artistId,
-      albumId
+      authorId,
+      bookId
     } = this.props;
 
     this.props.fetchArtistHistory({
-      artistId,
-      albumId
+      authorId,
+      bookId
     });
   }
 
@@ -46,14 +45,14 @@ class ArtistHistoryModalContentConnector extends Component {
 
   onMarkAsFailedPress = (historyId) => {
     const {
-      artistId,
-      albumId
+      authorId,
+      bookId
     } = this.props;
 
     this.props.artistHistoryMarkAsFailed({
       historyId,
-      artistId,
-      albumId
+      authorId,
+      bookId
     });
   }
 
@@ -61,21 +60,27 @@ class ArtistHistoryModalContentConnector extends Component {
   // Render
 
   render() {
+    const {
+      component: ViewComponent,
+      ...otherProps
+    } = this.props;
+
     return (
-      <ArtistHistoryModalContent
-        {...this.props}
+      <ViewComponent
+        {...otherProps}
         onMarkAsFailedPress={this.onMarkAsFailedPress}
       />
     );
   }
 }
 
-ArtistHistoryModalContentConnector.propTypes = {
-  artistId: PropTypes.number.isRequired,
-  albumId: PropTypes.number,
+ArtistHistoryContentConnector.propTypes = {
+  component: PropTypes.elementType.isRequired,
+  authorId: PropTypes.number.isRequired,
+  bookId: PropTypes.number,
   fetchArtistHistory: PropTypes.func.isRequired,
   clearArtistHistory: PropTypes.func.isRequired,
   artistHistoryMarkAsFailed: PropTypes.func.isRequired
 };
 
-export default connect(createMapStateToProps, mapDispatchToProps)(ArtistHistoryModalContentConnector);
+export default connect(createMapStateToProps, mapDispatchToProps)(ArtistHistoryContentConnector);

frontend/src/Artist/History/ArtistHistoryModal.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Modal from 'Components/Modal/Modal';
-import ArtistHistoryModalContentConnector from './ArtistHistoryModalContentConnector';
+import ArtistHistoryContentConnector from './ArtistHistoryContentConnector';
+import ArtistHistoryModalContent from './ArtistHistoryModalContent';
 
 function ArtistHistoryModal(props) {
   const {
@@ -15,7 +16,8 @@ function ArtistHistoryModal(props) {
       isOpen={isOpen}
       onModalClose={onModalClose}
     >
-      <ArtistHistoryModalContentConnector
+      <ArtistHistoryContentConnector
+        component={ArtistHistoryModalContent}
         {...otherProps}
         onModalClose={onModalClose}
       />

frontend/src/Artist/History/ArtistHistoryModalContent.js

@@ -1,51 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import ArtistHistoryRowConnector from './ArtistHistoryRowConnector';
-
-const columns = [
-  {
-    name: 'eventType',
-    isVisible: true
-  },
-  {
-    name: 'album',
-    label: 'Album',
-    isVisible: true
-  },
-  {
-    name: 'sourceTitle',
-    label: 'Source Title',
-    isVisible: true
-  },
-  {
-    name: 'quality',
-    label: 'Quality',
-    isVisible: true
-  },
-  {
-    name: 'date',
-    label: 'Date',
-    isVisible: true
-  },
-  {
-    name: 'details',
-    label: 'Details',
-    isVisible: true
-  },
-  {
-    name: 'actions',
-    label: 'Actions',
-    isVisible: true
-  }
-];
+import ArtistHistoryTableContent from './ArtistHistoryTableContent';
 
 class ArtistHistoryModalContent extends Component {
 
@@ -54,18 +14,9 @@ class ArtistHistoryModalContent extends Component {
 
   render() {
     const {
-      albumId,
-      isFetching,
-      isPopulated,
-      error,
-      items,
-      onMarkAsFailedPress,
       onModalClose
     } = this.props;
 
-    const fullArtist = albumId == null;
-    const hasItems = !!items.length;
-
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
@@ -73,40 +24,9 @@ class ArtistHistoryModalContent extends Component {
         </ModalHeader>
 
         <ModalBody>
-          {
-            isFetching &&
-              <LoadingIndicator />
-          }
-
-          {
-            !isFetching && !!error &&
-              <div>Unable to load history.</div>
-          }
-
-          {
-            isPopulated && !hasItems && !error &&
-              <div>No history.</div>
-          }
-
-          {
-            isPopulated && hasItems && !error &&
-              <Table columns={columns}>
-                <TableBody>
-                  {
-                    items.map((item) => {
-                      return (
-                        <ArtistHistoryRowConnector
-                          key={item.id}
-                          fullArtist={fullArtist}
-                          {...item}
-                          onMarkAsFailedPress={onMarkAsFailedPress}
-                        />
-                      );
-                    })
-                  }
-                </TableBody>
-              </Table>
-          }
+          <ArtistHistoryTableContent
+            {...this.props}
+          />
         </ModalBody>
 
         <ModalFooter>
@@ -120,12 +40,6 @@ class ArtistHistoryModalContent extends Component {
 }
 
 ArtistHistoryModalContent.propTypes = {
-  albumId: PropTypes.number,
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onMarkAsFailedPress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/Artist/History/ArtistHistoryTable.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ArtistHistoryContentConnector from 'Artist/History/ArtistHistoryContentConnector';
+import ArtistHistoryTableContent from 'Artist/History/ArtistHistoryTableContent';
+
+function ArtistHistoryTable(props) {
+  const {
+    ...otherProps
+  } = props;
+
+  return (
+    <ArtistHistoryContentConnector
+      component={ArtistHistoryTableContent}
+      {...otherProps}
+    />
+  );
+}
+
+ArtistHistoryTable.propTypes = {
+};
+
+export default ArtistHistoryTable;

frontend/src/Artist/History/ArtistHistoryTableContent.js

@@ -0,0 +1,113 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import ArtistHistoryRowConnector from './ArtistHistoryRowConnector';
+
+const columns = [
+  {
+    name: 'eventType',
+    isVisible: true
+  },
+  {
+    name: 'album',
+    label: 'Album',
+    isVisible: true
+  },
+  {
+    name: 'sourceTitle',
+    label: 'Source Title',
+    isVisible: true
+  },
+  {
+    name: 'quality',
+    label: 'Quality',
+    isVisible: true
+  },
+  {
+    name: 'date',
+    label: 'Date',
+    isVisible: true
+  },
+  {
+    name: 'details',
+    label: 'Details',
+    isVisible: true
+  },
+  {
+    name: 'actions',
+    label: 'Actions',
+    isVisible: true
+  }
+];
+
+class ArtistHistoryTableContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      bookId,
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      onMarkAsFailedPress
+    } = this.props;
+
+    const fullArtist = bookId == null;
+    const hasItems = !!items.length;
+
+    return (
+      <>
+        {
+          isFetching &&
+            <LoadingIndicator />
+        }
+
+        {
+          !isFetching && !!error &&
+            <div>Unable to load history.</div>
+        }
+
+        {
+          isPopulated && !hasItems && !error &&
+            <div>No history.</div>
+        }
+
+        {
+          isPopulated && hasItems && !error &&
+            <Table columns={columns}>
+              <TableBody>
+                {
+                  items.map((item) => {
+                    return (
+                      <ArtistHistoryRowConnector
+                        key={item.id}
+                        fullArtist={fullArtist}
+                        {...item}
+                        onMarkAsFailedPress={onMarkAsFailedPress}
+                      />
+                    );
+                  })
+                }
+              </TableBody>
+            </Table>
+        }
+      </>
+    );
+  }
+}
+
+ArtistHistoryTableContent.propTypes = {
+  bookId: PropTypes.number,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired
+};
+
+export default ArtistHistoryTableContent;