New: Project Aphrodite

frontend/src/RootFolder/RootFolderRow.css

@@ -0,0 +1,18 @@
+.link {
+  composes: link from 'Components/Link/Link.css';
+
+  display: block;
+}
+
+.freeSpace,
+.unmappedFolders {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.actions {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 45px;
+}

frontend/src/RootFolder/RootFolderRow.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import formatBytes from 'Utilities/Number/formatBytes';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './RootFolderRow.css';
+
+function RootFolderRow(props) {
+  const {
+    id,
+    path,
+    freeSpace,
+    unmappedFolders,
+    onDeletePress
+  } = props;
+
+  const unmappedFoldersCount = unmappedFolders.length || '-';
+
+  return (
+    <TableRow>
+      <TableRowCell>
+        <Link
+          className={styles.link}
+          to={`/add/import/${id}`}
+        >
+          {path}
+        </Link>
+      </TableRowCell>
+
+      <TableRowCell className={styles.freeSpace}>
+        {formatBytes(freeSpace) || '-'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.unmappedFolders}>
+        {unmappedFoldersCount}
+      </TableRowCell>
+
+      <TableRowCell className={styles.actions}>
+        <IconButton
+          title="Remove root folder"
+          name={icons.REMOVE}
+          onPress={onDeletePress}
+        />
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+RootFolderRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  path: PropTypes.string.isRequired,
+  freeSpace: PropTypes.number.isRequired,
+  unmappedFolders: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onDeletePress: PropTypes.func.isRequired
+};
+
+RootFolderRow.defaultProps = {
+  freeSpace: 0,
+  unmappedFolders: []
+};
+
+export default RootFolderRow;

frontend/src/RootFolder/RootFolderRowConnector.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { deleteRootFolder } from 'Store/Actions/rootFolderActions';
+import RootFolderRow from './RootFolderRow';
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onDeletePress() {
+      dispatch(deleteRootFolder({ id: props.id }));
+    }
+  };
+}
+
+export default connect(null, createMapDispatchToProps)(RootFolderRow);

frontend/src/RootFolder/RootFolders.js

@@ -0,0 +1,80 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import RootFolderRowConnector from './RootFolderRowConnector';
+
+const rootFolderColumns = [
+  {
+    name: 'path',
+    label: 'Path',
+    isVisible: true
+  },
+  {
+    name: 'freeSpace',
+    label: 'Free Space',
+    isVisible: true
+  },
+  {
+    name: 'unmappedFolders',
+    label: 'Unmapped Folders',
+    isVisible: true
+  },
+  {
+    name: 'actions',
+    isVisible: true
+  }
+];
+
+function RootFolders(props) {
+  const {
+    isFetching,
+    isPopulated,
+    error,
+    items
+  } = props;
+
+  if (isFetching && !isPopulated) {
+    return (
+      <LoadingIndicator />
+    );
+  }
+
+  if (!isFetching && !!error) {
+    return (
+      <div>Unable to load root folders</div>
+    );
+  }
+
+  return (
+    <Table
+      columns={rootFolderColumns}
+    >
+      <TableBody>
+        {
+          items.map((rootFolder) => {
+            return (
+              <RootFolderRowConnector
+                key={rootFolder.id}
+                id={rootFolder.id}
+                path={rootFolder.path}
+                freeSpace={rootFolder.freeSpace}
+                unmappedFolders={rootFolder.unmappedFolders}
+              />
+            );
+          })
+        }
+      </TableBody>
+    </Table>
+  );
+}
+
+RootFolders.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default RootFolders;

frontend/src/RootFolder/RootFoldersConnector.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import RootFolders from './RootFolders';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.rootFolders,
+    (rootFolders) => {
+      return rootFolders;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchFetchRootFolders: fetchRootFolders
+};
+
+class RootFoldersConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.dispatchFetchRootFolders();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <RootFolders
+        {...this.props}
+      />
+    );
+  }
+}
+
+RootFoldersConnector.propTypes = {
+  dispatchFetchRootFolders: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(RootFoldersConnector);