From c3c597d03294a0048308834eac991f000f651c4d Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Fri, 29 Apr 2022 11:39:01 +0200 Subject: [PATCH] dismiss failed pins on File list --- public/locales/en/files.json | 1 - src/bundles/pinning.js | 8 ++++---- src/files/file/File.js | 12 +++++++----- src/files/files-list/FilesList.js | 22 ++++++++++++++++------ 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/public/locales/en/files.json b/public/locales/en/files.json index ee5d5ef74..7dd0c4f23 100644 --- a/public/locales/en/files.json +++ b/public/locales/en/files.json @@ -108,7 +108,6 @@ "pinnedRemotely": "Pinned remotely", "pinningRemotely": "Pinning remotely", "pinningCompletedClickToDismiss": "Pinning completed. Click to dismiss.", - "pinningFailed": "Pinning failed", "pinningFailedClickToDismiss": "Pinning failed. Click to dismiss.", "blocks": "Blocks", "allBlocks": "All blocks", diff --git a/src/bundles/pinning.js b/src/bundles/pinning.js index b5fb21c19..3525014b1 100644 --- a/src/bundles/pinning.js +++ b/src/bundles/pinning.js @@ -307,12 +307,12 @@ const pinningBundle = { } }), {}), - doDismissCompletedPin: (pin) => async ({ dispatch }) => { - dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { completed: [pin] } }) + doDismissCompletedPin: (...pins) => async ({ dispatch }) => { + dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { completed: pins } }) }, - doDismissFailedPin: (pin) => async ({ dispatch }) => { - dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { failed: [pin] } }) + doDismissFailedPin: (...pins) => async ({ dispatch }) => { + dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { failed: pins } }) }, doSetPinning: (file, services = [], wasLocallyPinned, previousRemotePins = []) => async ({ getIpfs, store, dispatch }) => { diff --git a/src/files/file/File.js b/src/files/file/File.js index 332f107b2..3ed0132e4 100644 --- a/src/files/file/File.js +++ b/src/files/file/File.js @@ -19,7 +19,7 @@ import './PendingAnimation.css' const File = ({ name, type, size, cid, path, pinned, t, selected, focused, translucent, coloured, cantSelect, cantDrag, isMfs, isRemotePin, isPendingPin, isFailedPin, - onAddFiles, onMove, onSelect, onNavigate, onSetPinning, handleContextMenuClick + onAddFiles, onMove, onSelect, onNavigate, onSetPinning, onDismissFailedPin, handleContextMenuClick }) => { const dotsWrapper = useRef() @@ -138,10 +138,11 @@ const File = ({ { isPendingPin &&
} - { isFailedPin &&
- {/* TODO: click to clear */} - -
} + { isFailedPin &&
+ +
} { !pinned && !isRemotePin && !isPendingPin && !isFailedPin &&
} @@ -170,6 +171,7 @@ File.propTypes = { onNavigate: PropTypes.func.isRequired, onAddFiles: PropTypes.func.isRequired, onMove: PropTypes.func.isRequired, + onDismissFailedPin: PropTypes.func.isRequired, coloured: PropTypes.bool, translucent: PropTypes.bool, handleContextMenuClick: PropTypes.func, diff --git a/src/files/files-list/FilesList.js b/src/files/files-list/FilesList.js index 7be32c5ce..a961e2e2f 100644 --- a/src/files/files-list/FilesList.js +++ b/src/files/files-list/FilesList.js @@ -8,7 +8,7 @@ import { join } from 'path' import { sorts } from '../../bundles/files' import { normalizeFiles } from '../../lib/files' import { List, WindowScroller, AutoSizer } from 'react-virtualized' -// Reac DnD +// React DnD import { NativeTypes } from 'react-dnd-html5-backend' import { useDrop } from 'react-dnd' // Components @@ -22,33 +22,42 @@ const addFiles = async (filesPromise, onAddFiles) => { onAddFiles(normalizeFiles(files)) } -const mergeRemotePinsIntoFiles = (files, remotePins, pendingPins, failedPins) => { +const mergeRemotePinsIntoFiles = (files, remotePins, pendingPins, failedPins, onDismissFailedPin) => { const remotePinsCids = remotePins.map(id => id.split(':').at(-1)) const pendingPinsCids = pendingPins.map(id => id.split(':').at(-1)) const failedPinsCids = failedPins.map(id => id.split(':').at(-1)) return files.map(f => { + const fileFailedPins = failedPinsCids.reduce((acc, cid, i) => { + if (cid === f.cid?.toString()) { + acc.push(failedPins[i]) + } + + return acc + }, []) + const isRemotePin = remotePinsCids.includes(f.cid?.toString()) const isPendingPin = pendingPinsCids.includes(f.cid?.toString()) - const isFailedPin = failedPinsCids.includes(f.cid?.toString()) + const isFailedPin = fileFailedPins.length > 0 return { ...f, isRemotePin, isPendingPin, - isFailedPin + isFailedPin, + onDismissFailedPin: () => onDismissFailedPin(...fileFailedPins) } }) } export const FilesList = ({ className, files, pins, pinningServices, remotePins, pendingPins, failedPins, filesSorting, updateSorting, downloadProgress, filesIsFetching, filesPathInfo, showLoadingAnimation, - onShare, onSetPinning, onInspect, onDownload, onRemove, onRename, onNavigate, onRemotePinClick, onAddFiles, onMove, doFetchRemotePins, handleContextMenuClick, t + onShare, onSetPinning, onInspect, onDownload, onRemove, onRename, onNavigate, onRemotePinClick, onAddFiles, onMove, doFetchRemotePins, doDismissFailedPin, handleContextMenuClick, t }) => { const [selected, setSelected] = useState([]) const [focused, setFocused] = useState(null) const [firstVisibleRow, setFirstVisibleRow] = useState(null) - const [allFiles, setAllFiles] = useState(mergeRemotePinsIntoFiles(files, remotePins, pendingPins, failedPins)) + const [allFiles, setAllFiles] = useState(mergeRemotePinsIntoFiles(files, remotePins, pendingPins, failedPins, doDismissFailedPin)) const listRef = useRef() const filesRefs = useRef([]) const refreshPinCache = true // manually clicking on Pin Status column skips cache and updates remote status @@ -394,5 +403,6 @@ export default connect( 'selectFilesSorting', 'selectFilesPathInfo', 'selectShowLoadingAnimation', + 'doDismissFailedPin', withTranslation('files')(FilesList) )