From de2d68cbdac37b19bb5eee8148c720763096597d Mon Sep 17 00:00:00 2001 From: Diogo Silva Date: Mon, 25 Feb 2019 15:13:59 +0000 Subject: [PATCH] feat: add react-virtualized to the files list (#957) - Use `react-virtualized` to only render the files in view - Loading animation when listing takes more than 1s to load - Dir sizes only show if current dir has < 100 files (fix in an incoming PR) --- src/App.js | 2 +- src/bundles/files.js | 21 +- src/components/checkbox/Checkbox.css | 2 +- src/components/checkbox/Checkbox.js | 2 +- .../loading-animation/LoadingAnimation.css | 12 +- .../loading-animation/LoadingAnimation.js | 60 +- src/files/context-menu/ContextMenu.js | 12 +- src/files/file-icon/FileIcon.js | 16 +- src/files/file/File.js | 17 +- src/files/files-list/FilesList.js | 261 +- src/files/files-list/FilesList.stories.js | 68 +- .../{root.json => list-with-10-files.json} | 0 .../fixtures/list-with-100-files.json | 622 + .../fixtures/list-with-1000-files.json | 6202 ++++ .../fixtures/list-with-50-files.json | 312 + .../fixtures/list-with-500-files.json | 3102 ++ .../fixtures/list-with-5000-files.json | 31002 ++++++++++++++++ src/index.css | 19 +- 18 files changed, 41580 insertions(+), 152 deletions(-) rename src/files/files-list/fixtures/{root.json => list-with-10-files.json} (100%) create mode 100644 src/files/files-list/fixtures/list-with-100-files.json create mode 100644 src/files/files-list/fixtures/list-with-1000-files.json create mode 100644 src/files/files-list/fixtures/list-with-50-files.json create mode 100644 src/files/files-list/fixtures/list-with-500-files.json create mode 100644 src/files/files-list/fixtures/list-with-5000-files.json diff --git a/src/App.js b/src/App.js index 2b62712b0..189d8a94b 100644 --- a/src/App.js +++ b/src/App.js @@ -49,7 +49,7 @@ export class App extends Component { const { route: Page, ipfsReady, routeInfo: { url }, navbarIsOpen, connectDropTarget, isOver } = this.props return connectDropTarget( -
+
{/* Tinted overlay that appears when dragging and dropping an item */} { isOver &&
}
diff --git a/src/bundles/files.js b/src/bundles/files.js index 253b145db..d4d9d92bd 100644 --- a/src/bundles/files.js +++ b/src/bundles/files.js @@ -2,7 +2,6 @@ import { join, dirname } from 'path' import { createSelector } from 'redux-bundler' import { getDownloadLink, getShareableLink, filesToStreams } from '../lib/files' import countDirs from '../lib/count-dirs' -import ms from 'milliseconds' const isMac = navigator.userAgent.indexOf('Mac') !== -1 @@ -104,6 +103,7 @@ const fetchFiles = make(actions.FETCH, async (ipfs, id, { store }) => { // Otherwise get the directory info const res = await ipfs.files.ls(path, { l: true }) || [] const files = [] + const showStats = res.length < 100 for (const f of res) { let file = { @@ -112,7 +112,7 @@ const fetchFiles = make(actions.FETCH, async (ipfs, id, { store }) => { type: f.type === 0 ? 'file' : 'directory' } - if (file.type === 'directory') { + if (showStats && file.type === 'directory') { file = { ...file, ...await ipfs.files.stat(file.path) @@ -149,7 +149,6 @@ const defaultState = { } export default (opts = {}) => { - opts.staleAfter = opts.staleAfter || ms.minutes(1) opts.baseUrl = opts.baseUrl || '/files' return { @@ -350,17 +349,6 @@ export default (opts = {}) => { dispatch({ type: 'FILES_UPDATE_SORT', payload: { by, asc } }) }, - reactFilesFetch: createSelector( - 'selectFiles', - 'selectFilesIsFetching', - 'selectAppTime', - (files, isFetching, appTime) => { - if (!isFetching && files && appTime - files.fetched >= opts.staleAfter) { - return { actionCreator: 'doFilesFetch' } - } - } - ), - selectFiles: (state) => { const { pageContent, sorting } = state.files @@ -390,6 +378,11 @@ export default (opts = {}) => { selectFilesIsFetching: (state) => state.files.pending.some(a => a.type === actions.FETCH), + selectShowLoadingAnimation: (state) => { + const pending = state.files.pending.find(a => a.type === actions.FETCH) + return pending ? (Date.now() - pending.start) > 1000 : false + }, + selectFilesSorting: (state) => state.files.sorting, selectWriteFilesProgress: (state) => { diff --git a/src/components/checkbox/Checkbox.css b/src/components/checkbox/Checkbox.css index 7ed5667b2..10f762d65 100644 --- a/src/components/checkbox/Checkbox.css +++ b/src/components/checkbox/Checkbox.css @@ -6,7 +6,7 @@ left: -99999px; } -.Checkbox > input:checked ~ span:first-of-type svg { +.Checkbox input:checked ~ span:first-of-type svg { opacity: 1; } diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js index 3694a58fd..f5e35bbba 100644 --- a/src/components/checkbox/Checkbox.js +++ b/src/components/checkbox/Checkbox.js @@ -16,7 +16,7 @@ const Checkbox = ({ className, label, disabled, checked, onChange, ...props }) = return (