Refactor FolderPicker (#18)

src/components/FolderPicker.jsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { useSelector } from 'react-redux';
+
+import { listFolder } from '../store/actions/files';
+import { scopes } from '../store/actions/loading';
+import { getFolderIdsByPath } from '../store/reducers/files';
+import { getLoading } from '../store/reducers/loading';
+
 import * as icons from '../icons';
 import * as routes from '../routes';
 
@@ -21,12 +28,16 @@ const changePath = (route, onPathChange) => (event) => {
  onPathChange(routes.makePathFromUrl(route));
 };
 
-const FolderPicker = React.memo(({
- items, loading, path, listFolder, onPathChange,
-}) => {
+const FolderPicker = ({ excludeIds, path, onPathChange }) => {
+ let items = useSelector((state) => getFolderIdsByPath(state, { path }));
+ const loading = useSelector((state) => getLoading(state, scopes.listingFolder));
+
  React.useEffect(() => {
  listFolder(path);
- }, [path, listFolder]);
+ }, [path]);
+
+ const idsToExclude = new Set(excludeIds);
+ items = items.filter((id) => !idsToExclude.has(id));
 
  return (
  <>
@@ -85,17 +96,14 @@ const FolderPicker = React.memo(({
 
  </>
  );
-});
+};
 
 FolderPicker.propTypes = {
- items: PropTypes.arrayOf(PropTypes.string).isRequired,
- loading: PropTypes.bool,
+ excludeIds: PropTypes.arrayOf(
+ PropTypes.string.isRequired,
+ ).isRequired,
  path: PropTypes.string.isRequired,
  onPathChange: PropTypes.func.isRequired,
 };
 
-FolderPicker.defaultProps = {
- loading: true,
-};
-
 export default FolderPicker;

src/components/MoveDialog.jsx

@@ -14,10 +14,10 @@ import { getFileDialogProps, getFileDialogVisible } from '../store/reducers/ui';
 import pluralize from '../pluralize';
 import * as routes from '../routes';
 
-import FolderPicker from '../containers/FolderPicker';
-
 import Dialog from './ui/Dialog';
 
+import FolderPicker from './FolderPicker';
+
 const styles = {
  height: '40vh',
 };

src/containers/FileTableView.js

@@ -2,14 +2,14 @@ import { connect } from 'react-redux';
 
 import { scopes } from '../store/actions/loading';
 
-import { getFilesByPath } from '../store/reducers/files';
+import { getFileIdsByPath } from '../store/reducers/files';
 import { getLoading } from '../store/reducers/loading';
 
 import FileTableView from '../components/FileTableView';
 
 export default connect(
  (state, ownProps) => ({
- items: getFilesByPath(state, ownProps.path),
+ items: getFileIdsByPath(state, ownProps.path),
  loading: getLoading(state, scopes.listingFolder),
  }),
 )(FileTableView);

src/store/reducers/files.js

@@ -1,6 +1,7 @@
 import { combineReducers } from 'redux';
 import { createSelector } from 'reselect';
 
+import { MediaType } from '../../constants';
 import * as routes from '../../routes';
 import { difference } from '../../set';
 
@@ -172,8 +173,8 @@ export default combineReducers({
 const FILES_EMPTY = [];
 
 export const getFileById = (state, id) => state.files.byId[id];
-export const getFilesByPath = (state, path) => state.files.byPath[path] || FILES_EMPTY;
-export const getFilesCountByPath = (state, path) => getFilesByPath(state, path).length;
+export const getFileIdsByPath = (state, path) => state.files.byPath[path] || FILES_EMPTY;
+export const getFilesCountByPath = (state, path) => getFileIdsByPath(state, path).length;
 export const getIsFileSelected = (state, id) => state.files.selectedIds.has(id);
 export const getSelectedFileIds = (state) => [...state.files.selectedIds];
 export const getSelectedFiles = (state) => (
@@ -185,6 +186,26 @@ export const getThumbnailById = (state, id) => state.files.thumbnailsById[id];
 
 export const getDownloads = (state) => state.files.downloads;
 
+function createPropsSelector(selector) {
+ return (_, props) => selector(props);
+}
+
+const getPathProp = createPropsSelector((props) => props.path);
+
+export const getFolderIdsByPath = createSelector(
+ [
+ (state) => state.files.byId,
+ (state) => state.files.byPath,
+ getPathProp,
+ ],
+ (byId, byPath, path) => (
+ (byPath[path] || FILES_EMPTY)
+ .map((id) => byId[id])
+ .filter((item) => item.mediatype === MediaType.FOLDER)
+ .map((item) => item.id)
+ ),
+);
+
 export const makeGetFilesByIds = () => (
  createSelector(
  [
@@ -201,7 +222,7 @@ export const makeGetPreview = () => (
  createSelector(
  [
  (state) => state.files.byId,
- (state, props) => getFilesByPath(state, props.dirPath),
+ (state, props) => getFileIdsByPath(state, props.dirPath),
  (_state, props) => props.name,
  ],
  (byId, files, name) => {

src/store/sagas/fileWatchers.js

@@ -15,7 +15,7 @@ import * as fileActions from '../actions/files';
 import * as taskActions from '../actions/tasks';
 import * as uploadActions from '../actions/uploads';
 
-import { getFileById, getFilesByPath, getSelectedFileIds } from '../reducers/files';
+import { getFileById, getFileIdsByPath, getSelectedFileIds } from '../reducers/files';
 import { getCurrentPath } from '../reducers/ui';
 
 /**
@@ -82,7 +82,7 @@ function* handleCreateFolder(action) {
  const { folder } = action.payload;
  const currPath = yield select(getCurrentPath);
 
- const ids = new Set(yield select(getFilesByPath, currPath));
+ const ids = new Set(yield select(getFileIdsByPath, currPath));
  if (!ids.has(folder.id)) {
  const nextFiles = [...ids];
  const idx = yield findNextIdx(nextFiles, folder, compareFiles);
@@ -108,7 +108,7 @@ function* handleMoveFile(action) {
  const currPath = yield select(getCurrentPath);
 
  const parentPath = routes.parent(file.path);
- const ids = yield select(getFilesByPath, currPath);
+ const ids = yield select(getFileIdsByPath, currPath);
  const nextFiles = [...ids.filter((id) => id !== file.id)];
  if (parentPath === currPath) {
  const idx = yield findNextIdx(nextFiles, file, compareFiles);
@@ -135,7 +135,7 @@ function* handleUpload(action) {
  }
  }
  if (target) {
- const ids = new Set(yield select(getFilesByPath, currPath));
+ const ids = new Set(yield select(getFileIdsByPath, currPath));
  if (!ids.has(target.id)) {
  const nextFiles = [...ids];
  const idx = yield findNextIdx(nextFiles, target, compareFiles);