New: Show ExtraFiles in UI

frontend/src/MovieFile/Editor/MovieFileEditorTable.css

@@ -0,0 +1,10 @@
+.container {
+  margin-top: 20px;
+  border: 1px solid $borderColor;
+  border-radius: 4px;
+  background-color: $white;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}

frontend/src/MovieFile/Editor/MovieFileEditorTable.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import MovieFileEditorTableContentConnector from './MovieFileEditorTableContentConnector';
+import styles from './MovieFileEditorTable.css';
 
 function MovieFileEditorTable(props) {
   const {
@@ -8,9 +9,11 @@ function MovieFileEditorTable(props) {
   } = props;
 
   return (
-    <MovieFileEditorTableContentConnector
-      movieId={movieId}
-    />
+    <div className={styles.container}>
+      <MovieFileEditorTableContentConnector
+        movieId={movieId}
+      />
+    </div>
   );
 }
 

frontend/src/MovieFile/Extras/ExtraFileRow.css

@@ -0,0 +1,10 @@
+.relativePath {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}
+
+.extension,
+.type {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+}

frontend/src/MovieFile/Extras/ExtraFileRow.js

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import { icons } from 'Helpers/Props';
+import titleCase from 'Utilities/String/titleCase';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './ExtraFileRow.css';
+
+class ExtraFileRow extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      relativePath,
+      extension,
+      type
+    } = this.props;
+
+    return (
+      <TableRow>
+        <TableRowCell
+          className={styles.relativePath}
+          title={relativePath}
+        >
+          {relativePath}
+        </TableRowCell>
+
+        <TableRowCell
+          className={styles.extension}
+          title={extension}
+        >
+          {extension}
+        </TableRowCell>
+
+        <TableRowCell
+          className={styles.type}
+          title={type}
+        >
+          {titleCase(type)}
+        </TableRowCell>
+
+        <TableRowCell className={styles.actions}>
+          <IconButton
+            name={icons.INFO}
+          />
+        </TableRowCell>
+      </TableRow>
+    );
+  }
+
+}
+
+ExtraFileRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  extension: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  relativePath: PropTypes.string.isRequired
+};
+
+export default ExtraFileRow;

frontend/src/MovieFile/Extras/ExtraFileTable.css

@@ -0,0 +1,10 @@
+.container {
+  margin-top: 20px;
+  border: 1px solid $borderColor;
+  border-radius: 4px;
+  background-color: $white;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}

frontend/src/MovieFile/Extras/ExtraFileTable.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ExtraFileTableContentConnector from './ExtraFileTableContentConnector';
+import styles from './ExtraFileTable.css';
+
+function ExtraFileTable(props) {
+  const {
+    movieId
+  } = props;
+
+  return (
+    <div className={styles.container}>
+      <ExtraFileTableContentConnector
+        movieId={movieId}
+      />
+    </div>
+
+  );
+}
+
+ExtraFileTable.propTypes = {
+  movieId: PropTypes.number.isRequired
+};
+
+export default ExtraFileTable;

frontend/src/MovieFile/Extras/ExtraFileTableContent.css

@@ -0,0 +1,10 @@
+.actions {
+  display: flex;
+  margin-right: auto;
+}
+
+.blankpad {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 2em;
+}

frontend/src/MovieFile/Extras/ExtraFileTableContent.js

@@ -0,0 +1,80 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import ExtraFileRow from './ExtraFileRow';
+import styles from './ExtraFileTableContent.css';
+
+const columns = [
+  {
+    name: 'relativePath',
+    label: 'Extra File',
+    isVisible: true
+  },
+  {
+    name: 'extension',
+    label: 'Extension',
+    isVisible: true
+  },
+  {
+    name: 'type',
+    label: 'Type',
+    isVisible: true
+  },
+  {
+    name: 'action',
+    label: React.createElement(IconButton, { name: icons.ADVANCED_SETTINGS }),
+    isVisible: true
+  }
+];
+
+class ExtraFileTableContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      items
+    } = this.props;
+
+    return (
+      <div>
+        {
+          !items.length &&
+            <div className={styles.blankpad}>
+              No extra files to manage.
+            </div>
+        }
+
+        {
+          !!items.length &&
+            <Table columns={columns}>
+              <TableBody>
+                {
+                  items.map((item) => {
+                    return (
+                      <ExtraFileRow
+                        key={item.id}
+                        {...item}
+                      />
+                    );
+                  })
+                }
+              </TableBody>
+            </Table>
+        }
+
+      </div>
+    );
+  }
+}
+
+ExtraFileTableContent.propTypes = {
+  movieId: PropTypes.number,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default ExtraFileTableContent;

frontend/src/MovieFile/Extras/ExtraFileTableContentConnector.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import ExtraFileTableContent from './ExtraFileTableContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.extraFiles,
+    createMovieSelector(),
+    (
+      ExtraFiles
+    ) => {
+      return {
+        items: ExtraFiles.items,
+        error: null
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+  };
+}
+
+class ExtraFileTableContentConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      ...otherProps
+    } = this.props;
+
+    return (
+      <ExtraFileTableContent
+        {...otherProps}
+      />
+    );
+  }
+}
+
+ExtraFileTableContentConnector.propTypes = {
+  movieId: PropTypes.number.isRequired
+};
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(ExtraFileTableContentConnector);